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

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

@@ -1,6 +1,15 @@
-import React from 'react';
-import { ChatIcon, ConnectivityIcon, HandIcon, PersonIcon, PoorConnectivityIcon } from '@100mslive/react-icons';
+import React, { useCallback } from 'react';
+import { selectPeerByID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import {
+  ChatUnreadIcon,
+  ConnectivityIcon,
+  HandIcon,
+  PeopleAddIcon,
+  PeopleRemoveIcon,
+  PoorConnectivityIcon,
+} from '@100mslive/react-icons';
 import { Button } from '../../../Button';
+import { useRoomLayout } from '../../provider/roomLayoutProvider';
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
@@ -18,26 +27,57 @@ const ChatAction = React.forwardRef((_, ref) => {
     </Button>
   );
 });
+
+const HandRaiseAction = React.forwardRef(({ id = '', isSingleHandRaise = true }, ref) => {
+  const hmsActions = useHMSActions();
+  const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const peer = useHMSStore(selectPeerByID(id));
+  const layout = useRoomLayout();
+  const {
+    bring_to_stage_label,
+    on_stage_role,
+    off_stage_roles = [],
+  } = layout?.screens?.conferencing?.default?.elements.on_stage_exp || {};
+
+  const onClickHandler = useCallback(() => {
+    if (isSingleHandRaise) {
+      hmsActions.changeRoleOfPeer(id, on_stage_role);
+    } else {
+      !isParticipantsOpen && toggleSidepane();
+    }
+  }, [hmsActions, id, isParticipantsOpen, isSingleHandRaise, on_stage_role, toggleSidepane]);
+
+  // show nothing if handRaise is single and peer role is not hls
+  if (isSingleHandRaise && (!peer || !off_stage_roles.includes(peer.roleName))) {
+    return null;
+  }
+  return (
+    <Button outlined as="div" variant="standard" css={{ w: 'max-content' }} onClick={onClickHandler} ref={ref}>
+      {isSingleHandRaise ? bring_to_stage_label : 'View'}
+    </Button>
+  );
+});
 export const ToastConfig = {
   PEER_LIST: {
     single: function (notification) {
       if (notification.data.length === 1) {
         return {
           title: `${notification.data[0]?.name} joined`,
-          icon: <PersonIcon />,
+          icon: <PeopleAddIcon />,
         };
       }
       return {
         title: `${notification.data[notification.data.length - 1]?.name} and ${
           notification.data.length - 1
         } others joined`,
-        icon: <PersonIcon />,
+        icon: <PeopleAddIcon />,
       };
     },
     multiple: notifications => {
       return {
         title: `${notifications[0].data.name} and ${notifications.length - 1} others joined`,
-        icon: <PersonIcon />,
+        icon: <PeopleAddIcon />,
       };
     },
   },
@@ -45,13 +85,13 @@ export const ToastConfig = {
     single: function (notification) {
       return {
         title: `${notification.data?.name} joined`,
-        icon: <PersonIcon />,
+        icon: <PeopleAddIcon />,
       };
     },
     multiple: function (notifications) {
       return {
         title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others joined`,
-        icon: <PersonIcon />,
+        icon: <PeopleAddIcon />,
       };
     },
   },
@@ -59,13 +99,13 @@ export const ToastConfig = {
     single: function (notification) {
       return {
         title: `${notification.data?.name} left`,
-        icon: <PersonIcon />,
+        icon: <PeopleRemoveIcon />,
       };
     },
     multiple: function (notifications) {
       return {
         title: `${notifications[notifications.length - 1].data.name} and ${notifications.length - 1} others left`,
-        icon: <PersonIcon />,
+        icon: <PeopleRemoveIcon />,
       };
     },
   },
@@ -74,6 +114,7 @@ export const ToastConfig = {
       return {
         title: `${notification.data?.name} raised hand`,
         icon: <HandIcon />,
+        action: <HandRaiseAction id={notification.data?.id} />,
       };
     },
     multiple: notifications => {
@@ -82,6 +123,7 @@ export const ToastConfig = {
           notifications.length - 1
         } others raised hand`,
         icon: <HandIcon />,
+        action: <HandRaiseAction isSingleHandRaise={false} />,
       };
     },
   },
@@ -89,14 +131,14 @@ export const ToastConfig = {
     single: notification => {
       return {
         title: `New message from ${notification.data?.senderName}`,
-        icon: <ChatIcon />,
+        icon: <ChatUnreadIcon />,
         action: <ChatAction />,
       };
     },
     multiple: notifications => {
       return {
         title: `${notifications.length} new messages`,
-        icon: <ChatIcon />,
+        icon: <ChatUnreadIcon />,
         action: <ChatAction />,
       };
     },

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

@@ -0,0 +1,62 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useMedia } from 'react-use';
+import { selectLocalPeer, useHMSStore } from '@100mslive/react-sdk';
+import { Flex } from '../../../Layout';
+import { config as cssConfig } from '../../../Theme';
+import { InsetTile } from '../InsetTile';
+import { Pagination } from '../Pagination';
+import { Grid } from './Grid';
+import { LayoutProps } from './interface';
+// @ts-ignore: No implicit Any
+import { useUISettings } from '../AppData/useUISettings';
+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) {
+  const localPeer = useHMSStore(selectLocalPeer);
+  const isMobile = useMedia(cssConfig.media.md);
+  let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
+  maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
+  let pageList = usePagesWithTiles({
+    peers,
+    maxTileCount,
+  });
+  // useMemo is needed to prevent recursion as new array is created for localPeer
+  const inputPeers = useMemo(
+    () => (pageList.length === 0 ? (localPeer ? [localPeer] : []) : peers),
+    [pageList.length, peers, localPeer],
+  );
+  // Pass local peer to main grid if no other peer has tiles
+  pageList = usePagesWithTiles({
+    peers: inputPeers,
+    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 (
+    <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}
+      />
+      {isInsetEnabled && pageList.length > 0 && pageList[0][0].peer.id !== localPeer?.id && <InsetTile />}
+    </Flex>
+  );
+}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
+import { Box } from '../../../Layout';
+// @ts-ignore: No implicit Any
+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>
+  );
+});

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

