diff --git a/packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx b/packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx index b57428bcca..d0e0399ea5 100644 --- a/packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx +++ b/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(); 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?.(); diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx index 8c32d370c1..59f433e3ce 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx @@ -194,7 +194,6 @@ export const Participant = ({ @@ -273,12 +272,10 @@ const ParticipantActions = React.memo( peerId, peerType, role, - isLocal, isHandRaisedAccordion, }: { peerId: string; role: string; - isLocal: boolean; isHandRaisedAccordion?: boolean; peerType: HMSPeerType; }) => { @@ -331,7 +328,7 @@ const ParticipantActions = React.memo( ) : null} - {shouldShowMoreActions && !isLocal ? : null} + {shouldShowMoreActions ? : null} )} diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx index 79ba0d929c..cb6719abf8 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx +++ b/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; }; diff --git a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx index c1471295be..a594978307 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx +++ b/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 diff --git a/packages/roomkit-react/src/Prebuilt/components/Toast/ToastConfig.jsx b/packages/roomkit-react/src/Prebuilt/components/Toast/ToastConfig.jsx index 46b74e319a..ccc5fa1076 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Toast/ToastConfig.jsx +++ b/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: , }; @@ -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: , action: ,