@100mslive/roomkit-react 0.2.8-alpha.5 → 0.2.8-alpha.7

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.8-alpha.5",
+  "version": "0.2.8-alpha.7",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.8-alpha.5",
+    "@100mslive/hls-player": "0.2.8-alpha.7",
     "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
-    "@100mslive/hms-virtual-background": "1.12.8-alpha.5",
-    "@100mslive/react-icons": "0.9.8-alpha.5",
-    "@100mslive/react-sdk": "0.9.8-alpha.5",
+    "@100mslive/hms-virtual-background": "1.12.8-alpha.7",
+    "@100mslive/react-icons": "0.9.8-alpha.7",
+    "@100mslive/react-sdk": "0.9.8-alpha.7",
     "@100mslive/types-prebuilt": "0.12.7",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -118,8 +118,9 @@
     "react-window": "^1.8.7",
     "recordrtc": "^5.6.2",
     "screenfull": "^5.1.0",
+    "ts-pattern": "4.3.0",
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "6ba28232c0bb10f4ba990777369c5c5b132203b1"
+  "gitHead": "48bc1b57113a4245b79055a80f4f1f5d3b8795aa"
 }

package/src/Prebuilt/components/AppData/useSidepane.js

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import { match, P } from 'ts-pattern';
 import { selectAppData, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
 import { usePollViewState } from './useUISettings';
 import { APP_DATA, POLL_STATE, POLL_VIEWS, SIDE_PANE_OPTIONS } from '../../common/constants';
@@ -45,13 +46,39 @@ export const usePollViewToggle = () => {
 
   const togglePollView = useCallback(
     id => {
-      id = typeof id === 'string' ? id : undefined;
-      const newView = id ? POLL_VIEWS.VOTE : isOpen && view ? null : POLL_VIEWS.CREATE_POLL_QUIZ;
-      setPollState({
-        [POLL_STATE.pollInView]: id,
-        [POLL_STATE.view]: newView,
-      });
-      hmsActions.setAppData(APP_DATA.sidePane, newView ? SIDE_PANE_OPTIONS.POLLS : '');
+      match({ id, isOpen, view })
+        .with(
+          {
+            id: P.string,
+          },
+          () => {
+            setPollState({
+              [POLL_STATE.pollInView]: id,
+              [POLL_STATE.view]: POLL_VIEWS.VOTE,
+            });
+            hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.POLLS);
+          },
+        )
+        .with(
+          {
+            isOpen: true,
+            view: P.when(view => !!view),
+          },
+          () => {
+            setPollState({
+              [POLL_STATE.pollInView]: undefined,
+              [POLL_STATE.view]: null,
+            });
+            hmsActions.setAppData(APP_DATA.sidePane, '');
+          },
+        )
+        .otherwise(() => {
+          setPollState({
+            [POLL_STATE.pollInView]: undefined,
+            [POLL_STATE.view]: POLL_VIEWS.CREATE_POLL_QUIZ,
+          });
+          hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.POLLS);
+        });
     },
     [hmsActions, view, setPollState, isOpen],
   );

package/src/Prebuilt/components/AuthToken.jsx

@@ -70,7 +70,7 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
             alignItems: 'center',
           }}
         >
-          <img src={errorImage} height={80} width={80} />
+          <img src={errorImage} height={80} width={80} alt="Token Error" />
           <Text variant="h4" css={{ textAlign: 'center', mb: '$4', mt: '$10' }}>
             {error.title}
           </Text>

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

