@100mslive/roomkit-react 0.4.3-alpha.0 → 0.4.3-alpha.10

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>
-  );
-}

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

@@ -1,56 +0,0 @@
-import React, { useEffect } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-import { GroupIcon } from '@100mslive/react-icons';
-import { Box } from '../../../Layout';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-// @ts-ignore: No implicit Any
-import { useSubscribedNotifications } from '../AppData/useUISettings';
-
-export const ErrorNotifications = () => {
-  const notification = useHMSNotifications(HMSNotificationTypes.ERROR);
-  const subscribedNotifications = useSubscribedNotifications() || {};
-
-  useEffect(() => {
-    if (!notification || !notification.data) return;
-
-    const { isTerminal, action, code, message, description } = notification.data;
-
-    if (isTerminal && action !== 'INIT') {
-      if ([500, 6008].includes(code)) {
-        ToastManager.addToast({
-          title: `Error: ${message}`,
-        });
-      } else if (message === 'role limit reached') {
-        ToastManager.addToast({
-          title: 'The room is currently full, try joining later',
-          close: true,
-          icon: (
-            <Box css={{ color: '$alert_error_default' }}>
-              <GroupIcon />
-            </Box>
-          ),
-        });
-      } else {
-        ToastManager.addToast({
-          title: message || 'We couldn’t reconnect you. When you’re back online, try joining the room.',
-          close: false,
-        });
-      }
-      return;
-    }
-    // Autoplay error or user denied screen share (cancelled browser pop-up)
-    if ([3008, 3001, 3011].includes(code)) {
-      return;
-    }
-    if (action === 'INIT') {
-      return;
-    }
-    if (!subscribedNotifications.ERROR) return;
-    ToastManager.addToast({
-      title: `Error: ${message} - ${description}`,
-    });
-  }, [notification, subscribedNotifications.ERROR]);
-
-  return null;
-};

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

@@ -1,71 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { selectHLSState, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
-import { Button } from '../../../Button';
-import { Flex } from '../../../Layout';
-import { Dialog } from '../../../Modal';
-import { Text } from '../../../Text';
-// @ts-ignore: No implicit Any
-import { useSetAppDataByKey } from '../AppData/useUISettings';
-// @ts-ignore: No implicit Any
-import { APP_DATA } from '../../common/constants';
-
-export function HLSFailureModal() {
-  const hlsError = useHMSStore(selectHLSState).error || false;
-  const [openModal, setOpenModal] = useState(!!hlsError);
-  const hmsActions = useHMSActions();
-  const { isRTMPRunning } = useRecordingStreaming();
-  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const startHLS = useCallback(async () => {
-    try {
-      if (isHLSStarted || isRTMPRunning) {
-        return;
-      }
-      setHLSStarted(true);
-      await hmsActions.startHLSStreaming({});
-    } catch (error) {
-      console.error(error);
-      setHLSStarted(false);
-    }
-  }, [hmsActions, isHLSStarted, setHLSStarted, isRTMPRunning]);
-
-  return hlsError ? (
-    <Dialog.Root
-      open={openModal}
-      onOpenChange={value => {
-        if (!value) {
-          setOpenModal(false);
-        }
-      }}
-    >
-      <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content css={{ w: 'min(360px, 90%)' }}>
-          <Dialog.Title
-            css={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              borderBottom: '1px solid $border_default',
-              mt: '$4',
-            }}
-          >
-            <Text variant="h6" css={{ fontWeight: '$semiBold' }}>
-              Failed to Go Live
-            </Text>
-          </Dialog.Title>
-          <Text variant="sm" css={{ mb: '$10', color: '$on_surface_medium' }}>
-            Something went wrong and your live broadcast failed. Please try again.
-          </Text>
-          <Flex align="center" justify="between" css={{ w: '100%', gap: '$8' }}>
-            <Button outlined variant="standard" css={{ w: '100%' }} onClick={() => setOpenModal(false)}>
-              Dismiss
-            </Button>
-            <Button css={{ w: '100%' }} onClick={startHLS}>
-              Go Live
-            </Button>
-          </Flex>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  ) : null;
-}

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

