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

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

@@ -6,6 +6,7 @@ import {
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
 import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
+import { useAVToggle } from '@100mslive/react-sdk';
 import { config as cssConfig, Footer as AppFooter } from '../../..';
 // @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
@@ -41,6 +42,8 @@ export const Footer = ({
   const isOverlayChat = !!elements?.chat?.is_overlay;
   const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN;
 
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
 
@@ -91,7 +94,7 @@ export const Footer = ({
       >
         {isMobile ? (
           <>
-            {screenType === 'hls_live_streaming' ? <RaiseHand /> : null}
+            {noAVPermissions ? <RaiseHand /> : null}
             {elements?.chat && <ChatToggle />}
             <MoreSettings elements={elements} screenType={screenType} />
           </>

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

@@ -1,11 +1,12 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import { useDebounce, useMedia } from 'react-use';
 import {
+  selectHandRaisedPeers,
+  selectHasPeerHandRaised,
   selectIsPeerAudioEnabled,
   selectLocalPeerID,
   selectPeerCount,
   selectPeerMetadata,
-  selectPeersByCondition,
   selectPermissions,
   useHMSActions,
   useHMSStore,
@@ -27,7 +28,7 @@ import { RoleAccordion } from './RoleAccordion';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 import { useParticipants } from '../../common/hooks';
-import { isInternalRole } from '../../common/utils';
+import { getFormattedCount } from '../../common/utils';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
 export const ParticipantList = () => {
@@ -35,7 +36,7 @@ export const ParticipantList = () => {
   const { participants, isConnected, peerCount } = useParticipants(filter);
   const peersOrderedByRoles = {};
 
-  const handRaisedPeers = useHMSStore(selectPeersByCondition(peer => JSON.parse(peer.metadata || '{}')?.isHandRaised));
+  const handRaisedPeers = useHMSStore(selectHandRaisedPeers);
 
   participants.forEach(participant => {
     if (peersOrderedByRoles[participant.roleName] === undefined) {
@@ -107,7 +108,7 @@ export const ParticipantCount = () => {
     >
       <PeopleIcon />
       <Text variant="sm" css={{ mx: '$4', c: 'inherit' }}>
-        {peerCount}
+        {getFormattedCount(peerCount)}
       </Text>
     </IconButton>
   );
@@ -176,7 +177,7 @@ export const Participant = ({ peer, isConnected }) => {
  * shows settings to change for a participant like changing their role
  */
 const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
-  const isHandRaised = useHMSStore(selectPeerMetadata(peerId))?.isHandRaised;
+  const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
   const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
   const shouldShowMoreActions = canChangeRole;
   const isAudioMuted = !useHMSStore(selectIsPeerAudioEnabled(peerId));
@@ -209,9 +210,7 @@ const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
         </Flex>
       ) : null}
 
-      {shouldShowMoreActions && !isInternalRole(role) && !isLocal ? (
-        <ParticipantMoreActions peerId={peerId} role={role} />
-      ) : null}
+      {shouldShowMoreActions && !isLocal ? <ParticipantMoreActions peerId={peerId} role={role} /> : null}
     </Flex>
   );
 });

package/src/Prebuilt/components/Header/ParticipantFilter.jsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, HandRaiseIcon, PeopleIcon } from '@100mslive/react-icons';
 import { Box, Dropdown, Flex, Text, textEllipsis } from '../../../';
-import { isInternalRole } from '../../common/utils';
 
 export const ParticipantFilter = ({ selection, onSelection, isConnected, roles }) => {
   const [open, setOpen] = useState(false);
@@ -53,17 +52,15 @@ export const ParticipantFilter = ({ selection, onSelection, isConnected, roles }
           value={{ metadata: { isHandRaised: true }, role: '' }}
         />
         <Dropdown.ItemSeparator />
-        {roles
-          .filter(role => !isInternalRole(role))
-          .map(role => (
-            <Item
-              key={role}
-              selected={selectionValue === role}
-              title={role}
-              value={{ metadata: { isHandRaised: false }, role }}
-              onSelection={onItemClick}
-            />
-          ))}
+        {roles.map(role => (
+          <Item
+            key={role}
+            selected={selectionValue === role}
+            title={role}
+            value={{ metadata: { isHandRaised: false }, role }}
+            onSelection={onItemClick}
+          />
+        ))}
       </Dropdown.Content>
     </Dropdown.Root>
   );

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -5,6 +5,7 @@ import {
   selectIsConnectedToRoom,
   selectPeerCount,
   selectPermissions,
+  useAVToggle,
   useHMSActions,
   useHMSStore,
   useRecordingStreaming,
@@ -84,6 +85,8 @@ export const MwebOptions = ({
   const peerCount = useHMSStore(selectPeerCount);
   const emojiCardRef = useRef(null);
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   // const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
@@ -158,7 +161,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             )}
 
-            {screenType !== 'hls_live_streaming' ? (
+            {!noAVPermissions ? (
               <ActionTile.Root
                 active={isHandRaised}
                 onClick={() => {
@@ -279,7 +282,6 @@ export const MwebOptions = ({
 
       {showEmojiCard && (
         <Box
-          onClick={() => setShowEmojiCard(false)}
           ref={emojiCardRef}
           css={{
             maxWidth: '100%',

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

@@ -4,10 +4,12 @@ import { useNavigate, useParams } from 'react-router-dom';
 import {
   HMSNotificationTypes,
   HMSRoomState,
+  selectHasPeerHandRaised,
   selectRoomState,
   useCustomEvent,
   useHMSNotifications,
   useHMSStore,
+  useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { Button } from '../../../';
 import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
@@ -34,6 +36,7 @@ export function Notifications() {
   const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
   const { redirectToLeave } = useRedirectToLeave();
+  const vanillaStore = useHMSVanillaStore();
 
   const handleRoleChangeDenied = useCallback(request => {
     ToastManager.addToast({
@@ -49,6 +52,16 @@ export function Notifications() {
       return;
     }
     switch (notification.type) {
+      case HMSNotificationTypes.HAND_RAISE_CHANGED: {
+        if (roomState !== HMSRoomState.Connected || notification.data.isLocal) {
+          return;
+        }
+        const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
+        if (hasPeerHandRaised) {
+          ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
+        }
+        break;
+      }
       case HMSNotificationTypes.METADATA_UPDATED:
         if (roomState !== HMSRoomState.Connected) {
           return;
@@ -154,7 +167,7 @@ export function Notifications() {
       <TrackUnmuteModal />
       <TrackBulkUnmuteModal />
       <TrackNotifications />
-      <PeerNotifications />
+      {roomState === HMSRoomState.Connected ? <PeerNotifications /> : null}
       <ReconnectNotifications />
       <AutoplayBlockedModal />
       <PermissionErrorModal />

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

@@ -1,14 +1,7 @@
 import { useEffect } from 'react';
-import {
-  HMSNotificationTypes,
-  HMSRoomState,
-  selectRoomState,
-  useHMSNotifications,
-  useHMSStore,
-} from '@100mslive/react-sdk';
+import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
 import { ToastBatcher } from '../Toast/ToastBatcher';
 import { useSubscribedNotifications } from '../AppData/useUISettings';
-import { isInternalRole } from '../../common/utils';
 import { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
 
 const notificationTypes = [
@@ -21,19 +14,15 @@ export const PeerNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
   const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
   const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
-  const roomState = useHMSStore(selectRoomState);
   useEffect(() => {
-    if (roomState !== HMSRoomState.Connected) {
-      return;
-    }
-    if (!notification || (notification?.data?.roleName && isInternalRole(notification.data.roleName))) {
+    if (!notification?.data) {
       return;
     }
 
     console.debug(`[${notification.type}]`, notification);
     switch (notification.type) {
       case HMSNotificationTypes.PEER_LIST:
-        if (!isPeerJoinSubscribed || notification.data?.length === 0) {
+        if (!isPeerJoinSubscribed || notification.data.length === 0) {
           return;
         }
         break;
@@ -52,7 +41,7 @@ export const PeerNotifications = () => {
     }
 
     ToastBatcher.showToast({ notification });
-  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, roomState]);
+  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]);
 
   return null;
 };

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

@@ -105,7 +105,11 @@ const PreviewJoin = ({
   const roomLayout = useRoomLayout();
 
   const { preview_header: previewHeader = {} } = roomLayout?.screens?.preview?.default?.elements || {};
-
+  const localPeer = useHMSStore(selectLocalPeer);
+  const videoTrack = useHMSStore(selectVideoTrackByID(localPeer?.videoTrack));
+  const isMobile = useMedia(cssConfig.media.md);
+  const aspectRatio =
+    videoTrack?.width && videoTrack?.height ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
   useEffect(() => {
     if (authToken) {
       if (skipPreview) {
@@ -166,7 +170,7 @@ const PreviewJoin = ({
           <PreviewTile name={name} error={previewError} />
         </Flex>
       ) : null}
-      <Box css={{ w: '100%', maxWidth: '640px' }}>
+      <Box css={{ w: '100%', maxWidth: `${aspectRatio * 360}px` }}>
         <PreviewControls hideSettings={!toggleVideo && !toggleAudio} />
         <PreviewForm
           name={name}
@@ -202,12 +206,13 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
   const isMobile = useMedia(cssConfig.media.md);
   const aspectRatio =
     videoTrack?.width && videoTrack?.height ? videoTrack.width / videoTrack.height : isMobile ? 9 / 16 : 16 / 9;
+
   return (
     <StyledVideoTile.Container
       css={{
         bg: '$surface_default',
         aspectRatio,
-        height: 'min(640px, 40vh)',
+        height: 'min(360px, 70vh)',
         maxWidth: '640px',
         overflow: 'clip',
         '@md': {

package/src/Prebuilt/components/RaiseHand.jsx

@@ -1,18 +1,22 @@
 import React from 'react';
-import { selectLocalPeer, selectPeerMetadata, useHMSStore } from '@100mslive/react-sdk';
+import { selectHasPeerHandRaised, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { HandIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
-import { useMyMetadata } from './hooks/useMetadata';
 
 export const RaiseHand = () => {
-  const { toggleHandRaise } = useMyMetadata();
-  const localPeer = useHMSStore(selectLocalPeer);
-  const isHandRaised = useHMSStore(selectPeerMetadata(localPeer.id))?.isHandRaised || false;
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const isHandRaised = useHMSStore(selectHasPeerHandRaised(localPeerId));
+  const actions = useHMSActions();
 
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
-      <IconButton active={!isHandRaised} onClick={toggleHandRaise}>
+      <IconButton
+        active={!isHandRaised}
+        onClick={() => {
+          isHandRaised ? actions.lowerLocalPeerHand() : actions.raiseLocalPeerHand();
+        }}
+      >
         <HandIcon />
       </IconButton>
     </Tooltip>

package/src/Prebuilt/components/RoleChangeRequestModal.tsx

@@ -64,13 +64,14 @@ export const RoleChangeRequestModal = () => {
           await hmsActions.rejectChangeRole(roleChangeRequest);
           sendEvent({ ...roleChangeRequest, peerName: name }, { peerId: roleChangeRequest.requestedBy?.id });
           await hmsActions.cancelMidCallPreview();
-          await updateMetaData({ isHandRaised: false });
+          await hmsActions.lowerLocalPeerHand();
         }
       }}
       body={body}
       onAction={async () => {
         await hmsActions.acceptChangeRole(roleChangeRequest);
-        await updateMetaData({ isHandRaised: false, prevRole: currentRole });
+        await updateMetaData({ prevRole: currentRole });
+        await hmsActions.lowerLocalPeerHand();
       }}
       actionText="Accept"
     />

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -8,11 +8,14 @@ import { Chat } from './Chat/Chat';
 // @ts-ignore: No implicit Any
 import { ParticipantList } from './Footer/ParticipantList';
 import { config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
+import { Tooltip } from '../../Tooltip';
 // @ts-ignore: No implicit Any
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneToggle } from './AppData/useSidepane';
 // @ts-ignore: No implicit Any
+import { getFormattedCount } from '../common/utils';
+// @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../common/constants';
 
 const tabTriggerCSS = {
@@ -24,6 +27,16 @@ const tabTriggerCSS = {
   justifyContent: 'center',
 };
 
+const ParticipantCount = ({ count }: { count: number }) => {
+  return count < 1000 ? (
+    <span>({count})</span>
+  ) : (
+    <Tooltip title={count}>
+      <span>({getFormattedCount(count)})</span>
+    </Tooltip>
+  );
+};
+
 export const SidePaneTabs = React.memo<{
   active: 'Participants | Chat';
   screenType: keyof ConferencingScreen;
@@ -73,7 +86,13 @@ export const SidePaneTabs = React.memo<{
           {hideTabs ? (
             <>
               <Text variant="sm" css={{ fontWeight: '$semiBold', p: '$4', c: '$on_surface_high', pr: '$12' }}>
-                {showChat ? 'Chat' : `Participants (${peerCount})`}
+                {showChat ? (
+                  'Chat'
+                ) : (
+                  <span>
+                    Participants <ParticipantCount count={peerCount} />
+                  </span>
+                )}
               </Text>
 
               {showChat ? <Chat screenType={screenType} /> : <ParticipantList />}
@@ -106,7 +125,7 @@ export const SidePaneTabs = React.memo<{
                     color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
                   }}
                 >
-                  Participants ({peerCount})
+                  Participants <ParticipantCount count={peerCount} />
                 </Tabs.Trigger>
               </Tabs.List>
               <Tabs.Content value={SIDE_PANE_OPTIONS.PARTICIPANTS} css={{ p: 0 }}>

package/src/Prebuilt/components/VideoTile.jsx

@@ -1,6 +1,8 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
 import {
   selectAudioTrackByPeerID,
+  selectHasPeerHandRaised,
   selectIsPeerAudioEnabled,
   selectLocalPeerID,
   selectPeerMetadata,
@@ -18,7 +20,7 @@ import TileMenu, { isSameTile } from './TileMenu/TileMenu';
 import { Avatar } from '../../Avatar';
 import { Box, Flex } from '../../Layout';
 import { VideoTileStats } from '../../Stats';
-import { keyframes } from '../../Theme';
+import { config as cssConfig, keyframes } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { getVideoTileLabel } from './peerTileUtils';
@@ -43,6 +45,7 @@ const Tile = ({
 }) => {
   const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID(peerId);
   const track = useHMSStore(trackSelector);
+  const isMobile = useMedia(cssConfig.media.md);
   const peerName = useHMSStore(selectPeerNameByID(peerId));
   const audioTrack = useHMSStore(selectAudioTrackByPeerID(peerId));
   const localPeerID = useHMSStore(selectLocalPeerID);
@@ -138,7 +141,7 @@ const Tile = ({
               <AudioLevel trackId={audioTrack?.id} />
             )
           ) : null}
-          {isMouseHovered || isDragabble ? (
+          {isMouseHovered || (isDragabble && isMobile) ? (
             <TileMenu
               peerID={peerId}
               audioTrackID={audioTrack?.id}
@@ -217,8 +220,8 @@ export const AudioLevel = ({ trackId }) => {
 
 const PeerMetadata = ({ peerId }) => {
   const metaData = useHMSStore(selectPeerMetadata(peerId));
-  const isHandRaised = metaData?.isHandRaised || false;
   const isBRB = metaData?.isBRBOn || false;
+  const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
 
   return (
     <Fragment>

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

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import {
+  selectHasPeerHandRaised,
   selectLocalPeerID,
   selectPeerMetadata,
   useHMSActions,
@@ -12,6 +13,7 @@ export const useMyMetadata = () => {
   const localPeerId = useHMSStore(selectLocalPeerID);
   const vanillaStore = useHMSVanillaStore();
   const metaData = useHMSStore(selectPeerMetadata(localPeerId));
+  const isHandRaised = useHMSStore(selectHasPeerHandRaised(localPeerId));
 
   const update = async updatedFields => {
     try {
@@ -25,11 +27,19 @@ export const useMyMetadata = () => {
   };
 
   const toggleHandRaise = useCallback(async () => {
-    await update({ isHandRaised: !metaData?.isHandRaised, isBRBOn: false });
-  }, [metaData?.isHandRaised]); //eslint-disable-line
+    if (isHandRaised) {
+      await hmsActions.lowerLocalPeerHand();
+    } else {
+      await hmsActions.raiseLocalPeerHand();
+    }
+  }, [isHandRaised]); //eslint-disable-line
 
   const toggleBRB = useCallback(async () => {
-    await update({ isBRBOn: !metaData?.isBRBOn, isHandRaised: false });
+    const newValue = !metaData?.isBRBOn;
+    await update({ isBRBOn: !metaData?.isBRBOn });
+    if (newValue) {
+      await hmsActions.lowerLocalPeerHand();
+    }
   }, [metaData?.isBRBOn]); //eslint-disable-line
 
   const setPrevRole = async role => {
@@ -39,7 +49,7 @@ export const useMyMetadata = () => {
   };
 
   return {
-    isHandRaised: !!metaData?.isHandRaised,
+    isHandRaised,
     isBRBOn: !!metaData?.isBRBOn,
     metaData,
     updateMetaData: update,

package/src/Prebuilt/layouts/HLSView.jsx

@@ -3,7 +3,7 @@ import { useFullscreen, useMedia, useToggle } from 'react-use';
 import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents } from '@100mslive/hls-player';
 import screenfull from 'screenfull';
 import { selectAppData, selectHLSState, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { ColoredHandIcon, ExpandIcon, RadioIcon, ShrinkIcon } from '@100mslive/react-icons';
+import { ColoredHandIcon, ExpandIcon, PlayIcon, RadioIcon, ShrinkIcon } from '@100mslive/react-icons';
 import { HlsStatsOverlay } from '../components/HlsStatsOverlay';
 import { HMSVideoPlayer } from '../components/HMSVideo';
 import { FullScreenButton } from '../components/HMSVideo/FullscreenButton';
@@ -265,6 +265,24 @@ const HLSView = () => {
             onMouseMove={onHoverHandler}
             onMouseLeave={onHoverHandler}
           >
+            {isMobile && isPaused && (
+              <Box
+                css={{
+                  position: 'absolute',
+                  top: '40%',
+                  left: '50%',
+                  transform: 'translateY(-40%) translateX(-50%)',
+                  padding: '$4 $14',
+                  display: 'inline-flex',
+                  r: '$0',
+                  bg: '$primary_default',
+                }}
+              >
+                <IconButton onClick={async () => await hlsPlayer?.play()} data-testid="play_btn">
+                  <PlayIcon width="60px" height="60px" />
+                </IconButton>
+              </Box>
+            )}
             <Flex
               ref={controlsRef}
               direction="column"

package/src/Tooltip/Tooltip.tsx

@@ -8,7 +8,7 @@ const TooltipBox = styled(BaseTooltip.Content, {
   borderRadius: '$2',
   padding: '$2 $4',
   fontSize: '$xs',
-
+  zIndex: 11,
   color: '$on_surface_high',
   backgroundColor: '$surface_bright',
   '@media (prefers-reduced-motion: no-preference)': {

package/src/fixtures/peers.ts

@@ -1,17 +1,19 @@
 import { HMSPeerWithMuteStatus } from '@100mslive/hms-video-store';
 
 let counter = 1;
-export const makeFakeParticipant = (name: string, role = 'Student') => {
+export const makeFakeParticipant = (name: string, role = 'Student'): HMSPeerWithMuteStatus => {
   return {
     peer: {
       id: String(counter++),
       name,
-      role: role,
+      roleName: role,
       auxiliaryTracks: [],
       isLocal: counter === 1,
+      groups: [],
+      isHandRaised: false,
     },
     isAudioEnabled: false,
-  } as HMSPeerWithMuteStatus;
+  };
 };
 
 export const fakeParticipants = [