@100mslive/roomkit-react 0.3.4 → 0.3.5-alpha.1

package/src/Avatar/getAvatarBg.ts

@@ -2,13 +2,17 @@ const getInitials = (name: string | undefined) => {
   if (!name) {
     return undefined;
   } else {
-    return name
-      .trim()
-      .match(/(^\S\S?|\b\S)?/g)
-      ?.join('')
-      ?.match(/(^\S|\S$)?/g)
-      ?.join('')
-      .toUpperCase();
+    return (
+      name
+        .trim()
+        // remove non chars/digits
+        .replace(/[^a-zA-Z0-9]/g, '')
+        .match(/(^\S\S?|\b\S)?/g)
+        ?.join('')
+        ?.match(/(^\S|\S$)?/g)
+        ?.join('')
+        .toUpperCase()
+    );
   }
 };
 

package/src/Prebuilt/App.tsx

@@ -1,6 +1,7 @@
 import React, { MutableRefObject, useEffect, useRef } from 'react';
 import { HMSStatsStoreWrapper, HMSStoreWrapper, IHMSNotifications } from '@100mslive/hms-video-store';
 import { Layout, Logo, Screens, Theme, Typography } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
 import {
   HMSActions,
   HMSReactiveStore,
@@ -251,12 +252,10 @@ const AppStates = ({ activeState }: { activeState: PrebuiltStates }) => {
   const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
   useAutoStartStreaming();
 
-  if (activeState === PrebuiltStates.PREVIEW && isPreviewScreenEnabled) {
-    return <PreviewScreen />;
-  } else if (activeState === PrebuiltStates.LEAVE && isLeaveScreenEnabled) {
-    return <LeaveScreen />;
-  }
-  return <ConferenceScreen />;
+  return match({ activeState, isPreviewScreenEnabled, isLeaveScreenEnabled })
+    .with({ activeState: PrebuiltStates.PREVIEW, isPreviewScreenEnabled: true }, () => <PreviewScreen />)
+    .with({ activeState: PrebuiltStates.LEAVE, isLeaveScreenEnabled: true }, () => <LeaveScreen />)
+    .otherwise(() => <ConferenceScreen />);
 };
 
 const BackSwipe = () => {

package/src/Prebuilt/AppStateContext.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import { usePreviousDistinct } from 'react-use';
+import { match, P } from 'ts-pattern';
 import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
 import { VBHandler } from './components/VirtualBackground/VBHandler';
 import { useRoomLayout } from './provider/roomLayoutProvider';
@@ -52,20 +53,32 @@ export const useAppStateManager = () => {
     if (!roomLayout) {
       return;
     }
-    if (roomState === HMSRoomState.Connected) {
-      setActiveState(PrebuiltStates.MEETING);
-    } else if (
-      prevRoomState &&
-      [HMSRoomState.Reconnecting, HMSRoomState.Connected, HMSRoomState.Connecting].includes(prevRoomState) &&
-      [HMSRoomState.Disconnecting, HMSRoomState.Disconnected].includes(roomState)
-    ) {
-      const goTo = isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING;
-      setActiveState(isLeaveScreenEnabled ? PrebuiltStates.LEAVE : goTo);
-      VBHandler.reset();
-      redirectToLeave(1000); // to clear toasts after 1 second
-    } else if (!prevRoomState && roomState === HMSRoomState.Disconnected) {
-      setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
-    }
+    match([roomState, prevRoomState])
+      .with([HMSRoomState.Connected, P.any], () => setActiveState(PrebuiltStates.MEETING))
+      .with(
+        [HMSRoomState.Disconnecting, HMSRoomState.Connected],
+        [HMSRoomState.Disconnecting, HMSRoomState.Connecting],
+        [HMSRoomState.Disconnecting, HMSRoomState.Reconnecting],
+        [HMSRoomState.Disconnected, HMSRoomState.Connected],
+        [HMSRoomState.Disconnected, HMSRoomState.Connecting],
+        [HMSRoomState.Disconnected, HMSRoomState.Reconnecting],
+        () => {
+          setActiveState(
+            match({ isLeaveScreenEnabled, isPreviewScreenEnabled })
+              .with({ isLeaveScreenEnabled: true }, () => PrebuiltStates.LEAVE)
+              .with({ isPreviewScreenEnabled: true }, () => PrebuiltStates.PREVIEW)
+              .otherwise(() => PrebuiltStates.MEETING),
+          );
+          VBHandler.reset();
+          redirectToLeave(1000); // to clear toasts after 1 second
+        },
+      )
+      .with([HMSRoomState.Disconnected, P.nullish], () => {
+        setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
+      })
+      .otherwise(() => {
+        // do nothing
+      });
   }, [roomLayout, roomState, isLeaveScreenEnabled, isPreviewScreenEnabled, prevRoomState, redirectToLeave]);
 
   return { activeState, rejoin };

package/src/Prebuilt/components/AuthToken.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useSessionStorage } from 'react-use';
+import { match } from 'ts-pattern';
 import { v4 as uuid } from 'uuid';
 import { useHMSActions } from '@100mslive/react-sdk';
 import { Dialog } from '../../Modal';
