@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -1,387 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { useClickAway } from 'react-use';
-import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
-import { match } from 'ts-pattern';
-import {
-  HMSTranscriptionMode,
-  selectIsConnectedToRoom,
-  selectIsLocalVideoEnabled,
-  selectIsTranscriptionAllowedByMode,
-  selectIsTranscriptionEnabled,
-  selectPeerCount,
-  selectPermissions,
-  useHMSActions,
-  useHMSStore,
-  useRecordingStreaming,
-} from '@100mslive/react-sdk';
-import {
-  BrbIcon,
-  ClosedCaptionIcon,
-  CrossIcon,
-  EmojiIcon,
-  HamburgerMenuIcon,
-  HandIcon,
-  HandRaiseSlashedIcon,
-  InfoIcon,
-  OpenCaptionIcon,
-  PeopleIcon,
-  QuizActiveIcon,
-  QuizIcon,
-  RecordIcon,
-  SettingsIcon,
-  VirtualBackgroundIcon,
-} from '@100mslive/react-icons';
-import { Box, Loading, Tooltip } from '../../../..';
-import { Sheet } from '../../../../Sheet';
-// @ts-ignore: No implicit any
-import IconButton from '../../../IconButton';
-import { NoiseCancellation } from '../../AudioVideoToggle';
-// @ts-ignore: No implicit any
-import { EmojiReaction } from '../../EmojiReaction';
-// @ts-ignore: No implicit any
-import { StopRecordingInSheet } from '../../Header/StreamActions';
-// @ts-ignore: No implicit any
-import SettingsModal from '../../Settings/SettingsModal';
-// @ts-ignore: No implicit any
-import { StatsForNerds } from '../../StatsForNerds';
-// @ts-ignore: No implicit any
-import { ToastManager } from '../../Toast/ToastManager';
-// @ts-ignore: No implicit any
-import { ActionTile } from '../ActionTile';
-import { CaptionModal } from '../CaptionModal';
-// @ts-ignore: No implicit any
-import { ChangeNameModal } from '../ChangeNameModal';
-// @ts-ignore: No implicit any
-import { MuteAllModal } from '../MuteAllModal';
-import { useRoomLayoutHeader } from '../../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useSheetToggle } from '../../AppData/useSheet';
-// @ts-ignore: No implicit any
-import { usePollViewToggle, useSidepaneToggle } from '../../AppData/useSidepane';
-// @ts-ignore: No implicit Any
-import { useSetIsCaptionEnabled, useShowPolls } from '../../AppData/useUISettings';
-// @ts-ignore: No implicit any
-import { useDropdownList } from '../../hooks/useDropdownList';
-import { useMyMetadata } from '../../hooks/useMetadata';
-import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
-import { useLandscapeHLSStream, useMobileHLSStream, useRecordingHandler } from '../../../common/hooks';
-// @ts-ignore: No implicit any
-import { getFormattedCount } from '../../../common/utils';
-// @ts-ignore: No implicit any
-import { SHEET_OPTIONS, SIDE_PANE_OPTIONS } from '../../../common/constants';
-
-const MODALS = {
-  CHANGE_NAME: 'changeName',
-  SELF_ROLE_CHANGE: 'selfRoleChange',
-  MORE_SETTINGS: 'moreSettings',
-  START_RECORDING: 'startRecording',
-  DEVICE_SETTINGS: 'deviceSettings',
-  STATS_FOR_NERDS: 'statsForNerds',
-  BULK_ROLE_CHANGE: 'bulkRoleChange',
-  MUTE_ALL: 'muteAll',
-  EMBED_URL: 'embedUrl',
-  CAPTION: 'caption',
-};
-
-export const MwebOptions = ({
-  elements,
-  screenType,
-}: {
-  elements: DefaultConferencingScreen_Elements;
-  screenType: keyof ConferencingScreen;
-}) => {
-  const hmsActions = useHMSActions();
-  const permissions = useHMSStore(selectPermissions);
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
-  const [openModals, setOpenModals] = useState(new Set());
-  const [openOptionsSheet, setOpenOptionsSheet] = useState(false);
-  const [openSettingsSheet, setOpenSettingsSheet] = useState(false);
-  const [openStatsForNerdsSheet, setOpenStatsForNerdsSheet] = useState(false);
-  const [showEmojiCard, setShowEmojiCard] = useState(false);
-  const [showRecordingOn, setShowRecordingOn] = useState(false);
-  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const { showPolls } = useShowPolls();
-  const togglePollView = usePollViewToggle();
-  const peerCount = useHMSStore(selectPeerCount);
-  const emojiCardRef = useRef(null);
-  const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
-  const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
-  const { title, description } = useRoomLayoutHeader();
-  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
-  const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
-  const { startRecording, isRecordingLoading } = useRecordingHandler();
-  const isTranscriptionAllowed = useHMSStore(selectIsTranscriptionAllowedByMode(HMSTranscriptionMode.CAPTION));
-  const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
-
-  const [isCaptionEnabled] = useSetIsCaptionEnabled();
-  useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
-
-  const updateState = (modalName: string, value: boolean) => {
-    setOpenModals(modals => {
-      const copy = new Set(modals);
-      if (value) {
-        copy.add(modalName);
-      } else {
-        copy.delete(modalName);
-      }
-      return copy;
-    });
-  };
-
-  useClickAway(emojiCardRef, () => setShowEmojiCard(false));
-
-  return (
-    <>
-      <Sheet.Root open={openOptionsSheet} onOpenChange={setOpenOptionsSheet}>
-        <Tooltip title="More options">
-          <Sheet.Trigger asChild data-testid="more_settings_btn">
-            <IconButton css={{ bg: isMobileHLSStream || isLandscapeHLSStream ? '$surface_default' : '' }}>
-              <HamburgerMenuIcon />
-            </IconButton>
-          </Sheet.Trigger>
-        </Tooltip>
-        <Sheet.Content css={{ bg: '$surface_dim', pb: '$14' }}>
-          <Sheet.Title
-            css={{
-              display: 'flex',
-              color: '$on_surface_high',
-              w: '100%',
-              justifyContent: 'space-between',
-              fontSize: '$md',
-              mt: '$8',
-              px: '$10',
-              pb: '$8',
-              borderBottom: '1px solid $border_default',
-              mb: '$8',
-              alignItems: 'center',
-            }}
-          >
-            Options
-            <Sheet.Close>
-              <Box css={{ color: '$on_surface_high' }}>
-                <CrossIcon />
-              </Box>
-            </Sheet.Close>
-          </Sheet.Title>
-          <Box
-            css={{
-              display: 'grid',
-              gridTemplateColumns: '1fr 1fr 1fr',
-              gridTemplateRows: 'auto',
-              gridColumnGap: '$6',
-              gridRowGap: '$8',
-              px: '$9',
-            }}
-          >
-            {elements?.participant_list && (
-              <ActionTile.Root
-                onClick={() => {
-                  toggleParticipants();
-                  setOpenOptionsSheet(false);
-                }}
-              >
-                <ActionTile.Count>{getFormattedCount(peerCount)}</ActionTile.Count>
-                <PeopleIcon />
-                <ActionTile.Title>Participants</ActionTile.Title>
-              </ActionTile.Root>
-            )}
-
-            {elements.hand_raise ? (
-              <ActionTile.Root
-                active={isHandRaised}
-                onClick={() => {
-                  toggleHandRaise();
-                  setOpenOptionsSheet(false);
-                }}
-              >
-                {isHandRaised ? <HandRaiseSlashedIcon /> : <HandIcon />}
-                <ActionTile.Title>{isHandRaised ? 'Lower' : 'Raise'} Hand</ActionTile.Title>
-              </ActionTile.Root>
-            ) : null}
-            <NoiseCancellation setOpenOptionsSheet={setOpenOptionsSheet} actionTile />
-            {isTranscriptionAllowed ? (
-              <ActionTile.Root
-                onClick={() => {
-                  setOpenOptionsSheet(false);
-                  updateState(MODALS.CAPTION, true);
-                }}
-              >
-                {isTranscriptionEnabled && isCaptionEnabled ? <ClosedCaptionIcon /> : <OpenCaptionIcon />}
-                <ActionTile.Title>Closed Caption</ActionTile.Title>
-              </ActionTile.Root>
-            ) : null}
-            {isLocalVideoEnabled && !!elements?.virtual_background ? (
-              <ActionTile.Root
-                onClick={() => {
-                  toggleVB();
-                  setOpenOptionsSheet(false);
-                }}
-              >
-                <VirtualBackgroundIcon />
-                <ActionTile.Title>Virtual Background</ActionTile.Title>
-              </ActionTile.Root>
-            ) : null}
-
-            {elements?.emoji_reactions && !(isLandscapeHLSStream || isMobileHLSStream) && (
-              <ActionTile.Root
-                onClick={() => {
-                  setShowEmojiCard(true);
-                  setOpenOptionsSheet(false);
-                }}
-              >
-                <EmojiIcon />
-                <ActionTile.Title>Emoji Reactions</ActionTile.Title>
-              </ActionTile.Root>
-            )}
-
-            {showPolls && (
-              <ActionTile.Root
-                onClick={() => {
-                  togglePollView();
-                  setOpenOptionsSheet(false);
-                  setUnreadPollQuiz(false);
-                }}
-              >
-                {unreadPollQuiz ? <QuizActiveIcon /> : <QuizIcon />}
-                <ActionTile.Title>Polls and Quizzes</ActionTile.Title>
-              </ActionTile.Root>
-            )}
-
-            {elements?.brb && (
-              <ActionTile.Root
-                active={isBRBOn}
-                onClick={() => {
-                  toggleBRB();
-                  setOpenOptionsSheet(false);
-                }}
-              >
-                <BrbIcon />
-                <ActionTile.Title>Be Right Back</ActionTile.Title>
-              </ActionTile.Root>
-            )}
-
-            <ActionTile.Root
-              onClick={() => {
-                setOpenSettingsSheet(true);
-                setOpenOptionsSheet(false);
-              }}
-            >
-              <SettingsIcon />
-              <ActionTile.Title>Settings</ActionTile.Title>
-            </ActionTile.Root>
-            <ActionTile.Root
-              onClick={() => {
-                setOpenStatsForNerdsSheet(true);
-                setOpenOptionsSheet(false);
-              }}
-            >
-              <InfoIcon />
-              <ActionTile.Title>Stats For Nerds</ActionTile.Title>
-            </ActionTile.Root>
-            {isConnected && permissions?.browserRecording ? (
-              <ActionTile.Root
-                disabled={isHLSRunning}
-                onClick={async () => {
-                  if (isRecordingLoading) {
-                    return;
-                  }
-                  if (isBrowserRecordingOn || isStreamingOn) {
-                    setOpenOptionsSheet(false);
-                    setShowRecordingOn(true);
-                  } else {
-                    // start recording
-                    await startRecording();
-                    setOpenOptionsSheet(false);
-                  }
-                  if (isHLSRunning) {
-                    setOpenOptionsSheet(false);
-                  }
-                }}
-              >
-                {isRecordingLoading ? <Loading /> : <RecordIcon />}
-                <ActionTile.Title>
-                  {match({ isBrowserRecordingOn, isRecordingLoading })
-                    .with({ isBrowserRecordingOn: true, isRecordingLoading: false }, () => 'Recording On')
-                    .with({ isRecordingLoading: true }, () => 'Starting Recording')
-                    .with({ isRecordingLoading: false }, () => 'Start Recording')
-                    .otherwise(() => null)}
-                </ActionTile.Title>
-              </ActionTile.Root>
-            ) : null}
-
-            {title || description ? (
-              <ActionTile.Root
-                onClick={() => {
-                  setOpenOptionsSheet(false);
-                  toggleDetailsSheet();
-                }}
-              >
-                <InfoIcon />
-                <ActionTile.Title>About Session</ActionTile.Title>
-              </ActionTile.Root>
-            ) : null}
-          </Box>
-        </Sheet.Content>
-      </Sheet.Root>
-      <SettingsModal open={openSettingsSheet} onOpenChange={setOpenSettingsSheet} screenType={screenType} />
-
-      {openStatsForNerdsSheet && (
-        <StatsForNerds open={openStatsForNerdsSheet} onOpenChange={setOpenStatsForNerdsSheet} />
-      )}
-
-      {openModals.has(MODALS.MUTE_ALL) && (
-        <MuteAllModal onOpenChange={(value: boolean) => updateState(MODALS.MUTE_ALL, value)} isMobile />
-      )}
-      {openModals.has(MODALS.CHANGE_NAME) && (
-        <ChangeNameModal
-          onOpenChange={(value: boolean) => updateState(MODALS.CHANGE_NAME, value)}
-          openParentSheet={() => setOpenOptionsSheet(true)}
-        />
-      )}
-      {openModals.has(MODALS.CAPTION) && (
-        <CaptionModal onOpenChange={(value: boolean) => updateState(MODALS.CAPTION, value)} />
-      )}
-      {showEmojiCard && (
-        <Box
-          ref={emojiCardRef}
-          css={{
-            maxWidth: '100%',
-            w: '100%',
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            bottom: '$18',
-            bg: '$surface_default',
-            zIndex: '10',
-            p: '$8',
-            pb: 0,
-            r: '$1',
-            mx: '$4',
-          }}
-        >
-          <EmojiReaction showCard />
-        </Box>
-      )}
-      {showRecordingOn && (
-        <StopRecordingInSheet
-          onClose={() => setShowRecordingOn(false)}
-          onStopRecording={async () => {
-            try {
-              await hmsActions.stopRTMPAndRecording();
-              setShowRecordingOn(false);
-            } catch (error) {
-              ToastManager.addToast({
-                // @ts-ignore
-                title: error.message,
-                variant: 'error',
-              });
-            }
-          }}
-        />
-      )}
-    </>
-  );
-};

