@100mslive/roomkit-react 0.2.8-alpha.1 → 0.2.8-alpha.11

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -1,16 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
 import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
 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';
 import { ParticipantList } from './Footer/ParticipantList';
 import { Box, config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
 import { Tooltip } from '../../Tooltip';
 import { ChatSettings } from './ChatSettings';
-// @ts-ignore: No implicit Any
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneToggle } from './AppData/useSidepane';
@@ -19,12 +18,15 @@ import { getFormattedCount } from '../common/utils';
 import { SIDE_PANE_OPTIONS } from '../common/constants';
 
 const tabTriggerCSS = {
-  color: '$on_surface_high',
+  color: '$on_surface_low',
   p: '$4',
   fontWeight: '$semiBold',
   fontSize: '$sm',
   w: '100%',
   justifyContent: 'center',
+  '&[data-state="active"]': {
+    color: '$on_surface_high',
+  },
 };
 
 const ParticipantCount = ({ count }: { count: number }) => {
@@ -39,19 +41,19 @@ const ParticipantCount = ({ count }: { count: number }) => {
 
 export const SidePaneTabs = React.memo<{
   active: 'Participants | Chat';
-  hideControls?: boolean;
-}>(({ active = SIDE_PANE_OPTIONS.CHAT, hideControls }) => {
+  hideTab?: boolean;
+}>(({ active = SIDE_PANE_OPTIONS.CHAT, hideTab = false }) => {
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   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 { elements, screenType } = useRoomLayoutConferencingScreen();
   const chat_title = elements?.chat?.chat_title || 'Chat';
   const showChat = !!elements?.chat;
   const showParticipants = !!elements?.participant_list;
-  const hideTabs = !(showChat && showParticipants);
+  const hideTabs = !(showChat && showParticipants) || hideTab;
   const isMobile = useMedia(cssConfig.media.md);
   const isOverlayChat = !!elements?.chat?.is_overlay && isMobile;
   const { off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
@@ -59,13 +61,16 @@ export const SidePaneTabs = React.memo<{
   const showChatSettings = showChat && isChatOpen && (!isMobile || !isOverlayChat);
 
   useEffect(() => {
-    if (activeTab === SIDE_PANE_OPTIONS.CHAT && !showChat && showParticipants) {
-      setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
-    } else if (activeTab === SIDE_PANE_OPTIONS.PARTICIPANTS && showChat && !showParticipants) {
-      setActiveTab(SIDE_PANE_OPTIONS.CHAT);
-    } else if (!showChat && !showParticipants) {
-      resetSidePane();
-    }
+    match({ activeTab, showChat, showParticipants })
+      .with({ activeTab: SIDE_PANE_OPTIONS.CHAT, showChat: false, showParticipants: true }, () => {
+        setActiveTab(SIDE_PANE_OPTIONS.PARTICIPANTS);
+      })
+      .with({ activeTab: SIDE_PANE_OPTIONS.PARTICIPANTS, showChat: true, showParticipants: false }, () => {
+        setActiveTab(SIDE_PANE_OPTIONS.CHAT);
+      })
+      .with({ showChat: false, showParticipants: false }, () => {
+        resetSidePane();
+      });
   }, [showChat, activeTab, showParticipants, resetSidePane]);
 
   useEffect(() => {
@@ -79,7 +84,6 @@ export const SidePaneTabs = React.memo<{
         css={{
           color: '$on_primary_high',
           h: '100%',
-          marginTop: hideControls && isOverlayChat ? '$17' : '0',
           transition: 'margin 0.3s ease-in-out',
           position: 'relative',
         }}
@@ -97,20 +101,27 @@ export const SidePaneTabs = React.memo<{
       css={{
         color: '$on_primary_high',
         h: '100%',
-        marginTop: hideControls && isOverlayChat ? '$17' : '0',
         transition: 'margin 0.3s ease-in-out',
       }}
     >
-      {isOverlayChat && isChatOpen && showChat ? (
-        <Chat />
-      ) : (
-        <>
-          {hideTabs ? (
+      {match({ isOverlayChat, isChatOpen, showChat, hideTabs })
+        .with({ isOverlayChat: true, isChatOpen: true, showChat: true }, () => <Chat />)
+        .with({ hideTabs: true }, () => {
+          return (
             <>
-              <Flex justify="between" css={{ w: '100%' }}>
-                <Text variant="sm" css={{ fontWeight: '$semiBold', p: '$4', c: '$on_surface_high', pr: '$12' }}>
-                  {showChat ? (
-                    chat_title
+              <Flex justify="between" css={{ w: '100%', '&:empty': { display: 'none' } }}>
+                <Text
+                  variant="sm"
+                  css={{
+                    fontWeight: '$semiBold',
+                    p: '$4',
+                    c: '$on_surface_high',
+                    pr: '$12',
+                    '&:empty': { display: 'none' },
+                  }}
+                >
+                  {activeTab === SIDE_PANE_OPTIONS.CHAT ? (
+                    screenType !== 'hls_live_streaming' && chat_title
                   ) : (
                     <span>
                       Participants&nbsp;
@@ -122,7 +133,12 @@ export const SidePaneTabs = React.memo<{
                   {showChatSettings ? <ChatSettings /> : null}
                   {isOverlayChat && isChatOpen ? null : (
                     <IconButton
-                      css={{ my: '$1', color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' } }}
+                      css={{
+                        my: '$1',
+                        color: '$on_surface_medium',
+                        '&:hover': { color: '$on_surface_high' },
+                        '&:empty': { display: 'none' },
+                      }}
                       onClick={e => {
                         e.stopPropagation();
                         if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
@@ -133,14 +149,21 @@ export const SidePaneTabs = React.memo<{
                       }}
                       data-testid="close_chat"
                     >
-                      <CrossIcon />
+                      {screenType === 'hls_live_streaming' && isChatOpen ? null : <CrossIcon />}
                     </IconButton>
                   )}
                 </Flex>
               </Flex>
-              {showChat ? <Chat /> : <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />}
+              {activeTab === SIDE_PANE_OPTIONS.CHAT ? (
+                <Chat />
+              ) : (
+                <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />
+              )}
             </>
-          ) : (
+          );
+        })
+        .otherwise(() => {
+          return (
             <Tabs.Root
               value={activeTab}
               onValueChange={setActiveTab}
@@ -151,24 +174,10 @@ export const SidePaneTabs = React.memo<{
             >
               <Flex css={{ w: '100%' }}>
                 <Tabs.List css={{ flexGrow: 1, borderRadius: '$2', bg: '$surface_default' }}>
-                  <Tabs.Trigger
-                    value={SIDE_PANE_OPTIONS.CHAT}
-                    onClick={toggleChat}
-                    css={{
-                      ...tabTriggerCSS,
-                      color: activeTab !== SIDE_PANE_OPTIONS.CHAT ? '$on_surface_low' : '$on_surface_high',
-                    }}
-                  >
+                  <Tabs.Trigger value={SIDE_PANE_OPTIONS.CHAT} onClick={toggleChat} css={tabTriggerCSS}>
                     {chat_title}
                   </Tabs.Trigger>
-                  <Tabs.Trigger
-                    value={SIDE_PANE_OPTIONS.PARTICIPANTS}
-                    onClick={toggleParticipants}
-                    css={{
-                      ...tabTriggerCSS,
-                      color: activeTab !== SIDE_PANE_OPTIONS.PARTICIPANTS ? '$on_surface_low' : '$on_surface_high',
-                    }}
-                  >
+                  <Tabs.Trigger value={SIDE_PANE_OPTIONS.PARTICIPANTS} onClick={toggleParticipants} css={tabTriggerCSS}>
                     Participants&nbsp;
                     <ParticipantCount count={peerCount} />
                   </Tabs.Trigger>
@@ -198,9 +207,8 @@ export const SidePaneTabs = React.memo<{
                 <Chat />
               </Tabs.Content>
             </Tabs.Root>
-          )}
-        </>
-      )}
+          );
+        })}
     </Flex>
   );
 });

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { match, P } from 'ts-pattern';
 import {
   selectHMSStats,
   selectLocalPeerID,
@@ -188,11 +189,15 @@ const LocalPeerStats = () => {
 };
 
 const TrackStats = ({ trackID, layer, local }) => {
-  const selector = layer
-    ? selectHMSStats.localVideoTrackStatsByLayer(layer)(trackID)
-    : local
-    ? selectHMSStats.localAudioTrackStatsByID(trackID)
-    : selectHMSStats.trackStatsByID(trackID);
+  const selector = match({ trackID, layer, local })
+    .with(
+      {
+        layer: P.when(layer => !!layer),
+      },
+      () => selectHMSStats.localVideoTrackStatsByLayer(layer)(trackID),
+    )
+    .with({ local: P.when(local => !!local) }, () => selectHMSStats.localAudioTrackStatsByID(trackID))
+    .otherwise(() => selectHMSStats.trackStatsByID(trackID));
   const stats = useHMSStatsStore(selector);
   if (!stats) {
     return null;
@@ -215,7 +220,10 @@ const TrackStats = ({ trackID, layer, local }) => {
           {!inbound && <StatsRow label="Quality Limitation Reason" value={stats.qualityLimitationReason} />}
         </>
       )}
-      <StatsRow label="Round Trip Time" value={stats.roundTripTime ? `${stats.roundTripTime * 1000} ms` : '-'} />
+      <StatsRow
+        label="Round Trip Time"
+        value={stats.roundTripTime ? `${(stats.roundTripTime * 1000).toFixed(3)} ms` : '-'}
+      />
     </Flex>
   );
 };

package/src/Prebuilt/components/Streaming/Common.jsx

@@ -20,7 +20,7 @@ export const StreamCard = ({ title, subtitle, Icon, imgSrc = '', css = {}, onCli
       onClick={onClick}
     >
       <Text css={{ alignSelf: 'center', p: '$4' }}>
-        {imgSrc ? <img src={imgSrc} height={40} width={40} /> : <Icon width={40} height={40} />}
+        {imgSrc ? <img src={imgSrc} height={40} width={40} alt="Streaming" /> : <Icon width={40} height={40} />}
       </Text>
       <Box css={{ flex: '1 1 0', mx: '$8' }}>
         <Text variant="h6" css={{ mb: '$4' }}>

package/src/Prebuilt/components/TileMenu/TileMenuContent.tsx

@@ -289,7 +289,7 @@ export const TileMenuContent = ({
           data-testid={isVideoEnabled ? 'mute_video_participant_btn' : 'unmute_video_participant_btn'}
         >
           {isVideoEnabled ? <VideoOnIcon height={20} width={20} /> : <VideoOffIcon height={20} width={20} />}
-          <span>{isVideoEnabled ? 'Mute' : 'Request Unmute'}</span>
+          <span>{isVideoEnabled ? 'Mute Video' : 'Request to Unmute Video'}</span>
         </StyledMenuTile.ItemButton>
       ) : null}
 
@@ -304,7 +304,7 @@ export const TileMenuContent = ({
           data-testid={isAudioEnabled ? 'mute_audio_participant_btn' : 'unmute_audio_participant_btn'}
         >
           {isAudioEnabled ? <MicOnIcon height={20} width={20} /> : <MicOffIcon height={20} width={20} />}
-          <span>{isAudioEnabled ? 'Mute' : 'Request Unmute'}</span>
+          <span>{isAudioEnabled ? 'Mute Audio' : 'Request to Unmute Audio'}</span>
         </StyledMenuTile.ItemButton>
       ) : null}
 

package/src/Prebuilt/components/Toast/ToastBatcher.js

@@ -3,6 +3,7 @@ import { ToastManager } from './ToastManager';
 
 export const ToastBatcher = {
   toastsType: new Map(),
+  toastCache: {},
   showToastInternal({ notification, duration, type }) {
     let notificationType = type;
     if (!type) {
@@ -40,7 +41,13 @@ export const ToastBatcher = {
   },
   showToast({ notification, duration = 3000, type }) {
     try {
-      this.showToastInternal({ notification, duration, type });
+      if (!this.toastCache[notification.id]) {
+        this.showToastInternal({ notification, duration, type });
+      }
+      this.toastCache[notification.id] = true;
+      if (Object.keys(this.toastCache).length > 100) {
+        this.toastCache = {};
+      }
     } catch (err) {
       console.debug('Notifications', err);
     }

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -123,6 +123,23 @@ export const ToastConfig = {
     },
   },
   RAISE_HAND: {
+    single: notification => {
+      return {
+        title: `${notification.data?.name} raised hand`,
+        icon: <HandIcon />,
+      };
+    },
+    multiple: notifications => {
+      const count = new Set(notifications.map(notification => notification.data?.id)).size;
+      return {
+        title: `${notifications[notifications.length - 1].data?.name} ${
+          count > 1 ? `${count} and others` : ''
+        } raised hand`,
+        icon: <HandIcon />,
+      };
+    },
+  },
+  RAISE_HAND_HLS: {
     single: notification => {
       return {
         title: `${notification.data?.name} raised hand`,

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

@@ -61,7 +61,7 @@ export function ShareScreenOptions() {
               pt: '$10',
               pb: '$6',
               '&:hover': {
-                bg: '$transparent',
+                bg: 'transparent',
                 cursor: 'default',
               },
             }}
@@ -78,7 +78,7 @@ export function ShareScreenOptions() {
               pt: '$6',
               pb: '$10',
               '&:hover': {
-                bg: '$transparent',
+                bg: 'transparent',
                 cursor: 'default',
               },
             }}

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

@@ -36,7 +36,7 @@ export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
                 w: '100%',
                 '&:focus': {
                   boxShadow: '0 0 0 1px $colors$primary_default',
-                  border: '1px solid $transparent',
+                  border: '1px solid transparent',
                 },
                 mb: 0,
                 mt: '$6',