@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.1

package/src/Prebuilt/components/conference.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { usePrevious } from 'react-use';
 import {
   HMSRoomState,
@@ -15,36 +15,37 @@ import { ActivatedPIP } from './PIP/PIPComponent';
 import { PictureInPicture } from './PIP/PIPManager';
 import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
-import { ConferenceMainView } from '../layouts/mainView';
+import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import { RoleChangeRequestModal } from './RoleChangeRequestModal';
-import { useAuthToken, useIsHeadless, useSetAppDataByKey } from './AppData/useUISettings';
-import { useNavigation } from './hooks/useNavigation';
-import { useSkipPreview } from './hooks/useSkipPreview';
-import { APP_DATA, EMOJI_REACTION_TYPE, isAndroid, isIOS, isIPadOS } from '../common/constants';
+import {
+  useRoomLayoutConferencingScreen,
+  useRoomLayoutPreviewScreen,
+} from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useAuthToken, useSetAppDataByKey } from './AppData/useUISettings';
+import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
 
 const Conference = () => {
-  const navigate = useNavigation();
+  const navigate = useNavigate();
   const { roomId, role } = useParams();
-  const isHeadless = useIsHeadless();
+  const { userName, endpoints } = useHMSPrebuiltContext();
+  const screenProps = useRoomLayoutConferencingScreen();
+  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const roomState = useHMSStore(selectRoomState);
   const prevState = usePrevious(roomState);
   const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
   const hmsActions = useHMSActions();
   const [hideControls, setHideControls] = useState(false);
   const dropdownList = useHMSStore(selectAppData(APP_DATA.dropdownList));
-  const skipPreview = useSkipPreview();
-  const { showPreview } = useHMSPrebuiltContext();
   const authTokenInAppData = useAuthToken();
   const headerRef = useRef();
   const footerRef = useRef();
+  const isMobileDevice = isAndroid || isIOS || isIPadOS;
   const dropdownListRef = useRef();
-  const performAutoHide = hideControls && (isAndroid || isIOS || isIPadOS);
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-
   const toggleControls = () => {
-    if (dropdownListRef.current?.length === 0) {
+    if (dropdownListRef.current?.length === 0 && isMobileDevice) {
       setHideControls(value => !value);
     }
   };
@@ -56,21 +57,21 @@ const Conference = () => {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
         if (dropdownListRef.current.length === 0) {
-          setHideControls(true);
+          setHideControls(isMobileDevice);
         }
       }, 5000);
     }
     return () => {
       clearTimeout(timeout);
     };
