fixing async stuff

packages/superdough/superdough.mjs

@@ -86,7 +86,6 @@ let channelMerger, destinationGain;
 export function initializeAudioOutput() {
   const audioContext = getAudioContext();
   const maxChannelCount = audioContext.destination.maxChannelCount;
-  console.log(maxChannelCount);
   audioContext.destination.channelCount = maxChannelCount;
   channelMerger = new ChannelMergerNode(audioContext, { numberOfInputs: audioContext.destination.channelCount });
   destinationGain = new GainNode(audioContext);

website/src/repl/panel/AudioDeviceSelector.jsx

@@ -1,70 +1,61 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { getAudioContext, initializeAudioOutput } from '@strudel.cycles/webaudio';
 import { SelectInput } from './SelectInput';
 
-async function setAudioDevice(id) {
+const initdevices = new Map();
-  const audioCtx = getAudioContext();
-  await audioCtx.setSinkId(id);
-  await initializeAudioOutput();
-}
 export function AudioDeviceSelector({ audioDeviceName, onChange }) {
-  const [options, setOptions] = useState({});
+  const [devices, setDevices] = useState(initdevices);
-  const [optionsInitialized, setOptionsInitialized] = useState(false);
+  const devicesInitialized = devices.size > 0;
 
-  async function initializeOptions() {
+  const setAudioDevice = useCallback(async (id) => {
+    const audioCtx = getAudioContext();
+    await audioCtx.setSinkId(id);
+    initializeAudioOutput();
+  });
+  const initializedevices = useCallback(async () => {
     await navigator.mediaDevices.getUserMedia({ audio: true });
-    let devices = await navigator.mediaDevices.enumerateDevices();
+    let mediaDevices = await navigator.mediaDevices.enumerateDevices();
-    devices = devices.filter((device) => device.kind === 'audiooutput' && device.deviceId !== 'default');
+    mediaDevices = mediaDevices.filter((device) => device.kind === 'audiooutput' && device.deviceId !== 'default');
-    const optionsArray = [];
+    const devicesMap = new Map();
-    devices.forEach((device) => {
+    mediaDevices.forEach((device) => {
-      optionsArray.push([device.deviceId, device.label]);
+      devicesMap.set(device.label, device.deviceId);
     });
-    const options = Object.fromEntries(optionsArray);
+    setDevices(devicesMap);
-    setOptions(options);
+    return devicesMap;
-    setOptionsInitialized(true);
+  }, []);
-    return options;
-  }
 
   useEffect(() => {
-    if (!audioDeviceName.length || optionsInitialized) {
+    if (!audioDeviceName.length || devicesInitialized) {
       return;
     }
-
+    initializedevices().then((devices) => {
-    (async () => {
+      const deviceID = devices.get(audioDeviceName);
-      const options = await initializeOptions();
-
-      const deviceID = Object.keys(options).find((id) => options[id] === audioDeviceName);
-
       if (deviceID == null) {
         onChange('');
         return;
       }
-
+      setAudioDevice(deviceID);
-      await setAudioDevice(deviceID);
+    });
-    })();
   }, []);
 
   const onClick = () => {
-    if (optionsInitialized) {
+    if (devicesInitialized) {
       return;
     }
-    (async () => {
+    initializedevices();
-      await initializeOptions();
-    })();
   };
-  const onDeviceChange = (deviceID) => {
+  const onDeviceChange = (deviceName) => {
-    (async () => {
+    if (!devicesInitialized) {
-      const deviceName = options[deviceID];
+      return;
-      onChange(deviceName);
+    }
-      await setAudioDevice(deviceID);
+    const deviceID = devices.get(deviceName);
-    })();
+    onChange(deviceName);
+    deviceID && setAudioDevice(deviceID);
   };
-  return (
+  const options = new Set();
-    <SelectInput
+
-      options={options}
+  Array.from(devices.keys()).forEach((deviceName) => {
-      onClick={onClick}
+    options.add({ id: deviceName, label: deviceName });
-      value={Object.keys(options).find((id) => options[id] === audioDeviceName)}
+  });
-      onChange={onDeviceChange}
+  return <SelectInput options={options} onClick={onClick} value={audioDeviceName} onChange={onDeviceChange} />;
-    />
-  );
 }

website/src/repl/panel/SelectInput.jsx

@@ -1,14 +1,15 @@
 import React from 'react';
-
+//      value: ID, options: Set<{id: ID, label: string}>, onChange: ID => null, onClick: event => void
-export function SelectInput({ value, options, onChange }) {
+export function SelectInput({ value, options, onChange, onClick }) {
   return (
     <select
+      onClick={onClick}
       className="p-2 bg-background rounded-md text-foreground"
       value={value}
       onChange={(e) => onChange(e.target.value)}
     >
-      {Object.entries(options).map(([k, label]) => (
+      {Array.from(options).map(({ id, label }) => (
-        <option key={k} className="bg-background" value={k}>
+        <option key={id} className="bg-background" value={id}>
           {label}
         </option>
       ))}

website/src/repl/panel/SettingsTab.jsx

@@ -109,12 +109,14 @@ export function SettingsTab() {
           </button>
         </div>
       </FormItem> */}
-      <FormItem label="Audio Device">
+      {AudioContext.prototype.setSinkId != null && (
-        <AudioDeviceSelector
+        <FormItem label="Audio Device">
-          audioDeviceName={audioDeviceName}
+          <AudioDeviceSelector
-          onChange={(audioDeviceName) => settingsMap.setKey('audioDeviceName', audioDeviceName)}
+            audioDeviceName={audioDeviceName}
-        />
+            onChange={(audioDeviceName) => settingsMap.setKey('audioDeviceName', audioDeviceName)}
-      </FormItem>
+          />
+        </FormItem>
+      )}
       <FormItem label="Theme">
         <SelectInput options={themeOptions} value={theme} onChange={(theme) => settingsMap.setKey('theme', theme)} />
       </FormItem>