@@ -99,7 +99,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
       setRoleSelector(defaultSelection);
     } else {
       // @ts-ignore
-      if (!(isMobile || isLandscapeHLSStream) || !elements?.chat?.disable_autofocus) {
+      if (!(isMobile || isLandscapeHLSStream) && !elements?.chat?.disable_autofocus) {
         inputRef.current?.focus();
       }
     }

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

@@ -8,7 +8,7 @@ export const MwebChatOption = ({
   onClick,
   color = '$on_surface_high',
 }: {
-  icon: any;
+  icon: React.ReactNode;
   text: string;
   onClick: () => void | Promise<void>;
   color?: string;

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -11,7 +11,6 @@ import {
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { Footer } from './Footer/Footer';
-import { LeaveRoom } from './Leave/LeaveRoom';
 import { MoreSettings } from './MoreSettings/MoreSettings';
 import { HLSFailureModal } from './Notifications/HLSFailureModal';
 // @ts-ignore: No implicit Any
@@ -57,16 +56,17 @@ export const ConferenceScreen = () => {
   const noAVPermissions = !(toggleAudio || toggleVideo);
   // using it in hls stream to show action button when chat is disabled
   const showChat = !!screenProps.elements?.chat;
-  const toggleControls = () => {
-    if (dropdownListRef.current?.length === 0 && isMobileDevice) {
-      setHideControls(value => !value);
-    }
-  };
   const autoRoomJoined = useRef(isPreviewScreenEnabled);
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
   const isMwebHLSStream = isMobileHLSStream || isLandscapeHLSStream;
 
+  const toggleControls = () => {
+    if (dropdownListRef.current?.length === 0 && isMobileDevice && !isMwebHLSStream) {
+      setHideControls(value => !value);
+    }
+  };
+
   useEffect(() => {
     let timeout: undefined | ReturnType<typeof setTimeout>;
     dropdownListRef.current = dropdownList || [];
@@ -118,6 +118,8 @@ export const ConferenceScreen = () => {
     return <FullPageProgress text={roomState === HMSRoomState.Connecting ? 'Joining...' : ''} />;
   }
 
+  const hideControlsForStreaming = isMwebHLSStream ? true : hideControls;
+
   return (
     <>
       {isHLSStarted ? (
@@ -132,7 +134,7 @@ export const ConferenceScreen = () => {
             css={{
               h: '$18',
               transition: 'margin 0.3s ease-in-out',
-              marginTop: hideControls ? `-${headerRef.current?.clientHeight}px` : 'none',
+              marginTop: hideControlsForStreaming ? `-${headerRef.current?.clientHeight}px` : 'none',
               '@md': {
                 h: '$17',
               },
@@ -142,11 +144,6 @@ export const ConferenceScreen = () => {
             <Header />
           </Box>
         )}
-        {isMwebHLSStream && (
-          <Flex align="center" gap="2" css={{ position: 'absolute', left: '$4', top: '$4', zIndex: 1 }}>
-            <LeaveRoom screenType={screenProps.screenType} />
-          </Flex>
-        )}
         <Box
           css={{
             w: '100%',
@@ -169,7 +166,7 @@ export const ConferenceScreen = () => {
             <VideoStreamingSection
               screenType={screenProps.screenType}
               elements={screenProps.elements}
-              hideControls={hideControls}
+              hideControls={hideControlsForStreaming}
             />
           ) : null}
         </Box>
@@ -181,7 +178,7 @@ export const ConferenceScreen = () => {
               maxHeight: '$24',
               transition: 'margin 0.3s ease-in-out',
               bg: '$background_dim',
-              marginBottom: hideControls ? `-${footerRef.current?.clientHeight}px` : undefined,
+              marginBottom: hideControlsForStreaming ? `-${footerRef.current?.clientHeight}px` : undefined,
               '@md': {
                 maxHeight: 'unset',
                 bg: screenProps.screenType === 'hls_live_streaming' ? 'transparent' : '$background_dim',

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

@@ -25,7 +25,12 @@ import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvid
 import { getMetadata } from '../../common/utils';
 
 const dropdownItemCSS = { backgroundColor: '$surface_default', gap: '$4', p: '$8' };
-const optionTextCSS = { fontWeight: '$semiBold', color: '$on_surface_high', textTransform: 'none' };
+const optionTextCSS = {
+  fontWeight: '$semiBold',
+  color: '$on_surface_high',
+  textTransform: 'none',
+  whiteSpace: 'nowrap',
+};
 
 const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleName: string }) => {
   const vanillaStore = useHMSVanillaStore();
@@ -34,8 +39,8 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam
   const permissions = useHMSStore(selectPermissions);
   const role = useHMSStore(selectRoleByRoleName(roleName));
 
-  let allPeersHaveVideoOn = true;
-  let allPeersHaveAudioOn = true;
+  let isVideoOnForSomePeers = false;
+  let isAudioOnForSomePeers = false;
 
   peerList.forEach(peer => {
     if (peer.isLocal) {
@@ -43,8 +48,8 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam
     }
     const isAudioOn = !!peer.audioTrack && store.tracks[peer.audioTrack]?.enabled;
     const isVideoOn = !!peer.videoTrack && store.tracks[peer.videoTrack]?.enabled;
-    allPeersHaveAudioOn = allPeersHaveAudioOn && isAudioOn;
-    allPeersHaveVideoOn = allPeersHaveVideoOn && isVideoOn;
+    isAudioOnForSomePeers = isAudioOnForSomePeers || isAudioOn;
+    isVideoOnForSomePeers = isVideoOnForSomePeers || isVideoOn;
   });
 
   const setTrackEnabled = async (type: 'audio' | 'video', enabled = false) => {
@@ -55,11 +60,15 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam
     }
   };
 
+  if (!role) {
+    return null;
+  }
+
   return (
     <>
-      {role.publishParams.allowed?.includes('audio') && (
+      {role.publishParams.allowed.includes('audio') && (
         <>
-          {allPeersHaveAudioOn && permissions?.mute ? (
+          {isAudioOnForSomePeers && permissions?.mute ? (
             <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', false)}>
               <MicOffIcon />
               <Text variant="sm" css={optionTextCSS}>
@@ -68,20 +77,20 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam
             </Dropdown.Item>
           ) : null}
 
-          {!allPeersHaveAudioOn && permissions?.unmute ? (
+          {!isAudioOnForSomePeers && permissions?.unmute ? (
             <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', true)}>
               <MicOnIcon />
               <Text variant="sm" css={optionTextCSS}>
-                Unmute Audio for All
+                Request to Unmute Audio for All
               </Text>
             </Dropdown.Item>
           ) : null}
         </>
       )}
 
-      {role.publishParams.allowed?.includes('audio') && (
+      {role.publishParams.allowed.includes('video') && (
         <>
-          {allPeersHaveVideoOn && permissions?.mute ? (
+          {isVideoOnForSomePeers && permissions?.mute ? (
             <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', false)}>
               <VideoOffIcon />
               <Text variant="sm" css={optionTextCSS}>
@@ -90,11 +99,11 @@ const MuteUnmuteOption = ({ roleName, peerList }: { peerList: HMSPeer[]; roleNam
             </Dropdown.Item>
           ) : null}
 
-          {!allPeersHaveVideoOn && permissions?.unmute ? (
+          {!isVideoOnForSomePeers && permissions?.unmute ? (
             <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', true)}>
               <VideoOnIcon />
               <Text variant="sm" css={optionTextCSS}>
-                Unmute Video for All
+                Request to Unmute Video for All
               </Text>
             </Dropdown.Item>
           ) : null}
@@ -112,11 +121,19 @@ export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList
   const { on_stage_role, off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
   const canMuteOrUnmute = permissions?.mute || permissions?.unmute;
   const canRemoveRoleFromStage = permissions?.changeRole && roleName === on_stage_role;
+  const role = useHMSStore(selectRoleByRoleName(roleName));
+
   // on stage and off stage roles
   const canRemoveRoleFromRoom =
     permissions?.removeOthers && (on_stage_role === roleName || off_stage_roles?.includes(roleName));
 
-  if (!(canMuteOrUnmute || canRemoveRoleFromStage || canRemoveRoleFromRoom) || peerList.length === 0) {
+  if (
+    !(canMuteOrUnmute || canRemoveRoleFromStage || canRemoveRoleFromRoom) ||
+    peerList.length === 0 ||
+    // if only local peer is present no need to show any options
+    (peerList.length === 1 && peerList[0].isLocal) ||
+    !role
+  ) {
     return null;
   }
 
@@ -165,7 +182,7 @@ export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList
       </Dropdown.Trigger>
       <Dropdown.Content
         onClick={e => e.stopPropagation()}
-        css={{ w: 'max-content', maxWidth: '$64', bg: '$surface_default', py: 0 }}
+        css={{ w: 'max-content', bg: '$surface_default', py: 0 }}
         align="end"
       >
         {canRemoveRoleFromStage && (

package/src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
-import { Button, Dialog, Text } from '../../..';
+import { useMedia } from 'react-use';
+import { VolumeTwoIcon } from '@100mslive/react-icons';
+import { Button, config, Dialog, IconButton, Text } from '../../..';
 // @ts-ignore
 import { DialogContent, DialogRow } from '../../primitives/DialogContent';
+import { useIsLandscape } from '../../common/hooks';
 
 export function HLSAutoplayBlockedPrompt({
   open,
@@ -10,6 +13,33 @@ export function HLSAutoplayBlockedPrompt({
   open: boolean;
   unblockAutoPlay: () => Promise<void>;
 }) {
+  const isLandscape = useIsLandscape();
+  const isMobile = useMedia(config.media.md);
+  if ((isMobile || isLandscape) && open) {
+    return (
+      <IconButton
+        css={{
+          border: '1px solid white',
+          bg: 'white',
+          color: '#000',
+          r: '$2',
+        }}
+        onClick={async () => await unblockAutoPlay()}
+      >
+        <VolumeTwoIcon width="32" height="32" />
+        <Text
+          variant="body1"
+          css={{
+            fontWeight: '$semiBold',
+            px: '$2',
+            color: '#000',
+          }}
+        >
+          Tap To Unmute
+        </Text>
+      </IconButton>
+    );
+  }
   return (
     <Dialog.Root
       open={open}

package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx

@@ -1,7 +1,11 @@
 import React, { forwardRef } from 'react';
-import { Flex } from '../../../';
+import { useMedia } from 'react-use';
+import { config, Flex } from '../../../';
+import { useIsLandscape } from '../../common/hooks';
 
 export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
+  const isLandscape = useIsLandscape();
+  const isMobile = useMedia(config.media.md);
   return (
     <Flex
       data-testid="hms-video"
@@ -36,6 +40,8 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
           minHeight: '0',
           objectFit: 'contain',
           width: 'inherit',
+          height: isLandscape || isMobile ? '100%' : '',
+          position: isLandscape || isMobile ? 'absolute' : '',
         }}
         ref={videoRef}
         playsInline

package/src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx

@@ -0,0 +1,27 @@
+import React, { MouseEvent } from 'react';
+import { PauseIcon, PlayIcon } from '@100mslive/react-icons';
+import { IconButton, Tooltip } from '../../..';
+import { useHMSPlayerContext } from './PlayerContext';
+
+export const PlayPauseButton = ({
+  isPaused,
+  width = 20,
+  height = 20,
+}: {
+  isPaused: boolean;
+  width: number;
+  height: number;
+}) => {
+  const { hlsPlayer } = useHMSPlayerContext();
+  const onClick = async (event: MouseEvent) => {
+    event?.stopPropagation();
+    isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
+  };
+  return (
+    <Tooltip title={isPaused ? 'Play' : 'Pause'} side="top">
+      <IconButton onClick={onClick} data-testid="play_pause_btn">
+        {isPaused ? <PlayIcon width={width} height={height} /> : <PauseIcon width={width} height={height} />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/Prebuilt/components/HMSVideo/SeekControls.tsx

@@ -0,0 +1,22 @@
+import React, { MouseEventHandler } from 'react';
+import { IconButton, Tooltip } from '../../..';
+
+export const SeekControls = ({
+  title,
+  onClick,
+  children,
+  css,
+}: {
+  title: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  css: any;
+  children: React.ReactNode;
+}) => {
+  return (
+    <Tooltip title={title} side="top">
+      <IconButton onClick={onClick} data-testid="backward_forward_arrow_btn" css={css}>
+        {children}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/Prebuilt/components/HMSVideo/VideoProgress.tsx

@@ -3,7 +3,7 @@ import { Box, Flex, Slider } from '../../..';
 import { useHMSPlayerContext } from './PlayerContext';
 import { getPercentage } from './utils';
 
-export const VideoProgress = () => {
+export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
   const { hlsPlayer } = useHMSPlayerContext();
   const [videoProgress, setVideoProgress] = useState<number>(0);
   const [bufferProgress, setBufferProgress] = useState(0);
@@ -48,7 +48,7 @@ export const VideoProgress = () => {
     return null;
   }
   return (
-    <Flex align="center" css={{ cursor: 'pointer', h: '$2', alignSelf: 'stretch' }}>
+    <Flex align="center" css={{ cursor: 'pointer', h: '$2', alignSelf: 'stretch', pointerEvents: isDvr ? '' : 'none' }}>
       <Slider
         id="video-actual-rest"
         css={{
@@ -56,6 +56,7 @@ export const VideoProgress = () => {
           h: '$2',
           zIndex: 1,
           transition: `all .2s ease .5s`,
+          pointerEvents: isDvr ? '' : 'none',
         }}
         min={0}
         max={100}
@@ -63,7 +64,7 @@ export const VideoProgress = () => {
         value={[videoProgress]}
         showTooltip={false}
         onValueChange={onProgress}
-        thumbStyles={{ w: '$6', h: '$6' }}
+        thumbStyles={{ w: '$6', h: '$6', display: isDvr ? '' : 'none' }}
       />
       <Box
         id="video-buffer"

package/src/Prebuilt/components/HMSVideo/VolumeControl.tsx

@@ -5,7 +5,7 @@ import { useHMSPlayerContext } from './PlayerContext';
 
 export const VolumeControl = () => {
   const { hlsPlayer } = useHMSPlayerContext();
-  const [volume, setVolume] = useState(hlsPlayer?.volume || 0);
+  const [volume, setVolume] = useState(hlsPlayer?.volume ?? 100);
   const [showSlider, setShowSlider] = useState(false);
 
   return (

package/src/Prebuilt/components/HMSVideo/index.ts

@@ -2,14 +2,15 @@
 import { LeftControls, RightControls, VideoControls } from './Controls';
 // @ts-ignore
 import { HMSVideo } from './HMSVideo';
-import { PlayButton } from './PlayButton';
+import { PlayPauseButton } from './PlayPauseButton';
+import { SeekControls } from './SeekControls';
 import { VideoProgress } from './VideoProgress';
 import { VideoTime } from './VideoTime';
 import { VolumeControl } from './VolumeControl';
 
 export const HMSVideoPlayer = {
   Root: HMSVideo,
-  PlayButton: PlayButton,
+  PlayPauseButton: PlayPauseButton,
   Progress: VideoProgress,
   Duration: VideoTime,
   Volume: VolumeControl,
@@ -18,4 +19,5 @@ export const HMSVideoPlayer = {
     Left: LeftControls,
     Right: RightControls,
   },
+  Seeker: SeekControls,
 };

package/src/Prebuilt/components/Header/StreamActions.tsx

@@ -42,7 +42,7 @@ export const LiveStatus = () => {
         setLiveTime(Date.now() - timeStamp.getTime());
       }
     }, 1000);
-  }, [hlsState?.running, hlsState?.variants]);
+  }, [hlsState?.running, hlsState?.variants, screenType]);
 
   useEffect(() => {
     if (hlsState?.running) {

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

@@ -5,6 +5,7 @@ import {
   DefaultConferencingScreen_Elements,
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
 import { selectAppData, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { BrbIcon, CheckIcon, HamburgerMenuIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
 import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../..';
@@ -143,41 +144,46 @@ export const DesktopOptions = ({
               Settings
             </Text>
           </Dropdown.Item>
+          {match({ screenType, isSupported: HMSHLSPlayer.isSupported() })
+            .with({ screenType: 'hls_live_streaming', isSupported: false }, () => null)
+            .with({ screenType: 'hls_live_streaming', isSupported: true }, () => {
+              return (
+                <Dropdown.Item
+                  onClick={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
+                  data-testid="hls_stats"
+                >
+                  <Checkbox.Root
+                    css={{ margin: '$2' }}
+                    checked={enablHlsStats}
+                    onCheckedChange={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
+                  >
+                    <Checkbox.Indicator>
+                      <CheckIcon width={16} height={16} />
+                    </Checkbox.Indicator>
+                  </Checkbox.Root>
+                  <Flex justify="between" css={{ width: '100%' }}>
+                    <Text variant="sm" css={{ ml: '$4' }}>
+                      Show HLS Stats
+                    </Text>
 
-          {screenType === 'hls_live_streaming' ? (
-            HMSHLSPlayer.isSupported() ? (
+                    <Text variant="sm" css={{ ml: '$4' }}>
+                      {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
+                    </Text>
+                  </Flex>
+                </Dropdown.Item>
+              );
+            })
+            .otherwise(() => (
               <Dropdown.Item
-                onClick={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
-                data-testid="hls_stats"
+                onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)}
+                data-testid="stats_for_nerds_btn"
               >
-                <Checkbox.Root
-                  css={{ margin: '$2' }}
-                  checked={enablHlsStats}
-                  onCheckedChange={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
-                >
-                  <Checkbox.Indicator>
-                    <CheckIcon width={16} height={16} />
-                  </Checkbox.Indicator>
-                </Checkbox.Root>
-                <Flex justify="between" css={{ width: '100%' }}>
-                  <Text variant="sm" css={{ ml: '$4' }}>
-                    Show HLS Stats
-                  </Text>
-
-                  <Text variant="sm" css={{ ml: '$4' }}>
-                    {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
-                  </Text>
-                </Flex>
+                <InfoIcon />
+                <Text variant="sm" css={{ ml: '$4' }}>
+                  Stats for Nerds
+                </Text>
               </Dropdown.Item>
-            ) : null
-          ) : (
-            <Dropdown.Item onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)} data-testid="stats_for_nreds_btn">
-              <InfoIcon />
-              <Text variant="sm" css={{ ml: '$4' }}>
-                Stats for Nerds
-              </Text>
-            </Dropdown.Item>
-          )}
+            ))}
         </Dropdown.Content>
       </Dropdown.Root>
       {openModals.has(MODALS.BULK_ROLE_CHANGE) && (

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

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { useClickAway } from 'react-use';
 import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
 import {
   selectIsConnectedToRoom,
   selectPeerCount,
@@ -287,11 +288,11 @@ export const MwebOptions = ({
               >
                 {isRecordingLoading ? <Loading /> : <RecordIcon />}
                 <ActionTile.Title>
-                  {isBrowserRecordingOn
-                    ? 'Recording On'
-                    : isRecordingLoading
-                    ? 'Starting Recording'
-                    : 'Start Recording'}
+                  {match({ isBrowserRecordingOn, isRecordingLoading })
+                    .with({ isBrowserRecordingOn: true, isRecordingLoading: false }, () => 'Recording On')
+                    .with({ isRecordingLoading: true }, () => 'Starting Recording')
+                    .with({ isRecordingLoading: false }, () => 'Start Recording')
+                    .otherwise(() => null)}
                 </ActionTile.Title>
               </ActionTile.Root>
             ) : null}

package/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx

@@ -28,12 +28,12 @@ export const HandRaisedNotifications = () => {
     }
 
     // Don't show toast message in case of local peer.
-    if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !on_stage_exp || !isSubscribing) {
+    if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !isSubscribing) {
       return;
     }
     const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
     if (hasPeerHandRaised) {
-      ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
+      ToastBatcher.showToast({ notification, type: on_stage_exp ? 'RAISE_HAND_HLS' : 'RAISE_HAND' });
       console.debug('Metadata updated', notification.data);
     }
   }, [isSubscribing, notification, on_stage_exp, roomState, vanillaStore]);

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

@@ -49,7 +49,7 @@ export const PeerNotifications = () => {
     }
 
     ToastBatcher.showToast({ notification });
-  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]);
+  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, selectedPeer.id, setPeerSelector]);
 
   return null;
 };