@@ -1,78 +0,0 @@
-import { useEffect } from 'react';
-import { useDebounce } from 'react-use';
-import {
-  HMSNotificationTypes,
-  HMSRoomState,
-  selectHandRaisedPeers,
-  selectHasPeerHandRaised,
-  selectIsLocalScreenShared,
-  selectPeerByID,
-  selectRoomState,
-  useAwayNotifications,
-  useHMSNotifications,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-import { useRoomLayout } from '../../provider/roomLayoutProvider';
-// @ts-ignore: No implicit Any
-import { ToastBatcher } from '../Toast/ToastBatcher';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
-import { useSubscribedNotifications } from '../AppData/useUISettings';
-import { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
-
-export const HandRaisedNotifications = () => {
-  const notification = useHMSNotifications(HMSNotificationTypes.HAND_RAISE_CHANGED);
-  const roomState = useHMSStore(selectRoomState);
-  const vanillaStore = useHMSVanillaStore();
-  const { on_stage_exp } = useRoomLayoutConferencingScreen().elements || {};
-  const isSubscribing = !!useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED);
-  const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);
-  const { showNotification } = useAwayNotifications();
-  const logoURL = useRoomLayout()?.logo?.url;
-
-  useEffect(() => {
-    if (!notification?.data) {
-      return;
-    }
-
-    // Don't show toast message in case of local peer.
-    if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !isSubscribing) {
-      return;
-    }
-
-    const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
-    const peer = vanillaStore.getState(selectPeerByID(notification.data.id));
-    if (hasPeerHandRaised) {
-      const showCTA = peer?.roleName && (on_stage_exp?.off_stage_roles || [])?.includes(peer.roleName);
-      ToastBatcher.showToast({ notification, type: showCTA ? 'RAISE_HAND_HLS' : 'RAISE_HAND' });
-      console.debug('Metadata updated', notification.data);
-    }
-  }, [isSubscribing, notification, on_stage_exp, roomState, vanillaStore]);
-
-  useDebounce(
-    () => {
-      if (!notification?.data) {
-        return;
-      }
-
-      // Don't show toast message in case of local peer.
-      if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !isSubscribing) {
-        return;
-      }
-
-      const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
-      const peer = vanillaStore.getState(selectPeerByID(notification.data.id));
-      const handRaisedPeers = vanillaStore.getState(selectHandRaisedPeers);
-      if (amIScreenSharing && hasPeerHandRaised) {
-        const title = `${peer?.name} ${
-          handRaisedPeers.length > 1 ? `and ${handRaisedPeers.length - 1} others` : ''
-        } raised hand`;
-        showNotification(title, { icon: logoURL });
-      }
-    },
-    1000,
-    [isSubscribing, notification, roomState, vanillaStore, amIScreenSharing],
-  );
-  return null;
-};

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

@@ -1,42 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-import { Text } from '../../..';
-// @ts-ignore: No implicit Any
-import { ErrorDialog } from '../../primitives/DialogContent';
-
-export const InitErrorModal = () => {
-  const notification = useHMSNotifications(HMSNotificationTypes.ERROR);
-  const [showModal, setShowModal] = useState(false);
-  const [info, setInfo] = useState({ title: 'Init Error', description: '' });
-
-  useEffect(() => {
-    const data = notification?.data;
-    if (!data || data.action !== 'INIT') {
-      return;
-    }
-    let description;
-    let title;
-    if (data.description.includes('role is invalid')) {
-      description = 'This role does not exist for the given room. Try again with a valid role.';
-      title = 'Invalid Role';
-    } else if (data.description.includes('room is not active')) {
-      title = 'Room is disabled';
-      description =
-        'This room is disabled and cannot be joined. To enable the room, use the 100ms dashboard or the API.';
-    } else {
-      description = data.description;
-      title = 'Init Error';
-    }
-    setInfo({ title, description });
-    setShowModal(true);
-  }, [notification]);
-
-  return (
-    <ErrorDialog open={showModal} onOpenChange={setShowModal} title={info.title}>
-      <Text variant="sm" css={{ wordBreak: 'break-word' }}>
-        {info.description} <br />
-        Current URL - {window.location.href}
-      </Text>
-    </ErrorDialog>
-  );
-};

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

@@ -1,24 +0,0 @@
-import { useEffect } from 'react';
-import { HMSNotificationTypes, selectIsLocalScreenShared } from '@100mslive/hms-video-store';
-import { useAwayNotifications, useHMSNotifications, useHMSStore } from '@100mslive/react-sdk';
-import { useRoomLayout } from '../../provider/roomLayoutProvider';
-import { usePIPWindow } from '../PIP/usePIPWindow';
-
-export const MessageNotifications = () => {
-  const notification = useHMSNotifications(HMSNotificationTypes.NEW_MESSAGE);
-  const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);
-  const logoURL = useRoomLayout()?.logo?.url;
-  const { pipWindow } = usePIPWindow();
-  const { showNotification } = useAwayNotifications();
-
-  useEffect(() => {
-    if (notification && amIScreenSharing && !notification.data?.ignored && !pipWindow) {
-      showNotification(`New message from ${notification.data.senderName}`, {
-        body: notification.data.message,
-        icon: logoURL,
-      });
-    }
-  }, [notification]);
-
-  return null;
-};

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

