@100mslive/roomkit-react 0.3.22-alpha.0 → 0.3.22-alpha.1

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.22-alpha.0",
+  "version": "0.3.22-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.22-alpha.0",
+    "@100mslive/hls-player": "0.3.22-alpha.1",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.22-alpha.0",
-    "@100mslive/hms-whiteboard": "0.0.12-alpha.0",
-    "@100mslive/react-icons": "0.10.22-alpha.0",
-    "@100mslive/react-sdk": "0.10.22-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.22-alpha.1",
+    "@100mslive/hms-whiteboard": "0.0.12-alpha.1",
+    "@100mslive/react-icons": "0.10.22-alpha.1",
+    "@100mslive/react-sdk": "0.10.22-alpha.1",
     "@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": "d6442187dcb9cfd7be47e4fa96fce78f4ac4f50b"
+  "gitHead": "12d0289650b160b7c4b97cbd4336877a2e4baf4b"
 }

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/components/Header/common.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   DeviceType,
   getAudioDeviceCategory,
+  HMSAudioDeviceCategory,
   selectIsLocalVideoEnabled,
   selectLocalVideoTrackID,
   selectVideoTrackByID,
@@ -79,13 +80,13 @@ export const AudioActions = () => {
   if (!audioFiltered) {
     return null;
   }
-  const deviceCategory = getAudioDeviceCategory(currentSelection.label);
+  const deviceCategory = getAudioDeviceCategory(currentSelection?.label);
   let AudioIcon = <SpeakerIcon />;
-  if (deviceCategory === 'bluetooth') {
+  if (deviceCategory === HMSAudioDeviceCategory.BLUETOOTH) {
     AudioIcon = <BluetoothIcon />;
-  } else if (deviceCategory === 'wired') {
+  } else if (deviceCategory === HMSAudioDeviceCategory.WIRED) {
     AudioIcon = <HeadphonesIcon />;
-  } else if (deviceCategory === 'earpiece') {
+  } else if (deviceCategory === HMSAudioDeviceCategory.EARPIECE) {
     AudioIcon = <TelePhoneIcon />;
   }
   return (
@@ -112,7 +113,7 @@ export const AudioActions = () => {
           await hmsActions.refreshDevices();
         }}
       >
-        <IconButton>{AudioIcon} </IconButton>
+        <IconButton>{AudioIcon}</IconButton>
       </Box>
     </AudioSelectionSheet>
   );

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/DeviceInUseError.tsx

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

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,59 +1,31 @@
 /* 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 { 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();
-  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({
@@ -64,129 +36,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}`,
-        });
-        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;
   }
@@ -197,13 +46,18 @@ export function Notifications() {
       <TrackBulkUnmuteModal />
       <TrackNotifications />
       {roomState === HMSRoomState.Connected ? <PeerNotifications /> : null}
+      <PollNotificationModal />
+      <MessageNotifications />
+      <DeviceChangeNotifications />
       <ReconnectNotifications />
+      <ErrorNotifications />
       <AutoplayBlockedModal />
       <PermissionErrorNotificationModal />
       <InitErrorModal />
       <ChatNotifications />
       <HandRaisedNotifications />
       <TranscriptionNotifications />
+      <DeviceInUseError />
     </>
   );
 }

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

@@ -1,19 +1,28 @@
 import { useEffect } from 'react';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import { ToastBatcher } from '../Toast/ToastBatcher';
 // @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+// @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];
+const notificationTypes = [
+  HMSNotificationTypes.PEER_JOINED,
+  HMSNotificationTypes.PEER_LEFT,
+  HMSNotificationTypes.NAME_UPDATED,
+  HMSNotificationTypes.ROLE_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);
+  const updateRoomLayoutForRole = useUpdateRoomLayout();
 
   useEffect(() => {
     if (!notification?.data) {
@@ -35,11 +44,23 @@ export const PeerNotifications = () => {
           return;
         }
         break;
+      case HMSNotificationTypes.NAME_UPDATED:
+        console.log(notification.data.id + ' changed their name to ' + notification.data.name);
+        return;
+      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);
+        }
+        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 = () => {

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

@@ -9,14 +9,16 @@ import { MicOnIcon } from '@100mslive/react-icons';
 // @ts-ignore: No implicit Any
 import { RequestDialog } from '../../primitives/DialogContent';
 
+const notificationTypes = [
+  HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST,
+  HMSNotificationTypes.ROOM_ENDED,
+  HMSNotificationTypes.REMOVED_FROM_ROOM,
+];
+
 export const TrackBulkUnmuteModal = () => {
   const hmsActions = useHMSActions();
   const [muteNotification, setMuteNotification] = useState<HMSChangeMultiTrackStateRequest | null>(null);
-  const notification = useHMSNotifications([
-    HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST,
-    HMSNotificationTypes.ROOM_ENDED,
-    HMSNotificationTypes.REMOVED_FROM_ROOM,
-  ]);
+  const notification = useHMSNotifications(notificationTypes);
 
   useEffect(() => {
     switch (notification?.type) {