@@ -88,38 +89,38 @@ const convertError = error => {
     'If you think this is a mistake on our side, please reach out to us over Discord:',
     'https://discord.com/invite/kGdmszyzq2',
   );
-  if (error.action === 'GET_TOKEN' && error.code === 403) {
-    return {
+  return match([error.action, error.code])
+    .with(['GET_TOKEN', 403], () => ({
       title: 'Psst! This room is currently inactive.',
       body: 'Please feel free to join another open room for more conversations. Thanks for stopping by!',
-    };
-  } else if (error.action === 'GET_TOKEN' && error.code === 404) {
-    return {
+    }))
+
+    .with(['GET_TOKEN', 404], () => ({
       title: 'Room code does not exist',
       body: 'We could not find a room code corresponding to this link.',
-    };
-  } else if (error.action === 'GET_TOKEN' && error.code === 2003) {
-    return {
+    }))
+    .with(['GET_TOKEN', 2003], () => ({
       title: 'Endpoint is not reachable',
       body: `Endpoint is not reachable. ${error.description}.`,
-    };
-  } else if (error.response && error.response.status === 404) {
-    return {
-      title: 'Room does not exist',
-      body: 'We could not find a room corresponding to this link.',
-    };
-  } else if (error.response && error.response.status === 403) {
-    return {
-      title: 'Accessing room using this link format is disabled',
-      body: 'You can re-enable this from the developer section in Dashboard.',
-    };
-  } else {
-    console.error('Token API Error', error);
-    return {
-      title: 'Error fetching token',
-      body: 'An error occurred while fetching the app token. Please look into logs for more details.',
-    };
-  }
+    }))
+    .otherwise(() =>
+      match(error.response?.status)
+        .with(404, () => ({
+          title: 'Room does not exist',
+          body: 'We could not find a room corresponding to this link.',
+        }))
+        .with(403, () => ({
+          title: 'Accessing room using this link format is disabled',
+          body: 'You can re-enable this from the developer section in Dashboard.',
+        }))
+        .otherwise(() => {
+          console.error('Token API Error', error);
+          return {
+            title: 'Error fetching token',
+            body: 'An error occurred while fetching the app token. Please look into logs for more details.',
+          };
+        }),
+    );
 };
 
 export default AuthToken;

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
-import { HMSException, selectLocalPeer, useAVToggle, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { HMSException, selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled, Text } from '../../..';
 import { IconButton } from '../../../IconButton';
@@ -89,8 +89,6 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   const defaultSelection = useDefaultChatSelection();
   const selection = selectedPeer.name || selectedRole || defaultSelection;
   const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
-  const { toggleAudio, toggleVideo } = useAVToggle();
-  const noAVPermissions = !(toggleAudio || toggleVideo);
   const isMwebHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
 
@@ -275,7 +273,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
                 }}
                 gap="2"
               >
