feat: hand raise browser notification when away from call

packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx

@@ -6,6 +6,7 @@ import {
   selectAppData,
   selectIsConnectedToRoom,
   selectRoomState,
+  useAwayNotifications,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
@@ -50,6 +51,7 @@ export const ConferenceScreen = () => {
   const isMobileDevice = isAndroid || isIOS || isIPadOS;
   const dropdownListRef = useRef<string[]>();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+  const { requestPermission } = useAwayNotifications();
 
   // using it in hls stream to show action button when chat is disabled
   const showChat = !!screenProps.elements?.chat;
@@ -99,10 +101,20 @@ export const ConferenceScreen = () => {
             speakerAutoSelectionBlacklist: ['Yeti Stereo Microphone'],
           },
         })
+        .then(() => requestPermission())
         .catch(console.error);
       autoRoomJoined.current = true;
     }
-  }, [authTokenInAppData, endpoints?.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
+  }, [
+    authTokenInAppData,
+    endpoints?.init,
+    hmsActions,
+    isConnectedToRoom,
+    isPreviewScreenEnabled,
+    roomState,
+    userName,
+    requestPermission,
+  ]);
 
   useEffect(() => {
     onJoinFunc?.();

packages/roomkit-react/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx

@@ -1,14 +1,19 @@
 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';
@@ -22,6 +27,9 @@ export const HandRaisedNotifications = () => {
   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) {
@@ -32,6 +40,7 @@ export const HandRaisedNotifications = () => {
     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) {
@@ -41,5 +50,29 @@ export const HandRaisedNotifications = () => {
     }
   }, [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;
 };

packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -8,6 +8,7 @@ import {
   selectRoomState,
   selectVideoTrackByID,
   useAVToggle,
+  useAwayNotifications,
   useHMSStore,
   useParticipants,
   usePreviewJoin,
@@ -100,6 +101,7 @@ const PreviewJoin = ({
     },
     asRole,
   });
+  const { requestPermission } = useAwayNotifications();
   const roomState = useHMSStore(selectRoomState);
   const savePreferenceAndJoin = useCallback(() => {
     setPreviewPreference({
@@ -115,7 +117,7 @@ const PreviewJoin = ({
       if (skipPreview) {
         savePreferenceAndJoin();
       } else {
-        preview();
+        preview().then(() => requestPermission());
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

packages/roomkit-react/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -111,7 +111,7 @@ export const ToastConfig = {
       const count = new Set(notifications.map(notification => notification.data?.id)).size;
       return {
         title: `${notifications[notifications.length - 1].data?.name} ${
-          count > 1 ? `${count} and others` : ''
+          count > 1 ? `and ${count} others` : ''
         } raised hand`,
         icon: <HandIcon />,
       };
@@ -129,7 +129,7 @@ export const ToastConfig = {
       const count = new Set(notifications.map(notification => notification.data?.id)).size;
       return {
         title: `${notifications[notifications.length - 1].data?.name} ${
-          count > 1 ? `${count} and others` : ''
+          count > 1 ? `and ${count} others` : ''
         } raised hand`,
         icon: <HandIcon />,
         action: <HandRaiseAction isSingleHandRaise={false} />,