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

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

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

@@ -1,144 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useMedia } from 'react-use';
-import {
-  HMSException,
-  HMSNotificationTypes,
-  HMSTrackException,
-  HMSTrackExceptionTrackType,
-  useHMSNotifications,
-} from '@100mslive/react-sdk';
-import { Button, config as cssConfig, Dialog, Flex, Text } from '../../..';
-// @ts-ignore: No implicit Any
-import androidPermissionAlert from '../../images/android-perm-1.png';
-// @ts-ignore: No implicit Any
-import iosPermissions from '../../images/ios-perm-0.png';
-// @ts-ignore: No implicit Any
-import { isAndroid, isIOS } from '../../common/constants';
-
-export function PermissionErrorNotificationModal() {
-  const notification = useHMSNotifications(HMSNotificationTypes.ERROR);
-  return <PermissionErrorModal error={notification?.data} />;
-}
-
-export const PermissionErrorModal = ({ error }: { error?: HMSException }) => {
-  const [deviceType, setDeviceType] = useState('');
-  const [isSystemError, setIsSystemError] = useState(false);
-  const isMobile = useMedia(cssConfig.media.md);
-  useEffect(() => {
-    if (
-      !error ||
-      (error?.code !== 3001 && error?.code !== 3011) ||
-      (error?.code === 3001 && error?.message.includes('screen'))
-    ) {
-      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;
-    if (hasAudioVideo) {
-      setDeviceType('camera and microphone');
-    } else if (hasAudio) {
-      setDeviceType('microphone');
-    } else if (hasVideo) {
-      setDeviceType('camera');
-    } else if (hasScreen) {
-      setDeviceType('screen');
-    }
-    setIsSystemError(error.code === 3011);
-  }, [error]);
-
-  return deviceType ? (
-    <Dialog.Root open={!!deviceType}>
-      <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content
-          css={{
-            w: 'min(380px, 90%)',
-            p: '$8',
-            // overlay over Sheet.tsx
-            zIndex: 23,
-          }}
-        >
-          <Dialog.Title
-            css={{
-              borderBottom: '1px solid $border_default',
-            }}
-          >
-            {isMobile && isIOS ? (
-              <img style={{ maxWidth: '100%', maxHeight: '100%' }} src={iosPermissions} alt="iOS Permission flow" />
-            ) : null}
-
-            {/* Images for android */}
-            {isMobile && isAndroid ? (
-              <img
-                src={androidPermissionAlert}
-                style={{ maxWidth: '100%', maxHeight: '100%' }}
-                alt="Android Permission flow "
-              />
-            ) : null}
-
-            <Text variant="h6">We can't access your {deviceType}</Text>
-          </Dialog.Title>
-
-          <Text variant="sm" css={{ pt: '$4', pb: '$10', color: '$on_surface_medium' }}>
-            {/* IOS prompt text */}
-            {isMobile && isIOS
-              ? 'Enable permissions by reloading this page and clicking "Allow" on the pop-up, or change settings from the address bar.'
-              : null}
-
-            {/* Prompt for android devices */}
-            {isMobile && isAndroid
-              ? `To allow other users to see and hear you, click the blocked camera icon in your browser's address bar.`
-              : null}
-
-            {/* Prompt for desktops */}
-            {!isMobile ? `Access to ${deviceType} is required. ` : null}
-
-            {isSystemError && !isMobile
-              ? `Enable permissions for ${deviceType}${deviceType === 'screen' ? 'share' : ''} from sytem settings`
-              : null}
-            {!isSystemError && !isMobile
-              ? `Enable permissions for ${deviceType}${
-                  deviceType === 'screen' ? 'share' : ''
-                } from address bar or browser settings.`
-              : null}
-          </Text>
-
-          {/* CTA section */}
-          {isMobile && isIOS ? (
-            <>
-              <Button onClick={() => window.location.reload()} css={{ w: '100%', mb: '$6' }}>
-                Reload
-              </Button>
-              <Button outlined variant="standard" onClick={() => setDeviceType('')} css={{ w: '100%' }}>
-                Continue anyway
-              </Button>
-            </>
-          ) : null}
-
-          {isMobile && isAndroid ? (
-            <>
-              <Button onClick={() => setDeviceType('')} css={{ w: '100%', mb: '$6' }}>
-                I've allowed access
-              </Button>
-              <Button outlined variant="standard" onClick={() => setDeviceType('')} css={{ w: '100%' }}>
-                Continue anyway
-              </Button>
-            </>
-          ) : null}
-
-          {!isMobile ? (
-            <Flex justify="end" css={{ w: '100%' }}>
-              <Button outlined variant="standard" onClick={() => setDeviceType('')}>
-                Dismiss
-              </Button>
-            </Flex>
-          ) : null}
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  ) : null;
-};

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

@@ -1,71 +0,0 @@
-import React, { useEffect } from 'react';
-import {
-  HMSNotificationTypes,
-  selectLocalPeerID,
-  selectPeerNameByID,
-  useHMSNotifications,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-import { Button } from '../../../Button';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
-import { usePollViewToggle } from '../AppData/useSidepane';
-
-const notificationTypes = [HMSNotificationTypes.POLL_STARTED, HMSNotificationTypes.POLL_STOPPED];
-
-const pollToastKey: Record<string, string> = {};
-
-export const PollNotificationModal = () => {
-  const togglePollView = usePollViewToggle();
-  const localPeerID = useHMSStore(selectLocalPeerID);
-  const vanillaStore = useHMSVanillaStore();
-  const screenProps = useRoomLayoutConferencingScreen();
-
-  const notification = useHMSNotifications(notificationTypes);
-
-  useEffect(() => {
-    switch (notification?.type) {
-      case HMSNotificationTypes.POLL_STARTED:
-        if (notification.data.startedBy !== localPeerID && screenProps.screenType !== 'hls_live_streaming') {
-          const pollStartedBy = vanillaStore.getState(selectPeerNameByID(notification.data.startedBy)) || 'Participant';
-
-          const pollToastID = ToastManager.addToast({
-            title: `${pollStartedBy} started a ${notification.data.type}: ${notification.data.title}`,
-            action: (
-              <Button
-                onClick={() => togglePollView(notification.data.id)}
-                variant="standard"
-                css={{
-                  backgroundColor: '$surface_bright',
-                  fontWeight: '$semiBold',
-                  color: '$on_surface_high',
-                  p: '$xs $md',
-                }}
-              >
-                {notification.data.type === 'quiz' ? 'Answer' : 'Vote'}
-              </Button>
-            ),
-            duration: Infinity,
-          });
-          pollToastKey[notification.data.id] = pollToastID;
-        }
-        break;
-      case HMSNotificationTypes.POLL_STOPPED:
-        {
-          const pollID = notification?.data.id;
-          if (pollID && pollToastKey?.[pollID]) {
-            ToastManager.removeToast(pollToastKey?.[notification.data.id]);
-            delete pollToastKey[notification?.data.id];
-          }
-        }
-        break;
-      default:
-        break;
-    }
-  }, [notification]);
-
-  return null;
-};

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

@@ -1,33 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
-import { ToastConfig } from '../Toast/ToastConfig';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-
-const notificationTypes = [HMSNotificationTypes.RECONNECTED, HMSNotificationTypes.RECONNECTING];
-let notificationId: string | null = null;
-
-export const ReconnectNotifications = () => {
-  const notification = useHMSNotifications(notificationTypes);
-  const prevErrorCode = useRef(0);
-  useEffect(() => {
-    if (!notification) {
-      return;
-    }
-    if (notification.type === HMSNotificationTypes.RECONNECTED) {
-      notificationId = ToastManager.replaceToast(
-        notificationId,
-        ToastConfig.RECONNECTED.single([4005, 4006].includes(prevErrorCode.current)),
-      );
-    } else if (notification.type === HMSNotificationTypes.RECONNECTING) {
-      prevErrorCode.current = notification.data?.code || 0;
-      notificationId = ToastManager.replaceToast(
-        notificationId,
-        ToastConfig.RECONNECTING.single(notification.data?.message),
-      );
-    }
-  }, [notification]);
-
-  return null;
-};

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

@@ -1,24 +0,0 @@
-import { useEffect } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-
-export const RoleChangeNotification = () => {
-  const notification = useHMSNotifications(HMSNotificationTypes.ROLE_UPDATED);
-  const updateRoomLayoutForRole = useUpdateRoomLayout();
-
-  useEffect(() => {
-    if (!notification?.data) {
-      return;
-    }
-    if (notification.data?.isLocal && notification.data?.roleName) {
-      ToastManager.addToast({
-        title: `You are now a ${notification.data.roleName}`,
-      });
-      updateRoomLayoutForRole?.(notification.data.roleName);
-    }
-  }, [notification]);
-
-  return null;
-};