@100mslive/roomkit-react 0.2.7-alpha.2 → 0.2.7-alpha.4

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

@@ -4,9 +4,11 @@ import {
   HMSNotificationTypes,
   HMSRoleChangeRequest,
   HMSRoomState,
+  selectIsLocalScreenShared,
   selectLocalPeerID,
   selectPeerNameByID,
   selectRoomState,
+  useAwayNotifications,
   useCustomEvent,
   useHMSNotifications,
   useHMSStore,
@@ -14,7 +16,7 @@ import {
 } from '@100mslive/react-sdk';
 import { GroupIcon } from '@100mslive/react-icons';
 import { Box, Button } from '../../..';
-import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
+import { useRoomLayout, useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
@@ -39,13 +41,16 @@ const pollToastKey: Record<string, string> = {};
 export function Notifications() {
   const localPeerID = useHMSStore(selectLocalPeerID);
   const notification = useHMSNotifications();
-  const subscribedNotifications = useSubscribedNotifications();
+  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 handleRoleChangeDenied = useCallback((request: HMSRoleChangeRequest & { peerName: string }) => {
     ToastManager.addToast({
@@ -165,6 +170,14 @@ export function Notifications() {
           delete pollToastKey[notification?.data.id];
         }
         break;
+      case HMSNotificationTypes.NEW_MESSAGE:
+        if (amIScreenSharing) {
+          showNotification(`New message from ${notification.data.senderName}`, {
+            body: notification.data.message,
+            icon: logoURL,
+          });
+        }
+        break;
       default:
         break;
     }

package/src/Prebuilt/components/ScreenShareToggle.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { selectIsAllowedToPublish, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
+import { selectIsAllowedToPublish, useAwayNotifications, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
 import { ShareScreenIcon } from '@100mslive/react-icons';
 import { ShareScreenOptions } from './pdfAnnotator/shareScreenOptions';
 import { Box, Flex } from '../../Layout';
@@ -14,6 +14,7 @@ export const ScreenshareToggle = ({ css = {} }) => {
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
 
   const { amIScreenSharing, screenShareVideoTrackId: video, toggleScreenShare } = useScreenShare();
+  const { requestPermission } = useAwayNotifications();
   const isVideoScreenshare = amIScreenSharing && !!video;
   if (!isAllowedToPublish.screen || !isScreenshareSupported()) {
     return null;
@@ -28,8 +29,9 @@ export const ScreenshareToggle = ({ css = {} }) => {
           active={!isVideoScreenshare}
           css={css}
           disabled={isAudioOnly}
-          onClick={() => {
-            toggleScreenShare();
+          onClick={async () => {
+            await toggleScreenShare();
+            await requestPermission();
           }}
         >
           <Tooltip title={`${!isVideoScreenshare ? 'Start' : 'Stop'} screen sharing`}>