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

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

@@ -1,5 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { useMedia } from 'react-use';
 import { selectPeersScreenSharing, useHMSStore } from '@100mslive/react-sdk';
+import { config as cssConfig } from '../../../Theme';
 import { Pagination } from '../Pagination';
 // @ts-ignore: No implicit Any
 import ScreenshareTile from '../ScreenshareTile';
@@ -11,26 +13,40 @@ import { useSetAppDataByKey } from '../AppData/useUISettings';
 // @ts-ignore: No implicit Any
 import { APP_DATA } from '../../common/constants';
 
-export const ScreenshareLayout = ({ peers, onPageChange, onPageSize }: LayoutProps) => {
+export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => {
   const peersSharing = useHMSStore(selectPeersScreenSharing);
   const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
   const [page, setPage] = useState(0);
-  const activeSharePeerId = peersSharing[page]?.id;
-  const secondaryPeers = useMemo(() => peers.filter(p => p.id !== activeSharePeerId), [activeSharePeerId, peers]);
+  const activeSharePeer = peersSharing[page];
+  const isMobile = useMedia(cssConfig.media.md);
+  const secondaryPeers = useMemo(
+    () =>
+      isMobile
+        ? activeSharePeer
+          ? [activeSharePeer, ...peers.filter(p => p.id !== activeSharePeer?.id)]
+          : peers //keep active sharing peer as first tile
+        : peers.filter(p => p.id !== activeSharePeer?.id),
+    [activeSharePeer, peers, isMobile],
+  );
   useEffect(() => {
-    setActiveScreenSharePeer(activeSharePeerId);
+    setActiveScreenSharePeer(isMobile ? '' : activeSharePeer?.id);
     return () => {
       setActiveScreenSharePeer('');
     };
-  }, [activeSharePeerId, setActiveScreenSharePeer]);
+  }, [activeSharePeer?.id, isMobile, setActiveScreenSharePeer]);
 
   return (
-    <ProminenceLayout.Root>
+    <ProminenceLayout.Root edgeToEdge={edgeToEdge}>
       <ProminenceLayout.ProminentSection>
-        <ScreenshareTile peerId={peersSharing[page].id} />
-        <Pagination page={page} onPageChange={setPage} numPages={peersSharing.length} />
+        <ScreenshareTile peerId={peersSharing[page]?.id} />
+        {!edgeToEdge && <Pagination page={page} onPageChange={setPage} numPages={peersSharing.length} />}
       </ProminenceLayout.ProminentSection>
-      <SecondaryTiles peers={secondaryPeers} onPageChange={onPageChange} onPageSize={onPageSize} />
+      <SecondaryTiles
+        peers={secondaryPeers}
+        onPageChange={onPageChange}
+        onPageSize={onPageSize}
+        edgeToEdge={edgeToEdge}
+      />
     </ProminenceLayout.Root>
   );
 };

package/src/Prebuilt/components/VideoLayouts/interface.ts

