From ec76c0dec069761fb3ac4b78215be7e4d7d79f65 Mon Sep 17 00:00:00 2001
From: obrucheoghene <obrucheoghene1@gmail.com>
Date: Wed, 25 Mar 2026 17:13:07 +0100
Subject: [PATCH] fix: resolve media permission bugs and improve device access
 UX

- Fix requestCameraPermission filtering audioinput instead of videoinput
- Fix toggleMic calling requestCameraPermission instead of requestMicPermission
- Replace alert() calls with sonner toast.error() using structured title/description
- Show toast when requestCameraAndMicPermissions is denied (was silently swallowed)
- Add proactive navigator.permissions check on pre-join screen with actionable denied toast
- Add micPending/cameraPending loading state; show spinner on buttons during acquisition
---
 src/components/room/camera.tsx               |  9 ++-
 src/components/room/join/join-controls.tsx   | 24 +++++++-
 src/components/room/media-control-button.tsx |  3 +
 src/components/room/mic.tsx                  | 19 ++++--
 src/hooks/use-media.ts                       | 61 +++++++++++++-------
 5 files changed, 86 insertions(+), 30 deletions(-)

diff --git a/src/components/room/camera.tsx b/src/components/room/camera.tsx
index eecf7d9..4377cba 100644
--- a/src/components/room/camera.tsx
+++ b/src/components/room/camera.tsx
@@ -1,4 +1,4 @@
-import { Video, VideoOff } from 'lucide-react';
+import { Loader2, Video, VideoOff } from 'lucide-react';
 import MediaDeviceDropdown from './media-device-dropdown';
 
 import {
@@ -10,7 +10,7 @@ import { useMedia } from '@/hooks/use-media';
 import MediaControlButton from './media-control-button';
 
 const Camera = () => {
-  const { toggleCamera } = useMedia();
+  const { toggleCamera, cameraPending } = useMedia();
 
   const cameraOn = useCameraOn();
   const cameraDeviceId = useCameraDeviceId();
@@ -22,8 +22,11 @@ const Camera = () => {
         isActive={cameraOn}
         onClick={toggleCamera}
         label={cameraOn ? 'Stop' : 'Start'}
+        disabled={cameraPending}
       >
-        {cameraOn ? (
+        {cameraPending ? (
+          <Loader2 className="w-5 h-5 animate-spin" />
+        ) : cameraOn ? (
           <Video className="w-5 h-5" />
         ) : (
           <VideoOff className="w-5 h-5" />
diff --git a/src/components/room/join/join-controls.tsx b/src/components/room/join/join-controls.tsx
index 86327e6..a0d3efd 100644
--- a/src/components/room/join/join-controls.tsx
+++ b/src/components/room/join/join-controls.tsx
@@ -5,11 +5,33 @@ import { useMedia } from '@/hooks/use-media';
 import Mic from '../mic';
 import Camera from '../camera';
 import { useSettingsActions } from '@/store/conf/hooks';
+import { toast } from 'sonner';
 
 const Controls = () => {
   const { requestCameraAndMicPermissions } = useMedia();
   useEffect(() => {
-    requestCameraAndMicPermissions();
+    const checkPermissions = async () => {
+      try {
+        const [cam, mic] = await Promise.all([
+          navigator.permissions.query({ name: 'camera' as PermissionName }),
+          navigator.permissions.query({ name: 'microphone' as PermissionName }),
+        ]);
+        if (cam.state === 'denied' || mic.state === 'denied') {
+          const which = cam.state === 'denied' && mic.state === 'denied'
+            ? 'camera and microphone'
+            : cam.state === 'denied' ? 'camera' : 'microphone';
+          toast.error(`${which.charAt(0).toUpperCase() + which.slice(1)} access blocked`, {
+            description: `Allow access to your ${which} in your browser's site settings, then reload.`,
+            duration: 10000,
+          });
+          return;
+        }
+      } catch {
+        // permissions API not supported — fall through to getUserMedia
+      }
+      requestCameraAndMicPermissions();
+    };
+    checkPermissions();
   }, [requestCameraAndMicPermissions]);
 
   const settingsAction = useSettingsActions();
diff --git a/src/components/room/media-control-button.tsx b/src/components/room/media-control-button.tsx
index 4f161df..fac6a98 100644
--- a/src/components/room/media-control-button.tsx
+++ b/src/components/room/media-control-button.tsx
@@ -7,6 +7,7 @@ interface MediaControlButtonProps {
   children: React.ReactNode;
   className?: string;
   label?: string;
+  disabled?: boolean;
 }
 const MediaControlButton: React.FC<MediaControlButtonProps> = ({
   isActive,
@@ -14,11 +15,13 @@ const MediaControlButton: React.FC<MediaControlButtonProps> = ({
   children,
   className,
   label,
+  disabled,
 }) => (
   <Button
     onClick={onClick}
     variant={isActive ? 'default' : 'ghost'}
     size="icon"
+    disabled={disabled}
     className={cn(
       'rounded-xl transition-all duration-200 cursor-pointer text-white bg-linear-to-br',
       label ? 'w-14 h-14 flex-col gap-0.5' : 'w-12 h-12',
diff --git a/src/components/room/mic.tsx b/src/components/room/mic.tsx
index 56973c3..b3b5bba 100644
--- a/src/components/room/mic.tsx
+++ b/src/components/room/mic.tsx
@@ -1,4 +1,4 @@
-import { Mic as MicOn, MicOff } from 'lucide-react';
+import { Loader2, Mic as MicOn, MicOff } from 'lucide-react';
 
 import { useMicDeviceId, useMicDevices, useMicOn } from '@/store/conf/hooks';
 import MediaDeviceDropdown from './media-device-dropdown';
@@ -6,15 +6,26 @@ import { useMedia } from '@/hooks/use-media';
 import MediaControlButton from './media-control-button';
 
 const Mic = () => {
-  const { toggleMic } = useMedia();
+  const { toggleMic, micPending } = useMedia();
   const micOn = useMicOn();
   const micDeviceId = useMicDeviceId();
   const micDevices = useMicDevices();
 
   return (
     <div className="flex items-center gap-2">
-      <MediaControlButton isActive={micOn} onClick={toggleMic} label={micOn ? 'Mute' : 'Unmute'}>
-        {micOn ? <MicOn className="w-5 h-5" /> : <MicOff className="w-5 h-5" />}
+      <MediaControlButton
+        isActive={micOn}
+        onClick={toggleMic}
+        label={micOn ? 'Mute' : 'Unmute'}
+        disabled={micPending}
+      >
+        {micPending ? (
+          <Loader2 className="w-5 h-5 animate-spin" />
+        ) : micOn ? (
+          <MicOn className="w-5 h-5" />
+        ) : (
+          <MicOff className="w-5 h-5" />
+        )}
       </MediaControlButton>
       <MediaDeviceDropdown
         devices={micDevices}
diff --git a/src/hooks/use-media.ts b/src/hooks/use-media.ts
index c4aff7e..ac5a897 100644
--- a/src/hooks/use-media.ts
+++ b/src/hooks/use-media.ts
@@ -1,5 +1,5 @@
 import { types as mediasoupTypes } from 'mediasoup-client';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Access,
   type ConsumerStateData,
@@ -25,6 +25,7 @@ import {
 } from '@/store/conf/hooks';
 import { Actions } from '@/types/actions';
 import { requestMediaPermissions, type MediaPermissionsError } from 'mic-check';
+import { toast } from 'sonner';
 import { DEVICE_ERRORS } from '@/lib/constants';
 
 // Hook for media operations
@@ -388,7 +389,11 @@ export const useMedia = () => {
     [mediaService]
   );
 
+  const [micPending, setMicPending] = useState(false);
+  const [cameraPending, setCameraPending] = useState(false);
+
   const requestMicPermission = useCallback(() => {
+    setMicPending(true);
     requestMediaPermissions({ audio: true, video: false })
       .then(async () => {
         const devices = await navigator.mediaDevices.enumerateDevices();
@@ -401,31 +406,40 @@ export const useMedia = () => {
       })
       .catch((err: MediaPermissionsError) => {
         const type = err?.type || 'DeviceNotFound';
-        return alert(DEVICE_ERRORS[type]('microphone'));
-      });
+        const { title, body } = DEVICE_ERRORS[type]('microphone');
+        toast.error(title, { description: body });
+      })
+      .finally(() => setMicPending(false));
   }, [micActions]);
 
   const requestCameraPermission = useCallback(() => {
+    setCameraPending(true);
     requestMediaPermissions({ audio: false, video: true })
       .then(async () => {
         const devices = await navigator.mediaDevices.enumerateDevices();
-        const audioInputDevices = devices.filter(
-          device => device.kind === 'audioinput'
+        const videoInputDevices = devices.filter(
+          device => device.kind === 'videoinput'
         );
-        if (!audioInputDevices.length) throw 'Device not found';
-        cameraActions.setDeviceId(audioInputDevices[0].deviceId);
-        cameraActions.setDevices(audioInputDevices);
+        if (!videoInputDevices.length) throw 'Device not found';
+        cameraActions.setDeviceId(videoInputDevices[0].deviceId);
+        cameraActions.setDevices(videoInputDevices);
       })
       .catch((err: MediaPermissionsError) => {
         const type = err?.type || 'DeviceNotFound';
-        return alert(DEVICE_ERRORS[type]('camera'));
-      });
+        const { title, body } = DEVICE_ERRORS[type]('camera');
+        toast.error(title, { description: body });
+      })
+      .finally(() => setCameraPending(false));
   }, [cameraActions]);
 
   const requestCameraAndMicPermissions = useCallback(() => {
+    setMicPending(true);
+    setCameraPending(true);
     requestMediaPermissions()
       .catch((err: MediaPermissionsError) => {
-        console.log(err);
+        const type = err?.type || 'Generic';
+        const { title, body } = DEVICE_ERRORS[type]('camera');
+        toast.error(title, { description: body });
       })
       .finally(async () => {
         try {
@@ -436,25 +450,19 @@ export const useMedia = () => {
           const videoInputDevices = devices.filter(
             device => device.kind === 'videoinput'
           );
-          // const audioOutputDevices = devices.filter(
-          //   device => device.kind === 'audiooutput'
-          // );
-
-          // soundActions.setDeviceId(
-          //   audioOutputDevices.length ? audioOutputDevices[0].deviceId : null
-          // );
           cameraActions.setDeviceId(
             videoInputDevices.length ? videoInputDevices[0].deviceId : null
           );
           micActions.setDeviceId(
             audioInputDevices.length ? audioInputDevices[0].deviceId : null
           );
-
-          // soundActions.setDevices(audioOutputDevices);
           cameraActions.setDevices(videoInputDevices);
           micActions.setDevices(audioInputDevices);
         } catch (error) {
           console.log(error);
+        } finally {
+          setMicPending(false);
+          setCameraPending(false);
         }
       });
   }, [micActions, cameraActions]);
@@ -462,6 +470,7 @@ export const useMedia = () => {
   const toggleCamera = useCallback(async () => {
     if (!mediaService) return console.log('Media service not intialised');
     if (!cameraDeviceId) return requestCameraPermission();
+    setCameraPending(true);
     try {
       if (cameraOn) {
         await stopUserMedia('camera');
@@ -471,6 +480,8 @@ export const useMedia = () => {
       cameraActions.toggle();
     } catch (error) {
       console.log(error);
+    } finally {
+      setCameraPending(false);
     }
   }, [
     cameraActions,
@@ -481,9 +492,11 @@ export const useMedia = () => {
     startUserMedia,
     stopUserMedia,
   ]);
+
   const toggleMic = useCallback(async () => {
     if (!mediaService) return console.log('Media service not intialised');
-    if (!micDeviceId) return requestCameraPermission();
+    if (!micDeviceId) return requestMicPermission();
+    setMicPending(true);
     try {
       if (micOn) {
         await stopUserMedia('mic');
@@ -493,13 +506,15 @@ export const useMedia = () => {
       micActions.toggle();
     } catch (error) {
       console.log(error);
+    } finally {
+      setMicPending(false);
     }
   }, [
     micActions,
     micDeviceId,
     micOn,
     mediaService,
-    requestCameraPermission,
+    requestMicPermission,
     startUserMedia,
     stopUserMedia,
   ]);
@@ -557,6 +572,8 @@ export const useMedia = () => {
     toggleCamera,
     toggleMic,
     toggleScreen,
+    micPending,
+    cameraPending,
     qualityManager,
     setConsumerQuality: qualityManager?.setConsumerQuality.bind(qualityManager),
   };