@100mslive/roomkit-react 0.3.23-alpha.0 → 0.3.24-alpha.0

package/dist/transaction_error.svg

@@ -0,0 +1,12 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M70 68.3333V26.6667C70 24.825 68.5083 23.3333 66.6667 23.3333H13.3333C11.4917 23.3333 10 24.825 10 26.6667V68.3333C10 70.175 11.4917 71.6667 13.3333 71.6667H66.6667C68.5083 71.6667 70 70.175 70 68.3333Z" fill="#272A31"/>
+<path d="M20 31.6667H60C61.8417 31.6667 63.3333 33.1583 63.3333 35C63.3333 36.8417 61.8417 38.3333 60 38.3333H20C18.1583 38.3333 16.6667 36.8417 16.6667 35C16.6667 33.1583 18.1583 31.6667 20 31.6667Z" fill="#8F9099"/>
+<path d="M58.3333 36.6667V10C58.3333 9.08 57.5867 8.33334 56.6667 8.33334H55C55 9.25334 54.2533 10 53.3333 10C52.4133 10 51.6667 9.25334 51.6667 8.33334H48.3333C48.3333 9.25334 47.5867 10 46.6667 10C45.7467 10 45 9.25334 45 8.33334H41.6667C41.6667 9.25334 40.92 10 40 10C39.08 10 38.3333 9.25334 38.3333 8.33334H35C35 9.25334 34.2533 10 33.3333 10C32.4133 10 31.6667 9.25334 31.6667 8.33334H28.3333C28.3333 9.25334 27.5867 10 26.6667 10C25.7467 10 25 9.25334 25 8.33334H23.3333C22.4133 8.33334 21.6667 9.08 21.6667 10V36.6667H58.3333Z" fill="#C74E5B"/>
+<path d="M21.6667 43.3333H58.3333C60.175 43.3333 61.6667 44.825 61.6667 46.6667V50C61.6667 51.8417 60.175 53.3333 58.3333 53.3333H21.6667C19.825 53.3333 18.3333 51.8417 18.3333 50V46.6667C18.3333 44.825 19.825 43.3333 21.6667 43.3333Z" fill="#C5C6D0"/>
+<path d="M60 66.6667H55C54.08 66.6667 53.3333 65.92 53.3333 65V60C53.3333 59.08 54.08 58.3333 55 58.3333H60C60.92 58.3333 61.6667 59.08 61.6667 60V65C61.6667 65.92 60.92 66.6667 60 66.6667Z" fill="#C5C6D0"/>
+<path d="M25 66.6667H20C19.08 66.6667 18.3333 65.92 18.3333 65V60C18.3333 59.08 19.08 58.3333 20 58.3333H25C25.92 58.3333 26.6667 59.08 26.6667 60V65C26.6667 65.92 25.92 66.6667 25 66.6667ZM36.6667 66.6667H31.6667C30.7467 66.6667 30 65.92 30 65V60C30 59.08 30.7467 58.3333 31.6667 58.3333H36.6667C37.5867 58.3333 38.3333 59.08 38.3333 60V65C38.3333 65.92 37.5867 66.6667 36.6667 66.6667ZM48.3333 66.6667H43.3333C42.4133 66.6667 41.6667 65.92 41.6667 65V60C41.6667 59.08 42.4133 58.3333 43.3333 58.3333H48.3333C49.2533 58.3333 50 59.08 50 60V65C50 65.92 49.2533 66.6667 48.3333 66.6667Z" fill="#C5C6D0"/>
+<path d="M58.3333 35H21.6667V38.3333H58.3333V35Z" fill="#C74E5B"/>
+<path opacity="0.05" d="M45.3033 32.315C44.6383 32.315 44.01 32.0567 43.5367 31.585L40 28.0467L36.465 31.5817C35.9917 32.0533 35.365 32.3133 34.6967 32.3133C34.0283 32.3133 33.4 32.0533 32.9267 31.58L31.75 30.4033C31.2783 29.9333 31.0183 29.3033 31.0183 28.6333C31.0183 27.9667 31.2783 27.3383 31.75 26.8667L35.2867 23.3333L31.7517 19.7983C31.28 19.3283 31.02 18.7 31.02 18.0317C31.02 17.3617 31.28 16.7333 31.7517 16.2617L32.93 15.0833C33.4017 14.6117 34.0283 14.3517 34.6983 14.3517C35.3633 14.3517 35.9917 14.61 36.465 15.0817L40 18.62L43.535 15.0833C44.0083 14.6117 44.635 14.3517 45.3033 14.3517C45.9683 14.3517 46.5967 14.61 47.07 15.0817L48.25 16.2617C48.7217 16.7317 48.9817 17.3617 48.9817 18.0317C48.9817 18.6983 48.7217 19.3267 48.25 19.7983L44.7117 23.3333L48.2483 26.87C49.2217 27.84 49.2233 29.425 48.2517 30.4017L47.07 31.5833C46.5983 32.055 45.9717 32.315 45.3033 32.315Z" fill="black"/>
+<path opacity="0.07" d="M45.3033 31.4817C44.8583 31.4817 44.44 31.3083 44.125 30.995L40 26.8683L35.875 30.9933C35.56 31.3083 35.1417 31.48 34.6967 31.48C34.25 31.48 33.8317 31.3067 33.5183 30.9917L32.34 29.8133C32.025 29.4983 31.8517 29.08 31.8517 28.6333C31.8517 28.1883 32.025 27.77 32.34 27.455L36.465 23.3333L32.34 19.2083C32.0267 18.895 31.8517 18.4767 31.8517 18.0317C31.8517 17.585 32.025 17.1667 32.34 16.8517L33.5183 15.6733C33.8317 15.36 34.25 15.1867 34.6967 15.1867C35.1417 15.1867 35.56 15.36 35.875 15.6733L40 19.7983L44.125 15.6717C44.44 15.3567 44.8583 15.185 45.3033 15.185C45.7483 15.185 46.1667 15.3583 46.4817 15.6717L47.66 16.8517C47.975 17.1667 48.1483 17.585 48.1483 18.0317C48.1483 18.4767 47.975 18.895 47.66 19.21L43.5333 23.3333L47.66 27.46C48.31 28.1067 48.31 29.1633 47.6617 29.815L46.4817 30.995C46.1667 31.3083 45.7483 31.4817 45.3033 31.4817Z" fill="black"/>
+<path d="M42.3567 23.3333L47.0717 18.6183C47.3967 18.2933 47.3967 17.765 47.0717 17.44L45.8933 16.2617C45.5667 15.9367 45.04 15.9367 44.715 16.2617L40 20.9767L35.2867 16.2633C34.9617 15.9383 34.4333 15.9383 34.1083 16.2633L32.93 17.4417C32.605 17.7667 32.605 18.295 32.93 18.62L37.6433 23.3333L32.93 28.0467C32.605 28.3717 32.605 28.9 32.93 29.225L34.1083 30.4033C34.4333 30.7283 34.9617 30.7283 35.2867 30.4033L40 25.69L44.715 30.405C45.04 30.73 45.5683 30.73 45.8933 30.405L47.0717 29.2267C47.3967 28.9 47.3967 28.3733 47.0717 28.0483L42.3567 23.3333Z" fill="#FFEDEC"/>
+</svg>

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.23-alpha.0",
+  "version": "0.3.24-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.23-alpha.0",
+    "@100mslive/hls-player": "0.3.24-alpha.0",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.23-alpha.0",
-    "@100mslive/hms-whiteboard": "0.0.13-alpha.0",
-    "@100mslive/react-icons": "0.10.23-alpha.0",
-    "@100mslive/react-sdk": "0.10.23-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.24-alpha.0",
+    "@100mslive/hms-whiteboard": "0.0.14-alpha.0",
+    "@100mslive/react-icons": "0.10.24-alpha.0",
+    "@100mslive/react-sdk": "0.10.24-alpha.0",
     "@100mslive/types-prebuilt": "0.12.12",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -99,7 +99,7 @@
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toast": "1.0.0",
     "@radix-ui/react-tooltip": "1.0.6",