@@ -1,65 +0,0 @@
-/* eslint-disable no-case-declarations */
-import React, { useCallback } from 'react';
-import { HMSRoleChangeRequest, HMSRoomState, selectRoomState, useCustomEvent, useHMSStore } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-import { AutoplayBlockedModal } from './AutoplayBlockedModal';
-import { ChatNotifications } from './ChatNotifications';
-import { DeviceChangeNotifications } from './DeviceChangeNotifications';
-import { DeviceInUseError } from './DeviceInUseError';
-import { ErrorNotifications } from './ErrorNotifications';
-import { HandRaisedNotifications } from './HandRaisedNotifications';
-import { InitErrorModal } from './InitErrorModal';
-import { MessageNotifications } from './MessageNotifications';
-import { PeerNotifications } from './PeerNotifications';
-import { PermissionErrorNotificationModal } from './PermissionErrorModal';
-import { PollNotificationModal } from './PollNotificationModal';
-import { ReconnectNotifications } from './ReconnectNotifications';
-import { RoleChangeNotification } from './RoleChangeNotification';
-import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';
-import { TrackNotifications } from './TrackNotifications';
-import { TrackUnmuteModal } from './TrackUnmuteModal';
-import { TranscriptionNotifications } from './TranscriptionNotifications';
-// @ts-ignore: No implicit Any
-import { useIsNotificationDisabled } from '../AppData/useUISettings';
-import { ROLE_CHANGE_DECLINED } from '../../common/constants';
-
-export function Notifications() {
-  const roomState = useHMSStore(selectRoomState);
-  const isNotificationDisabled = useIsNotificationDisabled();
-
-  const handleRoleChangeDenied = useCallback((request: HMSRoleChangeRequest & { peerName: string }) => {
-    ToastManager.addToast({
-      title: `${request.peerName} denied your request to join the ${request.role.name} role`,
-      variant: 'error',
-    });
-  }, []);
-
-  useCustomEvent({ type: ROLE_CHANGE_DECLINED, onEvent: handleRoleChangeDenied });
-
-  if (isNotificationDisabled) {
-    return null;
-  }
-
-  return (
-    <>
-      <TrackUnmuteModal />
-      <TrackBulkUnmuteModal />
-      <TrackNotifications />
-      {roomState === HMSRoomState.Connected ? <PeerNotifications /> : null}
-      <RoleChangeNotification />
-      <PollNotificationModal />
-      <MessageNotifications />
-      <DeviceChangeNotifications />
-      <ReconnectNotifications />
-      <ErrorNotifications />
-      <AutoplayBlockedModal />
-      <PermissionErrorNotificationModal />
-      <InitErrorModal />
-      <ChatNotifications />
-      <HandRaisedNotifications />
-      <TranscriptionNotifications />
-      <DeviceInUseError />
-    </>
-  );
-}

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

@@ -1,52 +0,0 @@
-import { useEffect } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
-import { ToastBatcher } from '../Toast/ToastBatcher';
-// @ts-ignore: No implicit Any
-import { useSetSubscribedChatSelector, useSubscribedNotifications } from '../AppData/useUISettings';
-// @ts-ignore: No implicit Any
-import { CHAT_SELECTOR, SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
-
-const notificationTypes = [
-  HMSNotificationTypes.PEER_JOINED,
-  HMSNotificationTypes.PEER_LEFT,
-  HMSNotificationTypes.NAME_UPDATED,
-];
-
-export const PeerNotifications = () => {
-  const notification = useHMSNotifications(notificationTypes);
-  const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
-  const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
-  const [selectedPeer, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER);
-
-  useEffect(() => {
-    if (!notification?.data) {
-      return;
-    }
-
-    console.debug(`[${notification.type}]`, notification);
-    switch (notification.type) {
-      case HMSNotificationTypes.PEER_JOINED:
-        if (!isPeerJoinSubscribed) {
-          return;
-        }
-        break;
-      case HMSNotificationTypes.PEER_LEFT:
-        if (selectedPeer.id === notification.data.id) {
-          setPeerSelector({});
-        }
-        if (!isPeerLeftSubscribed) {
-          return;
-        }
-        break;
-      case HMSNotificationTypes.NAME_UPDATED:
-        console.log(notification.data.id + ' changed their name to ' + notification.data.name);
-        return;
-      default:
-        return;
-    }
-    ToastBatcher.showToast({ notification });
-  }, [notification]);
-
-  return null;
-};