Merge pull request #175 from Monadical-SAS/jose/ui

useAudioDevice hook + permission management

www/app/transcripts/new/page.tsx

@@ -5,6 +5,7 @@ import { Dashboard } from "../dashboard";
 import useWebRTC from "../useWebRTC";
 import useTranscript from "../useTranscript";
 import { useWebSockets } from "../useWebSockets";
+import useAudioDevice from "../useAudioDevice";
 import "../../styles/button.css";
 import { Topic } from "../webSocketTypes";
 import getApi from "../../lib/getApi";
@@ -28,29 +29,71 @@ const App = () => {
   const transcript = useTranscript();
   const webRTC = useWebRTC(stream, transcript.response?.id, api);
   const webSockets = useWebSockets(transcript.response?.id);
+  const {
+    loading,
+    permissionOk,
+    permissionDenied,
+    audioDevices,
+    requestPermission,
+    getAudioStream,
+  } = useAudioDevice();
 
   return (
-    <>
+    <div className="w-full flex flex-col items-center h-[100svh]">
-      <Recorder
+      {permissionOk ? (
-        setStream={setStream}
+        <>
-        onStop={() => {
+          <Recorder
-          webRTC?.peer?.send(JSON.stringify({ cmd: "STOP" }));
+            setStream={setStream}
-          setStream(null);
+            onStop={() => {
-        }}
+              webRTC?.peer?.send(JSON.stringify({ cmd: "STOP" }));
-        topics={webSockets.topics}
+              setStream(null);
-        useActiveTopic={useActiveTopic}
+            }}
-      />
+            topics={webSockets.topics}
+            getAudioStream={getAudioStream}
+            audioDevices={audioDevices}
+            useActiveTopic={useActiveTopic}
+          />
 
-      <hr />
+          <Dashboard
-
+            transcriptionText={webSockets.transcriptText}
-      <Dashboard
+            finalSummary={webSockets.finalSummary}
-        transcriptionText={webSockets.transcriptText}
+            topics={webSockets.topics}
-        finalSummary={webSockets.finalSummary}
+            disconnected={disconnected}
-        topics={webSockets.topics}
+            useActiveTopic={useActiveTopic}
-        disconnected={disconnected}
+          />
-        useActiveTopic={useActiveTopic}
+        </>
-      />
+      ) : (
-    </>
+        <>
+          <div className="flex flex-col items-center justify-center w-fit bg-white px-6 py-8 mt-8 rounded-xl">
+            <h1 className="text-2xl font-bold text-blue-500">
+              Audio Permissions
+            </h1>
+            {loading ? (
+              <p className="text-gray-500 text-center mt-5">
+                Checking permission...
+              </p>
+            ) : (
+              <>
+                <p className="text-gray-500 text-center mt-5">
+                  Reflector needs access to your microphone to work.
+                  <br />
+                  {permissionDenied
+                    ? "Please reset microphone permissions to continue."
+                    : "Please grant permission to continue."}
+                </p>
+                <button
+                  className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-auto"
+                  onClick={requestPermission}
+                  disabled={permissionDenied}
+                >
+                  {permissionDenied ? "Access denied" : "Grant Permission"}
+                </button>
+              </>
+            )}
+          </div>
+        </>
+      )}
+    </div>
   );
 };
 

www/app/transcripts/recorder.tsx

@@ -11,32 +11,21 @@ import Dropdown, { Option } from "react-dropdown";
 import "react-dropdown/style.css";
 
 import { formatTime } from "../lib/time";
+import { Topic } from "./webSocketTypes";
 
 const AudioInputsDropdown: React.FC<{
+  audioDevices: Option[];
   setDeviceId: React.Dispatch<React.SetStateAction<string | null>>;
   disabled: boolean;
 }> = (props) => {
-  const [ddOptions, setDdOptions] = useState<Array<Option>>([]);
+  const [ddOptions, setDdOptions] = useState<Option[]>([]);
 
   useEffect(() => {
-    const init = async () => {
+    setDdOptions(props.audioDevices);
-      // Request permission to use audio inputs
+    props.setDeviceId(
-      await navigator.mediaDevices
+      props.audioDevices.length > 0 ? props.audioDevices[0].value : null,
-        .getUserMedia({ audio: true })
+    );
-        .then((stream) => stream.getTracks().forEach((t) => t.stop()));
+  }, [props.audioDevices]);
-
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      const audioDevices = devices
-        .filter((d) => d.kind === "audioinput" && d.deviceId != "")
-        .map((d) => ({ value: d.deviceId, label: d.label }));
-
-      if (audioDevices.length < 1) return console.log("no audio input devices");
-
-      setDdOptions(audioDevices);
-      props.setDeviceId(audioDevices[0].value);
-    };
-    init();
-  }, []);
 
   const handleDropdownChange = (option: Option) => {
     props.setDeviceId(option.value);
@@ -52,7 +41,19 @@ const AudioInputsDropdown: React.FC<{
   );
 };
 
