fix: moved role change to notification only

100mslive · Sep 30, 2024 · 2d69955 · 2d69955
1 parent af947d1
commit 2d69955
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 26 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/App.tsx b/packages/roomkit-react/src/Prebuilt/App.tsx
@@ -1,10 +1,5 @@
 import React, { MutableRefObject, useEffect, useRef } from 'react';
-import {
-  HMSNotificationTypes,
-  HMSStatsStoreWrapper,
-  HMSStoreWrapper,
-  IHMSNotifications,
-} from '@100mslive/hms-video-store';
+import { HMSStatsStoreWrapper, HMSStoreWrapper, IHMSNotifications } from '@100mslive/hms-video-store';
 import { Layout, Logo, Screens, Theme, Typography } from '@100mslive/types-prebuilt';
 import { match } from 'ts-pattern';
 import {
@@ -13,7 +8,6 @@ import {
   HMSRoomProvider,
   selectIsConnectedToRoom,
   useHMSActions,
-  useHMSNotifications,
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { AppData } from './components/AppData/AppData';
@@ -35,12 +29,7 @@ import { PreviewScreen } from './components/Preview/PreviewScreen';
 import { ToastContainer } from './components/Toast/ToastContainer';
 import { VBHandler } from './components/VirtualBackground/VBHandler';
 import { Sheet } from './layouts/Sheet';
-import {
-  RoomLayoutContext,
-  RoomLayoutProvider,
-  useRoomLayout,
-  useUpdateRoomLayout,
-} from './provider/roomLayoutProvider';
+import { RoomLayoutContext, RoomLayoutProvider, useRoomLayout } from './provider/roomLayoutProvider';
 import { DialogContainerProvider } from '../context/DialogContext';
 import { Box } from '../Layout';
 import { globalStyles, HMSThemeProvider } from '../Theme';
@@ -270,13 +259,8 @@ HMSPrebuilt.displayName = 'HMSPrebuilt';
 const AppStates = ({ activeState }: { activeState: PrebuiltStates }) => {
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
-  const notification = useHMSNotifications(HMSNotificationTypes.ROLE_UPDATED);
-  const updateRoomLayoutForRole = useUpdateRoomLayout();
   useAutoStartStreaming();
 
-  if (notification && notification.data?.isLocal && notification.data?.roleName) {
-    updateRoomLayoutForRole?.(notification.data.roleName);
-  }
   return match({ activeState, isPreviewScreenEnabled, isLeaveScreenEnabled })
     .with({ activeState: PrebuiltStates.PREVIEW, isPreviewScreenEnabled: true }, () => <PreviewScreen />)
     .with({ activeState: PrebuiltStates.LEAVE, isLeaveScreenEnabled: true }, () => <LeaveScreen />)

diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx
@@ -26,6 +26,7 @@ import { InitErrorModal } from './InitErrorModal';
 import { PeerNotifications } from './PeerNotifications';
 import { PermissionErrorNotificationModal } from './PermissionErrorModal';
 import { ReconnectNotifications } from './ReconnectNotifications';
+import { RoleChangeNotification } from './RoleChangeNotification';
 import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';
 import { TrackNotifications } from './TrackNotifications';
 import { TrackUnmuteModal } from './TrackUnmuteModal';
@@ -109,14 +110,6 @@ export function Notifications() {
           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}`,
-          });
-        }
-        break;
-      }
       case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:
         const track = notification.data?.track;
         if (!notification.data.enabled) {
@@ -197,6 +190,7 @@ export function Notifications() {
       {roomState === HMSRoomState.Connected ? <PeerNotifications /> : null}
       <ReconnectNotifications />
       <AutoplayBlockedModal />
+      <RoleChangeNotification />
       <PermissionErrorNotificationModal />
       <InitErrorModal />
       <ChatNotifications />

diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/RoleChangeNotification.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/RoleChangeNotification.tsx
@@ -0,0 +1,26 @@
+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';
+// @ts-ignore: No implicit Any
+import { useIsNotificationDisabled } from '../AppData/useUISettings';
+
+export const RoleChangeNotification = () => {
+  const notification = useHMSNotifications(HMSNotificationTypes.ROLE_UPDATED);
+  const isNotificationDisabled = useIsNotificationDisabled();
+  const updateRoomLayoutForRole = useUpdateRoomLayout();
+
+  useEffect(() => {
+    if (notification && !isNotificationDisabled) {
+      ToastManager.addToast({
+        title: `You are now a ${notification.data.roleName}`,
+      });
+    }
+    if (notification && notification.data?.isLocal && notification.data?.roleName) {
+      updateRoomLayoutForRole?.(notification.data.roleName);
+    }
+  }, [notification, isNotificationDisabled]);
+
+  return null;
+};