@@ -2,6 +2,7 @@ import { HMSPeer } from '@100mslive/react-sdk';
 
 export interface LayoutProps {
   isInsetEnabled?: boolean;
+  edgeToEdge?: boolean;
   prominentRoles?: string[];
   peers: HMSPeer[];
   onPageChange?: (page: number) => void;

package/src/Prebuilt/components/VideoTile.jsx

@@ -1,5 +1,4 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMedia } from 'react-use';
 import {
   selectAudioTrackByPeerID,
   selectIsPeerAudioEnabled,
@@ -19,7 +18,7 @@ import TileMenu, { isSameTile } from './TileMenu/TileMenu';
 import { Avatar } from '../../Avatar';
 import { Box, Flex } from '../../Layout';
 import { VideoTileStats } from '../../Stats';
-import { config as cssConfig, keyframes } from '../../Theme';
+import { keyframes } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
@@ -40,6 +39,7 @@ const Tile = ({
   hideParticipantNameOnTile = false,
   roundedVideoTile = true,
   hideAudioMuteOnTile = false,
+  hideMetadataOnTile = false,
 }) => {
   const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID(peerId);
   const track = useHMSStore(trackSelector);
@@ -81,7 +81,6 @@ const Tile = ({
     }
     return 'large';
   }, [width, height]);
-  const isMobile = useMedia(cssConfig.media.md);
 
   return (
     <StyledVideoTile.Root
@@ -103,44 +102,42 @@ const Tile = ({
             <VideoTileStats audioTrackID={audioTrack?.id} videoTrackID={track?.id} peerID={peerId} isLocal={isLocal} />
           ) : null}
 
-          {track ? (
-            <Video
-              trackId={track?.id}
-              attach={isLocal ? undefined : !isAudioOnly}
-              mirror={
-                mirrorLocalVideo &&
-                peerId === localPeerID &&
-                track?.source === 'regular' &&
-                track?.facingMode !== 'environment'
-              }
-              noRadius={!roundedVideoTile}
-              data-testid="participant_video_tile"
-              css={{
-                objectFit,
-                filter: isVideoDegraded ? 'blur($space$2)' : undefined,
-                bg: 'transparent',
-              }}
-            />
-          ) : null}
+          <Video
+            trackId={track?.id}
+            attach={isLocal ? undefined : !isAudioOnly}
+            mirror={
+              mirrorLocalVideo &&
+              peerId === localPeerID &&
+              track?.source === 'regular' &&
+              track?.facingMode !== 'environment'
+            }
+            noRadius={!roundedVideoTile}
+            data-testid="participant_video_tile"
+            css={{
+              objectFit,
+              filter: isVideoDegraded ? 'blur($space$2)' : undefined,
+              bg: 'transparent',
+            }}
+          />
+
           {isVideoMuted || (!isLocal && isAudioOnly) ? (
             <StyledVideoTile.AvatarContainer>
               <Avatar name={peerName || ''} data-testid="participant_avatar_icon" size={avatarSize} />
             </StyledVideoTile.AvatarContainer>
           ) : null}
 
-          {showAudioMuted({
-            hideAudioMute: hideAudioMuteOnTile,
-            isAudioMuted,
-          }) ? (
-            <StyledVideoTile.AudioIndicator
-              data-testid="participant_audio_mute_icon"
-              size={width && height && (width < 180 || height < 180) ? 'small' : 'medium'}
-            >
-              <MicOffIcon />
-            </StyledVideoTile.AudioIndicator>
-          ) : (
-            <AudioLevel trackId={audioTrack?.id} />
-          )}
+          {!hideAudioMuteOnTile ? (
+            isAudioMuted ? (
+              <StyledVideoTile.AudioIndicator
+                data-testid="participant_audio_mute_icon"
+                size={width && height && (width < 180 || height < 180) ? 'small' : 'medium'}
+              >
+                <MicOffIcon />
+              </StyledVideoTile.AudioIndicator>
+            ) : (
+              <AudioLevel trackId={audioTrack?.id} />
+            )
+          ) : null}
           {isMouseHovered || isDragabble ? (
             <TileMenu
               peerID={peerId}
@@ -150,25 +147,24 @@ const Tile = ({
               enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
-          <PeerMetadata peerId={peerId} />
-          {isMobile ? null : (
-            <TileConnection
-              hideLabel={hideParticipantNameOnTile}
-              name={label}
-              isTile
-              peerId={peerId}
-              width={width}
-              pinned={pinned}
-              spotlighted={spotlighted}
-            />
-          )}
+          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} />}
+
+          <TileConnection
+            hideLabel={hideParticipantNameOnTile}
+            name={label}
+            isTile
+            peerId={peerId}
+            width={width}
+            pinned={pinned}
+            spotlighted={spotlighted}
+          />
         </StyledVideoTile.Container>
       ) : null}
     </StyledVideoTile.Root>
   );
 };
 
-const metaStyles = { top: '$4', left: '$4' };
+const metaStyles = { top: '$4', left: '$4', width: '$14', height: '$14' };
 
 const heightAnimation = value =>
   keyframes({
@@ -233,7 +229,7 @@ const PeerMetadata = ({ peerId }) => {
       ) : null}
       {isBRB ? (
         <StyledVideoTile.AttributeBox css={metaStyles} data-testid="brb_icon_onTile">
-          <BrbTileIcon width={24} height={24} />
+          <BrbTileIcon width={22} height={22} />
         </StyledVideoTile.AttributeBox>
       ) : null}
     </Fragment>
@@ -242,8 +238,4 @@ const PeerMetadata = ({ peerId }) => {
 
 const VideoTile = React.memo(Tile);
 
-const showAudioMuted = ({ hideAudioMute, isAudioMuted }) => {
-  return isAudioMuted && !hideAudioMute;
-};
-
 export default VideoTile;

package/src/Prebuilt/components/conference.jsx

@@ -23,14 +23,13 @@ import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,
 } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useAuthToken, useIsHeadless, useSetAppDataByKey } from './AppData/useUISettings';