-    "@stitches/react": "^1.2.8",
+    "@stitches/react": "1.3.1-1",
     "emoji-mart": "^5.2.2",
     "eventemitter2": "^6.4.9",
     "lodash.merge": "^4.6.2",
@@ -117,5 +117,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "519ee1ffd855daaa629eccf2176898fdf0d52358"
+  "gitHead": "8d5f8d40926c57adca1b1c3652674b67175acd4c"
 }

package/src/Avatar/Avatar.tsx

@@ -13,7 +13,7 @@ export const StyledAvatar = styled('div', {
   ...flexCenter,
   color: '$colors$on_primary_high',
   fontFamily: '$sans',
-  aspectRatio: 1,
+  aspectRatio: '1',
   fontWeight: 600,
   fontSize: '$space$9',
   variants: {

package/src/Popover/Popover.stories.tsx

@@ -32,7 +32,7 @@ const Template: ComponentStory<typeof Popover.Root> = () => (
         <Button
           variant="standard"
           css={{
-            aspectRatio: 1,
+            aspectRatio: '1',
             r: '$round',
             p: '$2 $2',
             bg: '$background_default',

package/src/Prebuilt/App.tsx

@@ -13,14 +13,12 @@ import {
 import { AppData } from './components/AppData/AppData';
 // @ts-ignore: No implicit Any
 import AuthToken from './components/AuthToken';
-import { ConferenceScreen } from './components/ConferenceScreen';
 // @ts-ignore: No implicit Any
 import { ErrorBoundary } from './components/ErrorBoundary';
 // @ts-ignore: No implicit Any
 import { Init } from './components/init/Init';
 // @ts-ignore: No implicit Any
 import { KeyboardHandler } from './components/Input/KeyboardInputManager';
-import { LeaveScreen } from './components/LeaveScreen';
 import { MwebLandscapePrompt } from './components/MwebLandscapePrompt';
 import { Notifications } from './components/Notifications';
 import { PIPProvider } from './components/PIP/PIPProvider';
@@ -50,6 +48,12 @@ import {
 import { FeatureFlags } from './services/FeatureFlags';
 // @ts-ignore: No implicit Any
 import { DEFAULT_PORTAL_CONTAINER } from './common/constants';
+const LeaveScreen = React.lazy(() =>
+  import('./components/LeaveScreen').then(module => ({ default: module.LeaveScreen })),
+);
+const ConferenceScreen = React.lazy(() =>
+  import('./components/ConferenceScreen').then(module => ({ default: module.ConferenceScreen })),
+);
 
 export type HMSPrebuiltOptions = {
   userName?: string;

package/src/Prebuilt/components/Chat/Chat.tsx

@@ -1,4 +1,4 @@
-import React, { MutableRefObject, useCallback, useRef } from 'react';
+import React, { MutableRefObject, Suspense, useCallback, useRef } from 'react';
 import { useMedia } from 'react-use';
 import { VariableSizeList } from 'react-window';
 import { selectSessionStore, selectUnreadHMSMessagesCount } from '@100mslive/hms-video-store';
@@ -8,10 +8,6 @@ import { ChevronDownIcon } from '@100mslive/react-icons';
 import { Button } from '../../../Button';
 import { Box, Flex } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
-// @ts-ignore: No implicit any
-import { EmojiReaction } from '../EmojiReaction';
-import { MoreSettings } from '../MoreSettings/MoreSettings';
-import { RaiseHand } from '../RaiseHand';
 import { ChatBody } from './ChatBody';
 import { ChatFooter } from './ChatFooter';
 import { ChatBlocked, ChatPaused } from './ChatStates';
@@ -21,6 +17,12 @@ import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLay
 import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { SESSION_STORE_KEY, SIDE_PANE_OPTIONS } from '../../common/constants';
+const MoreSettings = React.lazy(() =>
+  import('../MoreSettings/MoreSettings').then(module => ({ default: module.MoreSettings })),
+);
+const RaiseHand = React.lazy(() => import('../RaiseHand').then(module => ({ default: module.RaiseHand })));
+// @ts-ignore: No implicit any
+const EmojiReaction = React.lazy(() => import('../EmojiReaction').then(module => ({ default: module.EmojiReaction })));
 
 export const Chat = () => {
   const { elements, screenType } = useRoomLayoutConferencingScreen();
@@ -65,10 +67,10 @@ export const Chat = () => {
         <ChatPaused />
         <ChatBlocked />
         {streaming && (!isChatEnabled || isLocalPeerBlacklisted) && (
-          <>
+          <Suspense fallback={<></>}>
             <RaiseHand css={{ bg: '$surface_default' }} />
             <MoreSettings elements={elements} screenType={screenType} />
-          </>
+          </Suspense>
         )}
       </Flex>
       {isMobile && elements?.chat?.is_overlay && !streaming ? <PinnedMessage /> : null}
@@ -129,7 +131,9 @@ export const Chat = () => {
               .otherwise(() => ({})),
           }}
         >
-          <EmojiReaction />
+          <Suspense fallback={<></>}>
+            <EmojiReaction />
+          </Suspense>
         </Box>
       )}
     </Flex>

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
-import data from '@emoji-mart/data';
+import data from '@emoji-mart/data/sets/14/apple.json';
 import Picker from '@emoji-mart/react';
 import { HMSException, selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons';

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

@@ -43,6 +43,8 @@ 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';
@@ -94,6 +96,7 @@ export const MwebOptions = ({
   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);
@@ -269,7 +272,15 @@ export const MwebOptions = ({
               <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}
@@ -316,6 +327,8 @@ export const MwebOptions = ({
         </Sheet.Content>
       </Sheet.Root>
       <SettingsModal open={openSettingsSheet} onOpenChange={setOpenSettingsSheet} screenType={screenType} />
+      <StatsForNerds open={openStatsForNerdsSheet} onOpenChange={setOpenStatsForNerdsSheet} />
+
       {openModals.has(MODALS.MUTE_ALL) && (
         <MuteAllModal onOpenChange={(value: boolean) => updateState(MODALS.MUTE_ALL, value)} isMobile />
       )}

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

@@ -0,0 +1,18 @@
+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/ErrorNotifications.tsx

@@ -0,0 +1,56 @@
+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/MessageNotifications.tsx

@@ -0,0 +1,24 @@
+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,71 +1,32 @@
 /* eslint-disable no-case-declarations */
-import React, { useCallback, useEffect } from 'react';
-import {
-  HMSNotificationTypes,
-  HMSRoleChangeRequest,
-  HMSRoomState,
-  selectIsLocalScreenShared,
-  selectLocalPeerID,
-  selectPeerNameByID,
-  selectRoomState,
-  useAwayNotifications,
-  useCustomEvent,
-  useHMSNotifications,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-import { GroupIcon } from '@100mslive/react-icons';
-import { Box, Button } from '../../..';
-import { useRoomLayout, useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
+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';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
-import { usePollViewToggle } from '../AppData/useSidepane';
-// @ts-ignore: No implicit Any
-import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppData/useUISettings';
-import { usePIPWindow } from '../PIP/usePIPWindow';
+import { useIsNotificationDisabled } from '../AppData/useUISettings';
 import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 
-const pollToastKey: Record<string, string> = {};
-
 export function Notifications() {
-  const localPeerID = useHMSStore(selectLocalPeerID);
-  const notification = useHMSNotifications([
-    HMSNotificationTypes.NAME_UPDATED,
-    HMSNotificationTypes.ERROR,
-    HMSNotificationTypes.ROLE_UPDATED,
-    HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST,
-    HMSNotificationTypes.REMOVED_FROM_ROOM,
-    HMSNotificationTypes.ROOM_ENDED,
-    HMSNotificationTypes.DEVICE_CHANGE_UPDATE,
-    HMSNotificationTypes.POLL_STARTED,
-    HMSNotificationTypes.POLL_STOPPED,
-    HMSNotificationTypes.NEW_MESSAGE,
-  ]);
-  const subscribedNotifications = useSubscribedNotifications() || {};
   const roomState = useHMSStore(selectRoomState);
-  const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
-  const screenProps = useRoomLayoutConferencingScreen();
-  const vanillaStore = useHMSVanillaStore();
-  const togglePollView = usePollViewToggle();
-  const { showNotification } = useAwayNotifications();
-  const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);
-  const logoURL = useRoomLayout()?.logo?.url;
-  const { pipWindow } = usePIPWindow();
 
   const handleRoleChangeDenied = useCallback((request: HMSRoleChangeRequest & { peerName: string }) => {
     ToastManager.addToast({
@@ -76,130 +37,6 @@ export function Notifications() {
 
   useCustomEvent({ type: ROLE_CHANGE_DECLINED, onEvent: handleRoleChangeDenied });
 
-  useEffect(() => {
-    if (!notification || isNotificationDisabled) {
-      return;
-    }
-    switch (notification.type) {
-      case HMSNotificationTypes.NAME_UPDATED:
-        console.log(notification.data.id + ' changed their name to ' + notification.data.name);
-        break;
-      case HMSNotificationTypes.ERROR:
-        if (notification.data?.isTerminal && notification.data?.action !== 'INIT') {
-          if ([500, 6008].includes(notification.data?.code)) {
-            ToastManager.addToast({
-              title: `Error: ${notification.data?.message}`,
-            });
-          } else if (notification.data?.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:
-                notification.data?.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 (notification.data?.code === 3008 || notification.data?.code === 3001 || notification.data?.code === 3011) {
-          return;
-        }
-        if (notification.data?.action === 'INIT') {
-          return;
-        }
-        if (!subscribedNotifications.ERROR) return;
-        ToastManager.addToast({
-          title: `Error: ${notification.data?.message} - ${notification.data?.description}`,
-          duration: 8000,
-        });
-        break;
-      case HMSNotificationTypes.ROLE_UPDATED: {
-        if (notification.data?.isLocal && notification.data?.roleName) {
-          ToastManager.addToast({
-            title: `You are now a ${notification.data.roleName}`,
-          });
-          updateRoomLayoutForRole?.(notification.data.roleName);
-        }
-        break;
-      }
-      case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:
-        const track = notification.data?.track;
-        if (!notification.data.enabled) {
-          ToastManager.addToast({
-            title: `Your ${track.source} ${track.type} was muted by
-                ${notification.data.requestedBy?.name}.`,
-          });
-        }
-        break;
-      case HMSNotificationTypes.REMOVED_FROM_ROOM:
-      case HMSNotificationTypes.ROOM_ENDED:
-        ToastManager.addToast({
-          title: `${notification.message}. 
-              ${notification.data.reason && `Reason: ${notification.data.reason}`}`,
-        });
-        break;
-      case HMSNotificationTypes.DEVICE_CHANGE_UPDATE:
-        ToastManager.addToast({
-          title: notification.message,
-        });
-        break;
-
-      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;
-      case HMSNotificationTypes.NEW_MESSAGE:
-        if (amIScreenSharing && !notification.data?.ignored && !pipWindow) {
-          showNotification(`New message from ${notification.data.senderName}`, {
-            body: notification.data.message,
-            icon: logoURL,
-          });
-        }
-        break;
-      default:
-        break;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED]);
-
   if (isNotificationDisabled) {
     return null;
   }
@@ -210,7 +47,12 @@ export function Notifications() {
       <TrackBulkUnmuteModal />
       <TrackNotifications />
       {roomState === HMSRoomState.Connected ? <PeerNotifications /> : null}
+      <RoleChangeNotification />
+      <PollNotificationModal />
+      <MessageNotifications />
+      <DeviceChangeNotifications />
       <ReconnectNotifications />
+      <ErrorNotifications />
       <AutoplayBlockedModal />
       <PermissionErrorNotificationModal />
       <InitErrorModal />

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

@@ -7,7 +7,11 @@ import { useSetSubscribedChatSelector, useSubscribedNotifications } from '../App
 // @ts-ignore: No implicit Any
 import { CHAT_SELECTOR, SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
 
-const notificationTypes = [HMSNotificationTypes.PEER_JOINED, HMSNotificationTypes.PEER_LEFT];
+const notificationTypes = [
+  HMSNotificationTypes.PEER_JOINED,
+  HMSNotificationTypes.PEER_LEFT,
+  HMSNotificationTypes.NAME_UPDATED,
+];
 
 export const PeerNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
@@ -35,11 +39,14 @@ export const PeerNotifications = () => {
           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, isPeerJoinSubscribed, isPeerLeftSubscribed, selectedPeer.id, setPeerSelector]);
+  }, [notification]);
 
   return null;
 };

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

@@ -0,0 +1,71 @@
+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

@@ -5,11 +5,7 @@ import { ToastConfig } from '../Toast/ToastConfig';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 
-const notificationTypes = [
-  HMSNotificationTypes.RECONNECTED,
-  HMSNotificationTypes.RECONNECTING,
-  HMSNotificationTypes.ERROR,
-];
+const notificationTypes = [HMSNotificationTypes.RECONNECTED, HMSNotificationTypes.RECONNECTING];
 let notificationId: string | null = null;
 
 export const ReconnectNotifications = () => {