hydration mismatch warning

www/app/(app)/transcripts/useAudioDevice.ts

@@ -9,8 +9,10 @@ const useAudioDevice = () => {
   const [permissionDenied, setPermissionDenied] = useState<boolean>(false);
   const [audioDevices, setAudioDevices] = useState<Option[]>([]);
   const [loading, setLoading] = useState(true);
+  const [isClient, setIsClient] = useState(false);
 
   useEffect(() => {
+    setIsClient(true);
     checkPermission();
   }, []);
 
@@ -21,6 +23,12 @@ const useAudioDevice = () => {
   }, [permissionOk]);
 
   const checkPermission = (): void => {
+    // Skip on server-side rendering
+    if (typeof window === "undefined" || !navigator) {
+      setLoading(false);
+      return;
+    }
+    
     if (navigator.userAgent.includes("Firefox")) {
       navigator.mediaDevices
         .getUserMedia({ audio: true, video: false })
@@ -124,6 +132,7 @@ const useAudioDevice = () => {
     audioDevices,
     getAudioStream,
     requestPermission,
+    isClient,
   };
 };