@100mslive/roomkit-react 0.1.7 → 0.1.8

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/StatsForNerds.jsx

@@ -15,6 +15,7 @@ import { Dialog } from '../../Modal';
 import { Switch } from '../../Switch';
 import { Text } from '../../Text';
 import { DialogDropdownTrigger } from '../primitives/DropdownTrigger';
+import { PrebuiltDialogPortal } from './PrebuiltDialogPortal';
 import { useSetUiSettings } from './AppData/useUISettings';
 import { useDropdownSelection } from './hooks/useDropdownSelection';
 import { UI_SETTINGS } from '../common/constants';
@@ -39,7 +40,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
 
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -118,7 +119,7 @@ export const StatsForNerds = ({ onOpenChange }) => {
             <TrackStats trackID={selectedStat.id} layer={selectedStat.layer} local={selectedStat.local} />
           )}
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/VideoTile.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
   selectAudioTrackByPeerID,
@@ -8,26 +8,26 @@ import {
   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, { isSameTile } from './TileMenu/TileMenu';
+import { AudioLevel } from '../../AudioLevel';
 import { Avatar } from '../../Avatar';
-import { Box, Flex } from '../../Layout';
 import { VideoTileStats } from '../../Stats';
-import { config as cssConfig, keyframes } from '../../Theme';
+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 { getAttributeBoxSize } from '../common/utils';
 import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
 
+const iconDims = { height: '1rem', width: '1rem' };
+
 const Tile = ({
   peerId,
   trackId,
@@ -77,20 +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 = useMemo(() => {
-    if (!calculatedWidth || !calculatedHeight) {
-      return undefined;
-    }
-    if (calculatedWidth <= 150 || calculatedHeight <= 150) {
-      return 'small';
-    } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
-      return 'medium';
-    }
-    return 'large';
-  }, [calculatedWidth, calculatedHeight]);
+  const avatarSize = 'medium';
 
   return (
     <StyledVideoTile.Root
@@ -139,14 +127,13 @@ const Tile = ({
 
           {!hideAudioMuteOnTile ? (
             isAudioMuted ? (
-              <StyledVideoTile.AudioIndicator
-                data-testid="participant_audio_mute_icon"
-                size={getAttributeBoxSize(calculatedWidth, calculatedHeight)}
-              >
-                <MicOffIcon />
-              </StyledVideoTile.AudioIndicator>
+              <PrebuiltAudioIndicator data-testid="participant_audio_mute_icon">
+                <MicOffIcon style={iconDims} />
+              </PrebuiltAudioIndicator>
             ) : (
-              <AudioLevel trackId={audioTrack?.id} />
+              <PrebuiltAudioIndicator>
+                <AudioLevel trackId={audioTrack?.id} />
+              </PrebuiltAudioIndicator>
             )
           ) : null}
           {isMouseHovered || (isDragabble && isMobile) ? (
@@ -158,7 +145,7 @@ const Tile = ({
               enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
-          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} height={calculatedHeight} width={calculatedWidth} />}
+          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} />}
 
           <TileConnection
             hideLabel={hideParticipantNameOnTile}
@@ -175,56 +162,7 @@ const Tile = ({
   );
 };
 
-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, height, width }) => {
+const PeerMetadata = ({ peerId }) => {
   const metaData = useHMSStore(selectPeerMetadata(peerId));
   const isBRB = metaData?.isBRBOn || false;
   const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
@@ -232,14 +170,14 @@ const PeerMetadata = ({ peerId, height, width }) => {
   return (
     <Fragment>
       {isHandRaised ? (
-        <StyledVideoTile.AttributeBox size={getAttributeBoxSize(width, height)} 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={getAttributeBoxSize(width, height)} 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/components/pdfAnnotator/pdfFileOptions.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Dialog, Flex } from '../../../';
 import { DialogInputFile } from '../../primitives/DialogContent';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { PDFHeader } from './pdfHeader';
 import { SubmitPDF } from './submitPdf';
 import { UploadedFile } from './uploadedFile';
@@ -10,7 +11,7 @@ export function PDFFileOptions({ onOpenChange }) {
 
   return !pdfFile ? (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -34,7 +35,7 @@ export function PDFFileOptions({ onOpenChange }) {
             <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
           </Flex>
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   ) : (
     <UploadedFile pdfFile={pdfFile} setPDFFile={setPDFFile} onOpenChange={onOpenChange} />

package/src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx

@@ -3,7 +3,7 @@ import { useScreenShare } from '@100mslive/react-sdk';
 import { StarIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import PDFShareImg from './../../images/pdf-share.png';
 import ScreenShareImg from './../../images/screen-share.png';
-import { Box, Button, Dropdown, Flex, IconButton, Text, Tooltip } from '../../../';
+import { Box, Dropdown, Flex, IconButton, Text, Tooltip } from '../../../';
 import { ShareMenuIcon } from '../ShareMenuIcon';
 import { PDFFileOptions } from './pdfFileOptions';
 
@@ -75,7 +75,8 @@ export function ShareScreenOptions() {
               alignItems: 'flex-start',
               gap: '$8',
               px: '$10',
-              py: '$6',
+              pt: '$6',
+              pb: '$10',
               '&:hover': {
                 bg: '$transparent',
                 cursor: 'default',
@@ -163,7 +164,7 @@ export function ShareScreenOptions() {
                   align="center"
                   css={{
                     position: 'absolute',
-                    top: '29%',
+                    top: '35%',
                     left: '54%',
                     padding: '$2 $4',
                     r: '$2',
@@ -200,32 +201,6 @@ export function ShareScreenOptions() {
               </Flex>
             </Flex>
           </Dropdown.Item>
-          <Dropdown.Item
-            css={{
-              px: '$10',
-              pb: '$10',
-              pt: '$6',
-              '&:hover': {
-                bg: '$transparent',
-                cursor: 'default',
-              },
-            }}
-          >
-            <Button
-              variant="standard"
-              outlined
-              type="submit"
-              onClick={() => {
-                updateState(MODALS.SHARE, false);
-              }}
-              data-testid="share_btn"
-              css={{
-                w: '100%',
-              }}
-            >
-              Cancel
-            </Button>
-          </Dropdown.Item>
         </Dropdown.Content>
       </Dropdown.Root>
       {openModals.has(MODALS.PDF_SHARE) && (

package/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { TrashIcon } from '@100mslive/react-icons';
 import { Dialog, Flex, Text } from '../../../';
 import { DialogRow } from '../../primitives/DialogContent';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { PDFHeader } from './pdfHeader';
 import { PDFInfo } from './pdfInfo';
 import { SubmitPDF } from './submitPdf';
@@ -10,7 +11,7 @@ export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
   const [fileName, ext] = pdfFile.name.split('.');
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -65,7 +66,7 @@ export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
             <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
           </Flex>
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/layouts/HLSView.jsx

@@ -277,6 +277,7 @@ const HLSView = () => {
                   r: '50%',
                   gap: '$1',
                   bg: '$primary_default',
+                  zIndex: 21,
                 }}
               >
                 <IconButton onClick={async () => await hlsPlayer?.play()} data-testid="play_btn">

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}

package/src/Prebuilt/primitives/DialogContent.jsx

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
 import { CheckIcon, CloudUploadIcon, CrossIcon } from '@100mslive/react-icons';
+import { PrebuiltDialogPortal } from '../components/PrebuiltDialogPortal';
 import { Button } from '../../Button';
 import { Checkbox } from '../../Checkbox';
 import { HorizontalDivider } from '../../Divider';
@@ -14,7 +15,7 @@ import { Text } from '../../Text';
 
 export const DialogContent = ({ Icon, title, closeable = true, children, css, iconCSS = {}, ...props }) => {
   return (
-    <Dialog.Portal>
+    <PrebuiltDialogPortal>
       <Dialog.Overlay />
       <Dialog.Content css={{ width: 'min(600px, 100%)', ...css }} {...props}>
         <Dialog.Title>
@@ -35,7 +36,7 @@ export const DialogContent = ({ Icon, title, closeable = true, children, css, ic
         <HorizontalDivider css={{ mt: '0.8rem' }} />
         <Box>{children}</Box>
       </Dialog.Content>
-    </Dialog.Portal>
+    </PrebuiltDialogPortal>
   );
 };
 
@@ -60,7 +61,7 @@ export const ErrorDialog = ({ open = true, onOpenChange, title, children, ...pro
 
 export const RequestDialog = ({ open = true, onOpenChange, title, body, actionText = 'Accept', onAction, Icon }) => (
   <Dialog.Root open={open} onOpenChange={onOpenChange}>
-    <Dialog.Portal>
+    <PrebuiltDialogPortal>
       <Dialog.Overlay />
       <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
         <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md' }}>
@@ -97,7 +98,7 @@ export const RequestDialog = ({ open = true, onOpenChange, title, body, actionTe
           </Box>
         </Flex>
       </Dialog.Content>
-    </Dialog.Portal>
+    </PrebuiltDialogPortal>
   </Dialog.Root>
 );