@100mslive/roomkit-react 0.3.3-alpha.0 → 0.3.3-alpha.10

package/src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx

@@ -0,0 +1,95 @@
+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';
+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>
+  );
+};

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

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

package/src/Prebuilt/layouts/HLSView.jsx

@@ -15,7 +15,7 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-import { BackwardArrowIcon, ColoredHandIcon, ForwardArrowIcon, GoLiveIcon } from '@100mslive/react-icons';
+import { ColoredHandIcon, GoLiveIcon } from '@100mslive/react-icons';
 import { ChatToggle } from '../components/Footer/ChatToggle';
 import { HlsStatsOverlay } from '../components/HlsStatsOverlay';
 import { HMSVideoPlayer } from '../components/HMSVideo';
@@ -42,7 +42,7 @@ import { APP_DATA, EMOJI_REACTION_TYPE, POLL_STATE, POLL_VIEWS, SIDE_PANE_OPTION
 let hlsPlayer;
 const toastMap = {};
 
-const ToggleChat = () => {
+const ToggleChat = ({ isFullScreen = false }) => {
   const { elements } = useRoomLayoutConferencingScreen();
   const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
@@ -51,7 +51,10 @@ const ToggleChat = () => {
   const hmsActions = useHMSActions();
 
   useEffect(() => {
-    match({ sidepane, isMobile, showChat })
+    match({ sidepane, isMobile, showChat, isFullScreen })
+      .with({ isFullScreen: true }, () => {
+        hmsActions.setAppData(APP_DATA.sidePane, '');
+      })
       .with({ isMobile: true, showChat: true, sidepane: P.when(value => !value) }, () => {
         toggleChat();
       })
@@ -61,12 +64,13 @@ const ToggleChat = () => {
       .otherwise(() => {
         //do nothing
       });
-  }, [sidepane, isMobile, toggleChat, showChat, hmsActions]);
+  }, [sidepane, isMobile, toggleChat, showChat, hmsActions, isFullScreen]);
   return null;
 };
 const HLSView = () => {
   const videoRef = useRef(null);
   const hlsViewRef = useRef();
+  const { elements } = useRoomLayoutConferencingScreen();
   const hlsState = useHMSStore(selectHLSState);
   const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
   const notification = useHMSNotifications(HMSNotificationTypes.POLL_STOPPED);
@@ -81,7 +85,11 @@ const HLSView = () => {
   const [hasCaptions, setHasCaptions] = useState(false);
   const [currentSelectedQuality, setCurrentSelectedQuality] = useState(null);
   const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState(false);
-  const [isSeekEnabled, setIsSeekEnabled] = useState(false);
+  const [hoverControlsVisible, setHoverControlsVisible] = useState({
+    seekForward: false,
+    pausePlay: false,
+    seekBackward: false,
+  });
   const [isPaused, setIsPaused] = useState(false);
   const [show, toggle] = useToggle(false);
   const lastHlsUrl = usePrevious(hlsUrl);
@@ -93,6 +101,8 @@ const HLSView = () => {
   const controlsTimerRef = useRef();
   const [seekProgress, setSeekProgress] = useState(false);
   const isFullScreenSupported = screenfull.isEnabled;
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const showChat = !!elements?.chat;
 
   const isMobile = useMedia(config.media.md);
   const isLandscape = useIsLandscape();
@@ -233,7 +243,19 @@ const HLSView = () => {
       setIsVideoLive(isLive);
     };
 
-    const playbackEventHandler = data => setIsPaused(data.state === HLSPlaybackState.paused);
+    const playbackEventHandler = data => {
+      setIsPaused(data.state === HLSPlaybackState.paused);
+      setHoverControlsVisible({
+        ...hoverControlsVisible,
+        pausePlay: true,
+      });
+      setTimeout(() => {
+        setHoverControlsVisible({
+          ...hoverControlsVisible,
+          pausePlay: false,
+        });
+      }, 2000);
+    };
     const captionEnabledEventHandler = isCaptionEnabled => {
       setIsCaptionEnabled(isCaptionEnabled);
     };
@@ -314,28 +336,63 @@ const HLSView = () => {
     };
   }, [controlsVisible, isFullScreen, seekProgress, qualityDropDownOpen]);
 
-  const onSeekTo = useCallback(seek => {
-    hlsPlayer?.seekTo(videoRef.current?.currentTime + seek);
-  }, []);
+  const onSeekTo = useCallback(
+    seek => {
+      match({ isLandscape, isMobile, seek })
+        .with({ seek: -10, isMobile: false, isLandscape: false }, () => {
+          setHoverControlsVisible({ ...hoverControlsVisible, seekBackward: true });
+          setTimeout(() => {
+            setHoverControlsVisible({
+              ...hoverControlsVisible,
+              seekBackward: false,
+            });
+          }, 1000);
+        })
+        .with({ seek: 10, isMobile: false, isLandscape: false }, () => {
+          setHoverControlsVisible({ ...hoverControlsVisible, seekForward: true });
+          setTimeout(() => {
+            setHoverControlsVisible({
+              ...hoverControlsVisible,
+              seekForward: false,
+            });
+          }, 1000);
+        })
+        .otherwise(() => null);
+      hlsPlayer?.seekTo(videoRef.current?.currentTime + seek);
+    },
+    [hoverControlsVisible, isLandscape, isMobile],
+  );
   const onDoubleClickHandler = useCallback(
     event => {
       if (!(isMobile || isLandscape) || hlsState?.variants[0]?.playlist_type !== HLSPlaylistType.DVR) {
         return;
       }
       const sidePercentage = (event.screenX * 100) / event.target.clientWidth;
-      setIsSeekEnabled(true);
       // there is space for pause/unpause button
       if (sidePercentage < 45) {
+        setHoverControlsVisible({
+          ...hoverControlsVisible,
+          seekBackward: true,
+        });
         onSeekTo(-10);
       } else {
+        setHoverControlsVisible({
+          ...hoverControlsVisible,
+          seekForward: true,
+        });
         onSeekTo(10);
       }
       setTimeout(() => {
-        setIsSeekEnabled(false);
-      }, 200);
+        setHoverControlsVisible({
+          ...hoverControlsVisible,
+          seekForward: false,
+          seekBackward: false,
+        });
+      }, 1000);
     },
-    [hlsState?.variants, isLandscape, isMobile, onSeekTo],
+    [hlsState?.variants, hoverControlsVisible, isLandscape, isMobile, onSeekTo],
   );
+
   const onClickHandler = useCallback(async () => {
     match({ isMobile, isLandscape, playlist_type: hlsState?.variants[0]?.playlist_type })
       .with({ playlist_type: HLSPlaylistType.DVR, isMobile: false, isLandscape: false }, async () => {
@@ -356,6 +413,7 @@ const HLSView = () => {
       )
       .otherwise(() => null);
   }, [hlsState?.variants, isLandscape, isMobile, isPaused]);
+
   const onHoverHandler = useCallback(
     event => {
       event.preventDefault();
@@ -423,6 +481,7 @@ const HLSView = () => {
       justify="center"
       css={{
         flex: isLandscape ? '2 1 0' : '1 1 0',
+        transition: 'all 0.3s ease-in-out',
         '&:fullscreen': {
           '& video': {
             height: 'unset !important',
@@ -484,53 +543,37 @@ const HLSView = () => {
             }}
           >
             <>
+              {!(isMobile || isLandscape) && (
+                <Flex
+                  align="center"
+                  justify="between"
+                  css={{
+                    position: 'absolute',
+                    bg: '#00000066',
+                    display: 'inline-flex',
+                    gap: '$2',
+                    zIndex: 1,
+                    size: '100%',
+                  }}
+                >
+                  {!showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && (
+                    <HMSVideoPlayer.PlayPauseSeekControls.Overlay
+                      isPaused={isPaused}
+                      showControls={controlsVisible}
+                      hoverControlsVisible={hoverControlsVisible}
+                    />
+                  )}
+                </Flex>
+              )}
               {isMobile || isLandscape ? (
                 <>
-                  <Flex
-                    align="center"
-                    justify="center"
-                    css={{
-                      position: 'absolute',
-                      bg: '#00000066',
-                      display: 'inline-flex',
-                      gap: '$2',
-                      zIndex: 1,
-                      size: '100%',
-                      visibility: controlsVisible ? `` : `hidden`,
-                      opacity: controlsVisible ? `1` : '0',
-                    }}
-                  >
-                    {!showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && (
-                      <>
-                        <HMSVideoPlayer.Seeker
-                          title="backward"
-                          css={{
-                            visibility: isSeekEnabled ? `` : `hidden`,
-                            opacity: isSeekEnabled ? `1` : '0',
-                          }}
-                        >
-                          <BackwardArrowIcon width={32} height={32} />
-                        </HMSVideoPlayer.Seeker>
-                        <Box
-                          css={{
-                            bg: 'rgba(0, 0, 0, 0.6)',
-                            r: '$round',
-                          }}
-                        >
-                          <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} width={48} height={48} />
-                        </Box>
-                        <HMSVideoPlayer.Seeker
-                          title="forward"
-                          css={{
-                            visibility: isSeekEnabled ? `` : `hidden`,
-                            opacity: isSeekEnabled ? `1` : '0',
-                          }}
-                        >
-                          <ForwardArrowIcon width={32} height={32} />
-                        </HMSVideoPlayer.Seeker>
-                      </>
-                    )}
-                  </Flex>
+                  {!showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && (
+                    <HMSVideoPlayer.PlayPauseSeekControls.Overlay
+                      isPaused={isPaused}
+                      showControls={controlsVisible}
+                      hoverControlsVisible={hoverControlsVisible}
+                    />
+                  )}
                   <Flex
                     ref={controlsRef}
                     direction="column"
@@ -553,7 +596,16 @@ const HLSView = () => {
                       }}
                     >
                       <HMSVideoPlayer.Controls.Right>
-                        {isLandscape && <ChatToggle />}
+                        {(isLandscape || (isMobile && isFullScreen)) && showChat && (
+                          <ChatToggle
+                            onClick={() => {
+                              if (isFullScreen) {
+                                toggle();
+                              }
+                              toggleChat();
+                            }}
+                          />
+                        )}
                         {hasCaptions && !isHlsAutoplayBlocked && <HLSCaptionSelector isEnabled={isCaptionEnabled} />}
                         {hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? (
                           <HLSQualitySelector
@@ -606,23 +658,7 @@ const HLSView = () => {
                         <>
                           {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
                             <>
-                              <HMSVideoPlayer.Seeker
-                                onClick={() => {
-                                  onSeekTo(-10);
-                                }}
-                                title="backward"
-                              >
-                                <BackwardArrowIcon width={20} height={20} />
-                              </HMSVideoPlayer.Seeker>
-                              <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} />
-                              <HMSVideoPlayer.Seeker
-                                onClick={() => {
-                                  onSeekTo(10);
-                                }}
-                                title="forward"
-                              >
-                                <ForwardArrowIcon width={20} height={20} />
-                              </HMSVideoPlayer.Seeker>
+                              <HMSVideoPlayer.PlayPauseSeekControls.Button isPaused={isPaused} onSeekTo={onSeekTo} />
                               {!isVideoLive ? <HMSVideoPlayer.Duration /> : null}
                             </>
                           ) : null}
@@ -631,7 +667,8 @@ const HLSView = () => {
                       )}
                       <IconButton
                         css={{ px: '$2' }}
-                        onClick={async () => {
+                        onClick={async e => {
+                          e.stopPropagation();
                           await hlsPlayer?.seekToLivePosition();
                           setIsVideoLive(true);
                         }}
@@ -690,7 +727,7 @@ const HLSView = () => {
           </HMSVideoPlayer.Root>
         </Flex>
       </HMSPlayerContext.Provider>
-      <ToggleChat />
+      <ToggleChat isFullScreen={isFullScreen} />
       {isMobile && !isFullScreen && <HLSViewTitle />}
     </Flex>
   );

package/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} />;