@100mslive/roomkit-react 0.3.5-alpha.0 → 0.3.5-alpha.2

package/src/Prebuilt/components/Footer/WhiteboardToggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useScreenShare, useWhiteboard } from '@100mslive/react-sdk';
+import { selectPeerScreenSharing, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
 import { PencilDrawIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../..';
 // @ts-ignore: No implicit Any
@@ -9,9 +9,8 @@ import { ToastManager } from '../Toast/ToastManager';
 
 export const WhiteboardToggle = () => {
   const { toggle, open, isOwner } = useWhiteboard();
-  const { screenSharingPeerId, amIScreenSharing } = useScreenShare();
-  const remoteScreenShare = screenSharingPeerId && !amIScreenSharing;
-  const disabled = remoteScreenShare || (open && !isOwner);
+  const peerSharing = useHMSStore(selectPeerScreenSharing);
+  const disabled = !!peerSharing || (open && !isOwner);
 
   if (!toggle) {
     return null;
@@ -21,9 +20,7 @@ export const WhiteboardToggle = () => {
     <Tooltip
       key="whiteboard"
       title={
-        remoteScreenShare
-          ? 'Cannot open whiteboard when viewing a shared screen'
-          : `${open ? 'Close' : 'Open'} Whiteboard`
+        peerSharing ? 'Cannot open whiteboard when viewing a shared screen' : `${open ? 'Close' : 'Open'} Whiteboard`
       }
     >
       <IconButton

package/src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx

@@ -1,32 +1,17 @@
 import { useEffect } from 'react';
-import { usePrevious } from 'react-use';
-import { useScreenShare, useWhiteboard } from '@100mslive/react-sdk';
+import { selectPeerScreenSharing, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
 
 /**
- * close existing screenshare or whiteboard when the other is started
+ * close existing whiteboard when a screen is shared
  */
 export const useCloseScreenshareWhiteboard = () => {
-  const { amIScreenSharing, screenSharingPeerId, toggleScreenShare } = useScreenShare();
+  const peerSharing = useHMSStore(selectPeerScreenSharing);
   const { isOwner: isWhiteboardOwner, toggle: toggleWhiteboard } = useWhiteboard();
-  const prevScreenSharer = usePrevious(screenSharingPeerId);
-  const prevWhiteboardOwner = usePrevious(isWhiteboardOwner);
 
-  // if both screenshare and whiteboard are open, close the one that was open earlier
+  // if both screenshare and whiteboard are open, close the whiteboard
   useEffect(() => {
-    if (isWhiteboardOwner && screenSharingPeerId) {
-      if (prevScreenSharer && amIScreenSharing && !prevWhiteboardOwner) {
-        toggleScreenShare?.();
-      } else if (prevWhiteboardOwner && !prevScreenSharer) {
-        toggleWhiteboard?.();
-      }
+    if (isWhiteboardOwner && peerSharing) {
+      toggleWhiteboard?.();
     }
-  }, [
-    isWhiteboardOwner,
-    screenSharingPeerId,
-    amIScreenSharing,
-    prevScreenSharer,
-    prevWhiteboardOwner,
-    toggleScreenShare,
-    toggleWhiteboard,
-  ]);
+  }, [isWhiteboardOwner, toggleWhiteboard, peerSharing]);
 };