[Extend Feature]: Destination - AudioDeviceSelector

[YeonV]

Add Output-Device-Selector:

As a poc i added it with useState (only to show you)

import React, {useState} from "react";
import { NodeProps } from "react-flow-renderer";
import Node from "components/Node";
import useDestinationNode from "hooks/nodes/useDestinationNode";

function Destination({ id, type, selected }: NodeProps) {
  useDestinationNode(id);
  const [devices, setDevices]=useState<Array<any>>([])
  navigator.mediaDevices.enumerateDevices()
  .then(function (dev) {
    setDevices(dev.filter(d=>d.kind === 'audiooutput'))
  })
  .catch(function (err) {
    console.log(err.name + ": " + err.message);
  });
  return <Node id={id} inputs={["input"]} type={type} >
    {selected && <select>
      {devices && devices.map(d=><option>{d.label}</option>)}
    </select>}
    </Node>
    ;
}

export default React.memo(Destination);

[michalochman]

I was actually thinking about this some time ago. Feel free to open PR with your solution.

One technical note is that navigator.mediaDevices.enumerateDevices() should be called inside some useEffect().

[YeonV]

I was actually thinking about this some time ago. Feel free to open PR with your solution.

One technical note is that navigator.mediaDevices.enumerateDevices() should be called inside some useEffect().

Where do you want to save its state? I see you are not using an additional state-management-library, just context+immer. You have plannings to introduce one? If so, i have the perfect match for your use-case: recoil please check that video.

i also once started with implementing reactflow inside the example-app, but im by far not that good as you 🙈 i think recoil would boost your performance drastically

[michalochman]

Looks like selecting output device is not supported currently for Web Audio API, see discussion in https://github.com/WebAudio/web-audio-api/issues/2400

I'm closing this issue then.

---

I see you are not using an additional state-management-library, just context+immer. You have plannings to introduce one?

There are no performance issues at the moment that I am aware of, so I'm keeping it simple. Once we need more of the global state management, I'd prefer to use pmndrs/zustand.

[YeonV]

I'd prefer to use pmndrs/zustand.

XDD i rebuilt the whole ledfx-react-app using zustand :)