-import { APP_DATA, EMOJI_REACTION_TYPE, isAndroid, isIOS, isIPadOS } from '../common/constants';
+import { useAuthToken, useSetAppDataByKey } from './AppData/useUISettings';
+import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
 
 const Conference = () => {
   const navigate = useNavigate();
   const { roomId, role } = useParams();
-  const isHeadless = useIsHeadless();
-  const { userName } = useHMSPrebuiltContext();
+  const { userName, endpoints } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const roomState = useHMSStore(selectRoomState);
@@ -42,11 +41,11 @@ const Conference = () => {
   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);
     }
   };
@@ -58,14 +57,14 @@ 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) {
@@ -90,9 +89,7 @@ const Conference = () => {
         .join({
           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: !isPreviewScreenEnabled,
             isVideoMuted: !isPreviewScreenEnabled,
@@ -101,14 +98,7 @@ const Conference = () => {
         })
         .catch(console.error);
     }
-  }, [authTokenInAppData, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
-
-  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 () => {
@@ -117,71 +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">
-      {!screenProps.hideSections.includes('header') && (
-        <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 elements={screenProps.elements} screenType={screenProps.screenType} />
+    <>
+      {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}
-      >
-        <VideoStreamingSection screenType={screenProps.screenType} elements={screenProps.elements} />
-      </Box>
-      {!screenProps.hideSections.includes('footer') && (
+      ) : 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',
-            bg: '$background_dim',
-            marginBottom: performAutoHide ? `-${footerRef.current?.clientHeight}px` : undefined,
-            '@md': {
-              maxHeight: 'unset',
-              bg: screenProps.screenType === 'hls_live_streaming' ? 'transparent' : '$background_dim',
+            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 elements={screenProps.elements} screenType={screenProps.screenType} />
+          <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,45 +1,36 @@
-import { useCallback, useState } from 'react';
-import { selectLocalPeerID, selectPeerMetadata, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { useCallback } from 'react';
+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);
     }
   };
 
   const toggleHandRaise = useCallback(async () => {
-    const brbUpdate = !isHandRaised ? false : isBRBOn;
-    const success = await update({
-      isHandRaised: !isHandRaised,
-      isBRBOn: brbUpdate,
-    });
-    if (success) {
-      setBRBOn(brbUpdate);
-      setHandRaised(!isHandRaised);
-    }
-  }, [isHandRaised, isBRBOn]); //eslint-disable-line
+    await update({ isHandRaised: !metaData?.isHandRaised, isBRBOn: false });
+  }, [metaData?.isHandRaised]); //eslint-disable-line
 
   const toggleBRB = useCallback(async () => {
-    const handRaiseUpdate = !isBRBOn ? false : isHandRaised;
-    const success = await update({
-      isHandRaised: handRaiseUpdate,
-      isBRBOn: !isBRBOn,
-    });
-    if (success) {
-      setBRBOn(!isBRBOn);
-      setHandRaised(handRaiseUpdate);
-    }
-  }, [isHandRaised, isBRBOn]); //eslint-disable-line
+    await update({ isBRBOn: !metaData?.isBRBOn, isHandRaised: false });
+  }, [metaData?.isBRBOn]); //eslint-disable-line
 
   const setPrevRole = async role => {
     await update({
@@ -48,8 +39,8 @@ export const useMyMetadata = () => {
   };
 
   return {
-    isHandRaised,
-    isBRBOn,
+    isHandRaised: !!metaData?.isHandRaised,
+    isBRBOn: !!metaData?.isBRBOn,
     metaData,
     updateMetaData: update,
     toggleHandRaise,

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

@@ -12,7 +12,7 @@ export const useRoleProminencePeers = (prominentRoles: string[], peers: HMSPeer[
         if (pinnedTrack) {
           if (pinnedTrack.peerId === peer.id) {
             acc[0].push(peer);
-          } else {
+          } else if (!(isInsetEnabled && peer.isLocal)) {
             acc[1].push(peer);
           }
           return acc;