-  }, [dropdownList, hideControls]);
+  }, [dropdownList, hideControls, isMobileDevice]);
 
   useEffect(() => {
     if (!roomId) {
       navigate(`/`);
       return;
     }
-    if (!showPreview) {
+    if (!isPreviewScreenEnabled) {
       return;
     }
     if (
@@ -80,33 +81,24 @@ const Conference = () => {
       if (role) navigate(`/preview/${roomId || ''}/${role}`);
       else navigate(`/preview/${roomId || ''}`);
     }
-  }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, showPreview]);
+  }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
 
   useEffect(() => {
-    if (authTokenInAppData && !isConnectedToRoom && !showPreview && roomState !== HMSRoomState.Connecting) {
+    if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting) {
       hmsActions
         .join({
-          userName: 'Test',
+          userName,
           authToken: authTokenInAppData,
-          initEndpoint: process.env.REACT_APP_ENV
-            ? `https://${process.env.REACT_APP_ENV}-init.100ms.live/init`
-            : undefined,
+          initEndpoint: endpoints?.init,
           initialSettings: {
-            isAudioMuted: skipPreview,
-            isVideoMuted: skipPreview,
+            isAudioMuted: !isPreviewScreenEnabled,
+            isVideoMuted: !isPreviewScreenEnabled,
             speakerAutoSelectionBlacklist: ['Yeti Stereo Microphone'],
           },
         })
         .catch(console.error);
     }
-  }, [authTokenInAppData, skipPreview, hmsActions, isConnectedToRoom, showPreview, roomState]);
-
-  useEffect(() => {
-    // beam doesn't need to store messages, saves on unnecessary store updates in large calls
-    if (isHeadless) {
-      hmsActions.ignoreMessageTypes(['chat', EMOJI_REACTION_TYPE]);
-    }
-  }, [isHeadless, hmsActions]);
+  }, [authTokenInAppData, endpoints?.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
 
   useEffect(() => {
     return () => {
@@ -115,69 +107,78 @@ const Conference = () => {
   }, []);
 
   if (!isConnectedToRoom) {
-    return <FullPageProgress loadingText="Joining..." />;
-  }
-
-  if (isHLSStarted) {
-    return <FullPageProgress loadingText="Starting live stream..." />;
+    return <FullPageProgress text="Joining..." />;
   }
 
   return (
-    <Flex css={{ size: '100%', overflow: 'hidden' }} direction="column">
-      {!isHeadless && (
-        <Box
-          ref={headerRef}
-          css={{
-            h: '$18',
-            transition: 'margin 0.3s ease-in-out',
-            marginTop: performAutoHide ? `-${headerRef.current?.clientHeight}px` : 'none',
-            '@md': {
-              h: '$17',
-            },
-          }}
-          data-testid="header"
-        >
-          <Header />
+    <>
+      {isHLSStarted ? (
+        <Box css={{ position: 'fixed', zIndex: 100, w: '100%', h: '100%', left: 0, top: 0 }}>
+          <FullPageProgress text="Starting live stream..." css={{ opacity: 0.8, bg: '$background_dim' }} />
         </Box>
-      )}
-      <Box
-        css={{
-          w: '100%',
-          flex: '1 1 0',
-          minHeight: 0,
-          px: '$10',
-          paddingBottom: 'env(safe-area-inset-bottom)',
-          '@lg': {
-            px: '$4',
-          },
-        }}
-        id="conferencing"
-        data-testid="conferencing"
-        onClick={toggleControls}
-      >
-        <ConferenceMainView />
-      </Box>
-      {!isHeadless && (
+      ) : null}
+      <Flex css={{ size: '100%', overflow: 'hidden' }} direction="column">
+        {!screenProps.hideSections.includes('header') && (
+          <Box
+            ref={headerRef}
+            css={{
+              h: '$18',
+              transition: 'margin 0.3s ease-in-out',
+              marginTop: hideControls ? `-${headerRef.current?.clientHeight}px` : 'none',
+              '@md': {
+                h: '$17',
+              },
+            }}
+            data-testid="header"
+          >
+            <Header elements={screenProps.elements} screenType={screenProps.screenType} />
+          </Box>
+        )}
         <Box
-          ref={footerRef}
           css={{
-            flexShrink: 0,
-            maxHeight: '$24',
-            transition: 'margin 0.3s ease-in-out',
-            marginBottom: performAutoHide ? `-${footerRef.current?.clientHeight}px` : undefined,
-            '@md': {
-              maxHeight: 'unset',
+            w: '100%',
+            flex: '1 1 0',
+            minHeight: 0,
+            px: screenProps?.elements?.video_tile_layout?.grid?.edge_to_edge ? 0 : '$10', // TODO: padding to be controlled by section/element
+            paddingBottom: 'env(safe-area-inset-bottom)',
+            '@lg': {
+              px: 0,
             },
           }}
-          data-testid="footer"
+          id="conferencing"
+          data-testid="conferencing"
+          onClick={toggleControls}
         >
-          <Footer />
+          <VideoStreamingSection
+            screenType={screenProps.screenType}
+            elements={screenProps.elements}
+            hideControls={hideControls}
+          />
         </Box>
-      )}
-      <RoleChangeRequestModal />
-      <HLSFailureModal />
-      <ActivatedPIP />
-    </Flex>
+        {!screenProps.hideSections.includes('footer') && (
+          <Box
+            ref={footerRef}
+            css={{
+              flexShrink: 0,
+              maxHeight: '$24',
+              transition: 'margin 0.3s ease-in-out',
+              bg: '$background_dim',
+              marginBottom: hideControls ? `-${footerRef.current?.clientHeight}px` : undefined,
+              '@md': {
+                maxHeight: 'unset',
+                bg: screenProps.screenType === 'hls_live_streaming' ? 'transparent' : '$background_dim',
+              },
+            }}
+            data-testid="footer"
+          >
+            <Footer elements={screenProps.elements} screenType={screenProps.screenType} />
+          </Box>
+        )}
+        <RoleChangeRequestModal />
+        <HLSFailureModal />
+        <ActivatedPIP />
+      </Flex>
+    </>
   );
 };
 

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

@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useRef } from 'react';
+import {
+  HMSException,
+  selectIsConnectedToRoom,
+  selectPermissions,
+  useHMSActions,
+  useHMSStore,
+  useRecordingStreaming,
+} from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
+import { useSetAppDataByKey } from '../AppData/useUISettings';
+// @ts-ignore: No implicit Any
+import { useShowStreamingUI } from '../../common/hooks';
+// @ts-ignore: No implicit Any
+import { APP_DATA } from '../../common/constants';
+
+export const useAutoStartStreaming = () => {
+  const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+  const permissions = useHMSStore(selectPermissions);
+  const showStreamingUI = useShowStreamingUI();
+  const hmsActions = useHMSActions();
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const { isHLSRunning } = useRecordingStreaming();
+  const streamStartedRef = useRef(false);
+
+  const startHLS = useCallback(async () => {
+    try {
+      if (isHLSStarted || !showStreamingUI || isHLSRunning) {
+        return;
+      }
+      setHLSStarted(true);
+      streamStartedRef.current = true;
+      await hmsActions.startHLSStreaming();
+    } catch (error) {
+      if ((error as HMSException).message?.includes('beam already started')) {
+        return;
+      }
+      streamStartedRef.current = false;
+      setHLSStarted(false);
+    }
+  }, [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI]);
+
+  useEffect(() => {
+    if (!isHLSStarted && !isHLSRunning) {
+      streamStartedRef.current = false;
+    }
+  }, [isHLSStarted, isHLSRunning]);
+
+  useEffect(() => {
+    if (!isConnected || streamStartedRef.current || !permissions?.hlsStreaming) {
+      return;
+    }
+    // Is a streaming kit and broadcaster joins
+    startHLS();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isConnected]);
+};

package/src/Prebuilt/components/hooks/useMetadata.jsx

@@ -1,19 +1,28 @@
 import { useCallback, useState } from 'react';
-import { selectLocalPeerID, selectPeerMetadata, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import {
+  selectLocalPeerID,
+  selectPeerMetadata,
+  useHMSActions,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
 
 export const useMyMetadata = () => {
   const hmsActions = useHMSActions();
   const localPeerId = useHMSStore(selectLocalPeerID);
+  const vanillaStore = useHMSVanillaStore();
   const metaData = useHMSStore(selectPeerMetadata(localPeerId));
   const [isHandRaised, setHandRaised] = useState(metaData?.isHandRaised || false);
   const [isBRBOn, setBRBOn] = useState(metaData?.isBRBOn || false); // BRB = be right back
 
   const update = async updatedFields => {
     try {
-      await hmsActions.changeMetadata(Object.assign(metaData, updatedFields));
+      // get current state from store and merge updated fields
+      const currentMetadata = vanillaStore.getState(selectPeerMetadata(localPeerId));
+      await hmsActions.changeMetadata(Object.assign(currentMetadata, updatedFields));
       return true;
     } catch (error) {
-      console.error('failed to update metadata ', metaData, updatedFields);
+      console.error('failed to update metadata ', updatedFields);
     }
   };
 
@@ -41,6 +50,12 @@ export const useMyMetadata = () => {
     }
   }, [isHandRaised, isBRBOn]); //eslint-disable-line
 
+  const setPrevRole = async role => {
+    await update({
+      prevRole: role,
+    });
+  };
+
   return {
     isHandRaised,
     isBRBOn,
@@ -48,5 +63,6 @@ export const useMyMetadata = () => {
     updateMetaData: update,
     toggleHandRaise,
     toggleBRB,
+    setPrevRole,
   };
 };

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

@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useHMSPrebuiltContext } from '../../AppContext';
+// @ts-ignore: No implicit Any
+import { PictureInPicture } from '../PIP/PIPManager';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+import { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+
+export const useRedirectToLeave = () => {
+  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+  const { onLeave } = useHMSPrebuiltContext();
+  const params = useParams();
+  const navigate = useNavigate();
+
+  const redirect = useCallback(
+    (timeout = 0) => {
+      setTimeout(() => {
+        const prefix = isLeaveScreenEnabled ? '/leave/' : '/';
+        if (params.role) {
+          navigate(prefix + params.roomId + '/' + params.role);
+        } else {
+          navigate(prefix + params.roomId);
+        }
+        PictureInPicture.stop().catch(() => console.error('stopping pip'));
+        ToastManager.clearAllToast();
+        onLeave?.();
+      }, timeout);
+    },
+    [isLeaveScreenEnabled, navigate, onLeave, params.role, params.roomId],
+  );
+
+  return { redirectToLeave: redirect };
+};

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

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { HMSPeer } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
+import { usePinnedTrack } from '../AppData/useUISettings';
+
+export const useRoleProminencePeers = (prominentRoles: string[], peers: HMSPeer[], isInsetEnabled: boolean) => {
+  const pinnedTrack = usePinnedTrack();
+
+  const [prominentPeers, secondaryPeers] = useMemo(() => {
+    return peers.reduce<[HMSPeer[], HMSPeer[]]>(
+      (acc, peer) => {
+        if (pinnedTrack) {
+          if (pinnedTrack.peerId === peer.id) {
+            acc[0].push(peer);
+          } else if (!(isInsetEnabled && peer.isLocal)) {
+            acc[1].push(peer);
+          }
+          return acc;
+        }
+        if (peer.isLocal && isInsetEnabled) {
+          return acc;
+        }
+        if (prominentRoles?.includes(peer.roleName || '')) {
+          acc[0].push(peer);
+        } else {
+          acc[1].push(peer);
+        }
+        return acc;
+      },
+      [[], []],
+    );
+  }, [peers, isInsetEnabled, prominentRoles, pinnedTrack]);
+
+  return {
+    prominentPeers,
+    secondaryPeers,
+  };
+};

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

@@ -0,0 +1,127 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useMeasure, useMedia } from 'react-use';
+import {
+  getPeersWithTiles,
+  HMSPeer,
+  selectTracksMap,
+  TrackWithPeerAndDimensions,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
+import { config as cssConfig } from '../../../Theme';
+
+const aspectRatioConfig = { default: [1 / 1, 4 / 3, 16 / 9], mobile: [1 / 1, 3 / 4, 9 / 16] };
+
+export const usePagesWithTiles = ({ peers, maxTileCount }: { peers: HMSPeer[]; maxTileCount: number }) => {
+  const vanillaStore = useHMSVanillaStore();
+  const tracksMap = vanillaStore.getState(selectTracksMap);
+  const peersWithTiles = useMemo(
+    () => getPeersWithTiles(peers, tracksMap, () => false) as TrackWithPeerAndDimensions[],
+    [peers, tracksMap],
+  );
+  const noOfPages = Math.ceil(peersWithTiles.length / maxTileCount);
+  const pagesList = useMemo(() => {
+    let sliceStart = 0;
+    let remaining = peersWithTiles.length;
+    const list = [];
+    // split into pages
+    for (let i = 0; i < noOfPages; i++) {
+      const count = Math.min(remaining, maxTileCount);
+      list.push(peersWithTiles.slice(sliceStart, sliceStart + count));
+      remaining = remaining - count;
+      sliceStart += count;
+    }
+    return list;
+  }, [peersWithTiles, noOfPages, maxTileCount]);
+  return pagesList;
+};
+
+export const useTileLayout = ({
+  pageList,
+  maxTileCount,
+  edgeToEdge = false,
+}: {
+  pageList: TrackWithPeerAndDimensions[][];
+  maxTileCount: number;
+  edgeToEdge?: boolean;
+}) => {
+  const vanillaStore = useHMSVanillaStore();
+  const [ref, { width, height }] = useMeasure<HTMLDivElement>();
+  const isMobile = useMedia(cssConfig.media.lg);
+  const [pagesWithTiles, setPagesWithTiles] = useState<TrackWithPeerAndDimensions[][]>([]);
+
+  useEffect(() => {
+    if (width === 0 || height === 0) {
+      return;
+    }
+    // calculate dimesions for each page
+    for (const page of pageList) {
+      const noOfTilesInPage = page.length;
+      let maxCols =
+        noOfTilesInPage > 2 && noOfTilesInPage < 9
+          ? Math.ceil(noOfTilesInPage / 2)
+          : Math.ceil(Math.sqrt(noOfTilesInPage));
+      if (isMobile) {
+        maxCols = noOfTilesInPage < 4 ? 1 : Math.min(maxCols, 2);
+      }
+      const maxRows = Math.ceil(noOfTilesInPage / maxCols);
+      let index = 0;
+      // convert the current page to a matrix(grid)
+      const matrix = new Array(maxRows).fill(null).map((_, i) => {
+        const numCols = Math.min(maxCols, noOfTilesInPage - i * maxCols);
+        const rowElements = [];
+        for (let j = 0; j < numCols; j++) {
+          if (index < page.length) {
+            rowElements.push(page[index++]);
+          }
+        }
+        return rowElements;
+      });
+
+      const gap = edgeToEdge && isMobile ? 0 : 8; // gap between flex items
+      const maxHeight = height - (maxRows - 1) * gap;
+      const maxRowHeight = maxHeight / matrix.length;
+      const aspectRatios =
+        isMobile && (noOfTilesInPage === 1 || noOfTilesInPage > 3)
+          ? aspectRatioConfig.mobile
+          : aspectRatioConfig.default;
+      // calculate height and width of each tile in a row
+      for (const row of matrix) {
+        let tileWidth = (width - (row.length - 1) * gap) / row.length;
+        let tileHeight = 0;
+        if (edgeToEdge) {
+          tileHeight = maxRowHeight;
+        } else {
+          const calcHeights = aspectRatios.map(aR => tileWidth / aR);
+          for (const h of calcHeights) {
+            if (h < maxRowHeight) {
+              if (tileHeight < h) {
+                tileHeight = h;
+              }
+            }
+          }
+
+          // tileHeight is not calculated as it could be exceeding the max possible height
+          // find the max possible width instead
+          if (tileHeight === 0) {
+            tileHeight = maxRowHeight;
+            const calcWidths = aspectRatios.map(aR => tileHeight * aR);
+            tileWidth = 0;
+            for (const w of calcWidths) {
+              if (w < width) {
+                if (tileWidth < w) {
+                  tileWidth = w;
+                }
+              }
+            }
+          }
+        }
+        for (let i = 0; i < row.length; i++) {
+          row[i].width = tileWidth;
+          row[i].height = tileHeight;
+        }
+      }
+    }
+    setPagesWithTiles([...pageList]);
+  }, [width, height, maxTileCount, pageList, vanillaStore, isMobile, edgeToEdge]);
+  return { pagesWithTiles, ref };
+};

package/src/Prebuilt/components/hooks/useVideoTileLayout.ts

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react';
+
+type TileContextType = {
+  enableSpotlightingPeer: boolean;
+  hideParticipantNameOnTile?: boolean;
+  roundedVideoTile?: boolean;
+  hideAudioMuteOnTile?: boolean;
+  hideAudioLevelOnTile?: boolean;
+  objectFit?: 'cover' | 'contain';
+  hideMetadataOnTile?: boolean;
+};
+
+export const VideoTileContext = React.createContext<TileContextType>({
+  enableSpotlightingPeer: true,
+  hideParticipantNameOnTile: false,
+  roundedVideoTile: true,
+  hideAudioMuteOnTile: false,
+  hideAudioLevelOnTile: false,
+  objectFit: 'contain',
+  hideMetadataOnTile: false,
+});
+
+export const useVideoTileContext = () => {
+  const context = useContext(VideoTileContext);
+  return context;
+};