initialize on first load

website/src/repl/Repl.jsx

@@ -24,6 +24,7 @@ import { code2hash, hash2code } from './helpers.mjs';
 import { isTauri } from '../tauri.mjs';
 import { useWidgets } from '@strudel.cycles/react/src/hooks/useWidgets.mjs';
 import { writeText } from '@tauri-apps/api/clipboard';
+import { defaultAudioDeviceName, getAudioDevices, setAudioDevice } from './panel/AudioDeviceSelector';
 
 const { latestCode } = settingsMap.get();
 
@@ -132,6 +133,7 @@ export function Repl({ embedded = false }) {
     panelPosition,
     isZen,
     activePattern,
+    audioDeviceName,
   } = useSettings();
 
   const paintOptions = useMemo(() => ({ fontFamily }), [fontFamily]);
@@ -171,8 +173,9 @@ export function Repl({ embedded = false }) {
       paintOptions,
     });
 
-  // init code
+  //on first load...
   useEffect(() => {
+    // init code
     initCode().then((decoded) => {
       let msg;
       if (decoded) {
@@ -188,6 +191,16 @@ export function Repl({ embedded = false }) {
       logger(`Welcome to Strudel! ${msg} Press play or hit ctrl+enter to run it!`, 'highlight');
       setPending(false);
     });
+    // Initialize user audio device if it has been saved to settings
+    if (audioDeviceName !== defaultAudioDeviceName) {
+      getAudioDevices().then((devices) => {
+        const deviceID = devices.get(audioDeviceName);
+        if (deviceID == null) {
+          return;
+        }
+        setAudioDevice(deviceID);
+      });
+    }
   }, []);
 
   // keyboard shortcuts

website/src/repl/panel/AudioDeviceSelector.jsx

@@ -1,56 +1,44 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState } from 'react';
 import { getAudioContext, initializeAudioOutput } from '@strudel.cycles/webaudio';
 import { SelectInput } from './SelectInput';
 
 const initdevices = new Map();
-const defaultDeviceName = 'System Standard';
+export const defaultAudioDeviceName = 'System Standard';
+
+export const getAudioDevices = async () => {
+  await navigator.mediaDevices.getUserMedia({ audio: true });
+  let mediaDevices = await navigator.mediaDevices.enumerateDevices();
+  mediaDevices = mediaDevices.filter((device) => device.kind === 'audiooutput' && device.deviceId !== 'default');
+  const devicesMap = new Map();
+  devicesMap.set(defaultAudioDeviceName, '');
+  mediaDevices.forEach((device) => {
+    devicesMap.set(device.label, device.deviceId);
+  });
+  return devicesMap;
+};
+
+export const setAudioDevice = async (id) => {
+  const isValidID = (id ?? '').length > 0;
+  // reset the audio context and dont set the sink id if it is invalid AKA System Standard selection
+  const audioCtx = getAudioContext(!isValidID);
+  if (isValidID) {
+    await audioCtx.setSinkId(id);
+  }
+  initializeAudioOutput();
+};
+
 // Allows the user to select an audio interface for Strudel to play through
 export function AudioDeviceSelector({ audioDeviceName, onChange }) {
   const [devices, setDevices] = useState(initdevices);
   const devicesInitialized = devices.size > 0;
 
-  const setAudioDevice = useCallback(async (id) => {
-    const isValidID = (id ?? '').length > 0;
-    // reset the audio context and dont set the sink id if it is invalid AKA System Standard selection
-    const audioCtx = getAudioContext(!isValidID);
-    if (isValidID) {
-      await audioCtx.setSinkId(id);
-    }
-    initializeAudioOutput();
-  });
-  const initializedevices = useCallback(async () => {
-    await navigator.mediaDevices.getUserMedia({ audio: true });
-    let mediaDevices = await navigator.mediaDevices.enumerateDevices();
-    mediaDevices = mediaDevices.filter((device) => device.kind === 'audiooutput' && device.deviceId !== 'default');
-    const devicesMap = new Map();
-    devicesMap.set(defaultDeviceName, '');
-    mediaDevices.forEach((device) => {
-      devicesMap.set(device.label, device.deviceId);
-    });
-    setDevices(devicesMap);
-    return devicesMap;
-  }, []);
-
-  // on first load, check if there is a cached audio device name in settings and initialize it
-  useEffect(() => {
-    if (!audioDeviceName.length || devicesInitialized) {
-      return;
-    }
-    initializedevices().then((devices) => {
-      const deviceID = devices.get(audioDeviceName);
-      if (deviceID == null) {
-        onChange(defaultDeviceName);
-        return;
-      }
-      setAudioDevice(deviceID);
-    });
-  }, []);
-
   const onClick = () => {
     if (devicesInitialized) {
       return;
     }
-    initializedevices();
+    getAudioDevices().then((devices) => {
+      setDevices(devices);
+    });
   };
   const onDeviceChange = (deviceName) => {
     if (!devicesInitialized) {
@@ -64,13 +52,5 @@ export function AudioDeviceSelector({ audioDeviceName, onChange }) {
   Array.from(devices.keys()).forEach((deviceName) => {
     options.set(deviceName, deviceName);
   });
-  return (
+  return <SelectInput options={options} onClick={onClick} value={audioDeviceName} onChange={onDeviceChange} />;
-    <SelectInput
-      options={options}
-      onClick={onClick}
-      placeholder={defaultDeviceName}
-      value={audioDeviceName}
-      onChange={onDeviceChange}
-    />
-  );
 }

website/src/repl/panel/SelectInput.jsx

@@ -8,6 +8,7 @@ export function SelectInput({ value, options, onChange, onClick }) {
       value={value ?? ''}
       onChange={(e) => onChange(e.target.value)}
     >
+      {options.size == 0 && <option value={value}>{`${value ?? 'select an option'}`}</option>}
       {Array.from(options.keys()).map((id) => (
         <option key={id} className="bg-background" value={id}>
           {options.get(id)}

website/src/settings.mjs

@@ -2,6 +2,7 @@ import { persistentMap } from '@nanostores/persistent';
 import { useStore } from '@nanostores/react';
 import { register } from '@strudel.cycles/core';
 import * as tunes from './repl/tunes.mjs';
+import { defaultAudioDeviceName } from './repl/panel/AudioDeviceSelector';
 
 export const defaultSettings = {
   activeFooter: 'intro',
@@ -20,7 +21,7 @@ export const defaultSettings = {
   panelPosition: 'bottom',
   userPatterns: '{}',
   activePattern: '',
-  audioDeviceName: '',
+  audioDeviceName: defaultAudioDeviceName,
 };
 
 export const settingsMap = persistentMap('strudel-settings', defaultSettings);