-export default function Recorder(props: any) {
+type RecorderProps = {
+  setStream: React.Dispatch<React.SetStateAction<MediaStream | null>>;
+  onStop: () => void;
+  topics: Topic[];
+  getAudioStream: (deviceId: string | null) => Promise<MediaStream | null>;
+  audioDevices: Option[];
+  useActiveTopic: [
+    Topic | null,
+    React.Dispatch<React.SetStateAction<Topic | null>>,
+  ];
+};
+
+export default function Recorder(props: RecorderProps) {
   const waveformRef = useRef<HTMLDivElement>(null);
   const [wavesurfer, setWavesurfer] = useState<WaveSurfer | null>(null);
   const [record, setRecord] = useState<RecordPlugin | null>(null);
@@ -212,17 +213,13 @@ export default function Recorder(props: any) {
       const playBtn = document.getElementById("play-btn");
       if (playBtn) playBtn.removeAttribute("disabled");
     } else {
-      const stream = await navigator.mediaDevices.getUserMedia({
+      const stream = await props.getAudioStream(deviceId);
-        audio: {
-          deviceId: deviceId as string,
-          noiseSuppression: false,
-          echoCancellation: false,
-        },
-      });
-      await record.startRecording(stream);
       props.setStream(stream);
-      setIsRecording(true);
       waveRegions?.clearRegions();
+      if (stream) {
+        await record.startRecording(stream);
+        setIsRecording(true);
+      }
     }
   };
 
@@ -232,15 +229,18 @@ export default function Recorder(props: any) {
 
   const timeLabel = () => {
     if (isRecording) return formatTime(currentTime);
-    else if (duration)
+    if (duration) return `${formatTime(currentTime)}/${formatTime(duration)}`;
-      return `${formatTime(currentTime)}/${formatTime(duration)}`;
+    return "";
-    else "";
   };
 
   return (
     <div className="relative flex flex-col items-center justify-center max-w-[75vw] w-full">
       <div className="flex my-2 mx-auto">
-        <AudioInputsDropdown setDeviceId={setDeviceId} disabled={isRecording} />
+        <AudioInputsDropdown
+          audioDevices={props.audioDevices}
+          setDeviceId={setDeviceId}
+          disabled={isRecording}
+        />
         &nbsp;
         <button
           className="w-20"

www/app/transcripts/useAudioDevice.ts

@@ -0,0 +1,103 @@
+import { useEffect, useState } from "react";
+
+import { Option } from "react-dropdown";
+
+const MIC_QUERY = { name: "microphone" as PermissionName };
+
+const useAudioDevice = () => {
+  const [permissionOk, setPermissionOk] = useState<boolean>(false);
+  const [permissionDenied, setPermissionDenied] = useState<boolean>(false);
+  const [audioDevices, setAudioDevices] = useState<Option[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    checkPermission();
+  }, []);
+
+  useEffect(() => {
+    if (permissionOk) {
+      updateDevices();
+    }
+  }, [permissionOk]);
+
+  const checkPermission = (): void => {
+    navigator.permissions
+      .query(MIC_QUERY)
+      .then((permissionStatus) => {
+        setPermissionOk(permissionStatus.state === "granted");
+        setPermissionDenied(permissionStatus.state === "denied");
+        permissionStatus.onchange = () => {
+          setPermissionOk(permissionStatus.state === "granted");
+          setPermissionDenied(permissionStatus.state === "denied");
+        };
+      })
+      .catch(() => {
+        setPermissionOk(false);
+        setPermissionDenied(false);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const requestPermission = () => {
+    navigator.mediaDevices
+      .getUserMedia({
+        audio: true,
+      })
+      .then((stream) => {
+        if (!navigator.userAgent.includes("Firefox"))
+          stream.getTracks().forEach((track) => track.stop());
+        setPermissionOk(true);
+      })
+      .catch(() => {
+        setPermissionDenied(true);
+        setPermissionOk(false);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const getAudioStream = async (
+    deviceId: string,
+  ): Promise<MediaStream | null> => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          deviceId,
+          noiseSuppression: false,
+          echoCancellation: false,
+        },
+      });
+      return stream;
+    } catch (e) {
+      setPermissionOk(false);
+      setAudioDevices([]);
+      return null;
+    }
+  };
+
+  const updateDevices = async (): Promise<void> => {
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    const _audioDevices = devices
+      .filter(
+        (d) => d.kind === "audioinput" && d.deviceId != "" && d.label != "",
+      )
+      .map((d) => ({ value: d.deviceId, label: d.label }));
+
+    setPermissionOk(_audioDevices.length > 0);
+    setAudioDevices(_audioDevices);
+  };
+
+  return {
+    loading,
+    permissionOk,
+    permissionDenied,
+    audioDevices,
+    getAudioStream,
+    requestPermission,
+  };
+};
+
+export default useAudioDevice;