fix confirm dialog

This commit is contained in:
Jade (Rose) Rowland 2024-08-11 00:35:20 -04:00
parent d850726910
commit d80c06cd55
6 changed files with 128 additions and 54 deletions

View file

@ -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);
}; };

View file

@ -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);
}; };

View file

@ -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,

View file

@ -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} />;
}

View file

@ -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}

View file

@ -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;