fix: added output as a dependency in use-effect, to trigger input re-run

Eyevinn · Nov 20, 2024 · a01a15f · a01a15f
1 parent fa33ec2
commit a01a15f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx
@@ -42,9 +42,9 @@ import { useAudioCue } from "./use-audio-cue.ts";
 import { DisplayWarning } from "../display-box.tsx";
 import { useFetchDevices } from "../../use-fetch-devices.ts";
 import { TJoinProductionOptions } from "./types.ts";
+import { SettingsModal, Hotkeys } from "./settings-modal.tsx";
 
 type FormValues = TJoinProductionOptions;
-import { SettingsModal, Hotkeys } from "./settings-modal.tsx";
 
 const TempDiv = styled.div`
   padding: 0 0 2rem 0;
@@ -166,7 +166,8 @@ export const ProductionLine: FC = () => {
   });
 
   const [inputAudioStream, resetAudioInput] = useAudioInput({
-    inputId: joinProductionOptions?.audioinput ?? null,
+    audioInputId: joinProductionOptions?.audioinput ?? null,
+    audioOutputId: joinProductionOptions?.audiooutput ?? null,
   });
 
   const muteInput = useCallback(

diff --git a/src/components/production-line/use-audio-input.ts b/src/components/production-line/use-audio-input.ts
@@ -3,7 +3,8 @@ import { noop } from "../../helpers";
 import { TJoinProductionOptions } from "./types.ts";
 
 type TGetMediaDevicesOptions = {
-  inputId: TJoinProductionOptions["audioinput"] | null;
+  audioInputId: TJoinProductionOptions["audioinput"] | null;
+  audioOutputId: TJoinProductionOptions["audiooutput"] | null;
 };
 
 export type TUseAudioInputValues = MediaStream | "no-device" | null;
@@ -13,21 +14,24 @@ type TUseAudioInput = (
 ) => [TUseAudioInputValues, () => void];
 
 // A hook for fetching the user selected audio input as a MediaStream
-export const useAudioInput: TUseAudioInput = ({ inputId }) => {
+export const useAudioInput: TUseAudioInput = ({
+  audioInputId,
+  audioOutputId,
+}) => {
   const [audioInput, setAudioInput] = useState<TUseAudioInputValues>(null);
 
   useEffect(() => {
     let aborted = false;
 
-    if (!inputId) return noop;
+    if (!audioInputId) return noop;
 
-    if (inputId === "no-device") return setAudioInput("no-device");
+    if (audioInputId === "no-device") return setAudioInput("no-device");
 
     navigator.mediaDevices
       .getUserMedia({
         audio: {
           deviceId: {
-            exact: inputId,
+            exact: audioInputId,
           },
           noiseSuppression: true,
         },
@@ -47,7 +51,9 @@ export const useAudioInput: TUseAudioInput = ({ inputId }) => {
     return () => {
       aborted = true;
     };
-  }, [inputId]);
+    // audioOutputId is needed as a dependency to trigger restart of
+    // useEffect if only output has been updated during line-call
+  }, [audioInputId, audioOutputId]);
 
   // Reset function to set audioInput to null
   const reset = useCallback(() => {