fix confirm dialog
This commit is contained in:
parent
d850726910
commit
d80c06cd55
6 changed files with 128 additions and 54 deletions
|
|
@ -1,12 +1,21 @@
|
||||||
import { parseNumeral, Pattern, averageArray } from '@strudel/core';
|
import { parseNumeral, Pattern, averageArray } from '@strudel/core';
|
||||||
|
|
||||||
|
|
||||||
import { Invoke } from './utils.mjs';
|
import { Invoke } from './utils.mjs';
|
||||||
|
import { getAudioContext } from '../superdough/superdough.mjs';
|
||||||
|
|
||||||
let offsetTime;
|
let offsetTime;
|
||||||
let timeAtPrevOffsetSample;
|
let timeAtPrevOffsetSample;
|
||||||
let prevOffsetTimes = [];
|
let prevOffsetTimes = [];
|
||||||
|
|
||||||
Pattern.prototype.osc = function () {
|
|
||||||
return this.onTrigger(async (time, hap, currentTime, cps = 1, targetTime) => {
|
export const superdirtOutput = (hap, deadline, hapDuration, cps, targetTime) => {
|
||||||
|
const ctx = getAudioContext();
|
||||||
|
const currentTime = ctx.currentTime;
|
||||||
|
return oscTrigger(null, hap, currentTime, cps, targetTime)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function oscTrigger(t_deprecate, hap, currentTime, cps = 1, targetTime) {
|
||||||
hap.ensureObjectValue();
|
hap.ensureObjectValue();
|
||||||
const cycle = hap.wholeOrPart().begin.valueOf();
|
const cycle = hap.wholeOrPart().begin.valueOf();
|
||||||
const delta = hap.duration.valueOf();
|
const delta = hap.duration.valueOf();
|
||||||
|
|
@ -60,5 +69,7 @@ Pattern.prototype.osc = function () {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
Invoke('sendosc', { messagesfromjs: [message] });
|
Invoke('sendosc', { messagesfromjs: [message] });
|
||||||
});
|
});
|
||||||
});
|
}
|
||||||
|
Pattern.prototype.osc = function () {
|
||||||
|
return this.onTrigger(oscTrigger);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,8 @@ export const webaudioOutputTrigger = (t, hap, ct, cps) => superdough(hap2value(h
|
||||||
export const webaudioOutput = (hap, deadline, hapDuration, cps, t) =>
|
export const webaudioOutput = (hap, deadline, hapDuration, cps, t) =>
|
||||||
superdough(hap2value(hap), t ? `=${t}` : deadline, hapDuration);
|
superdough(hap2value(hap), t ? `=${t}` : deadline, hapDuration);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Pattern.prototype.webaudio = function () {
|
Pattern.prototype.webaudio = function () {
|
||||||
return this.onTrigger(webaudioOutputTrigger);
|
return this.onTrigger(webaudioOutputTrigger);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,8 @@ import {
|
||||||
resetLoadedSounds,
|
resetLoadedSounds,
|
||||||
initAudioOnFirstClick,
|
initAudioOnFirstClick,
|
||||||
} from '@strudel/webaudio';
|
} from '@strudel/webaudio';
|
||||||
import { defaultAudioDeviceName } from '../settings.mjs';
|
import { superdirtOutput } from '@strudel/desktopbridge/oscbridge.mjs';
|
||||||
|
import { audioEngineTargets, defaultAudioDeviceName } from '../settings.mjs';
|
||||||
import { getAudioDevices, setAudioDevice, setVersionDefaultsFrom } from './util.mjs';
|
import { getAudioDevices, setAudioDevice, setVersionDefaultsFrom } from './util.mjs';
|
||||||
import { StrudelMirror, defaultSettings } from '@strudel/codemirror';
|
import { StrudelMirror, defaultSettings } from '@strudel/codemirror';
|
||||||
import { clearHydra } from '@strudel/hydra';
|
import { clearHydra } from '@strudel/hydra';
|
||||||
|
|
@ -61,13 +62,14 @@ async function getModule(name) {
|
||||||
|
|
||||||
export function Repl({ embedded = false }) {
|
export function Repl({ embedded = false }) {
|
||||||
const isEmbedded = embedded || isIframe;
|
const isEmbedded = embedded || isIframe;
|
||||||
const { panelPosition, isZen, isSyncEnabled } = useSettings();
|
const { panelPosition, isZen, isSyncEnabled, audioEngineTarget } = useSettings();
|
||||||
|
const defaultOutput = audioEngineTarget === audioEngineTargets.superdirt ? superdirtOutput : webaudioOutput;
|
||||||
const init = useCallback(() => {
|
const init = useCallback(() => {
|
||||||
const drawTime = [-2, 2];
|
const drawTime = [-2, 2];
|
||||||
const drawContext = getDrawContext();
|
const drawContext = getDrawContext();
|
||||||
const editor = new StrudelMirror({
|
const editor = new StrudelMirror({
|
||||||
sync: isSyncEnabled,
|
sync: isSyncEnabled,
|
||||||
defaultOutput: webaudioOutput,
|
defaultOutput,
|
||||||
getTime: () => getAudioContext().currentTime,
|
getTime: () => getAudioContext().currentTime,
|
||||||
setInterval,
|
setInterval,
|
||||||
clearInterval,
|
clearInterval,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { audioEngineTargets } from '../../../settings.mjs';
|
||||||
|
import { SelectInput } from './SelectInput';
|
||||||
|
|
||||||
|
// Allows the user to select an audio interface for Strudel to play through
|
||||||
|
export function AudioEngineTargetSelector({ target, onChange, isDisabled }) {
|
||||||
|
const onTargetChange = (target) => {
|
||||||
|
onChange(target);
|
||||||
|
};
|
||||||
|
const options = new Map();
|
||||||
|
Array.from(Object.keys(audioEngineTargets)).map((key) => {
|
||||||
|
options.set(key, key);
|
||||||
|
});
|
||||||
|
|
||||||
|
return <SelectInput isDisabled={isDisabled} options={options} value={target} onChange={onTargetChange} />;
|
||||||
|
}
|
||||||
|
|
@ -3,6 +3,8 @@ import { themes } from '@strudel/codemirror';
|
||||||
import { isUdels } from '../../util.mjs';
|
import { isUdels } from '../../util.mjs';
|
||||||
import { ButtonGroup } from './Forms.jsx';
|
import { ButtonGroup } from './Forms.jsx';
|
||||||
import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
|
import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
|
||||||
|
import { AudioEngineTargetSelector } from './AudioEngineTargetSelector.jsx';
|
||||||
|
import { isTauri } from '@src/tauri.mjs';
|
||||||
|
|
||||||
function Checkbox({ label, value, onChange, disabled = false }) {
|
function Checkbox({ label, value, onChange, disabled = false }) {
|
||||||
return (
|
return (
|
||||||
|
|
@ -78,6 +80,20 @@ const fontFamilyOptions = {
|
||||||
galactico: 'galactico',
|
galactico: 'galactico',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const RELOAD_MSG = 'Changing this setting requires the window to reload itself. OK?';
|
||||||
|
|
||||||
|
function confirmDialog(msg) {
|
||||||
|
// confirm dialog is a promise in Tauri and possibly other browsers... normalize it to be a promise everywhere
|
||||||
|
return new Promise(function (resolve, reject) {
|
||||||
|
let confirmed = confirm(msg);
|
||||||
|
if (confirmed instanceof Promise) {
|
||||||
|
confirmed.then((r) => (r ? resolve(true) : reject(false)));
|
||||||
|
} else {
|
||||||
|
return confirmed ? resolve(true) : reject(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
export function SettingsTab({ started }) {
|
export function SettingsTab({ started }) {
|
||||||
const {
|
const {
|
||||||
theme,
|
theme,
|
||||||
|
|
@ -96,11 +112,14 @@ export function SettingsTab({ started }) {
|
||||||
fontFamily,
|
fontFamily,
|
||||||
panelPosition,
|
panelPosition,
|
||||||
audioDeviceName,
|
audioDeviceName,
|
||||||
|
audioEngineTarget,
|
||||||
} = useSettings();
|
} = useSettings();
|
||||||
const shouldAlwaysSync = isUdels();
|
const shouldAlwaysSync = isUdels();
|
||||||
|
const inDesktopApp = isTauri();
|
||||||
|
const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
|
||||||
return (
|
return (
|
||||||
<div className="text-foreground p-4 space-y-4">
|
<div className="text-foreground p-4 space-y-4">
|
||||||
{AudioContext.prototype.setSinkId != null && (
|
{canChangeAudioDevice && (
|
||||||
<FormItem label="Audio Output Device">
|
<FormItem label="Audio Output Device">
|
||||||
<AudioDeviceSelector
|
<AudioDeviceSelector
|
||||||
isDisabled={started}
|
isDisabled={started}
|
||||||
|
|
@ -109,6 +128,21 @@ export function SettingsTab({ started }) {
|
||||||
/>
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
|
{inDesktopApp && (
|
||||||
|
<FormItem label="Audio Engine Target">
|
||||||
|
<AudioEngineTargetSelector
|
||||||
|
target={audioEngineTarget}
|
||||||
|
onChange={(target) => {
|
||||||
|
confirmDialog(RELOAD_MSG).then((r) => {
|
||||||
|
if (r == true) {
|
||||||
|
settingsMap.setKey('audioEngineTarget', target);
|
||||||
|
return window.location.reload();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
<FormItem label="Theme">
|
<FormItem label="Theme">
|
||||||
<SelectInput options={themeOptions} value={theme} onChange={(theme) => settingsMap.setKey('theme', theme)} />
|
<SelectInput options={themeOptions} value={theme} onChange={(theme) => settingsMap.setKey('theme', theme)} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
@ -193,10 +227,13 @@ export function SettingsTab({ started }) {
|
||||||
<Checkbox
|
<Checkbox
|
||||||
label="Sync across Browser Tabs / Windows"
|
label="Sync across Browser Tabs / Windows"
|
||||||
onChange={(cbEvent) => {
|
onChange={(cbEvent) => {
|
||||||
if (confirm('Changing this setting requires the window to reload itself. OK?')) {
|
const newVal = cbEvent.target.checked;
|
||||||
settingsMap.setKey('isSyncEnabled', cbEvent.target.checked);
|
confirmDialog(RELOAD_MSG).then((r) => {
|
||||||
|
if (r) {
|
||||||
|
settingsMap.setKey('isSyncEnabled', newVal);
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
}
|
}
|
||||||
|
});
|
||||||
}}
|
}}
|
||||||
disabled={shouldAlwaysSync}
|
disabled={shouldAlwaysSync}
|
||||||
value={isSyncEnabled}
|
value={isSyncEnabled}
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,11 @@ import { isUdels } from './repl/util.mjs';
|
||||||
|
|
||||||
export const defaultAudioDeviceName = 'System Standard';
|
export const defaultAudioDeviceName = 'System Standard';
|
||||||
|
|
||||||
|
export const audioEngineTargets = {
|
||||||
|
webaudio: 'webaudio',
|
||||||
|
superdirt: 'superdirt',
|
||||||
|
};
|
||||||
|
|
||||||
export const defaultSettings = {
|
export const defaultSettings = {
|
||||||
activeFooter: 'intro',
|
activeFooter: 'intro',
|
||||||
keybindings: 'codemirror',
|
keybindings: 'codemirror',
|
||||||
|
|
@ -28,6 +33,7 @@ export const defaultSettings = {
|
||||||
panelPosition: 'right',
|
panelPosition: 'right',
|
||||||
userPatterns: '{}',
|
userPatterns: '{}',
|
||||||
audioDeviceName: defaultAudioDeviceName,
|
audioDeviceName: defaultAudioDeviceName,
|
||||||
|
audioEngineTarget: audioEngineTargets.webaudio //webaudio | superdirt
|
||||||
};
|
};
|
||||||
|
|
||||||
let search = null;
|
let search = null;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue