fix: sidebar for whiteboard layout

100mslive · Mar 18, 2024 · 4703903 · 4703903
1 parent 0d6968f
commit 4703903
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 90 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx
@@ -5,12 +5,14 @@ import {
   selectLocalPeerRoleName,
   selectPeers,
   selectPeerScreenSharing,
+  selectWhiteboard,
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { EqualProminence } from './EqualProminence';
 import { RoleProminence } from './RoleProminence';
 import { ScreenshareLayout } from './ScreenshareLayout';
+import { WhiteboardLayout } from './WhiteboardLayout';
 // @ts-ignore: No implicit Any
 import { usePinnedTrack, useSetAppDataByKey } from '../AppData/useUISettings';
 import { VideoTileContext } from '../hooks/useVideoTileLayout';
@@ -40,6 +42,7 @@ export const GridLayout = ({
   hide_metadata_on_tile = false,
 }: GridLayoutProps) => {
   const peerSharing = useHMSStore(selectPeerScreenSharing);
+  const whiteboard = useHMSStore(selectWhiteboard);
   const pinnedTrack = usePinnedTrack();
   const peers = useHMSStore(selectPeers);
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
@@ -53,9 +56,9 @@ export const GridLayout = ({
       )) ||
     pinnedTrack;
   const updatedPeers = useMemo(() => {
-    // remove screenshare peer from active speaker sorting
-    if (activeScreensharePeerId) {
-      return peers.filter(peer => peer.id !== activeScreensharePeerId);
+    // remove screenshare/whiteboard peer from active speaker sorting
+    if (activeScreensharePeerId || whiteboard?.open) {
+      return peers.filter(peer => peer.id !== activeScreensharePeerId || peer.customerUserId !== whiteboard?.owner);
     }
     if (isInsetEnabled) {
       const isLocalPeerPinned = localPeerID === pinnedTrack?.peerId;
@@ -67,7 +70,16 @@ export const GridLayout = ({
       }
     }
     return peers;
-  }, [isInsetEnabled, activeScreensharePeerId, localPeerRole, localPeerID, prominentRoles, peers, pinnedTrack]);
+  }, [
+    isInsetEnabled,
+    whiteboard,
+    activeScreensharePeerId,
+    localPeerRole,
+    localPeerID,
+    prominentRoles,
+    peers,
+    pinnedTrack,
+  ]);
   const vanillaStore = useHMSVanillaStore();
   const [sortedPeers, setSortedPeers] = useState(updatedPeers);
   const peersSorter = useMemo(() => new PeersSorter(vanillaStore), [vanillaStore]);
@@ -104,6 +116,17 @@ export const GridLayout = ({
         />
       </VideoTileContext.Provider>
     );
+  } else if (whiteboard?.open) {
+    return (
+      <VideoTileContext.Provider value={tileLayout}>
+        <WhiteboardLayout
+          peers={sortedPeers}
+          onPageSize={setPageSize}
+          onPageChange={setMainPage}
+          edgeToEdge={edge_to_edge}
+        />
+      </VideoTileContext.Provider>
+    );
   } else if (isRoleProminence) {
     return (
       <VideoTileContext.Provider value={tileLayout}>

diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx
@@ -0,0 +1,96 @@
+import React, { useEffect, useMemo } from 'react';
+import { useMedia } from 'react-use';
+import { selectPeerByCondition, selectWhiteboard, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
+import { Box } from '../../../Layout';
+import { config as cssConfig } from '../../../Theme';
+import { InsetTile } from '../InsetTile';
+import { SecondaryTiles } from '../SecondaryTiles';
+import { LayoutMode } from '../Settings/LayoutSettings';
+import { LayoutProps } from './interface';
+import { ProminenceLayout } from './ProminenceLayout';
+// @ts-ignore: No implicit Any
+import { useSetUiSettings } from '../AppData/useUISettings';
+// @ts-ignore: No implicit Any
+import { UI_SETTINGS } from '../../common/constants';
+
+const WhiteboardEmbed = () => {
+  const isMobile = useMedia(cssConfig.media.md);
+  const { iframeRef } = useWhiteboard(isMobile);
+
+  return (
+    <Box
+      css={{
+        mx: '$8',
+        flex: '3 1 0',
+        '@lg': {
+          flex: '2 1 0',
+          display: 'flex',
+          alignItems: 'center',
+        },
+      }}
+    >
+      <iframe
+        title="Whiteboard View"
+        ref={iframeRef}
+        style={{
+          width: '100%',
+          height: '100%',
+          border: 0,
+          borderRadius: '0.75rem',
+        }}
+        allow="autoplay; clipboard-write;"
+        referrerPolicy="no-referrer"
+      />
+    </Box>
+  );
+};
+
+export const WhiteboardLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => {
+  const whiteboard = useHMSStore(selectWhiteboard);
+  const whiteboardOwner = useHMSStore(selectPeerByCondition(peer => peer.customerUserId === whiteboard?.owner));
+  const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
+  const isMobile = useMedia(cssConfig.media.md);
+  const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;
+  const secondaryPeers = useMemo(() => {
+    if (layoutMode === LayoutMode.SPOTLIGHT) {
+      return [];
+    }
+    if (isMobile || layoutMode === LayoutMode.SIDEBAR) {
+      return whiteboardOwner
+        ? [whiteboardOwner, ...peers.filter(p => p.id !== whiteboardOwner?.id)] //keep active sharing peer as first tile
+        : peers;
+    }
+    return peers.filter(p => p.id !== whiteboardOwner?.id);
+  }, [whiteboardOwner, peers, isMobile, layoutMode]);
+
+  useEffect(() => {
+    if (isMobile) {
+      setLayoutMode(LayoutMode.GALLERY);
+      return;
+    }
+    if (layoutMode === LayoutMode.SIDEBAR) {
+      return;
+    }
+    setLayoutMode(LayoutMode.SIDEBAR);
+    return () => {
+      // reset to gallery once whiteboard is stopped
+      setLayoutMode(LayoutMode.GALLERY);
+    };
+  }, [isMobile]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <ProminenceLayout.Root edgeToEdge={edgeToEdge} hasSidebar={hasSidebar}>
+      <ProminenceLayout.ProminentSection>
+        <WhiteboardEmbed />
+      </ProminenceLayout.ProminentSection>
+      <SecondaryTiles
+        peers={secondaryPeers}
+        onPageChange={onPageChange}
+        onPageSize={onPageSize}
+        edgeToEdge={edgeToEdge}
+        hasSidebar={hasSidebar}
+      />
+      {layoutMode === LayoutMode.SPOTLIGHT && whiteboardOwner && <InsetTile peerId={whiteboardOwner?.id} />}
+    </ProminenceLayout.Root>
+  );
+};
diff --git a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx
@@ -5,14 +5,7 @@ import {
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
 import { match } from 'ts-pattern';
-import {
-  selectIsConnectedToRoom,
-  selectLocalPeerRoleName,
-  selectPeerScreenSharing,
-  selectWhiteboard,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
+import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 // @ts-ignore: No implicit Any
 import FullPageProgress from '../components/FullPageProgress';
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
@@ -24,7 +17,6 @@ import { PDFView } from './PDFView';
 import SidePane from './SidePane';
 // @ts-ignore: No implicit Any
 import { WaitingView } from './WaitingView';
-import { WhiteboardView } from './WhiteboardView';
 import {
   usePDFConfig,
   useUrlToEmbed,
@@ -50,8 +42,6 @@ export const VideoStreamingSection = ({
 }) => {
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const peerSharing = useHMSStore(selectPeerScreenSharing);
-  const isWhiteboardOpen = useHMSStore(selectWhiteboard)?.open;
 
   const hmsActions = useHMSActions();
   const waitingViewerRole = useWaitingViewerRole();
@@ -89,12 +79,6 @@ export const VideoStreamingSection = ({
     ViewComponent = <PDFView />;
   } else if (urlToIframe) {
     ViewComponent = <EmbedView />;
-  } else if (peerSharing) {
-    // screen share should take preference over whiteboard
-    //@ts-ignore
-    ViewComponent = <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
-  } else if (isWhiteboardOpen) {
-    ViewComponent = <WhiteboardView />;
   } else {
     //@ts-ignore
     ViewComponent = <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/WhiteboardView.tsx b/packages/roomkit-react/src/Prebuilt/layouts/WhiteboardView.tsx