1import React, { useState } from 'react';
2
3import { SelectInputDuplicate } from '@src/repl/components/panel/SettingsTab';
4import { getAudioDevices } from '@strudel/webaudio';
5
6const initdevices = new Map();
7
8// Allows the user to select an audio interface for Strudel to play through
9export function AudioDeviceSelector({ audioDeviceName, onChange, isDisabled }) {
10  const [devices, setDevices] = useState(initdevices);
11  const devicesInitialized = devices.size > 0;
12
13  const onClick = () => {
14    if (devicesInitialized) {
15      return;
16    }
17    getAudioDevices().then((devices) => {
18      setDevices(devices);
19    });
20  };
21  const onDeviceChange = (deviceName) => {
22    if (!devicesInitialized) {
23      return;
24    }
25    onChange(deviceName);
26  };
27  const options = new Map();
28  Array.from(devices.keys()).forEach((deviceName) => {
29    options.set(deviceName, deviceName);
30  });
31  return (
32    <SelectInputDuplicate
33      isDisabled={isDisabled}
34      options={options}
35      onClick={onClick}
36      value={audioDeviceName}
37      onChange={onDeviceChange}
38    />
39  );
40}