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

package/src/Prebuilt/components/TileMenu/TileMenuContent.jsx

@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import { useMedia } from 'react-use';
 import {
   selectPermissions,
   selectSessionStore,
@@ -24,6 +25,7 @@ import {
 import { Box, Flex } from '../../../Layout';
 import { Slider } from '../../../Slider';
 import { Text } from '../../../Text';
+import { config as cssConfig } from '../../../Theme';
 import { StyledMenuTile } from '../../../TileMenu';
 import { ToastManager } from '../Toast/ToastManager';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
@@ -62,7 +64,7 @@ const SpotlightActions = ({
         onSpotLightClick();
       }}
     >
-      <StarIcon />
+      <StarIcon height={20} width={20} />
       <span>{isTileSpotlighted ? 'Remove from Spotlight' : 'Spotlight Tile for everyone'}</span>
     </StyledMenuTile.ItemButton>
   );
@@ -83,7 +85,7 @@ const PinActions = ({ audioTrackID, videoTrackID }) => {
         css={spacingCSS}
         onClick={() => (isTilePinned ? setPinnedTrackId() : setPinnedTrackId(videoTrackID || audioTrackID))}
       >
-        <PinIcon />
+        <PinIcon height={20} width={20} />
         <span>{isTilePinned ? 'Unpin' : 'Pin'} Tile for myself</span>
       </StyledMenuTile.ItemButton>
     </>
@@ -96,7 +98,7 @@ const MinimiseInset = () => {
   return (
     <>
       <StyledMenuTile.ItemButton css={spacingCSS} onClick={() => setMinimised(!minimised)}>
-        <ShrinkIcon />
+        <ShrinkIcon height={20} width={20} />
         <span>{minimised ? 'Show' : 'Minimise'} your video</span>
       </StyledMenuTile.ItemButton>
     </>
@@ -210,6 +212,8 @@ export const TileMenuContent = props => {
     type: REMOTE_STOP_SCREENSHARE_TYPE,
   });
 
+  const isMobile = useMedia(cssConfig.media.md);
+
   return isLocal ? (
     (showPinAction || canMinimise) && (
       <>
@@ -222,7 +226,7 @@ export const TileMenuContent = props => {
             closeSheetOnClick();
           }}
         >
-          <PencilIcon />
+          <PencilIcon height={20} width={20} />
           <Text variant="sm" css={{ '@md': { fontWeight: '$semiBold' }, c: '$on_surface_high' }}>
             Change Name
           </Text>
@@ -240,7 +244,7 @@ export const TileMenuContent = props => {
           }}
           data-testid={isVideoEnabled ? 'mute_video_participant_btn' : 'unmute_video_participant_btn'}
         >
-          {isVideoEnabled ? <VideoOnIcon /> : <VideoOffIcon />}
+          {isVideoEnabled ? <VideoOnIcon height={20} width={20} /> : <VideoOffIcon height={20} width={20} />}
           <span>{isVideoEnabled ? 'Mute' : 'Request Unmute'}</span>
         </StyledMenuTile.ItemButton>
       ) : null}
@@ -254,7 +258,7 @@ export const TileMenuContent = props => {
           }}
           data-testid={isVideoEnabled ? 'mute_audio_participant_btn' : 'unmute_audio_participant_btn'}
         >
-          {isAudioEnabled ? <MicOnIcon /> : <MicOffIcon />}
+          {isAudioEnabled ? <MicOnIcon height={20} width={20} /> : <MicOffIcon height={20} width={20} />}
           <span>{isAudioEnabled ? 'Mute' : 'Request Unmute'}</span>
         </StyledMenuTile.ItemButton>
       ) : null}
@@ -262,7 +266,7 @@ export const TileMenuContent = props => {
       {audioTrackID ? (
         <StyledMenuTile.VolumeItem data-testid="participant_volume_slider" css={{ ...spacingCSS, mb: '$0' }}>
           <Flex align="center" gap={1}>
-            <SpeakerIcon />
+            <SpeakerIcon height={20} width={20} />
             <Box as="span" css={{ ml: '$4' }}>
               Volume ({volume})
             </Box>
@@ -278,7 +282,7 @@ export const TileMenuContent = props => {
         </>
       )}
 
-      <SimulcastLayers trackId={videoTrackID} />
+      {isMobile ? null : <SimulcastLayers trackId={videoTrackID} />}
 
       {removeOthers ? (
         <StyledMenuTile.RemoveItem
@@ -293,7 +297,7 @@ export const TileMenuContent = props => {
           }}
           data-testid="remove_participant_btn"
         >
-          <RemoveUserIcon />
+          <RemoveUserIcon height={20} width={20} />
           <span>Remove Participant</span>
         </StyledMenuTile.RemoveItem>
       ) : null}
@@ -306,7 +310,7 @@ export const TileMenuContent = props => {
           }}
           css={spacingCSS}
         >
-          <ShareScreenIcon />
+          <ShareScreenIcon height={20} width={20} />
           <span>Stop Screenshare</span>
         </StyledMenuTile.RemoveItem>
       ) : null}

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -109,7 +109,7 @@ export const ToastConfig = {
       };
     },
   },