-                {noAVPermissions ? <RaiseHand css={{ bg: '$surface_default' }} /> : null}
+                <RaiseHand css={{ bg: '$surface_default' }} />
                 <MoreSettings elements={elements} screenType={screenType} />
               </Flex>
             </>

package/src/Prebuilt/components/Chat/ChatSelector.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
   HMSPeer,
+  HMSPeerType,
   selectMessagesUnreadCountByPeerID,
   selectMessagesUnreadCountByRole,
   selectRemotePeers,
@@ -158,7 +159,9 @@ const VirtualizedSelectItemList = ({
     () =>
       peers.filter(
         // search should be empty or search phrase should be included in name
-        peer => !searchValue || peer.name.toLowerCase().includes(searchValue.toLowerCase()),
+        peer =>
+          (!searchValue || peer.name.toLowerCase().includes(searchValue.toLowerCase())) &&
+          peer.type !== HMSPeerType.SIP,
       ),
     [peers, searchValue],
   );

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -6,7 +6,6 @@ import {
   selectAppData,
   selectIsConnectedToRoom,
   selectRoomState,
-  useAVToggle,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
@@ -54,8 +53,6 @@ export const ConferenceScreen = () => {
   const dropdownListRef = useRef<string[]>();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
 
-  const { toggleAudio, toggleVideo } = useAVToggle();
-  const noAVPermissions = !(toggleAudio || toggleVideo);
   // using it in hls stream to show action button when chat is disabled
   const showChat = !!screenProps.elements?.chat;
   const autoRoomJoined = useRef(isPreviewScreenEnabled);
@@ -202,7 +199,7 @@ export const ConferenceScreen = () => {
             justify="end"
             gap="2"
           >
-            {noAVPermissions ? <RaiseHand /> : null}
+            <RaiseHand />
             <MoreSettings elements={screenProps.elements} screenType={screenProps.screenType} />
             <Box
               css={{

package/src/Prebuilt/components/Connection/ConnectionIndicator.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectConnectionQualityByPeerID, useHMSStore } from '@100mslive/react-sdk';
+import { HMSPeerType, selectConnectionQualityByPeerID, selectPeerTypeByID, useHMSStore } from '@100mslive/react-sdk';
 import { PoorConnectivityIcon } from '@100mslive/react-icons';
 import { styled, Tooltip, useTheme } from '../../..';
 // @ts-ignore
@@ -32,9 +32,10 @@ export const ConnectionIndicator = ({
   hideBg?: boolean;
 }) => {
   const downlinkQuality = useHMSStore(selectConnectionQualityByPeerID(peerId))?.downlinkQuality;
+  const peerType = useHMSStore(selectPeerTypeByID(peerId));
   const { theme } = useTheme();
   const defaultColor = theme.colors.on_surface_low;
-  if (downlinkQuality === -1 || downlinkQuality === undefined) {
+  if (downlinkQuality === -1 || downlinkQuality === undefined || peerType === HMSPeerType.SIP) {
     return null;
   }
   if (downlinkQuality === 0) {

package/src/Prebuilt/components/Connection/TileConnection.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
-import { selectScreenShareByPeerID, selectSessionStore, useHMSStore } from '@100mslive/react-sdk';
-import { PinIcon, ShareScreenIcon, SpotlightIcon } from '@100mslive/react-icons';
+import {
+  HMSPeerType,
+  selectPeerTypeByID,
+  selectScreenShareByPeerID,
+  selectSessionStore,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { CallIcon, PinIcon, ShareScreenIcon, SpotlightIcon } from '@100mslive/react-icons';
 import { Flex, styled, Text, textEllipsis } from '../../..';
 import { ConnectionIndicator } from './ConnectionIndicator';
 import { SESSION_STORE_KEY } from '../../common/constants';
@@ -20,12 +26,18 @@ const TileConnection = ({
 }) => {
   const spotlighted = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT)) === peerId;
   const isPeerScreenSharing = !!useHMSStore(selectScreenShareByPeerID(peerId));
+  const peerType = useHMSStore(selectPeerTypeByID(peerId));
   return (
     <Wrapper>
       {!hideLabel ? (
         <>
           {name ? (
             <Flex align="center">
+              {peerType === HMSPeerType.SIP && (
+                <IconWrapper>
+                  <CallIcon width="15" height="15" />
+                </IconWrapper>
+              )}
               {isPeerScreenSharing && (
                 <IconWrapper>
                   <ShareScreenIcon width="15" height="15" />

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

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
 import { ConferencingScreen } 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,8 +40,6 @@ 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);
   const { showPolls } = useShowPolls();
@@ -90,7 +87,7 @@ export const Footer = ({
       >
         {isMobile ? (
           <>
-            {noAVPermissions ? <RaiseHand /> : null}
+            <RaiseHand />
             {elements?.chat && <ChatToggle />}
             <MoreSettings elements={elements} screenType={screenType} />
           </>

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

@@ -2,6 +2,7 @@ import React, { Fragment, useCallback, useState } from 'react';
 import { useDebounce, useMedia } from 'react-use';
 import {
   HMSPeer,
+  HMSPeerType,
   HMSRoleName,
   selectHandRaisedPeers,
   selectHasPeerHandRaised,
@@ -14,6 +15,7 @@ import {
 } from '@100mslive/react-sdk';
 import {
   AddIcon,
+  CallIcon,
   ChangeRoleIcon,
   CrossIcon,
   HandIcon,
@@ -184,6 +186,7 @@ export const Participant = ({
       {isConnected && peer.roleName ? (
         <ParticipantActions
           peerId={peer.id}
+          peerType={peer.type}
           isLocal={peer.id === localPeerId}
           role={peer.roleName}
           isHandRaisedAccordion={isHandRaisedAccordion}
@@ -261,6 +264,7 @@ const VirtualizedParticipants = ({
 const ParticipantActions = React.memo(
   ({
     peerId,
+    peerType,
     role,
     isLocal,
     isHandRaisedAccordion,
@@ -269,6 +273,7 @@ const ParticipantActions = React.memo(
     role: string;
     isLocal: boolean;
     isHandRaisedAccordion?: boolean;
+    peerType: HMSPeerType;
   }) => {
     const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
     const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
@@ -291,6 +296,15 @@ const ParticipantActions = React.memo(
         ) : (
           <>
             <ConnectionIndicator peerId={peerId} />
+            {peerType === HMSPeerType.SIP && (
+              <Flex
+                align="center"
+                justify="center"
+                css={{ p: '$1', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
+              >
+                <CallIcon width={19} height={19} />
+              </Flex>
+            )}
             {isHandRaised && (
               <Flex
                 align="center"

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

@@ -29,7 +29,6 @@ import { FullScreenItem } from '../FullScreenItem';
 import { MuteAllModal } from '../MuteAllModal';
 // @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
-// @ts-ignore: No implicit any
 import { useMyMetadata } from '../../hooks/useMetadata';
 // @ts-ignore: No implicit any
 import { APP_DATA, isMacOS } from '../../../common/constants';
@@ -117,7 +116,7 @@ export const DesktopOptions = ({
           ) : null}
 
           {screenType !== 'hls_live_streaming' ? (
-            <Dropdown.Item>
+            <Dropdown.Item css={{ '&:empty': { display: 'none' } }}>
               <PIP
                 content={
                   <Flex css={{ w: '100%' }}>

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

@@ -6,7 +6,6 @@ import {
   selectIsConnectedToRoom,
   selectPeerCount,
   selectPermissions,
-  useAVToggle,
   useHMSActions,
   useHMSStore,
   useRecordingStreaming,
@@ -51,7 +50,6 @@ import { usePollViewToggle, useSidepaneToggle } from '../../AppData/useSidepane'
 import { useShowPolls } from '../../AppData/useUISettings';
 // @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
-// @ts-ignore: No implicit any
 import { useMyMetadata } from '../../hooks/useMetadata';
 import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../../../common/hooks';
@@ -95,8 +93,6 @@ 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 { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
   const { title, description } = useRoomLayoutHeader();
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
@@ -175,7 +171,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             )}
 
-            {!noAVPermissions ? (
+            {elements.hand_raise ? (
               <ActionTile.Root
                 active={isHandRaised}
                 onClick={() => {

package/src/Prebuilt/components/PreviousRoleInMetadata.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import { selectLocalPeerRoleName, useHMSVanillaStore } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
 import { useMyMetadata } from './hooks/useMetadata';
 
 export const PreviousRoleInMetadata = () => {

package/src/Prebuilt/components/RaiseHand.tsx

@@ -4,11 +4,17 @@ import { CSS } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 // @ts-ignore: No implicit Any
 import IconButton from '../IconButton';
-// @ts-ignore: No implicit Any
+import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useMyMetadata } from './hooks/useMetadata';
 
 export const RaiseHand = ({ css }: { css?: CSS }) => {
   const { isHandRaised, toggleHandRaise } = useMyMetadata();
+  const { elements } = useRoomLayoutConferencingScreen();
+
+  if (!elements.hand_raise) {
+    return null;
+  }
+
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
       <IconButton

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

@@ -13,7 +13,6 @@ import { Flex, Text } from '../../..';
 import { PreviewControls, PreviewTile } from '../Preview/PreviewJoin';
 import { RequestPrompt } from './RequestPrompt';
 import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
 import { useMyMetadata } from '../hooks/useMetadata';
 // @ts-ignore: No implicit Any
 import { ROLE_CHANGE_DECLINED } from '../../common/constants';

package/src/Prebuilt/components/hooks/{useMetadata.jsx → useMetadata.tsx}

@@ -15,7 +15,7 @@ export const useMyMetadata = () => {
   const metaData = useHMSStore(selectPeerMetadata(localPeerId));
   const isHandRaised = useHMSStore(selectHasPeerHandRaised(localPeerId));
 
-  const update = async updatedFields => {
+  const update = async (updatedFields: Record<string, any>) => {
     try {
       // get current state from store and merge updated fields
       const currentMetadata = vanillaStore.getState(selectPeerMetadata(localPeerId));
@@ -24,6 +24,7 @@ export const useMyMetadata = () => {
     } catch (error) {
       console.error('failed to update metadata ', updatedFields);
     }
+    return false;
   };
 
   const toggleHandRaise = useCallback(async () => {
@@ -43,12 +44,6 @@ export const useMyMetadata = () => {
     }
   }, [metaData?.isBRBOn]); //eslint-disable-line
 
-  const setPrevRole = async role => {
-    await update({
-      prevRole: role,
-    });
-  };
-
   return {
     isHandRaised,
     isBRBOn: !!metaData?.isBRBOn,
@@ -56,6 +51,5 @@ export const useMyMetadata = () => {
     updateMetaData: update,
     toggleHandRaise,
     toggleBRB,
-    setPrevRole,
   };
 };

package/src/Prebuilt/layouts/HLSView.jsx

@@ -602,7 +602,10 @@ const HLSView = () => {
                               if (isFullScreen) {
                                 toggle();
                               }
-                              toggleChat();
+                              // toggle and closing fullscreen takes few ms, to make it synced we are calling settimeout
+                              setTimeout(() => {
+                                toggleChat();
+                              }, 0);
                             }}
                           />
                         )}

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -70,20 +70,6 @@ export const VideoStreamingSection = ({
     return null;
   }
 
-  let ViewComponent;
-  if (screenType === 'hls_live_streaming') {
-    ViewComponent = <HLSView />;
-  } else if (localPeerRole === waitingViewerRole) {
-    ViewComponent = <WaitingView />;
-  } else if (pdfAnnotatorActive) {
-    ViewComponent = <PDFView />;
-  } else if (urlToIframe) {
-    ViewComponent = <EmbedView />;
-  } else {
-    //@ts-ignore
-    ViewComponent = <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
-  }
-
   return (
     <Suspense fallback={<FullPageProgress />}>
       <Flex
@@ -97,7 +83,28 @@ export const VideoStreamingSection = ({
           .with({ isMobileHLSStream: true }, () => 'column')
           .otherwise(() => 'row')}
       >
-        {ViewComponent}
+        {match({ screenType, localPeerRole, pdfAnnotatorActive, urlToIframe })
+          .with(
+            {
+              screenType: 'hls_live_streaming',
+            },
+            () => <HLSView />,
+          )
+          .when(
+            ({ localPeerRole }) => localPeerRole === waitingViewerRole,
+            () => <WaitingView />,
+          )
+          .with({ pdfAnnotatorActive: true }, () => <PDFView />)
+          .when(
+            ({ urlToIframe }) => !!urlToIframe,
+            () => <EmbedView />,
+          )
+
+          .otherwise(() => {
+            // @ts-ignore
+            return <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
+          })}
+
         <Box
           css={{
             flex: match({ isLandscapeHLSStream, isMobileHLSStream })

package/src/Stats/Stats.tsx

@@ -56,7 +56,7 @@ export function VideoTileStats({ videoTrackID, audioTrackID, peerID, isLocal = f
                 }
                 const layer = stat.rid ? simulcastMapping[stat.rid as RID] : '';
                 return (
-                  <Fragment>
+                  <Fragment key={`${stat.id}${stat.rid}`}>
                     {layer && <StatsRow label={layer.toUpperCase()} value="" />}
                     <StatsRow
                       show={isNotNullishAndNot0(stat.frameWidth)}
@@ -106,6 +106,16 @@ export function VideoTileStats({ videoTrackID, audioTrackID, peerID, isLocal = f
                     : ''
                 }`}
               />
+              <StatsRow
+                show={isNotNullish(videoTrackStats?.totalPausesDuration)}
+                label="Pauses Duration"
+                value={videoTrackStats?.totalPausesDuration}
+              />
+              <StatsRow
+                show={isNotNullish(videoTrackStats?.totalFreezesDuration)}
+                label="Freezes Duration"
+                value={videoTrackStats?.totalFreezesDuration}
+              />
               <StatsRow
                 show={isNotNullish(videoTrackStats?.bitrate)}
                 label="Bitrate(V)"
@@ -185,7 +195,7 @@ const RawStatsRow = ({
   show?: boolean;
   tooltip?: string;
 }) => {
-  const statsLabel = <Stats.Label css={{ fontWeight: !value ? '$semiBold' : '$regular' }}>{label}</Stats.Label>;
+  const statsLabel = <Stats.Label>{label}</Stats.Label>;
 
   return (
     <>

package/src/fixtures/peers.ts

@@ -1,4 +1,4 @@
-import { HMSPeerWithMuteStatus } from '@100mslive/hms-video-store';
+import { HMSPeerType, HMSPeerWithMuteStatus } from '@100mslive/react-sdk';
 
 let counter = 1;
 export const makeFakeParticipant = (name: string, role = 'Student'): HMSPeerWithMuteStatus => {
@@ -11,6 +11,7 @@ export const makeFakeParticipant = (name: string, role = 'Student'): HMSPeerWith
       isLocal: counter === 1,
       groups: [],
       isHandRaised: false,
+      type: HMSPeerType.REGULAR,
     },
     isAudioEnabled: false,
   };