package/src/Prebuilt/components/MoreSettings/constants.ts

@@ -1,14 +0,0 @@
-export const trackSourceOptions = [
-  { label: 'All Track Sources', value: '' },
-  { label: 'regular', value: 'regular' },
-  { label: 'screen', value: 'screen' },
-  { label: 'audioplaylist', value: 'audioplaylist' },
-  { label: 'videoplaylist', value: 'videoplaylist' },
-];
-export const trackTypeOptions = [
-  { label: 'All Track Types', value: '' },
-  { label: 'audio', value: 'audio' },
-  { label: 'video', value: 'video' },
-];
-
-export const DEFAULT_TILES_IN_VIEW = { MWEB: 4, DESKTOP: 9 };

package/src/Prebuilt/components/MwebLandscapePrompt.tsx

@@ -1,81 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useMedia } from 'react-use';
-import { match, P } from 'ts-pattern';
-import { RefreshIcon } from '@100mslive/react-icons';
-import { Button } from '../../Button';
-import { Box, Flex } from '../../Layout';
-import { Dialog } from '../../Modal';
-import { Text } from '../../Text';
-import { config as cssConfig } from '../../Theme';
-import { useLandscapeHLSStream } from '../common/hooks';
-// @ts-ignore
-import { isMobileUserAgent } from '../common/utils';
-
-export const MwebLandscapePrompt = () => {
-  const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState(false);
-  const isLandscape = useMedia(cssConfig.media.ls);
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-
-  useEffect(() => {
-    if (!isMobileUserAgent) {
-      setShowMwebLandscapePrompt(false);
-      return;
-    }
-
-    if (!window.screen?.orientation) {
-      setShowMwebLandscapePrompt(isLandscape && !isLandscapeHLSStream);
-      return;
-    }
-    const handleRotation = () => {
-      const angle = window.screen.orientation.angle;
-      const type = window.screen.orientation.type || '';
-      // Angle check needed to diff bw mobile and desktop
-      setShowMwebLandscapePrompt(
-        match({ angle, isLandscapeHLSStream, isLandscape, type })
-          .with({ isLandscapeHLSStream: true }, () => false)
-          .with({ angle: P.when(angle => angle && angle >= 90) }, ({ type }) => type.includes('landscape'))
-          .otherwise(() => isLandscape),
-      );
-    };
-    handleRotation();
-    window.screen.orientation.addEventListener('change', handleRotation);
-    return () => {
-      window.screen.orientation.removeEventListener('change', handleRotation);
-    };
-  }, [isLandscape, isLandscapeHLSStream]);
-
-  if (isLandscapeHLSStream) {
-    return null;
-  }
-  return (
-    <Dialog.Root open={showMwebLandscapePrompt} onOpenChange={setShowMwebLandscapePrompt}>
-      <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
-          <Box>
-            <Flex
-              css={{
-                color: '$primary_default',
-                display: 'flex',
-                alignItems: 'center',
-              }}
-            >
-              <RefreshIcon style={{ marginRight: '0.5rem' }} />
-              <Text variant="lg" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
-                Please rotate your device
-              </Text>
-            </Flex>
-            <Text variant="sm" css={{ color: '$on_surface_medium', mb: '$8', mt: '$4' }}>
-              We do not support landscape mode as of now, please use the app in portrait mode for the best experience.
-            </Text>
-            <Flex align="center" justify="between" css={{ w: '100%', gap: '$8' }}>
-              <Button outlined variant="standard" css={{ w: '100%' }} onClick={() => setShowMwebLandscapePrompt(false)}>
-                Continue anyway
-              </Button>
-            </Flex>
-          </Box>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};

package/src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { useAutoplayError } from '@100mslive/react-sdk';
-import { Button, Dialog, Text } from '../../..';
-// @ts-ignore: No implicit Any
-import { DialogContent, DialogRow } from '../../primitives/DialogContent';
-
-export function AutoplayBlockedModal() {
-  const { error, resetError, unblockAudio } = useAutoplayError();
-  return (
-    <Dialog.Root
-      open={!!error}
-      onOpenChange={async value => {
-        if (!value) {
-          await unblockAudio();
-        }
-        resetError();
-      }}
-    >
-      <DialogContent title="Permission Error" closeable={false}>
-        <DialogRow>
-          <Text variant="md">
-            The browser wants us to get a confirmation for playing the Audio. Please allow audio to proceed.
-          </Text>
-        </DialogRow>
-        <DialogRow justify="end">
-          <Button
-            variant="primary"
-            onClick={async () => {
-              await unblockAudio();
-              resetError();
-            }}
-          >
-            Allow Audio
-          </Button>
-        </DialogRow>
-      </DialogContent>
-    </Dialog.Root>
-  );
-}

package/src/Prebuilt/components/Notifications/ChatNotifications.tsx

@@ -1,34 +0,0 @@
-import React, { useEffect } from 'react';
-import { v4 as uuid } from 'uuid';
-import { selectLocalPeerID, selectSessionStore, useHMSStore } from '@100mslive/react-sdk';
-import { ChatIcon, ChatUnreadIcon } from '@100mslive/react-icons';
-// @ts-ignore
-import { ToastManager } from '../Toast/ToastManager';
-import { SESSION_STORE_KEY } from '../../common/constants';
-
-const NOTIFICATION_TIME_DIFFERENCE = 5000;
-
-export const ChatNotifications = () => {
-  const chatState = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE));
-  const localPeerId = useHMSStore(selectLocalPeerID);
-
-  useEffect(() => {
-    if (!chatState || chatState.updatedBy?.peerId === localPeerId) {
-      return;
-    }
-
-    const showToast = Date.now() - chatState.updatedAt < NOTIFICATION_TIME_DIFFERENCE;
-
-    if (!showToast) {
-      return;
-    }
-
-    const notification = {
-      id: uuid(),
-      icon: chatState.enabled ? <ChatUnreadIcon /> : <ChatIcon />,
-      title: `Chat ${chatState.enabled ? 'resumed' : 'paused'} by ${chatState.updatedBy?.userName}`,
-    };
-    ToastManager.addToast(notification);
-  }, [chatState, localPeerId]);
-  return <></>;
-};