-  METADATA_UPDATED: {
+  RAISE_HAND: {
     single: notification => {
       return {
         title: `${notification.data?.name} raised hand`,
@@ -118,10 +118,11 @@ export const ToastConfig = {
       };
     },
     multiple: notifications => {
+      const count = new Set(notifications.map(notification => notification.data?.id)).size;
       return {
-        title: `${notifications[notifications.length - 1].data?.name} and ${
-          notifications.length - 1
-        } others raised hand`,
+        title: `${notifications[notifications.length - 1].data?.name} ${
+          count > 1 ? `${count} and others` : ''
+        } raised hand`,
         icon: <HandIcon />,
         action: <HandRaiseAction isSingleHandRaise={false} />,
       };

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

@@ -13,7 +13,7 @@ import { usePagesWithTiles, useTileLayout } from '../hooks/useTileLayout';
 // @ts-ignore: No implicit Any
 import { UI_SETTINGS } from '../../common/constants';
 
-export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize }: LayoutProps) {
+export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) {
   const localPeer = useHMSStore(selectLocalPeer);
   const isMobile = useMedia(cssConfig.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
@@ -35,6 +35,7 @@ export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, o
   const { ref, pagesWithTiles } = useTileLayout({
     pageList,
     maxTileCount,
+    edgeToEdge,
   });
   const [page, setPage] = useState(0);
   const pageSize = pagesWithTiles[0]?.length || 0;
@@ -47,15 +48,17 @@ export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, o
 
   return (
     <Flex direction="column" css={{ flex: '1 1 0', h: '100%', position: 'relative', minWidth: 0 }}>
-      <Grid tiles={pagesWithTiles[page]} ref={ref} />
-      <Pagination
-        page={page}
-        onPageChange={page => {
-          setPage(page);
-          onPageChange?.(page);
-        }}
-        numPages={pagesWithTiles.length}
-      />
+      <Grid tiles={pagesWithTiles[page]} ref={ref} edgeToEdge={edgeToEdge} />
+      {!edgeToEdge && (
+        <Pagination
+          page={page}
+          onPageChange={page => {
+            setPage(page);
+            onPageChange?.(page);
+          }}
+          numPages={pagesWithTiles.length}
+        />
+      )}
       {isInsetEnabled && pageList.length > 0 && pageList[0][0].peer.id !== localPeer?.id && <InsetTile />}
     </Flex>
   );

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

@@ -5,37 +5,39 @@ import { Box } from '../../../Layout';
 import VideoTile from '../VideoTile';
 import { useVideoTileContext } from '../hooks/useVideoTileLayout';
 
-export const Grid = React.forwardRef<HTMLDivElement, { tiles: TrackWithPeerAndDimensions[] }>(({ tiles }, ref) => {
-  const videoTileProps = useVideoTileContext();
-  return (
-    <Box
-      ref={ref}
-      css={{
-        flex: '1 1 0',
-        gap: '$4',
-        py: '$4',
-        display: 'flex',
-        placeContent: 'center',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexFlow: 'row wrap',
-        minHeight: 0,
-      }}
-    >
-      {tiles?.map(tile => {
-        return (
-          <VideoTile
-            key={tile.track?.id || tile.peer?.id}
-            width={tile.width}
-            height={tile.height}
-            peerId={tile.peer?.id}
-            trackId={tile.track?.id}
-            rootCSS={{ padding: 0 }}
-            objectFit="contain"
-            {...videoTileProps}
-          />
-        );
-      })}
-    </Box>
-  );
-});
+export const Grid = React.forwardRef<HTMLDivElement, { tiles: TrackWithPeerAndDimensions[]; edgeToEdge?: boolean }>(
+  ({ tiles, edgeToEdge }, ref) => {
+    const videoTileProps = useVideoTileContext();
+    return (
+      <Box
+        ref={ref}
+        css={{
+          flex: '1 1 0',
+          gap: '$4',
+          display: 'flex',
+          placeContent: 'center',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexFlow: 'row wrap',
+          minHeight: 0,
+          '@md': { gap: edgeToEdge ? 0 : '$4' },
+        }}
+      >
+        {tiles?.map(tile => {
+          return (
+            <VideoTile
+              key={tile.track?.id || tile.peer?.id}
+              width={tile.width}
+              height={tile.height}
+              peerId={tile.peer?.id}
+              trackId={tile.track?.id}
+              rootCSS={{ padding: 0 }}
+              objectFit="contain"
+              {...videoTileProps}
+            />
+          );
+        })}
+      </Box>
+    );
+  },
+);

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

@@ -1,12 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout';
-import {
-  selectPeers,
-  selectPeerScreenSharing,
-  selectRemotePeers,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
+import { selectPeers, selectPeerScreenSharing, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
 import { EqualProminence } from './EqualProminence';
 import { RoleProminence } from './RoleProminence';
 import { ScreenshareLayout } from './ScreenshareLayout';
@@ -15,14 +9,17 @@ import { usePinnedTrack } from '../AppData/useUISettings';
 import { VideoTileContext } from '../hooks/useVideoTileLayout';
 import PeersSorter from '../../common/PeersSorter';
 
-export type GridLayoutProps = GridVideoTileLayout & {
+export type TileCustomisationProps = {
   hide_participant_name_on_tile: boolean;
-  hide_audio_level_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 = [],
@@ -31,13 +28,26 @@ export const GridLayout = ({
   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 isRoleProminence = prominentRoles.length > 0 || pinnedTrack;
-  const peers = useHMSStore(isInsetEnabled && !isRoleProminence && !peerSharing ? selectRemotePeers : selectPeers);
+  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(peers);
+  const [sortedPeers, setSortedPeers] = useState(updatedPeers);
   const peersSorter = useMemo(() => new PeersSorter(vanillaStore), [vanillaStore]);
   const [pageSize, setPageSize] = useState(0);
   const [mainPage, setMainPage] = useState(0);
@@ -46,6 +56,7 @@ export const GridLayout = ({
     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,
   };
 
@@ -54,16 +65,21 @@ export const GridLayout = ({
       return;
     }
     peersSorter.setPeersAndTilesPerPage({
-      peers,
+      peers: updatedPeers,
       tilesPerPage: pageSize,
     });
     peersSorter.onUpdate(setSortedPeers);
-  }, [mainPage, peersSorter, peers, pageSize]);
+  }, [mainPage, peersSorter, updatedPeers, pageSize]);
 
   if (peerSharing) {
     return (
       <VideoTileContext.Provider value={tileLayout}>
-        <ScreenshareLayout peers={sortedPeers} onPageSize={setPageSize} onPageChange={setMainPage} />
+        <ScreenshareLayout
+          peers={sortedPeers}
+          onPageSize={setPageSize}
+          onPageChange={setMainPage}
+          edgeToEdge={edge_to_edge}
+        />
       </VideoTileContext.Provider>
     );
   } else if (isRoleProminence) {
@@ -75,6 +91,7 @@ export const GridLayout = ({
           onPageChange={setMainPage}
           prominentRoles={prominentRoles}
           isInsetEnabled={isInsetEnabled}
+          edgeToEdge={edge_to_edge}
         />
       </VideoTileContext.Provider>
     );
@@ -86,6 +103,7 @@ export const GridLayout = ({
         onPageSize={setPageSize}
         onPageChange={setMainPage}
         isInsetEnabled={isInsetEnabled}
+        edgeToEdge={edge_to_edge}
       />
     </VideoTileContext.Provider>
   );

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

@@ -1,13 +1,16 @@
 import React from 'react';
 import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
-import { Flex } from '../../../Layout';
+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 }: React.PropsWithChildren) => (
-  <Flex direction="column" css={{ size: '100%', gap: '$6' }}>
+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>
 );
@@ -20,36 +23,47 @@ const ProminentSection = ({ children, css = {} }: React.PropsWithChildren<{ css?
   );
 };
 
-const SecondarySection = ({ tiles, children }: React.PropsWithChildren<{ tiles: TrackWithPeerAndDimensions[] }>) => {
+const SecondarySection = ({
+  tiles,
+  children,
+  edgeToEdge,
+}: React.PropsWithChildren<{ tiles: TrackWithPeerAndDimensions[]; edgeToEdge?: boolean }>) => {
   const tileLayoutProps = useVideoTileContext();
+  if (!tiles?.length) {
+    return null;
+  }
   return (
-    <Flex direction="column" css={{ flexBasis: tiles?.length > 0 ? 154 : 0, minHeight: 0, gap: '$2' }}>
-      <Flex justify="center" align="center" css={{ gap: '$4', minHeight: 0, margin: '0 auto' }}>
-        {tiles?.map(tile => {
-          return (
-            <VideoTile
-              key={tile.track?.id || tile.peer?.id}
-              height="100%"
-              peerId={tile.peer?.id}
-              trackId={tile.track?.id}
-              rootCSS={{
-                padding: 0,
-                flex: '1 1 0',
-                maxWidth: 'max-content',
-              }}
-              containerCSS={{
-                width: 'unset',
-                aspectRatio: 16 / 9,
-                '@md': { aspectRatio: 1 },
-              }}
-              objectFit="contain"
-              {...tileLayoutProps}
-            />
-          );
-        })}
-      </Flex>
-      {children}
-    </Flex>
+    <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>
   );
 };
 

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

@@ -15,6 +15,7 @@ export function RoleProminence({
   peers,
   onPageChange,
   onPageSize,
+  edgeToEdge,
 }: LayoutProps) {
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
   const localPeer = useHMSStore(selectLocalPeer);
@@ -41,15 +42,17 @@ export function RoleProminence({
       <ProminenceLayout.ProminentSection>
         <Grid ref={ref} tiles={pagesWithTiles[page]} />
       </ProminenceLayout.ProminentSection>
-      <Pagination
-        page={page}
-        onPageChange={page => {
-          setPage(page);
-          onPageChange?.(page);
-        }}
-        numPages={pagesWithTiles.length}
-      />
-      <SecondaryTiles peers={secondaryPeers} isInsetEnabled={isInsetEnabled} />
+      {!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

@@ -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;