feat: allow no-device option for input

Eyevinn · Apr 4, 2024 · ce6f6d0 · ce6f6d0
1 parent 491278f
commit ce6f6d0
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 27 deletions.
diff --git a/src/components/landing-page/join-production.tsx b/src/components/landing-page/join-production.tsx
@@ -134,24 +134,20 @@ export const JoinProduction = () => {
 
           <FormLabel>
             <DecorativeLabel>Input</DecorativeLabel>
-            {inputDevices.length > 0 ? (
-              <FormSelect
-                // eslint-disable-next-line
-                {...register(`audioinput`)}
-              >
-                {devices
-                  .filter((d) => d.kind === "audioinput")
-                  .map((device) => (
-                    <option key={device.deviceId} value={device.deviceId}>
-                      {device.label}
-                    </option>
-                  ))}
-              </FormSelect>
-            ) : (
-              <StyledWarningMessage>
-                Input selection unavailable
-              </StyledWarningMessage>
-            )}
+            <FormSelect
+              // eslint-disable-next-line
+              {...register(`audioinput`)}
+            >
+              {inputDevices.length > 0 ? (
+                inputDevices.map((device) => (
+                  <option key={device.deviceId} value={device.deviceId}>
+                    {device.label}
+                  </option>
+                ))
+              ) : (
+                <option value="no-device">No device available</option>
+              )}
+            </FormSelect>
           </FormLabel>
 
           <FormLabel>

diff --git a/src/components/production-line/types.ts b/src/components/production-line/types.ts
@@ -3,7 +3,7 @@ export type TJoinProductionOptions = {
   lineId: string;
   username: string;
   // Not all devices have input available
-  audioinput: string | null;
+  audioinput: string | "no-device";
   // Not all devices allow choosing output
   audiooutput: string | null;
 };

diff --git a/src/components/production-line/use-audio-input.ts b/src/components/production-line/use-audio-input.ts
@@ -1,21 +1,28 @@
 import { useEffect, useState } from "react";
 import { noop } from "../../helpers";
+import { TJoinProductionOptions } from "./types.ts";
 
 type TGetMediaDevicesOptions = {
-  inputId: string | null;
+  inputId: TJoinProductionOptions["audioinput"] | null;
 };
 
+export type TUseAudioInputValues = MediaStream | "no-device" | null;
+
+type TUseAudioInput = (
+  options: TGetMediaDevicesOptions
+) => TUseAudioInputValues;
+
 // A hook for fetching the user selected audio input as a MediaStream
-export const useAudioInput = ({
-  inputId,
-}: TGetMediaDevicesOptions): MediaStream | null => {
-  const [audioInput, setAudioInput] = useState<MediaStream | null>(null);
+export const useAudioInput: TUseAudioInput = ({ inputId }) => {
+  const [audioInput, setAudioInput] = useState<TUseAudioInputValues>(null);
 
   useEffect(() => {
     let aborted = false;
 
     if (!inputId) return noop;
 
+    if (inputId === "no-device") return setAudioInput("no-device");
+
     navigator.mediaDevices
       .getUserMedia({
         audio: {

diff --git a/src/components/production-line/use-rtc-connection.ts b/src/components/production-line/use-rtc-connection.ts
@@ -4,9 +4,10 @@ import { API } from "../../api/api.ts";
 import { TJoinProductionOptions } from "./types.ts";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
 import { TGlobalStateAction } from "../../global-state/global-state-actions.ts";
+import { TUseAudioInputValues } from "./use-audio-input.ts";
 
 type TRtcConnectionOptions = {
-  inputAudioStream: MediaStream | null;
+  inputAudioStream: TUseAudioInputValues;
   sdpOffer: string | null;
   joinProductionOptions: TJoinProductionOptions | null;
   sessionId: string | null;
@@ -148,7 +149,12 @@ export const useRtcConnection = ({
     useState<RTCPeerConnectionState | null>(null);
 
   useEffect(() => {
-    if (!sdpOffer || !sessionId || !joinProductionOptions) {
+    if (
+      !sdpOffer ||
+      !sessionId ||
+      !joinProductionOptions ||
+      !inputAudioStream
+    ) {
       return noop;
     }
 
@@ -163,7 +169,7 @@ export const useRtcConnection = ({
 
     // Input Audio Stream is optional, but it should generally
     // exist as long as the device has an input option available.
-    if (inputAudioStream) {
+    if (inputAudioStream !== "no-device") {
       attachInputAudioToPeerConnection({
         rtcPeerConnection,
         inputAudioStream,