@100mslive/roomkit-react 0.1.8-alpha.0 → 0.1.8

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -11,7 +11,9 @@ import {
   useParticipants,
   usePreviewJoin,
   useRecordingStreaming,
+  // @ts-ignore: No implicit Any
 } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
 import { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';
 import { Avatar, Box, config as cssConfig, Flex, flexCenter, styled, StyledVideoTile, Text, Video } from '../../..';
 import { AudioLevel } from '../../../AudioLevel';
@@ -29,6 +31,7 @@ import TileConnection from '../Connection/TileConnection';
 import FullPageProgress from '../FullPageProgress';
 // @ts-ignore: No implicit Any
 import { Logo } from '../Header/HeaderComponents';
+import { PrebuiltAudioIndicator } from '../PrebuiltTileElements';
 // @ts-ignore: No implicit Any
 import SettingsModal from '../Settings/SettingsModal';
 // @ts-ignore: No implicit Any
@@ -232,7 +235,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
 
           {!isVideoOn ? (
             <StyledVideoTile.AvatarContainer>
-              <Avatar name={name} data-testid="preview_avatar_tile" />
+              <Avatar name={name} data-testid="preview_avatar_tile" size="medium" />
             </StyledVideoTile.AvatarContainer>
           ) : null}
         </>
@@ -241,13 +244,13 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
       ) : null}
 
       {showMuteIcon ? (
-        <StyledVideoTile.AudioIndicator>
-          <MicOffIcon />
-        </StyledVideoTile.AudioIndicator>
+        <PrebuiltAudioIndicator>
+          <MicOffIcon height={16} width={16} />
+        </PrebuiltAudioIndicator>
       ) : (
-        <StyledVideoTile.AudioIndicator size="medium">
+        <PrebuiltAudioIndicator>
           <AudioLevel trackId={localPeer?.audioTrack} />
-        </StyledVideoTile.AudioIndicator>
+        </PrebuiltAudioIndicator>
       )}
     </StyledVideoTile.Container>
   );

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
-import { ConferencingScreen } from '@100mslive/types-prebuilt';
+import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
 import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
 import { CrossIcon } from '@100mslive/react-icons';
 // @ts-ignore: No implicit Any
 import { Chat } from './Chat/Chat';
+import { PaginatedParticipants } from './Footer/PaginatedParticipants';
 // @ts-ignore: No implicit Any
 import { ParticipantList } from './Footer/ParticipantList';
