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

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

@@ -0,0 +1,110 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout';
+import { selectPeers, selectPeerScreenSharing, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
+import { EqualProminence } from './EqualProminence';
+import { RoleProminence } from './RoleProminence';
+import { ScreenshareLayout } from './ScreenshareLayout';
+// @ts-ignore: No implicit Any
+import { usePinnedTrack } from '../AppData/useUISettings';
+import { VideoTileContext } from '../hooks/useVideoTileLayout';
+import PeersSorter from '../../common/PeersSorter';
+
+export type TileCustomisationProps = {
+  hide_participant_name_on_tile: boolean;
+  rounded_video_tile: boolean;
+  hide_audio_mute_on_tile: boolean;
+  video_object_fit: 'contain' | 'cover';
+  edge_to_edge: boolean;
+  hide_metadata_on_tile: boolean;
+};
+
+export type GridLayoutProps = GridVideoTileLayout & TileCustomisationProps;
+
+export const GridLayout = ({
+  enable_local_tile_inset: isInsetEnabled = false,
+  prominent_roles: prominentRoles = [],
+  enable_spotlighting_peer = false,
+  hide_participant_name_on_tile = false,
+  rounded_video_tile = true,
+  hide_audio_mute_on_tile = false,
+  video_object_fit = 'contain',
+  edge_to_edge = false,
+  hide_metadata_on_tile = false,
+}: GridLayoutProps) => {
+  const peerSharing = useHMSStore(selectPeerScreenSharing);
+  const pinnedTrack = usePinnedTrack();
+  const peers = useHMSStore(selectPeers);
+  const isRoleProminence =
+    (prominentRoles.length &&
+      peers.some(
+        peer => peer.roleName && prominentRoles.includes(peer.roleName) && (peer.videoTrack || peer.audioTrack),
+      )) ||
+    pinnedTrack;
+  const updatedPeers = useMemo(() => {
+    if (isInsetEnabled && !isRoleProminence && !peerSharing) {
+      return peers.filter(peer => !peer.isLocal);
+    }
+    return peers;
+  }, [isInsetEnabled, isRoleProminence, peerSharing, peers]);
+  const vanillaStore = useHMSVanillaStore();
+  const [sortedPeers, setSortedPeers] = useState(updatedPeers);
+  const peersSorter = useMemo(() => new PeersSorter(vanillaStore), [vanillaStore]);
+  const [pageSize, setPageSize] = useState(0);
+  const [mainPage, setMainPage] = useState(0);
+  const tileLayout = {
+    enableSpotlightingPeer: enable_spotlighting_peer,
+    hideParticipantNameOnTile: hide_participant_name_on_tile,
+    roundedVideoTile: rounded_video_tile,
+    hideAudioMuteOnTile: hide_audio_mute_on_tile,
+    hideMetadataOnTile: hide_metadata_on_tile,
+    objectFit: video_object_fit,
+  };
+
+  useEffect(() => {
+    if (mainPage !== 0) {
+      return;
+    }
+    peersSorter.setPeersAndTilesPerPage({
+      peers: updatedPeers,
+      tilesPerPage: pageSize,
+    });
+    peersSorter.onUpdate(setSortedPeers);
+  }, [mainPage, peersSorter, updatedPeers, pageSize]);
+
+  if (peerSharing) {
+    return (
+      <VideoTileContext.Provider value={tileLayout}>
+        <ScreenshareLayout
+          peers={sortedPeers}
+          onPageSize={setPageSize}
+          onPageChange={setMainPage}
+          edgeToEdge={edge_to_edge}
+        />
+      </VideoTileContext.Provider>
+    );
+  } else if (isRoleProminence) {
+    return (
+      <VideoTileContext.Provider value={tileLayout}>
+        <RoleProminence
+          peers={sortedPeers}
+          onPageSize={setPageSize}
+          onPageChange={setMainPage}
+          prominentRoles={prominentRoles}
+          isInsetEnabled={isInsetEnabled}
+          edgeToEdge={edge_to_edge}
+        />
+      </VideoTileContext.Provider>
+    );
+  }
+  return (
+    <VideoTileContext.Provider value={tileLayout}>
+      <EqualProminence
+        peers={sortedPeers}
+        onPageSize={setPageSize}
+        onPageChange={setMainPage}
+        isInsetEnabled={isInsetEnabled}
+        edgeToEdge={edge_to_edge}
+      />
+    </VideoTileContext.Provider>
+  );
+};

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
+import { Box, Flex } from '../../../Layout';
+import { CSS } from '../../../Theme';
+// @ts-ignore: No implicit Any
+import VideoTile from '../VideoTile';
+import { useVideoTileContext } from '../hooks/useVideoTileLayout';
+
+const Root = ({ children, edgeToEdge }: React.PropsWithChildren<{ edgeToEdge?: boolean }>) => (
+  <Flex
+    direction="column"
+    css={{ h: '100%', flex: '1 1 0', minWidth: 0, gap: '$6', '@md': { gap: edgeToEdge ? 0 : '$6' } }}
+  >
+    {children}
+  </Flex>
+);
+
+const ProminentSection = ({ children, css = {} }: React.PropsWithChildren<{ css?: CSS }>) => {
+  return (
+    <Flex direction="column" css={{ flex: '1 1 0', gap: '$2', minHeight: 0, ...css }}>
+      {children}
+    </Flex>
+  );
+};
+
+const SecondarySection = ({
+  tiles,
+  children,
+  edgeToEdge,
+}: React.PropsWithChildren<{ tiles: TrackWithPeerAndDimensions[]; edgeToEdge?: boolean }>) => {
+  const tileLayoutProps = useVideoTileContext();
+  if (!tiles?.length) {
+    return null;
+  }
+  return (
+    <Box
+      css={{
+        display: 'grid',
+        gridTemplateRows: React.Children.count(children) > 0 ? '136px auto' : '154px',
+        gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))`,
+        margin: '0 auto',
+        gap: '$2 $4',
+        placeItems: 'center',
+        '@md': { gap: edgeToEdge ? 0 : '$4' },
+      }}
+    >
+      {tiles.map(tile => {
+        return (
+          <VideoTile
+            key={tile.track?.id || tile.peer?.id}
+            peerId={tile.peer?.id}
+            trackId={tile.track?.id}
+            rootCSS={{
+              padding: 0,
+              maxWidth: 240,
+              maxHeight: '100%',
+              aspectRatio: 16 / 9,
+              '@md': { aspectRatio: 1 },
+            }}
+            objectFit="contain"
+            {...tileLayoutProps}
+          />
+        );
+      })}
+      <Box css={{ gridColumn: `1/span ${tiles.length}` }}>{children}</Box>
+    </Box>
+  );
+};
+
+export const ProminenceLayout = {
+  Root,
+  ProminentSection,
+  SecondarySection,
+};

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

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import { selectLocalPeer, useHMSStore } from '@100mslive/react-sdk';
+import { InsetTile } from '../InsetTile';
+import { Pagination } from '../Pagination';
+import { SecondaryTiles } from '../SecondaryTiles';
+import { Grid } from './Grid';
+import { LayoutProps } from './interface';
+import { ProminenceLayout } from './ProminenceLayout';
+import { useRoleProminencePeers } from '../hooks/useRoleProminencePeers';
+import { usePagesWithTiles, useTileLayout } from '../hooks/useTileLayout';
+
+export function RoleProminence({
+  isInsetEnabled = false,
+  prominentRoles = [],
+  peers,
+  onPageChange,
+  onPageSize,
+  edgeToEdge,
+}: LayoutProps) {
+  const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
+  const localPeer = useHMSStore(selectLocalPeer);
+  const maxTileCount = 4;
+  const pageList = usePagesWithTiles({
+    peers: prominentPeers,
+    maxTileCount,
+  });
+  const { ref, pagesWithTiles } = useTileLayout({
+    pageList,
+    maxTileCount,
+  });
+  const [page, setPage] = useState(0);
+  const pageSize = pagesWithTiles[0]?.length || 0;
+
+  useEffect(() => {
+    if (pageSize > 0) {
+      onPageSize?.(pageSize);
+    }
+  }, [pageSize, onPageSize]);
+
+  return (
+    <ProminenceLayout.Root>
+      <ProminenceLayout.ProminentSection>
+        <Grid ref={ref} tiles={pagesWithTiles[page]} />
+      </ProminenceLayout.ProminentSection>
+      {!edgeToEdge && (
+        <Pagination
+          page={page}
+          onPageChange={page => {
+            setPage(page);
+            onPageChange?.(page);
+          }}
+          numPages={pagesWithTiles.length}
+        />
+      )}
+      <SecondaryTiles peers={secondaryPeers} isInsetEnabled={isInsetEnabled} edgeToEdge={edgeToEdge} />
+      {isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && <InsetTile />}
+    </ProminenceLayout.Root>
+  );
+}

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

@@ -0,0 +1,52 @@
+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';
+import { SecondaryTiles } from '../SecondaryTiles';
+import { LayoutProps } from './interface';
+import { ProminenceLayout } from './ProminenceLayout';
+// @ts-ignore: No implicit Any
+import { useSetAppDataByKey } from '../AppData/useUISettings';
+// @ts-ignore: No implicit Any
+import { APP_DATA } from '../../common/constants';
+
+export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => {
+  const peersSharing = useHMSStore(selectPeersScreenSharing);
+  const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
+  const [page, setPage] = useState(0);
+  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(isMobile ? '' : activeSharePeer?.id);
+    return () => {
+      setActiveScreenSharePeer('');
+    };
+  }, [activeSharePeer?.id, isMobile, setActiveScreenSharePeer]);
+
+  return (
+    <ProminenceLayout.Root edgeToEdge={edgeToEdge}>
+      <ProminenceLayout.ProminentSection>
+        <ScreenshareTile peerId={peersSharing[page]?.id} />
+        {!edgeToEdge && <Pagination page={page} onPageChange={setPage} numPages={peersSharing.length} />}
+      </ProminenceLayout.ProminentSection>
+      <SecondaryTiles
+        peers={secondaryPeers}
+        onPageChange={onPageChange}
+        onPageSize={onPageSize}
+        edgeToEdge={edgeToEdge}
+      />
+    </ProminenceLayout.Root>
+  );
+};

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

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

package/src/Prebuilt/components/VideoTile.jsx

@@ -1,29 +1,29 @@
-import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import { useMedia } from 'react-use';
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   selectAudioTrackByPeerID,
   selectIsPeerAudioEnabled,
   selectLocalPeerID,
   selectPeerMetadata,
   selectPeerNameByID,
+  selectSessionStore,
+  selectTrackAudioByID,
   selectVideoTrackByID,
   selectVideoTrackByPeerID,
   useHMSStore,
+  useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { BrbTileIcon, HandIcon, MicOffIcon } from '@100mslive/react-icons';
 import TileConnection from './Connection/TileConnection';
-import TileMenu from './TileMenu/TileMenu';
-import { useBorderAudioLevel } from '../../AudioLevel';
+import TileMenu, { isSameTile } from './TileMenu/TileMenu';
 import { Avatar } from '../../Avatar';
+import { Box, Flex } from '../../Layout';
 import { VideoTileStats } from '../../Stats';
-import { config as cssConfig } from '../../Theme';
+import { keyframes } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
-import { useAppConfig } from './AppData/useAppConfig';
-import { useIsHeadless, useUISettings } from './AppData/useUISettings';
-import { useShowStreamingUI } from '../common/hooks';
-import { UI_SETTINGS } from '../common/constants';
+import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
+import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
 
 const Tile = ({
   peerId,
@@ -35,6 +35,11 @@ const Tile = ({
   isDragabble = false,
   rootCSS = {},
   containerCSS = {},
+  enableSpotlightingPeer = true,
+  hideParticipantNameOnTile = false,
+  roundedVideoTile = true,
+  hideAudioMuteOnTile = false,
+  hideMetadataOnTile = false,
 }) => {
   const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID(peerId);
   const track = useHMSStore(trackSelector);
@@ -44,15 +49,18 @@ const Tile = ({
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const isHeadless = useIsHeadless();
   const isAudioMuted = !useHMSStore(selectIsPeerAudioEnabled(peerId));
   const isVideoMuted = !track?.enabled;
   const [isMouseHovered, setIsMouseHovered] = useState(false);
-  const borderAudioRef = useBorderAudioLevel(audioTrack?.id);
   const isVideoDegraded = track?.degraded;
   const isLocal = localPeerID === peerId;
-  const isMobile = useMedia(cssConfig.media.md);
-  const showStreamingUI = useShowStreamingUI();
+  const [pinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
+  const pinned = isSameTile({
+    trackId: pinnedTrackId,
+    videoTrackID: track?.id,
+    audioTrackID: audioTrack?.id,
+  });
+  const spotlighted = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT)) === peerId;
   const label = getVideoTileLabel({
     peerName,
     track,
@@ -61,8 +69,6 @@ const Tile = ({
   const onHoverHandler = useCallback(event => {
     setIsMouseHovered(event.type === 'mouseenter');
   }, []);
-  const headlessConfig = useAppConfig('headlessConfig');
-  const hideLabel = isHeadless && headlessConfig?.hideTileName;
   const isTileBigEnoughToShowStats = height >= 180 && width >= 180;
   const avatarSize = useMemo(() => {
     if (!width || !height) {
@@ -81,11 +87,6 @@ const Tile = ({
       css={{
         width,
         height,
-        padding: getPadding({
-          isHeadless,
-          tileOffset: headlessConfig?.tileOffset,
-          hideAudioLevel: headlessConfig?.hideAudioLevel,
-        }),
         ...rootCSS,
       }}
       data-testid={`participant_tile_${peerName}`}
@@ -94,69 +95,125 @@ const Tile = ({
         <StyledVideoTile.Container
           onMouseEnter={onHoverHandler}
           onMouseLeave={onHoverHandler}
-          ref={isHeadless && headlessConfig?.hideAudioLevel ? undefined : borderAudioRef}
-          noRadius={isHeadless && Number(headlessConfig?.tileOffset) === 0}
+          noRadius={!roundedVideoTile}
           css={containerCSS}
         >
           {showStatsOnTiles && isTileBigEnoughToShowStats ? (
             <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'
-              }
-              degraded={isVideoDegraded}
-              noRadius={isHeadless && Number(headlessConfig?.tileOffset) === 0}
-              data-testid="participant_video_tile"
-              css={{
-                objectFit,
-              }}
-            />
-          ) : null}
-          {isVideoMuted || isVideoDegraded || (!isLocal && isAudioOnly) ? (
+          <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({
-            hideTileAudioMute: headlessConfig?.hideTileAudioMute,
-            isHeadless,
-            isAudioMuted,
-          }) ? (
-            <StyledVideoTile.AudioIndicator
-              data-testid="participant_audio_mute_icon"
-              size={width && height && (width < 180 || height < 180) ? 'small' : 'medium'}
-            >
-              <MicOffIcon />
-            </StyledVideoTile.AudioIndicator>
+          {!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) && !isHeadless ? (
+          {isMouseHovered || isDragabble ? (
             <TileMenu
               peerID={peerId}
               audioTrackID={audioTrack?.id}
               videoTrackID={track?.id}
               canMinimise={canMinimise}
+              enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
-          <PeerMetadata peerId={peerId} />
-          {showStreamingUI && isMobile ? null : (
-            <TileConnection hideLabel={hideLabel} name={label} isTile peerId={peerId} width={width} />
-          )}
+          {!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({
+    '50%': {
+      transform: `scale3d(1,${value},1)`,
+    },
+    '100%': {
+      transform: `scale3d(1,1,1)`,
+    },
+  });
+
+const AudioLevelIndicator = ({ trackId, value, delay }) => {
+  const vanillaStore = useHMSVanillaStore();
+  const ref = useRef();
+
+  useEffect(() => {
+    const unsubscribe = vanillaStore.subscribe(audioLevel => {
+      if (ref.current) {
+        ref.current.style['animation'] = `${heightAnimation(
+          audioLevel ? value : 1,
+        )} 0.3s cubic-bezier(0.61, 1, 0.88, 1) infinite ${delay}s`;
+      }
+    }, selectTrackAudioByID(trackId));
+    return unsubscribe;
+  }, [vanillaStore, trackId, value, delay]);
+  return (
+    <Box
+      ref={ref}
+      css={{
+        w: 4,
+        height: 6,
+        r: 2,
+        bg: '$on_primary_high',
+      }}
+    />
+  );
+};
+
+export const AudioLevel = ({ trackId }) => {
+  return (
+    <StyledVideoTile.AudioIndicator>
+      <Flex align="center" justify="center" css={{ gap: '$2' }}>
+        {[3, 2, 3].map((v, i) => (
+          <AudioLevelIndicator trackId={trackId} value={v} delay={i * 0.15} key={i} />
+        ))}
+      </Flex>
+    </StyledVideoTile.AudioIndicator>
+  );
+};
 
 const PeerMetadata = ({ peerId }) => {
   const metaData = useHMSStore(selectPeerMetadata(peerId));
@@ -172,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>
@@ -181,19 +238,4 @@ const PeerMetadata = ({ peerId }) => {
 
 const VideoTile = React.memo(Tile);
 
-const showAudioMuted = ({ hideTileAudioMute, isHeadless, isAudioMuted }) => {
-  if (!isHeadless) {
-    return isAudioMuted;
-  }
-  return isAudioMuted && !hideTileAudioMute;
-};
-
-const getPadding = ({ isHeadless, tileOffset, hideAudioLevel }) => {
-  if (!isHeadless || isNaN(Number(tileOffset))) {
-    return undefined;
-  }
-  // Adding extra padding of 3px to ensure that the audio border is visible properly between tiles when tileOffset is 0.
-  return Number(tileOffset) === 0 ? (hideAudioLevel ? 0 : 3) : undefined;
-};
-
 export default VideoTile;