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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.7",
+  "version": "0.1.8-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.16",
-    "@100mslive/hms-virtual-background": "1.11.16",
-    "@100mslive/react-icons": "0.8.16",
-    "@100mslive/react-sdk": "0.8.16",
+    "@100mslive/hls-player": "0.1.17-alpha.0",
+    "@100mslive/hms-virtual-background": "1.11.17-alpha.0",
+    "@100mslive/react-icons": "0.8.17-alpha.0",
+    "@100mslive/react-sdk": "0.8.17-alpha.0",
     "@100mslive/types-prebuilt": "0.12.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "c06edac3e71481de08e948ffe0affaf705564ad1"
+  "gitHead": "d6e072de081b508a297ebc1684a33a8e9db048ef"
 }

package/src/AudioLevel/AudioLevel.tsx

@@ -1,34 +1,83 @@
-import { useCallback, useRef } from 'react';
-import { HMSTrackID } from '@100mslive/hms-video-store';
-import { useAudioLevelStyles } from '@100mslive/react-sdk';
-import { useTheme } from '../Theme';
+import React, { useEffect, useRef } from 'react';
+import { selectTrackAudioByID, useHMSVanillaStore } from '@100mslive/react-sdk';
+import { Box, Flex } from '../Layout';
+import { keyframes } from '../Theme';
+//@ts-ignore
+import bg from './audio-level.png';
 