-import { config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
+import { Box, config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
 import { Tooltip } from '../../Tooltip';
 // @ts-ignore: No implicit Any
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
@@ -46,6 +47,7 @@ export const SidePaneTabs = React.memo<{
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const resetSidePane = useSidepaneReset();
   const [activeTab, setActiveTab] = useState(active);
+  const [activeRole, setActiveRole] = useState('');
   const peerCount = useHMSStore(selectPeerCount);
   const { elements } = useRoomLayoutConferencingScreen();
   const showChat = !!elements?.chat;
@@ -53,6 +55,7 @@ export const SidePaneTabs = React.memo<{
   const hideTabs = !(showChat && showParticipants);
   const isMobile = useMedia(cssConfig.media.md);
   const isOverlayChat = !!elements?.chat?.is_overlay && isMobile;
+  const { off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
 
   useEffect(() => {
@@ -69,6 +72,25 @@ export const SidePaneTabs = React.memo<{
     setActiveTab(active);
   }, [active]);
 
+  if (activeRole) {
+    return (
+      <Flex
+        direction="column"
+        css={{
+          color: '$on_primary_high',
+          h: '100%',
+          marginTop: hideControls && isOverlayChat ? '$17' : '0',
+          transition: 'margin 0.3s ease-in-out',
+          position: 'relative',
+        }}
+      >
+        <Box css={{ position: 'absolute', left: 0, top: 0, size: '100%', zIndex: 21, bg: '$surface_dim' }}>
+          <PaginatedParticipants roleName={activeRole} onBack={() => setActiveRole('')} />
+        </Box>
+      </Flex>
+    );
+  }
+
   return (
     <Flex
       direction="column"
@@ -95,7 +117,11 @@ export const SidePaneTabs = React.memo<{
                 )}
               </Text>
 
-              {showChat ? <Chat screenType={screenType} /> : <ParticipantList />}
+              {showChat ? (
+                <Chat screenType={screenType} />
+              ) : (
+                <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />
+              )}
             </>
           ) : (
             <Tabs.Root
@@ -129,7 +155,7 @@ export const SidePaneTabs = React.memo<{
                 </Tabs.Trigger>
               </Tabs.List>
               <Tabs.Content value={SIDE_PANE_OPTIONS.PARTICIPANTS} css={{ p: 0 }}>
-                <ParticipantList />
+                <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />
               </Tabs.Content>
               <Tabs.Content value={SIDE_PANE_OPTIONS.CHAT} css={{ p: 0 }}>
                 <Chat screenType={screenType} />
@@ -141,7 +167,7 @@ export const SidePaneTabs = React.memo<{
 
       {isOverlayChat && isChatOpen ? null : (
         <IconButton
-          css={{ position: 'absolute', right: '$10', top: '$11', '@md': { top: '$8', right: '$8' } }}
+          css={{ position: 'absolute', right: '$9', top: '$11', '@md': { top: '$8', right: '$6' } }}
           onClick={e => {
             e.stopPropagation();
             if (activeTab === SIDE_PANE_OPTIONS.CHAT) {

package/src/Prebuilt/components/VideoTile.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
   selectAudioTrackByPeerID,
@@ -22,9 +22,12 @@ import { config as cssConfig } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
+import { PrebuiltAttributeBox, PrebuiltAudioIndicator } from './PrebuiltTileElements';
 import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
 import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
 
+const iconDims = { height: '1rem', width: '1rem' };
+
 const Tile = ({
   peerId,
   trackId,
@@ -74,26 +77,8 @@ const Tile = ({
   const ref = useRef(null);
   const calculatedHeight = ref.current?.clientHeight || '';
   const calculatedWidth = ref.current?.clientWidth || '';
-
   const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
-
-  const [avatarSize, attribBoxSize] = useMemo(() => {
-    if (!calculatedWidth || !calculatedHeight) {
-      return [undefined, undefined];
-    }
-    let avatarSize = 'large';
-    if (calculatedWidth <= 150 || calculatedHeight <= 150) {
-      avatarSize = 'small';
-    } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
-      avatarSize = 'medium';
-    }
-    let attribBoxSize = 'medium';
-    if (calculatedWidth <= 180 || calculatedHeight <= 180) {
-      attribBoxSize = 'small';
-    }
-
-    return [avatarSize, attribBoxSize];
-  }, [calculatedWidth, calculatedHeight]);
+  const avatarSize = 'medium';
 
   return (
     <StyledVideoTile.Root
@@ -142,13 +127,13 @@ const Tile = ({
 
           {!hideAudioMuteOnTile ? (
             isAudioMuted ? (
-              <StyledVideoTile.AudioIndicator data-testid="participant_audio_mute_icon" size={attribBoxSize}>
-                <MicOffIcon />
-              </StyledVideoTile.AudioIndicator>
+              <PrebuiltAudioIndicator data-testid="participant_audio_mute_icon">
+                <MicOffIcon style={iconDims} />
+              </PrebuiltAudioIndicator>
             ) : (
-              <StyledVideoTile.AudioIndicator size={attribBoxSize}>
-                <AudioLevel trackId={audioTrack?.id} size={attribBoxSize} />
-              </StyledVideoTile.AudioIndicator>
+              <PrebuiltAudioIndicator>
+                <AudioLevel trackId={audioTrack?.id} />
+              </PrebuiltAudioIndicator>
             )
           ) : null}
           {isMouseHovered || (isDragabble && isMobile) ? (
@@ -160,7 +145,7 @@ const Tile = ({
               enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
-          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} size={attribBoxSize} />}
+          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} />}
 
           <TileConnection
             hideLabel={hideParticipantNameOnTile}
@@ -177,7 +162,7 @@ const Tile = ({
   );
 };
 
-const PeerMetadata = ({ peerId, size }) => {
+const PeerMetadata = ({ peerId }) => {
   const metaData = useHMSStore(selectPeerMetadata(peerId));
   const isBRB = metaData?.isBRBOn || false;
   const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
@@ -185,14 +170,14 @@ const PeerMetadata = ({ peerId, size }) => {
   return (
     <Fragment>
       {isHandRaised ? (
-        <StyledVideoTile.AttributeBox size={size} data-testid="raiseHand_icon_onTile">
-          <HandIcon width={24} height={24} />
-        </StyledVideoTile.AttributeBox>
+        <PrebuiltAttributeBox data-testid="raiseHand_icon_onTile">
+          <HandIcon style={iconDims} />
+        </PrebuiltAttributeBox>
       ) : null}
       {isBRB ? (
-        <StyledVideoTile.AttributeBox size={size} data-testid="brb_icon_onTile">
-          <BrbTileIcon width={22} height={22} />
-        </StyledVideoTile.AttributeBox>
+        <PrebuiltAttributeBox data-testid="brb_icon_onTile">
+          <BrbTileIcon style={iconDims} />
+        </PrebuiltAttributeBox>
       ) : null}
     </Fragment>
   );

package/src/Prebuilt/components/conference.jsx

@@ -29,7 +29,7 @@ import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
 const Conference = () => {
   const navigate = useNavigate();
   const { roomId, role } = useParams();
-  const { userName, endpoints } = useHMSPrebuiltContext();
+  const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const roomState = useHMSStore(selectRoomState);
@@ -109,13 +109,14 @@ const Conference = () => {
   }, [authTokenInAppData, endpoints?.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
 
   useEffect(() => {
+    onJoinFunc?.();
     return () => {
       PictureInPicture.stop().catch(error => console.error('stopping pip', error));
     };
   }, []);
 
-  if (!isConnectedToRoom) {
-    return <FullPageProgress text="Joining..." />;
+  if (!isConnectedToRoom && ![HMSRoomState.Reconnecting, HMSRoomState.Disconnected].includes(roomState)) {
+    return <FullPageProgress text={roomState === HMSRoomState.Connecting ? 'Joining...' : ''} />;
   }
 
   return (

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

@@ -1,3 +1,3 @@
 export const useDropdownSelection = () => {
-  return '$primary_dim';
+  return '$surface_bright';
 };

package/src/Prebuilt/layouts/SidePane.tsx

@@ -64,6 +64,7 @@ const SidePane = ({
         <VideoTile
           peerId={activeScreensharePeerId}
           trackId={trackId}
+          width="100%"
           height={225}
           rootCSS={{ p: 0, alignSelf: 'start', flexShrink: 0 }}
           {...tileLayout}