@100mslive/roomkit-react 0.3.3-alpha.3 → 0.3.3-alpha.4

package/src/Prebuilt/components/hooks/{useMetadata.tsx → useMetadata.jsx}

@@ -15,7 +15,7 @@ export const useMyMetadata = () => {
   const metaData = useHMSStore(selectPeerMetadata(localPeerId));
   const isHandRaised = useHMSStore(selectHasPeerHandRaised(localPeerId));
 
-  const update = async (updatedFields: Record<string, any>) => {
+  const update = async updatedFields => {
     try {
       // get current state from store and merge updated fields
       const currentMetadata = vanillaStore.getState(selectPeerMetadata(localPeerId));
@@ -24,7 +24,6 @@ export const useMyMetadata = () => {
     } catch (error) {
       console.error('failed to update metadata ', updatedFields);
     }
-    return false;
   };
 
   const toggleHandRaise = useCallback(async () => {
@@ -44,6 +43,12 @@ export const useMyMetadata = () => {
     }
   }, [metaData?.isBRBOn]); //eslint-disable-line
 
+  const setPrevRole = async role => {
+    await update({
+      prevRole: role,
+    });
+  };
+
   return {
     isHandRaised,
     isBRBOn: !!metaData?.isBRBOn,
@@ -51,5 +56,6 @@ export const useMyMetadata = () => {
     updateMetaData: update,
     toggleHandRaise,
     toggleBRB,
+    setPrevRole,
   };
 };

package/src/Prebuilt/layouts/HLSView.jsx

@@ -15,7 +15,7 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-import { ColoredHandIcon, GoLiveIcon } from '@100mslive/react-icons';
+import { BackwardArrowIcon, ColoredHandIcon, ForwardArrowIcon, 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 = ({ isFullScreen = false }) => {
+const ToggleChat = () => {
   const { elements } = useRoomLayoutConferencingScreen();
   const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
@@ -51,10 +51,7 @@ const ToggleChat = ({ isFullScreen = false }) => {
   const hmsActions = useHMSActions();
 
   useEffect(() => {
-    match({ sidepane, isMobile, showChat, isFullScreen })
-      .with({ isFullScreen: true }, () => {
-        hmsActions.setAppData(APP_DATA.sidePane, '');
-      })
+    match({ sidepane, isMobile, showChat })
       .with({ isMobile: true, showChat: true, sidepane: P.when(value => !value) }, () => {
         toggleChat();
       })
@@ -64,13 +61,12 @@ const ToggleChat = ({ isFullScreen = false }) => {
       .otherwise(() => {
         //do nothing
       });
-  }, [sidepane, isMobile, toggleChat, showChat, hmsActions, isFullScreen]);
+  }, [sidepane, isMobile, toggleChat, showChat, hmsActions]);
   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);
@@ -85,11 +81,7 @@ const HLSView = () => {
   const [hasCaptions, setHasCaptions] = useState(false);
   const [currentSelectedQuality, setCurrentSelectedQuality] = useState(null);
   const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState(false);
-  const [hoverControlsVisible, setHoverControlsVisible] = useState({
-    seekForward: false,
-    pausePlay: false,
-    seekBackward: false,
-  });
+  const [isSeekEnabled, setIsSeekEnabled] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
   const [show, toggle] = useToggle(false);
   const lastHlsUrl = usePrevious(hlsUrl);
@@ -101,8 +93,6 @@ 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();
@@ -243,19 +233,7 @@ const HLSView = () => {
       setIsVideoLive(isLive);
     };
 
-    const playbackEventHandler = data => {
-      setIsPaused(data.state === HLSPlaybackState.paused);
-      setHoverControlsVisible({
-        ...hoverControlsVisible,
-        pausePlay: true,
-      });
-      setTimeout(() => {
-        setHoverControlsVisible({
-          ...hoverControlsVisible,
-          pausePlay: false,
-        });
-      }, 2000);
-    };
+    const playbackEventHandler = data => setIsPaused(data.state === HLSPlaybackState.paused);
     const captionEnabledEventHandler = isCaptionEnabled => {
       setIsCaptionEnabled(isCaptionEnabled);
     };
@@ -336,63 +314,28 @@ const HLSView = () => {
     };
   }, [controlsVisible, isFullScreen, seekProgress, qualityDropDownOpen]);
 
-  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 onSeekTo = useCallback(seek => {
+    hlsPlayer?.seekTo(videoRef.current?.currentTime + seek);
+  }, []);
   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(() => {
-        setHoverControlsVisible({
-          ...hoverControlsVisible,
-          seekForward: false,
-          seekBackward: false,
-        });
-      }, 1000);
+        setIsSeekEnabled(false);
+      }, 200);
     },
-    [hlsState?.variants, hoverControlsVisible, isLandscape, isMobile, onSeekTo],
+    [hlsState?.variants, 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 () => {
@@ -413,7 +356,6 @@ const HLSView = () => {
       )
       .otherwise(() => null);
   }, [hlsState?.variants, isLandscape, isMobile, isPaused]);
-
   const onHoverHandler = useCallback(
     event => {
       event.preventDefault();
@@ -481,7 +423,6 @@ 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',
@@ -543,37 +484,53 @@ 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 ? (
                 <>
-                  {!showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && (
-                    <HMSVideoPlayer.PlayPauseSeekControls.Overlay
-                      isPaused={isPaused}
-                      showControls={controlsVisible}
-                      hoverControlsVisible={hoverControlsVisible}
-                    />
-                  )}
+                  <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>
                   <Flex
                     ref={controlsRef}
                     direction="column"
@@ -596,16 +553,7 @@ const HLSView = () => {
                       }}
                     >
                       <HMSVideoPlayer.Controls.Right>
-                        {(isLandscape || (isMobile && isFullScreen)) && showChat && (
-                          <ChatToggle
-                            onClick={() => {
-                              if (isFullScreen) {
-                                toggle();
-                              }
-                              toggleChat();
-                            }}
-                          />
-                        )}
+                        {isLandscape && <ChatToggle />}
                         {hasCaptions && !isHlsAutoplayBlocked && <HLSCaptionSelector isEnabled={isCaptionEnabled} />}
                         {hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? (
                           <HLSQualitySelector
@@ -658,7 +606,23 @@ const HLSView = () => {
                         <>
                           {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
                             <>
-                              <HMSVideoPlayer.PlayPauseSeekControls.Button isPaused={isPaused} onSeekTo={onSeekTo} />
+                              <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>
                               {!isVideoLive ? <HMSVideoPlayer.Duration /> : null}
                             </>
                           ) : null}
@@ -667,8 +631,7 @@ const HLSView = () => {
                       )}
                       <IconButton
                         css={{ px: '$2' }}
-                        onClick={async e => {
-                          e.stopPropagation();
+                        onClick={async () => {
                           await hlsPlayer?.seekToLivePosition();
                           setIsVideoLive(true);
                         }}
@@ -727,7 +690,7 @@ const HLSView = () => {
           </HMSVideoPlayer.Root>
         </Flex>
       </HMSPlayerContext.Provider>
-      <ToggleChat isFullScreen={isFullScreen} />
+      <ToggleChat />
       {isMobile && !isFullScreen && <HLSViewTitle />}
     </Flex>
   );

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -5,7 +5,14 @@ import {
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
 import { match } from 'ts-pattern';
-import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import {
+  selectIsConnectedToRoom,
+  selectLocalPeerRoleName,
+  selectPeerScreenSharing,
+  selectWhiteboard,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 // @ts-ignore: No implicit Any
 import FullPageProgress from '../components/FullPageProgress';
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
@@ -17,6 +24,7 @@ import { PDFView } from './PDFView';
 import SidePane from './SidePane';
 // @ts-ignore: No implicit Any
 import { WaitingView } from './WaitingView';
+import { WhiteboardView } from './WhiteboardView';
 import {
   usePDFConfig,
   useUrlToEmbed,
@@ -42,6 +50,8 @@ 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();
@@ -79,6 +89,12 @@ 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} />;

package/src/Prebuilt/layouts/WhiteboardView.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useMemo } from 'react';
+import { useMedia } from 'react-use';
+import { selectPeers, selectWhiteboard, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
+import { SecondaryTiles } from '../components/SecondaryTiles';
+import { ProminenceLayout } from '../components/VideoLayouts/ProminenceLayout';
+import { config as cssConfig } from '../../';
+import { Box } from '../../Layout';
+// @ts-ignore: No implicit Any
+import { useSetAppDataByKey } from '../components/AppData/useUISettings';
+import { APP_DATA } from '../common/constants';
+
+const EmbedComponent = () => {
+  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 WhiteboardView = () => {
+  const peers = useHMSStore(selectPeers);
+  const whiteboard = useHMSStore(selectWhiteboard);
+  const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
+
+  const smallTilePeers = useMemo(() => {
+    const smallTilePeers = peers.filter(peer => peer.id !== whiteboard?.owner);
+    return smallTilePeers;
+  }, [peers, whiteboard?.owner]);
+
+  useEffect(() => {
+    setActiveScreenSharePeer(whiteboard?.owner || '');
+    return () => {
+      setActiveScreenSharePeer('');
+    };
+  }, [whiteboard?.owner, setActiveScreenSharePeer]);
+
+  return (
+    <ProminenceLayout.Root>
+      <ProminenceLayout.ProminentSection>
+        <EmbedComponent />
+      </ProminenceLayout.ProminentSection>
+      <SecondaryTiles peers={smallTilePeers} />
+    </ProminenceLayout.Root>
+  );
+};