fix confirm dialog

packages/desktopbridge/oscbridge.mjs

@@ -1,64 +1,75 @@
 import { parseNumeral, Pattern, averageArray } from '@strudel/core';
+
+
 import { Invoke } from './utils.mjs';
+import { getAudioContext } from '../superdough/superdough.mjs';
 
 let offsetTime;
 let timeAtPrevOffsetSample;
 let prevOffsetTimes = [];
 
-Pattern.prototype.osc = function () {
-  return this.onTrigger(async (time, hap, currentTime, cps = 1, targetTime) => {
-    hap.ensureObjectValue();
-    const cycle = hap.wholeOrPart().begin.valueOf();
-    const delta = hap.duration.valueOf();
-    const controls = Object.assign({}, { cps, cycle, delta }, hap.value);
-    // make sure n and note are numbers
-    controls.n && (controls.n = parseNumeral(controls.n));
-    controls.note && (controls.note = parseNumeral(controls.note));
 
-    const params = [];
+export const superdirtOutput = (hap, deadline, hapDuration, cps, targetTime) => {
+  const ctx = getAudioContext();
+  const currentTime = ctx.currentTime;
+  return oscTrigger(null, hap, currentTime, cps, targetTime)
+}
 
-    const unixTimeSecs = Date.now() / 1000;
-    const newOffsetTime = unixTimeSecs - currentTime;
-    if (offsetTime == null) {
-      offsetTime = newOffsetTime;
-    }
-    prevOffsetTimes.push(newOffsetTime);
-    if (prevOffsetTimes.length > 8) {
-      prevOffsetTimes.shift();
-    }
-    // every two seconds, the average of the previous 8 offset times is calculated and used as a stable reference
-    // for calculating the timestamp that will be sent to the backend
-    if (timeAtPrevOffsetSample == null || unixTimeSecs - timeAtPrevOffsetSample > 2) {
-      timeAtPrevOffsetSample = unixTimeSecs;
-      const rollingOffsetTime = averageArray(prevOffsetTimes);
-      //account for the js clock freezing or resets set the new offset
-      if (Math.abs(rollingOffsetTime - offsetTime) > 0.01) {
-        offsetTime = rollingOffsetTime;
-      }
+async function oscTrigger(t_deprecate, hap, currentTime, cps = 1, targetTime) {
+  hap.ensureObjectValue();
+  const cycle = hap.wholeOrPart().begin.valueOf();
+  const delta = hap.duration.valueOf();
+  const controls = Object.assign({}, { cps, cycle, delta }, hap.value);
+  // make sure n and note are numbers
+  controls.n && (controls.n = parseNumeral(controls.n));
+  controls.note && (controls.note = parseNumeral(controls.note));
+
+  const params = [];
+
+  const unixTimeSecs = Date.now() / 1000;
+  const newOffsetTime = unixTimeSecs - currentTime;
+  if (offsetTime == null) {
+    offsetTime = newOffsetTime;
+  }
+  prevOffsetTimes.push(newOffsetTime);
+  if (prevOffsetTimes.length > 8) {
+    prevOffsetTimes.shift();
+  }
+  // every two seconds, the average of the previous 8 offset times is calculated and used as a stable reference
+  // for calculating the timestamp that will be sent to the backend
+  if (timeAtPrevOffsetSample == null || unixTimeSecs - timeAtPrevOffsetSample > 2) {
+    timeAtPrevOffsetSample = unixTimeSecs;
+    const rollingOffsetTime = averageArray(prevOffsetTimes);
+    //account for the js clock freezing or resets set the new offset
+    if (Math.abs(rollingOffsetTime - offsetTime) > 0.01) {
+      offsetTime = rollingOffsetTime;
     }
+  }
 
-    const timestamp = offsetTime + targetTime;
+  const timestamp = offsetTime + targetTime;
 
-    Object.keys(controls).forEach((key) => {
-      const val = controls[key];
-      const value = typeof val === 'number' ? val.toString() : val;
+  Object.keys(controls).forEach((key) => {
+    const val = controls[key];
+    const value = typeof val === 'number' ? val.toString() : val;
 
-      if (value == null) {
-        return;
-      }
-      params.push({
-        name: key,
-        value,
-        valueisnumber: typeof val === 'number',
-      });
-    });
-
-    if (params.length === 0) {
+    if (value == null) {
       return;
     }
-    const message = { target: '/dirt/play', timestamp, params };
-    setTimeout(() => {
-      Invoke('sendosc', { messagesfromjs: [message] });
+    params.push({
+      name: key,
+      value,
+      valueisnumber: typeof val === 'number',
     });
   });
+
+  if (params.length === 0) {
+    return;
+  }
+  const message = { target: '/dirt/play', timestamp, params };
+  setTimeout(() => {
+    Invoke('sendosc', { messagesfromjs: [message] });
+  });
+}
+Pattern.prototype.osc = function () {
+  return this.onTrigger(oscTrigger);
 };

packages/webaudio/webaudio.mjs

@@ -20,6 +20,8 @@ export const webaudioOutputTrigger = (t, hap, ct, cps) => superdough(hap2value(h
 export const webaudioOutput = (hap, deadline, hapDuration, cps, t) =>
   superdough(hap2value(hap), t ? `=${t}` : deadline, hapDuration);
 
+
+
 Pattern.prototype.webaudio = function () {
   return this.onTrigger(webaudioOutputTrigger);
 };

website/src/repl/Repl.jsx

@@ -14,7 +14,8 @@ import {
   resetLoadedSounds,
   initAudioOnFirstClick,
 } 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 { StrudelMirror, defaultSettings } from '@strudel/codemirror';
 import { clearHydra } from '@strudel/hydra';
@@ -61,13 +62,14 @@ async function getModule(name) {
 
 export function Repl({ embedded = false }) {
   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 drawTime = [-2, 2];
     const drawContext = getDrawContext();
     const editor = new StrudelMirror({
       sync: isSyncEnabled,
-      defaultOutput: webaudioOutput,
+      defaultOutput,
       getTime: () => getAudioContext().currentTime,
       setInterval,
       clearInterval,

website/src/repl/components/panel/AudioEngineTargetSelector.jsx

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

website/src/repl/components/panel/SettingsTab.jsx

@@ -3,6 +3,8 @@ import { themes } from '@strudel/codemirror';
 import { isUdels } from '../../util.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
+import { AudioEngineTargetSelector } from './AudioEngineTargetSelector.jsx';
+import { isTauri } from '@src/tauri.mjs';
 
 function Checkbox({ label, value, onChange, disabled = false }) {
   return (
@@ -78,6 +80,20 @@ const fontFamilyOptions = {
   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 }) {
   const {
     theme,
@@ -96,11 +112,14 @@ export function SettingsTab({ started }) {
     fontFamily,
     panelPosition,
     audioDeviceName,
+    audioEngineTarget,
   } = useSettings();
   const shouldAlwaysSync = isUdels();
+  const inDesktopApp = isTauri();
+  const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
   return (
     <div className="text-foreground p-4 space-y-4">
-      {AudioContext.prototype.setSinkId != null && (
+      {canChangeAudioDevice && (
         <FormItem label="Audio Output Device">
           <AudioDeviceSelector
             isDisabled={started}
@@ -109,6 +128,21 @@ export function SettingsTab({ started }) {
           />
         </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">
         <SelectInput options={themeOptions} value={theme} onChange={(theme) => settingsMap.setKey('theme', theme)} />
       </FormItem>
@@ -193,10 +227,13 @@ export function SettingsTab({ started }) {
         <Checkbox
           label="Sync across Browser Tabs / Windows"
           onChange={(cbEvent) => {
-            if (confirm('Changing this setting requires the window to reload itself. OK?')) {
-              settingsMap.setKey('isSyncEnabled', cbEvent.target.checked);
-              window.location.reload();
-            }
+            const newVal = cbEvent.target.checked;
+            confirmDialog(RELOAD_MSG).then((r) => {
+              if (r) {
+                settingsMap.setKey('isSyncEnabled', newVal);
+                window.location.reload();
+              }
+            });
           }}
           disabled={shouldAlwaysSync}
           value={isSyncEnabled}

website/src/settings.mjs

@@ -5,6 +5,11 @@ import { isUdels } from './repl/util.mjs';
 
 export const defaultAudioDeviceName = 'System Standard';
 
+export const audioEngineTargets = {
+  webaudio: 'webaudio',
+  superdirt: 'superdirt',
+};
+
 export const defaultSettings = {
   activeFooter: 'intro',
   keybindings: 'codemirror',
@@ -28,6 +33,7 @@ export const defaultSettings = {
   panelPosition: 'right',
   userPatterns: '{}',
   audioDeviceName: defaultAudioDeviceName,
+  audioEngineTarget: audioEngineTargets.webaudio //webaudio | superdirt
 };
 
 let search = null;