package/src/Prebuilt/components/Notifications/DeviceChangeNotifications.tsx

@@ -1,18 +0,0 @@
-import { useEffect } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-
-export const DeviceChangeNotifications = () => {
-  const notification = useHMSNotifications(HMSNotificationTypes.DEVICE_CHANGE_UPDATE);
-
-  useEffect(() => {
-    if (notification) {
-      ToastManager.addToast({
-        title: notification.message,
-      });
-    }
-  }, [notification]);
-
-  return null;
-};

package/src/Prebuilt/components/Notifications/DeviceInUseError.tsx

@@ -1,86 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  HMSNotificationTypes,
-  HMSTrackException,
-  HMSTrackExceptionTrackType,
-  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 errorTrackExceptionType = (error as HMSTrackException)?.trackType;
-    const hasAudio = errorTrackExceptionType === HMSTrackExceptionTrackType.AUDIO;
-    const hasVideo = errorTrackExceptionType === HMSTrackExceptionTrackType.VIDEO;
-    const hasAudioVideo = errorTrackExceptionType === HMSTrackExceptionTrackType.AUDIO_VIDEO;
-    const hasScreen = errorTrackExceptionType === HMSTrackExceptionTrackType.SCREEN;
-
-    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>
-      ),
-    });
-
-    if (hasAudioVideo) {
-      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>
-  );
-}