fix: device in use error modal

100mslive · Oct 9, 2024 · b35a41e · b35a41e
1 parent 442467a
commit b35a41e
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 0 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/DeviceInUseError.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/DeviceInUseError.tsx
@@ -0,0  1,79 @@
 import React, { useEffect, useState } from 'react';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
 import { Button, Dialog, Text } from '../../..';
 // @ts-ignore: No implicit Any
 import { DialogContent, DialogRow } from '../../primitives/DialogContent';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 
 const Instruction = ({ description }: { description: string }) => (
   <li>
     <DialogRow css={{ ml: '$4' }}>
       <Text variant="body2">{description}</Text>
     </DialogRow>
   </li>
 );
 
 export function DeviceInUseError() {
   const notification = useHMSNotifications(HMSNotificationTypes.ERROR);
   const [showDeviceInUseModal, setShowDeviceInUseModal] = useState(false);
   const [deviceType, setDeviceType] = useState('');
 
   useEffect(() => {
     const error = notification?.data;
     if (!error || error.code !== 3003) {
       return;
     }
 
     const errorMessage = error?.message;
     ToastManager.addToast({
       title: `Error: ${errorMessage} - ${error?.description}`,
       action: (
         <Button outlined variant="standard" css={{ w: 'max-content' }} onClick={() => setShowDeviceInUseModal(true)}>
           Help
         </Button>
       ),
     });
 
     const hasAudio = errorMessage.includes('audio');
     const hasVideo = errorMessage.includes('video');
     const hasScreen = errorMessage.includes('screen');
     if (hasAudio && hasVideo) {
       setDeviceType('camera and microphone');
     } else if (hasAudio) {
       setDeviceType('microphone');
     } else if (hasVideo) {
       setDeviceType('camera');
     } else if (hasScreen) {
       setDeviceType('screen');
     }
   }, [notification]);
 
   return (
     <Dialog.Root
       open={showDeviceInUseModal}
       onOpenChange={() => {
         setShowDeviceInUseModal(false);
       }}
     >
       <DialogContent title="Device Access Error">
         <DialogRow>
           <Text variant="body2">
             We weren't able to access your {deviceType} since it's either in use by another application or is not
             configured properly. Please follow the following instructions to resolve this issue.
           </Text>
         </DialogRow>
         <ol>
           <Instruction
             description={`Please check if the ${deviceType} device(s) are in use by another browser or application and close it.`}
           />
           <Instruction
             description={`Go to Browser Settings > Privacy and security > Site settings > ${deviceType} and check if your preferred device is selected as default.`}
           />
           <Instruction description="Try restarting the browser." />
           <Instruction description="Try disconnecting and reconnecting the external device if your intention is to use one." />
         </ol>
       </DialogContent>
     </Dialog.Root>
   );
 }
diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx
@@ -21,6  21,7 @@ import { useRoomLayout, useUpdateRoomLayout } from '../../provider/roomLayoutPro
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
 import { ChatNotifications } from './ChatNotifications';
 import { DeviceInUseError } from './DeviceInUseError';
 import { HandRaisedNotifications } from './HandRaisedNotifications';
 import { InitErrorModal } from './InitErrorModal';
 import { PeerNotifications } from './PeerNotifications';
@@ -204,6  205,7 @@ export function Notifications() {
       <ChatNotifications />
       <HandRaisedNotifications />
       <TranscriptionNotifications />
       <DeviceInUseError />
     </>
   );
 }