-/**
- * pass in a track id and get a ref. That ref can be attached to an element which will have border
- * as per audio level post that.
- */
-export function useBorderAudioLevel(audioTrackId?: HMSTrackID) {
-  const { theme } = useTheme();
-  const color = theme.colors.primary_default.value;
-  const getStyle = useCallback(
-    (level: number) => {
-      const style: Record<string, string> = {
-        transition: 'outline 0.4s ease-in-out',
-      };
-      style['outline'] = level ? `${sigmoid(level) * 4}px solid ${color}` : '0px solid transparent';
-      return style;
-    },
-    [color],
+// keep the calculated values before hand to avoid recalcuation everytime
+const positionValues = new Array(101).fill(0).reduce((acc, _, index) => {
+  acc[index] = Math.round((index / 100) * 4) / 4; // convert to 0.25 multiples
+  return acc;
+}, {});
+
+const barAnimation = keyframes({
+  from: {
+    maskSize: '4em .8em',
+    '-webkit-mask-position-y': '.1em',
+    maskPosition: 'initial .1em',
+  },
+
+  '50%': {
+    maskSize: '4em 1em',
+    '-webkit-mask-position-y': 0,
+    maskPosition: 'initial 0',
+  },
+
+  to: {
+    maskSize: '4em .8em',
+    '-webkit-mask-position-y': '.1em',
+    maskPosition: 'initial 0',
+  },
+});
+
+const AudioBar = () => {
+  return (
+    <Box
+      css={{
+        width: '.25em',
+        height: '1em',
+        maskImage: `url(${bg})`,
+        '-webkit-mask-repeat': 'no-repeat',
+        backgroundColor: '$on_primary_high',
+        maskSize: '4em 1em',
+      }}
+    />
   );
-  const ref = useRef(null);
-  useAudioLevelStyles({
-    trackId: audioTrackId,
-    getStyle,
-    ref,
-  });
-  return ref;
-}
+};
+
+export const AudioLevel = ({ trackId, size }: { trackId?: string; size?: 'small' | 'medium' }) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const vanillaStore = useHMSVanillaStore();
 
-export const sigmoid = (z: number) => {
-  return 1 / (1 + Math.exp(-z));
+  useEffect(() => {
+    const unsubscribe = vanillaStore.subscribe(audioLevel => {
+      if (ref.current) {
+        let index = 0;
+        //@ts-ignore
+        for (const child of ref.current.children) {
+          const positionX = `-${positionValues[audioLevel] * (index === 1 ? 2.5 : 1.25)}em`;
+          child.style['-webkit-mask-position-x'] = positionX;
+          child.style['mask-position'] = `${positionX} 0`;
+          child.style['animation'] =
+            positionValues[audioLevel] > 0 ? `${barAnimation} 0.6s steps(3,jump-none) 0s infinite` : 'none';
+          index++;
+        }
+      }
+    }, selectTrackAudioByID(trackId));
+    return unsubscribe;
+  }, [vanillaStore, trackId]);
+  return (
+    <Flex
+      ref={ref}
+      css={{
+        fontSize: size === 'small' ? '0.75rem' : '1rem',
+        gap: size === 'small' ? '$1' : '$2',
+      }}
+    >
+      <AudioBar />
+      <AudioBar />
+      <AudioBar />
+    </Flex>
+  );
 };

package/src/AudioLevel/index.ts

@@ -1 +1,2 @@
-export { useBorderAudioLevel } from './AudioLevel';
+export { useBorderAudioLevel } from './useBorderAudioLevel';
+export { AudioLevel } from './AudioLevel';

package/src/AudioLevel/useBorderAudioLevel.tsx

@@ -0,0 +1,34 @@
+import { useCallback, useRef } from 'react';
+import { HMSTrackID } from '@100mslive/hms-video-store';
+import { useAudioLevelStyles } from '@100mslive/react-sdk';
+import { useTheme } from '../Theme';
+
+/**
+ * pass in a track id and get a ref. That ref can be attached to an element which will have border
+ * as per audio level post that.
+ */
+export function useBorderAudioLevel(audioTrackId?: HMSTrackID) {
+  const { theme } = useTheme();
+  const color = theme.colors.primary_default.value;
+  const getStyle = useCallback(
+    (level: number) => {
+      const style: Record<string, string> = {
+        transition: 'outline 0.4s ease-in-out',
+      };
+      style['outline'] = level ? `${sigmoid(level) * 4}px solid ${color}` : '0px solid transparent';
+      return style;
+    },
+    [color],
+  );
+  const ref = useRef(null);
+  useAudioLevelStyles({
+    trackId: audioTrackId,
+    getStyle,
+    ref,
+  });
+  return ref;
+}
+
+export const sigmoid = (z: number) => {
+  return 1 / (1 + Math.exp(-z));
+};

package/src/Prebuilt/App.tsx

@@ -218,6 +218,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                       <AppData appDetails={metadata} tokenEndpoint={tokenByRoomIdRoleEndpoint} />
                       <Init />
                       <Box
+                        id="prebuilt-container"
                         css={{
                           bg: '$background_dim',
                           size: '100%',

package/src/Prebuilt/common/utils.js

@@ -88,10 +88,3 @@ export const formatTime = timeInSeconds => {
   const hour = hours !== 0 ? `${hours < 10 ? '0' : ''}${hours}:` : '';
   return `${hour}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 };
-
-export const getAttributeBoxSize = (width, height) => {
-  if (!width || !height) {
-    return '';
-  }
-  return width < 180 || height < 180 ? 'small' : 'medium';
-};

package/src/Prebuilt/components/{Chip.jsx → Chip.tsx}

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Flex } from '../../Layout';
 import { Text } from '../../Text';
+import { CSS } from '../../Theme';
 
 const Chip = ({
   icon = <></>,
@@ -8,12 +9,22 @@ const Chip = ({
   backgroundColor = '$surface_default',
   textColor = '$on_surface_high',
   hideIfNoContent = false,
+  onClick,
+  css = {},
+}: {
+  icon?: React.JSX.Element;
+  content: string;
+  backgroundColor?: string;
+  textColor?: string;
+  hideIfNoContent?: boolean;
+  onClick?: () => void | Promise<void>;
+  css?: CSS;
 }) => {
   if (hideIfNoContent && !content) {
-    return;
+    return null;
   }
   return (
-    <Flex align="center" css={{ backgroundColor, p: '$4 $6', borderRadius: '$4' }}>
+    <Flex align="center" css={{ backgroundColor, p: '$4 $6', borderRadius: '$4', ...css }} onClick={() => onClick?.()}>
       {icon}
       <Text variant="sm" css={{ fontWeight: '$semiBold', color: textColor, ml: '$2' }}>
         {content}

package/src/Prebuilt/components/Footer/ParticipantList.jsx

@@ -127,13 +127,15 @@ const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter
         flex: '1 1 0',
       }}
     >
-      <RoleAccordion
-        peerList={handRaisedList}
-        roleName="Hand Raised"
-        filter={filter}
-        isConnected={isConnected}
-        isHandRaisedAccordion
-      />
+      {handRaisedList.length > 0 ? (
+        <RoleAccordion
+          peerList={handRaisedList}
+          roleName="Hand Raised"
+          filter={filter}
+          isConnected={isConnected}
+          isHandRaisedAccordion
+        />
+      ) : null}
       {Object.keys(peersOrderedByRoles).map(role => (
         <RoleAccordion
           key={role}
@@ -179,7 +181,10 @@ export const Participant = ({ peer, isConnected }) => {
 const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
   const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
   const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
-  const shouldShowMoreActions = canChangeRole;
+  const canRemoveOthers = useHMSStore(selectPermissions)?.removeOthers;
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { on_stage_exp } = elements || {};
+  const shouldShowMoreActions = (on_stage_exp && canChangeRole) || canRemoveOthers;
   const isAudioMuted = !useHMSStore(selectIsPeerAudioEnabled(peerId));
 
   return (
@@ -210,15 +215,21 @@ const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
         </Flex>
       ) : null}
 
-      {shouldShowMoreActions && !isLocal ? <ParticipantMoreActions peerId={peerId} role={role} /> : null}
+      {shouldShowMoreActions && !isLocal ? (
+        <ParticipantMoreActions
+          peerId={peerId}
+          role={role}
+          elements={elements}
+          canChangeRole={canChangeRole}
+          canRemoveOthers={canRemoveOthers}
+        />
+      ) : null}
     </Flex>
   );
 });
 
-const ParticipantMoreActions = ({ peerId, role }) => {
+const ParticipantMoreActions = ({ peerId, role, elements, canChangeRole, canRemoveOthers }) => {
   const hmsActions = useHMSActions();
-  const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore(selectPermissions);
-  const { elements } = useRoomLayoutConferencingScreen();
   const {
     bring_to_stage_label,
     remove_from_stage_label,

package/src/Prebuilt/components/Footer/RoleAccordion.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
-import { HMSPeer } from '@100mslive/react-sdk';
+import { HMSPeer, HMSPeerListIterator, useHMSActions } from '@100mslive/react-sdk';
+import { AddCircleIcon } from '@100mslive/react-icons';
 import { Accordion } from '../../../Accordion';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
+import Chip from '../Chip';
 // @ts-ignore: No implicit Any
 import { Participant } from './ParticipantList';
 import { RoleOptions } from './RoleOptions';
@@ -38,11 +40,34 @@ export const RoleAccordion = ({
   filter?: { search: string };
 }) => {
   const [ref, { width }] = useMeasure<HTMLDivElement>();
+  const actions = useHMSActions();
   const showAcordion = filter?.search ? peerList.some(peer => peer.name.toLowerCase().includes(filter.search)) : true;
+  const [hasNext, setHasNext] = useState(false);
+  const iteratorRef = useRef<HMSPeerListIterator | null>(null);
 
-  if (!showAcordion || (isHandRaisedAccordion && filter?.search) || peerList.length === 0) {
+  const loadNext = useCallback(() => {
+    if (!roleName || roleName === 'Hand Raised') {
+      return;
+    }
+    if (!iteratorRef.current) {
+      iteratorRef.current = actions.getPeerListIterator({ role: roleName });
+    }
+    iteratorRef.current
+      .next()
+      .catch(console.error)
+      .finally(() => {
+        setHasNext(iteratorRef.current ? iteratorRef.current.hasNext() : false);
+      });
+  }, [actions, roleName]);
+
+  useEffect(() => {
+    loadNext();
+  }, [loadNext]);
+
+  if (!showAcordion || (isHandRaisedAccordion && filter?.search) || (peerList.length === 0 && filter?.search)) {
     return null;
   }
+
   const height = ROW_HEIGHT * peerList.length;
 
   return (
@@ -86,6 +111,21 @@ export const RoleAccordion = ({
             >
               {VirtualizedParticipantItem}
             </FixedSizeList>
+            {hasNext ? (
+              <Chip
+                icon={<AddCircleIcon />}
+                content="Load More"
+                onClick={loadNext}
+                backgroundColor="$secondary_default"
+                css={{
+                  w: 'max-content',
+                  borderRadius: '$size$9',
+                  m: '$2 auto',
+                  p: '$4',
+                  cursor: 'pointer',
+                }}
+              />
+            ) : null}
           </Accordion.Content>
         </Accordion.Item>
       </Accordion.Root>

package/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx

@@ -1,11 +1,14 @@
 import React, { Fragment, useState } from 'react';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
+// @ts-ignore: No implicit Any
 import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
 import { ExitIcon, StopIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Dropdown } from '../../../Dropdown';
 import { Box, Flex } from '../../../Layout';
 import { Dialog } from '../../../Modal';
 import { Tooltip } from '../../../Tooltip';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { EndSessionContent } from './EndSessionContent';
 import { LeaveIconButton, MenuTriggerButton } from './LeaveAtoms';
 import { LeaveCard } from './LeaveCard';
@@ -135,7 +138,7 @@ export const DesktopLeaveRoom = ({
       )}
 
       <Dialog.Root open={showEndStreamAlert} modal={false}>
-        <Dialog.Portal>
+        <PrebuiltDialogPortal>
           <Dialog.Overlay />
           <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
             <EndSessionContent
@@ -145,16 +148,16 @@ export const DesktopLeaveRoom = ({
               isModal
             />
           </Dialog.Content>
-        </Dialog.Portal>
+        </PrebuiltDialogPortal>
       </Dialog.Root>
 
       <Dialog.Root open={showLeaveRoomAlert} modal={false}>
-        <Dialog.Portal>
+        <PrebuiltDialogPortal>
           <Dialog.Overlay />
           <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
             <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} isModal />
           </Dialog.Content>
-        </Dialog.Portal>
+        </PrebuiltDialogPortal>
       </Dialog.Root>
     </Fragment>
   );

package/src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx

@@ -3,6 +3,7 @@ import { useMedia } from 'react-use';
 import { selectLocalPeerName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { config as cssConfig, Dialog } from '../../../';
 import { Sheet } from '../../../Sheet';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { ToastManager } from '../Toast/ToastManager';
 import { ChangeNameContent } from './ChangeNameContent';
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
@@ -58,12 +59,12 @@ export const ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
 
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content css={{ bg: '$surface_dim', width: 'min(400px,80%)', p: '$10' }}>
           <ChangeNameContent {...props} />
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/MoreSettings/EmbedUrl.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { LinkIcon } from '@100mslive/react-icons';
 import { Button, Dialog, Dropdown, Flex, Input, Text } from '../../../';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { APP_DATA } from '../../common/constants';
 
@@ -30,7 +31,7 @@ export function EmbedUrlModal({ onOpenChange }) {
 
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
           <Dialog.Title
@@ -75,7 +76,7 @@ export function EmbedUrlModal({ onOpenChange }) {
             </Button>
           </Flex>
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 }

package/src/Prebuilt/components/MwebLandscapePrompt.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import { RefreshIcon } from '@100mslive/react-icons';
+import { Button } from '../../Button';
+import { Box, Flex } from '../../Layout';
+import { Dialog } from '../../Modal';
+import { Text } from '../../Text';
+import { PrebuiltDialogPortal } from './PrebuiltDialogPortal';
+import { isAndroid, isIOS } from '../common/constants';
+
+export const MwebLandscapePrompt = () => {
+  const isMobile = isAndroid || isIOS;
+  const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setShowMwebLandscapePrompt(isMobile && window.innerHeight < window.innerWidth);
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    <Dialog.Root open={showMwebLandscapePrompt} onOpenChange={setShowMwebLandscapePrompt}>
+      <PrebuiltDialogPortal>
+        <Dialog.Overlay />
+        <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
+          <Box>
+            <Flex
+              css={{
+                color: '$primary_default',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <RefreshIcon style={{ marginRight: '0.5rem' }} />
+              <Text variant="lg" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+                Please rotate your device
+              </Text>
+            </Flex>
+            <Text variant="sm" css={{ color: '$on_surface_medium', mb: '$8', mt: '$4' }}>
+              We do not support landscape mode as of now, please use the app in portrait mode for the best experience.
+            </Text>
+            <Flex align="center" justify="between" css={{ w: '100%', gap: '$8' }}>
+              <Button outlined variant="standard" css={{ w: '100%' }} onClick={() => setShowMwebLandscapePrompt(false)}>
+                Continue anyway
+              </Button>
+            </Flex>
+          </Box>
+        </Dialog.Content>
+      </PrebuiltDialogPortal>
+    </Dialog.Root>
+  );
+};

package/src/Prebuilt/components/Notifications/HLSFailureModal.jsx

@@ -4,6 +4,7 @@ import { Button } from '../../../Button';
 import { Flex } from '../../../Layout';
 import { Dialog } from '../../../Modal';
 import { Text } from '../../../Text';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { APP_DATA } from '../../common/constants';
 
@@ -37,7 +38,7 @@ export function HLSFailureModal() {
         }
       }}
     >
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content css={{ w: 'min(360px, 90%)' }}>
           <Dialog.Title
@@ -65,7 +66,7 @@ export function HLSFailureModal() {
             </Button>
           </Flex>
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   ) : null;
 }

package/src/Prebuilt/components/Notifications/PermissionErrorModal.jsx

@@ -4,6 +4,7 @@ import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk'
 import { Button, config as cssConfig, Dialog, Flex, Text } from '../../../';
 import androidPermissionAlert from '../../images/android-perm-1.png';
 import iosPermissions from '../../images/ios-perm-0.png';
+import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
 import { isAndroid, isIOS } from '../../common/constants';
 
 export function PermissionErrorModal() {
@@ -39,7 +40,7 @@ export function PermissionErrorModal() {
 
   return deviceType ? (
     <Dialog.Root open={!!deviceType}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content css={{ w: 'min(380px, 90%)', p: '$8' }}>
           <Dialog.Title
@@ -118,7 +119,7 @@ export function PermissionErrorModal() {
             </Flex>
           ) : null}
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   ) : null;
 }

package/src/Prebuilt/components/PrebuiltDialogPortal.tsx

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+import { Dialog } from '../../Modal';
+
+export const PrebuiltDialogPortal = ({ children }: { children: ReactNode }) => (
+  <Dialog.Portal container={document.getElementById('prebuilt-container')}>{children}</Dialog.Portal>
+);

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

@@ -14,6 +14,7 @@ import {
 } from '@100mslive/react-sdk';
 import { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';
 import { Avatar, Box, config as cssConfig, Flex, flexCenter, styled, StyledVideoTile, Text, Video } from '../../..';
+import { AudioLevel } from '../../../AudioLevel';
 import { useHMSPrebuiltContext } from '../../AppContext';
 // @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
@@ -31,8 +32,6 @@ import { Logo } from '../Header/HeaderComponents';
 // @ts-ignore: No implicit Any
 import SettingsModal from '../Settings/SettingsModal';
 // @ts-ignore: No implicit Any
-import { AudioLevel } from '../VideoTile';
-// @ts-ignore: No implicit Any
 import PreviewForm from './PreviewForm';
 // @ts-ignore: No implicit Any
 import { useAuthToken, useUISettings } from '../AppData/useUISettings';
@@ -246,7 +245,9 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
           <MicOffIcon />
         </StyledVideoTile.AudioIndicator>
       ) : (
-        <AudioLevel trackId={localPeer?.audioTrack} />
+        <StyledVideoTile.AudioIndicator size="medium">
+          <AudioLevel trackId={localPeer?.audioTrack} />
+        </StyledVideoTile.AudioIndicator>
       )}
     </StyledVideoTile.Container>
   );

package/src/Prebuilt/components/RoleChangeModal.jsx

@@ -9,6 +9,7 @@ import { Box, Flex } from '../../Layout';
 import { Dialog } from '../../Modal';
 import { Text } from '../../Text';
 import { Tooltip } from '../../Tooltip';
+import { PrebuiltDialogPortal } from './PrebuiltDialogPortal';
 import { useDropdownSelection } from './hooks/useDropdownSelection';
 import { useFilteredRoles } from '../common/hooks';
 import { textEllipsis } from '../../utils';
@@ -47,7 +48,7 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => {
   const peerNameMaxWidth = 200;
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
+      <PrebuiltDialogPortal>
         <Dialog.Overlay />
         <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
           <Dialog.Title css={{ p: 0 }} asChild>
@@ -179,7 +180,7 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => {
             </Box>
           </Flex>
         </Dialog.Content>
-      </Dialog.Portal>
+      </PrebuiltDialogPortal>
     </Dialog.Root>
   );
 };