@@ -0,0 +1,92 @@
+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 { 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 GridLayoutProps = GridVideoTileLayout & {
+  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';
+};
+
+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',
+}: GridLayoutProps) => {
+  const peerSharing = useHMSStore(selectPeerScreenSharing);
+  const pinnedTrack = usePinnedTrack();
+  const isRoleProminence = prominentRoles.length > 0 || pinnedTrack;
+  const peers = useHMSStore(isInsetEnabled && !isRoleProminence && !peerSharing ? selectRemotePeers : selectPeers);
+  const vanillaStore = useHMSVanillaStore();
+  const [sortedPeers, setSortedPeers] = useState(peers);
+  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,
+    objectFit: video_object_fit,
+  };
+
+  useEffect(() => {
+    if (mainPage !== 0) {
+      return;
+    }
+    peersSorter.setPeersAndTilesPerPage({
+      peers,
+      tilesPerPage: pageSize,
+    });
+    peersSorter.onUpdate(setSortedPeers);
+  }, [mainPage, peersSorter, peers, pageSize]);
+
+  if (peerSharing) {
+    return (
+      <VideoTileContext.Provider value={tileLayout}>
+        <ScreenshareLayout peers={sortedPeers} onPageSize={setPageSize} onPageChange={setMainPage} />
+      </VideoTileContext.Provider>
+    );
+  } else if (isRoleProminence) {
+    return (
+      <VideoTileContext.Provider value={tileLayout}>
+        <RoleProminence
+          peers={sortedPeers}
+          onPageSize={setPageSize}
+          onPageChange={setMainPage}
+          prominentRoles={prominentRoles}
+          isInsetEnabled={isInsetEnabled}
+        />
+      </VideoTileContext.Provider>
+    );
+  }
+  return (
+    <VideoTileContext.Provider value={tileLayout}>
+      <EqualProminence
+        peers={sortedPeers}
+        onPageSize={setPageSize}
+        onPageChange={setMainPage}
+        isInsetEnabled={isInsetEnabled}
+      />
+    </VideoTileContext.Provider>
+  );
+};

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
+import { 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' }}>
+    {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 }: React.PropsWithChildren<{ tiles: TrackWithPeerAndDimensions[] }>) => {
+  const tileLayoutProps = useVideoTileContext();
+  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>
+  );
+};
+
+export const ProminenceLayout = {
+  Root,
+  ProminentSection,
+  SecondarySection,
+};

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

@@ -0,0 +1,56 @@
+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,
+}: 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>
+      <Pagination
+        page={page}
+        onPageChange={page => {
+          setPage(page);
+          onPageChange?.(page);
+        }}
+        numPages={pagesWithTiles.length}
+      />
+      <SecondaryTiles peers={secondaryPeers} isInsetEnabled={isInsetEnabled} />
+      {isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && <InsetTile />}
+    </ProminenceLayout.Root>
+  );
+}

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

@@ -0,0 +1,36 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { selectPeersScreenSharing, useHMSStore } from '@100mslive/react-sdk';
+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 }: 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]);
+  useEffect(() => {
+    setActiveScreenSharePeer(activeSharePeerId);
+    return () => {
+      setActiveScreenSharePeer('');
+    };
+  }, [activeSharePeerId, setActiveScreenSharePeer]);
+
+  return (
+    <ProminenceLayout.Root>
+      <ProminenceLayout.ProminentSection>
+        <ScreenshareTile peerId={peersSharing[page].id} />
+        <Pagination page={page} onPageChange={setPage} numPages={peersSharing.length} />
+      </ProminenceLayout.ProminentSection>
+      <SecondaryTiles peers={secondaryPeers} onPageChange={onPageChange} onPageSize={onPageSize} />
+    </ProminenceLayout.Root>
+  );
+};

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

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