@100mslive/roomkit-react 0.2.8-alpha.0 → 0.2.8-alpha.10

package/src/Prebuilt/components/Polls/Voting/Voting.tsx

@@ -38,9 +38,9 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
       <Flex
         align="center"
         css={{
-          gap: '$6',
+          gap: '$4',
           py: '$6',
-          px: '$10',
+          px: '$8',
           my: '$4',
           w: '100%',
           color: '$on_surface_high',
@@ -60,6 +60,7 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
             marginLeft: 'auto',
             cursor: 'pointer',
             '&:hover': { opacity: '0.8' },
+            height: 'fit-content',
           }}
         >
           <CrossIcon onClick={toggleVoting} />

package/src/Prebuilt/components/Polls/common/OptionInputWithDelete.tsx

@@ -29,7 +29,7 @@ export const OptionInputWithDelete = ({
         key={index}
         onChange={event => handleOptionTextChange(index, event.target.value)}
       />
-      <IconButton onClick={() => removeOption(index)} css={{ bg: '$transparent', border: 'none' }}>
+      <IconButton onClick={() => removeOption(index)} css={{ bg: 'transparent', border: 'none' }}>
         <TrashIcon />
       </IconButton>
     </>

package/src/Prebuilt/components/Polls/common/utils.ts

@@ -4,7 +4,7 @@ export const getFormattedTime = (milliseconds: number | undefined, precise = tru
   const totalSeconds = milliseconds / 1000;
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = precise ? totalSeconds % 60 : Math.floor(totalSeconds % 60);
+  const seconds = totalSeconds % 60;
 
   let formattedTime = '';
   if (hours) {
@@ -16,7 +16,7 @@ export const getFormattedTime = (milliseconds: number | undefined, precise = tru
   if (!precise && (hours || minutes)) {
     return formattedTime;
   }
-  formattedTime += `${seconds}s`;
+  formattedTime += `${precise ? seconds.toFixed(3) : Math.floor(seconds)}s`;
 
   return formattedTime;
 };

package/src/Prebuilt/components/RaiseHand.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { HandIcon, HandRaiseSlashedIcon } from '@100mslive/react-icons';
+import { CSS } from '../../Theme';
+import { Tooltip } from '../../Tooltip';
+// @ts-ignore: No implicit Any
+import IconButton from '../IconButton';
+// @ts-ignore: No implicit Any
+import { useMyMetadata } from './hooks/useMetadata';
+
+export const RaiseHand = ({ css }: { css?: CSS }) => {
+  const { isHandRaised, toggleHandRaise } = useMyMetadata();
+  return (
+    <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
+      <IconButton
+        data-testid="hand_raise_btn"
+        css={css}
+        active={!isHandRaised}
+        onClick={async () => await toggleHandRaise()}
+      >
+        {isHandRaised ? <HandRaiseSlashedIcon /> : <HandIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx

@@ -2,31 +2,32 @@ import React from 'react';
 import { CrossIcon } from '@100mslive/react-icons';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
+// @ts-ignore: No implicit any
+import { Logo } from '../Header/HeaderComponents';
 import { RoomDetailsRow } from './RoomDetailsRow';
 import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore
 import { useSidepaneToggle } from '../AppData/useSidepane';
+import { useMobileHLSStream } from '../../common/hooks';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
 export const RoomDetailsPane = () => {
-  const { title, description, details } = useRoomLayoutHeader();
-  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+  const { description } = useRoomLayoutHeader();
+  const isMwebHLSStream = useMobileHLSStream();
   return (
     <Box css={{ flex: '1 1 0' }}>
-      <Flex justify="between" align="center" css={{ w: '100%' }}>
-        <Text variant="h6">{title}</Text>
-        <Flex
-          onClick={toggleDetailsPane}
-          css={{ color: '$on_surface_high', cursor: 'pointer', '&:hover': { opacity: '0.8' } }}
-        >
-          <CrossIcon />
+      {isMwebHLSStream ? (
+        <Flex direction="row" align="center" gap="2">
+          <Logo />
+          <ShowRoomDetailHeader />
         </Flex>
-      </Flex>
-
-      <RoomDetailsRow details={details} />
-
+      ) : (
+        <ShowRoomDetailHeader />
+      )}
       <Box css={{ mt: '$10' }}>
-        <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>Description</Text>
+        <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold', display: isMwebHLSStream ? 'none' : '' }}>
+          Description
+        </Text>
         <Text variant="sm" css={{ c: '$on_surface_medium' }}>
           {description}
         </Text>
@@ -34,3 +35,29 @@ export const RoomDetailsPane = () => {
     </Box>
   );
 };
+
+const ShowRoomDetailHeader = () => {
+  const { title, details } = useRoomLayoutHeader();
+  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+  const isMwebHLSStream = useMobileHLSStream();
+  return (
+    <Flex direction="column">
+      <Flex justify="between" align="center" css={{ w: '100%' }}>
+        <Text variant="h6">{title}</Text>
+        {!isMwebHLSStream && (
+          <Flex
+            onClick={toggleDetailsPane}
+            css={{
+              color: '$on_surface_high',
+              cursor: 'pointer',
+              '&:hover': { opacity: '0.8' },
+            }}
+          >
+            <CrossIcon />
+          </Flex>
+        )}
+      </Flex>
+      <RoomDetailsRow details={details} />
+    </Flex>
+  );
+};

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/VideoLayouts/RoleProminence.tsx

@@ -67,7 +67,7 @@ export function RoleProminence({
         edgeToEdge={edgeToEdge}
         hasSidebar={layoutMode === LayoutMode.SIDEBAR}
       />
-      {isInsetEnabled && localPeer && !prominentPeers.includes(localPeer) && <InsetTile />}
+      {isInsetEnabled && localPeer && prominentPeers.length > 0 && !prominentPeers.includes(localPeer) && <InsetTile />}
     </ProminenceLayout.Root>
   );
 }

package/src/Prebuilt/components/hooks/useRoleProminencePeers.tsx

@@ -17,7 +17,7 @@ export const useRoleProminencePeers = (prominentRoles: string[], peers: HMSPeer[
           }
           return acc;
         }
-        if (peer.isLocal && isInsetEnabled) {
+        if (peer.isLocal && isInsetEnabled && !prominentRoles?.includes(peer.roleName || '')) {
           return acc;
         }
         if (prominentRoles?.includes(peer.roleName || '')) {
@@ -25,6 +25,7 @@ export const useRoleProminencePeers = (prominentRoles: string[], peers: HMSPeer[
         } else {
           acc[1].push(peer);
         }
+
         return acc;
       },
       [[], []],

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',