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

package/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useMedia } from 'react-use';
 import { Box, Button, config as cssConfig, Dialog, Flex, Text } from '../../..';
 import { Sheet } from '../../../Sheet';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 
 export const RequestPrompt = ({
   open = true,
@@ -34,7 +35,7 @@ export const RequestPrompt = ({
 
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content css={{ p: '$10' }}>
           <Dialog.Title css={{ p: 0, display: 'flex', flexDirection: 'row', gap: '$md', justifyContent: 'center' }}>
@@ -43,7 +44,7 @@ export const RequestPrompt = ({
           <Box css={{ mt: '$4', mb: '$10' }}>{body}</Box>
           <RequestActions actionText={actionText} onAction={onAction} />
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/Settings/SettingsModal.jsx

@@ -9,6 +9,7 @@ import { Sheet } from '../../../Sheet';
 import { Tabs } from '../../../Tabs';
 import { Text } from '../../../Text';
 import { config as cssConfig } from '../../../Theme';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { settingContent, settingsList } from './common.js';
 
 const SettingsModal = ({ open, onOpenChange, screenType, children = <></> }) => {
@@ -186,7 +187,7 @@ const DesktopSettingModal = ({
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Trigger asChild>{children}</Dialog.Trigger>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content
           css={{
@@ -256,7 +257,7 @@ const DesktopSettingModal = ({
             </IconButton>
           </Dialog.Close>
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/Settings/StartRecording.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { selectPermissions, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { AlertTriangleIcon } from '@100mslive/react-icons';
 import { Button, Dialog, Flex, Text } from '../../../';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { ResolutionInput } from '../Streaming/ResolutionInput';
 import { getResolution } from '../Streaming/RTMPStreaming';
 import { ToastManager } from '../Toast/ToastManager';
@@ -21,7 +22,7 @@ const StartRecording = ({ open, onOpenChange }) => {
   if (isBrowserRecordingOn) {
     return (
       <Dialog.Root open={open} onOpenChange={onOpenChange}>
-        <Dialog.Portal>
+        <PrebuiltDialogPortal>
           <Dialog.Content
             css={{
               width: 'min(400px,80%)',
@@ -66,7 +67,7 @@ const StartRecording = ({ open, onOpenChange }) => {
               </Button>
             </Flex>
           </Dialog.Content>
-        </Dialog.Portal>
+        </PrebuiltDialogPortal>
       </Dialog.Root>
     );
   }

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, useMemo, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
   selectAudioTrackByPeerID,
@@ -8,24 +8,21 @@ 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 { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
-import { getAttributeBoxSize } from '../common/utils';
 import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
 
 const Tile = ({
@@ -80,16 +77,22 @@ const Tile = ({
 
   const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
 
-  const avatarSize = useMemo(() => {
+  const [avatarSize, attribBoxSize] = useMemo(() => {
     if (!calculatedWidth || !calculatedHeight) {
-      return undefined;
+      return [undefined, undefined];
     }
+    let avatarSize = 'large';
     if (calculatedWidth <= 150 || calculatedHeight <= 150) {
-      return 'small';
+      avatarSize = 'small';
     } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
-      return 'medium';
+      avatarSize = 'medium';
     }
-    return 'large';
+    let attribBoxSize = 'medium';
+    if (calculatedWidth <= 180 || calculatedHeight <= 180) {
+      attribBoxSize = 'small';
+    }
+
+    return [avatarSize, attribBoxSize];
   }, [calculatedWidth, calculatedHeight]);
 
   return (
@@ -139,14 +142,13 @@ const Tile = ({
 
           {!hideAudioMuteOnTile ? (
             isAudioMuted ? (
-              <StyledVideoTile.AudioIndicator
-                data-testid="participant_audio_mute_icon"
-                size={getAttributeBoxSize(calculatedWidth, calculatedHeight)}
-              >
+              <StyledVideoTile.AudioIndicator data-testid="participant_audio_mute_icon" size={attribBoxSize}>
                 <MicOffIcon />
               </StyledVideoTile.AudioIndicator>
             ) : (
-              <AudioLevel trackId={audioTrack?.id} />
+              <StyledVideoTile.AudioIndicator size={attribBoxSize}>
+                <AudioLevel trackId={audioTrack?.id} size={attribBoxSize} />
+              </StyledVideoTile.AudioIndicator>
             )
           ) : null}
           {isMouseHovered || (isDragabble && isMobile) ? (
@@ -158,7 +160,7 @@ const Tile = ({
               enableSpotlightingPeer={enableSpotlightingPeer}
             />
           ) : null}
-          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} height={calculatedHeight} width={calculatedWidth} />}
+          {!hideMetadataOnTile && <PeerMetadata peerId={peerId} size={attribBoxSize} />}
 
           <TileConnection
             hideLabel={hideParticipantNameOnTile}
@@ -175,56 +177,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, size }) => {
   const metaData = useHMSStore(selectPeerMetadata(peerId));
   const isBRB = metaData?.isBRBOn || false;
   const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
@@ -232,12 +185,12 @@ const PeerMetadata = ({ peerId, height, width }) => {
   return (
     <Fragment>
       {isHandRaised ? (
-        <StyledVideoTile.AttributeBox size={getAttributeBoxSize(width, height)} data-testid="raiseHand_icon_onTile">
+        <StyledVideoTile.AttributeBox size={size} data-testid="raiseHand_icon_onTile">
           <HandIcon width={24} height={24} />
         </StyledVideoTile.AttributeBox>
       ) : null}
       {isBRB ? (
-        <StyledVideoTile.AttributeBox size={getAttributeBoxSize(width, height)} data-testid="brb_icon_onTile">
+        <StyledVideoTile.AttributeBox size={size} data-testid="brb_icon_onTile">
           <BrbTileIcon width={22} height={22} />
         </StyledVideoTile.AttributeBox>
       ) : null}

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/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>
 );