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

package/src/Prebuilt/components/{LeaveCard.jsx → Leave/LeaveCard.tsx}

@@ -1,8 +1,27 @@
 import React from 'react';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { CSS } from '../../../Theme';
 
-export const LeaveCard = ({ icon, title, subtitle, onClick, bg, titleColor, subtitleColor, css = {} }) => {
+export const LeaveCard = ({
+  icon,
+  title,
+  subtitle,
+  onClick,
+  bg,
+  titleColor,
+  subtitleColor,
+  css = {},
+}: {
+  icon: React.JSX.Element;
+  title: string;
+  subtitle: string;
+  onClick: () => void;
+  titleColor: string;
+  subtitleColor: string;
+  bg: string;
+  css?: CSS;
+}) => {
   return (
     <Flex css={{ p: '$10', flexGrow: 1, gap: '$8', bg, ...css }} onClick={onClick}>
       <Box css={{ color: titleColor }}>{icon}</Box>

package/src/Prebuilt/components/Leave/LeaveRoom.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useMedia } from 'react-use';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
+import { selectIsConnectedToRoom, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { config as cssConfig } from '../../../Theme';
+// @ts-ignore: No implicit Any
+import { useHMSPrebuiltContext } from '../../AppContext';
+// @ts-ignore: No implicit Any
+import { PictureInPicture } from '../PIP/PIPManager';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+import { DesktopLeaveRoom } from './DesktopLeaveRoom';
+import { MwebLeaveRoom } from './MwebLeaveRoom';
+import { useRoomLayoutLeaveScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+
+export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
+  const navigate = useNavigate();
+  const params = useParams();
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const permissions = useHMSStore(selectPermissions);
+  const isMobile = useMedia(cssConfig.media.md);
+  const hmsActions = useHMSActions();
+  const { onLeave } = useHMSPrebuiltContext();
+  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+
+  const stopStream = async () => {
+    try {
+      console.log('Stopping HLS stream');
+      await hmsActions.stopHLSStreaming();
+      ToastManager.addToast({ title: 'Stopping the stream' });
+    } catch (e) {
+      console.error('Error stopping stream', e);
+      ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' });
+    }
+  };
+
+  const redirectToLeavePage = () => {
+    const prefix = isLeaveScreenEnabled ? '/leave/' : '/';
+    if (params.role) {
+      navigate(prefix + params.roomId + '/' + params.role);
+    } else {
+      navigate(prefix + params.roomId);
+    }
+    PictureInPicture.stop().catch(() => console.error('stopping pip'));
+    ToastManager.clearAllToast();
+    onLeave?.();
+  };
+
+  const leaveRoom = () => {
+    hmsActions.leave();
+    redirectToLeavePage();
+  };
+
+  if (!permissions || !isConnected) {
+    return null;
+  }
+  return isMobile ? (
+    <MwebLeaveRoom leaveRoom={leaveRoom} stopStream={stopStream} screenType={screenType} />
+  ) : (
+    <DesktopLeaveRoom leaveRoom={leaveRoom} stopStream={stopStream} screenType={screenType} />
+  );
+};

package/src/Prebuilt/components/{LeaveSessionContent.jsx → Leave/LeaveSessionContent.tsx}

@@ -1,10 +1,18 @@
 import React from 'react';
 import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons';
-import { Button } from '../../Button';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
+import { Button } from '../../../Button';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
 
-export const LeaveSessionContent = ({ setShowLeaveRoomAlert, leaveRoom, isModal = false }) => {
+export const LeaveSessionContent = ({
+  setShowLeaveRoomAlert,
+  leaveRoom,
+  isModal = false,
+}: {
+  setShowLeaveRoomAlert: (value: boolean) => void;
+  leaveRoom: () => void;
+  isModal?: boolean;
+}) => {
   return (
     <Box>
       <Flex
@@ -24,7 +32,7 @@ export const LeaveSessionContent = ({ setShowLeaveRoomAlert, leaveRoom, isModal
           </Box>
         )}
       </Flex>
-      <Text variant="sm" css={{ color: '$on_surface_medium', mb: '$8', mt: '$4' }}>
+      <Text variant="sm" css={{ color: '$on_surface_low', mb: '$8', mt: '$4' }}>
         Others will continue after you leave. You can join the session again.
       </Text>
       <Flex align="center" justify="between" css={{ w: '100%', gap: '$8' }}>

package/src/Prebuilt/components/{MoreSettings/SplitComponents/MwebLeaveRoom.jsx → Leave/MwebLeaveRoom.tsx}

@@ -1,24 +1,34 @@
 import React, { Fragment, useState } from 'react';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { ExitIcon, StopIcon } from '@100mslive/react-icons';
-import { Box } from '../../../../Layout';
-import { Sheet } from '../../../../Sheet';
-import { Tooltip } from '../../../../Tooltip';
-import { EndSessionContent } from '../../EndSessionContent';
-import { LeaveCard } from '../../LeaveCard';
-import { useDropdownList } from '../../hooks/useDropdownList';
-import { useShowStreamingUI } from '../../../common/hooks';
+import { Box } from '../../../Layout';
+import { Sheet } from '../../../Sheet';
+import { Tooltip } from '../../../Tooltip';
+import { EndSessionContent } from './EndSessionContent';
+import { LeaveIconButton } from './LeaveAtoms';
+import { LeaveCard } from './LeaveCard';
+import { LeaveSessionContent } from './LeaveSessionContent';
+// @ts-ignore: No implicit Any
+import { useDropdownList } from '../hooks/useDropdownList';
 
-export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, leaveRoom, stopStream }) => {
+export const MwebLeaveRoom = ({
+  leaveRoom,
+  stopStream,
+  screenType,
+}: {
+  leaveRoom: () => void;
+  stopStream: () => Promise<void>;
+  screenType: keyof ConferencingScreen;
+}) => {
   const [open, setOpen] = useState(false);
+  const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
   const [showEndStreamAlert, setShowEndStreamAlert] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const { isStreamingOn } = useRecordingStreaming();
 
-  const showStreamingUI = useShowStreamingUI();
-
-  const showStream = showStreamingUI && isStreamingOn;
+  const showStream = permissions?.hlsStreaming && isStreamingOn;
   useDropdownList({ open, name: 'LeaveRoom' });
 
   if (!permissions || !isConnected) {
@@ -31,7 +41,6 @@ export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, leaveRoom, sto
         <Sheet.Root open={open} onOpenChange={setOpen}>
           <Sheet.Trigger asChild>
             <LeaveIconButton
-              variant="danger"
               key="LeaveRoom"
               data-testid="leave_room_btn"
               css={{
@@ -78,7 +87,15 @@ export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, leaveRoom, sto
           </Sheet.Content>
         </Sheet.Root>
       ) : (
-        <LeaveIconButton variant="danger" key="LeaveRoom" data-testid="leave_room_btn" onClick={leaveRoom}>
+        <LeaveIconButton
+          key="LeaveRoom"
+          data-testid="leave_room_btn"
+          onClick={() => {
+            if (screenType === 'hls_live_streaming') {
+              setShowLeaveRoomAlert(true);
+            }
+          }}
+        >
           <Tooltip title="Leave Room">
             <Box>
               <ExitIcon style={{ transform: 'rotate(180deg)' }} />
@@ -92,9 +109,17 @@ export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, leaveRoom, sto
             setShowEndStreamAlert={setShowEndStreamAlert}
             stopStream={stopStream}
             leaveRoom={leaveRoom}
+            isStreamingOn={isStreamingOn}
           />
         </Sheet.Content>
       </Sheet.Root>
+      {screenType === 'hls_live_streaming' ? (
+        <Sheet.Root open={showLeaveRoomAlert} onOpenChange={setShowLeaveRoomAlert}>
+          <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
+            <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} />
+          </Sheet.Content>
+        </Sheet.Root>
+      ) : null}
     </Fragment>
   );
 };

package/src/Prebuilt/components/MetaActions.jsx

@@ -4,40 +4,32 @@ import { BrbIcon, HandIcon } from '@100mslive/react-icons';
 import { Flex } from '../../Layout';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
-import { useIsFeatureEnabled } from './hooks/useFeatures';
 import { useMyMetadata } from './hooks/useMetadata';
-import { FEATURE_LIST } from '../common/constants';
 
 const MetaActions = ({ isMobile = false, compact = false }) => {
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata();
-  const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE);
-  const isBRBEnabled = useIsFeatureEnabled(FEATURE_LIST.BRB);
 
-  if (!isConnected || (!isHandRaiseEnabled && !isBRBEnabled)) {
+  if (!isConnected) {
     return null;
   }
 
   return (
     <Flex align="center" css={{ gap: compact ? '$4' : '$8' }}>
-      {isHandRaiseEnabled && (
-        <Tooltip title={`${!isHandRaised ? 'Raise' : 'Unraise'} hand`}>
-          <IconButton
-            onClick={toggleHandRaise}
-            active={!isHandRaised}
-            data-testid={isMobile ? 'raise_hand_btn_mobile' : 'raise_hand_btn'}
-          >
-            <HandIcon />
-          </IconButton>
-        </Tooltip>
-      )}
-      {isBRBEnabled && (
-        <Tooltip title={isBRBOn ? `I'm back` : `I'll be right back`}>
-          <IconButton onClick={toggleBRB} active={!isBRBOn} data-testid="brb_btn">
-            <BrbIcon />
-          </IconButton>
-        </Tooltip>
-      )}
+      <Tooltip title={`${!isHandRaised ? 'Raise' : 'Unraise'} hand`}>
+        <IconButton
+          onClick={toggleHandRaise}
+          active={!isHandRaised}
+          data-testid={isMobile ? 'raise_hand_btn_mobile' : 'raise_hand_btn'}
+        >
+          <HandIcon />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title={isBRBOn ? `I'm back` : `I'll be right back`}>
+        <IconButton onClick={toggleBRB} active={!isBRBOn} data-testid="brb_btn">
+          <BrbIcon />
+        </IconButton>
+      </Tooltip>
     </Flex>
   );
 };

package/src/Prebuilt/components/MoreSettings/ActionTile.jsx

@@ -36,9 +36,14 @@ const ActionTileCount = styled(Text, {
   fontWeight: '$semiBold',
   color: '$on_surface_high',
   p: '$1 $2',
+  minWidth: '$9',
+  textAlign: 'center',
+  boxSizing: 'border-box',
   bg: '$surface_bright',
   r: '$round',
+  letterSpacing: '1.5px',
   fontSize: '$tiny !important',
+  lineHeight: '$tiny !important',
 });
 
 const ActionTileTitle = styled(Text, {

package/src/Prebuilt/components/MoreSettings/ChangeNameContent.jsx

@@ -27,22 +27,27 @@ export const ChangeNameContent = ({
           color: '$on_surface_high',
           fontWeight: '$semiBold',
           display: 'flex',
-          borderBottom: isMobile ? '1px solid $border_default' : '',
-          pb: '$6',
-          mb: '$8',
-          px: isMobile ? '$8' : '',
+          '@md': { px: '$8', borderBottom: '1px solid $border_default' },
         }}
       >
         {isMobile ? <ChevronLeftIcon onClick={onBackClick} style={{ marginRight: '0.5rem' }} /> : null}
         Change Name
-        <Box css={{ color: 'inherit', ml: 'auto' }} onClick={onExit}>
+        <Box
+          css={{ color: 'inherit', ml: 'auto', '&:hover': { color: '$on_surface_medium', cursor: 'pointer' } }}
+          onClick={onExit}
+        >
           <CrossIcon />
         </Box>
       </Text>
-      <Flex justify="center" align="center" css={{ my: '$8', w: '100%', px: isMobile ? '$8' : '' }}>
+      <Text variant="sm" css={{ color: '$on_surface_medium', pb: '$6', mb: '$8', '@md': { px: '$8', mt: '$4' } }}>
+        Your name will be visible to other participants in the session.
+      </Text>
+      <Flex justify="center" align="center" css={{ my: '$8', w: '100%', '@md': { px: '$8' } }}>
         <Input
           css={{ width: '100%', bg: '$surface_default' }}
           value={currentName}
+          // Prevents popup from showing up on chrome mweb
+          type={isMobile ? 'search' : 'text'}
           onChange={e => {
             setCurrentName(e.target.value);
           }}
@@ -65,7 +70,7 @@ export const ChangeNameContent = ({
           width: '100%',
           gap: '$md',
           mt: '$10',
-          px: isMobile ? '$4' : '',
+          '@md': { px: '$4' },
         }}
       >
         {isMobile ? null : (

package/src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx

@@ -49,7 +49,7 @@ export const ChangeNameModal = ({ onOpenChange, openParentSheet = null }) => {
   if (isMobile) {
     return (
       <Sheet.Root defaultOpen onOpenChange={onOpenChange}>
-        <Sheet.Content css={{ bg: '$surface_dim', py: '$8', px: 0 }}>
+        <Sheet.Content css={{ bg: '$surface_dim', p: '$8 0' }}>
           <ChangeNameContent {...props} />
         </Sheet.Content>
       </Sheet.Root>

package/src/Prebuilt/components/MoreSettings/FullScreenItem.jsx

@@ -1,15 +1,12 @@
 import React from 'react';
 import { ExpandIcon } from '@100mslive/react-icons';
 import { Dropdown, Text } from '../../../';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
 import { useFullscreen } from '../hooks/useFullscreen';
-import { FEATURE_LIST } from '../../common/constants';
 
 export const FullScreenItem = () => {
   const { allowed, isFullscreen, toggleFullscreen } = useFullscreen();
-  const isFullscreenEnabled = useIsFeatureEnabled(FEATURE_LIST.FULLSCREEN);
 
-  if (!isFullscreenEnabled || !allowed) {
+  if (!allowed) {
     return null;
   }
 

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import {
+  ConferencingScreen,
+  DefaultConferencingScreen_Elements,
+  HLSLiveStreamingScreen_Elements,
+} from '@100mslive/types-prebuilt';
+// @ts-ignore: No implicit Any
+import { DesktopOptions } from './SplitComponents/DesktopOptions';
+// @ts-ignore: No implicit Any
+import { MwebOptions } from './SplitComponents/MwebOptions';
+import { config as cssConfig } from '../../..';
+
+export const MoreSettings = ({
+  elements,
+  screenType,
+}: {
+  elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
+  screenType: keyof ConferencingScreen;
+}) => {
+  const isMobile = useMedia(cssConfig.media.md);
+  return isMobile ? (
+    <MwebOptions elements={elements} streamType={screenType} />
+  ) : (
+    <DesktopOptions elements={elements} screenType={screenType} />
+  );
+};

package/src/Prebuilt/components/MoreSettings/SplitComponents/{DesktopOptions.jsx → DesktopOptions.tsx}

@@ -1,30 +1,39 @@
 import React, { Fragment, useState } from 'react';
 import { HMSHLSPlayer } from '@100mslive/hls-player';
 import {
-  selectAppData,
-  selectLocalPeerID,
-  selectLocalPeerRoleName,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
+  ConferencingScreen,
+  DefaultConferencingScreen_Elements,
+  HLSLiveStreamingScreen_Elements,
+} from '@100mslive/types-prebuilt';
+import { selectAppData, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { BrbIcon, CheckIcon, DragHandleIcon, HandIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../../';
+import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../..';
+// @ts-ignore: No implicit any
 import IconButton from '../../../IconButton';
+// @ts-ignore: No implicit any
 import { PIP } from '../../PIP';
+// @ts-ignore: No implicit any
+import { PictureInPicture } from '../../PIP/PIPManager';
+// @ts-ignore: No implicit any
 import { RoleChangeModal } from '../../RoleChangeModal';
+// @ts-ignore: No implicit any
 import SettingsModal from '../../Settings/SettingsModal';
+// @ts-ignore: No implicit any
 import StartRecording from '../../Settings/StartRecording';
+// @ts-ignore: No implicit any
 import { StatsForNerds } from '../../StatsForNerds';
-import { BulkRoleChangeModal } from '.././BulkRoleChangeModal';
-import { FullScreenItem } from '.././FullScreenItem';
-import { MuteAllModal } from '.././MuteAllModal';
-import { useHLSViewerRole } from '../../AppData/useUISettings';
+// @ts-ignore: No implicit any
+import { BulkRoleChangeModal } from '../BulkRoleChangeModal';
+// @ts-ignore: No implicit any
+import { FullScreenItem } from '../FullScreenItem';
+// @ts-ignore: No implicit any
+import { MuteAllModal } from '../MuteAllModal';
+// @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
-import { useIsFeatureEnabled } from '../../hooks/useFeatures';
+// @ts-ignore: No implicit any
 import { useMyMetadata } from '../../hooks/useMetadata';
-import { useShowStreamingUI } from '../../../common/hooks';
-import { FeatureFlags } from '../../../services/FeatureFlags';
-import { APP_DATA, FEATURE_LIST, isMacOS } from '../../../common/constants';
+// @ts-ignore: No implicit any
+import { APP_DATA, isMacOS } from '../../../common/constants';
 
 const MODALS = {
   CHANGE_NAME: 'changeName',
@@ -38,24 +47,24 @@ const MODALS = {
   EMBED_URL: 'embedUrl',
 };
 
-export const DesktopOptions = () => {
+export const DesktopOptions = ({
+  elements,
+  screenType,
+}: {
+  elements: DefaultConferencingScreen_Elements & HLSLiveStreamingScreen_Elements;
+  screenType: keyof ConferencingScreen;
+}) => {
   const localPeerId = useHMSStore(selectLocalPeerID);
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const hmsActions = useHMSActions();
   const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
-  const isSFNEnabled = useIsFeatureEnabled(FEATURE_LIST.STARTS_FOR_NERDS);
   const [openModals, setOpenModals] = useState(new Set());
   const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata();
-  const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE);
-  const isBRBEnabled = useIsFeatureEnabled(FEATURE_LIST.BRB);
-  const showStreamingUI = useShowStreamingUI();
-  const hlsViewerRole = useHLSViewerRole();
-  const isHlsViewer = hlsViewerRole === localPeerRole;
-  const isPIPEnabled = useIsFeatureEnabled(FEATURE_LIST.PICTURE_IN_PICTURE);
+  const isPipOn = PictureInPicture.isOn();
+  const isBRBEnabled = !!elements?.brb;
 
   useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
 
-  const updateState = (modalName, value) => {
+  const updateState = (modalName: string, value: boolean) => {
     setOpenModals(modals => {
       const copy = new Set(modals);
       if (value) {
@@ -96,7 +105,7 @@ export const DesktopOptions = () => {
             },
           }}
         >
-          {isHandRaiseEnabled && !showStreamingUI ? (
+          {screenType !== 'hls_live_streaming' ? (
             <Dropdown.Item onClick={toggleHandRaise} data-testid="raise_hand_btn">
               <HandIcon />
               <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
@@ -108,7 +117,7 @@ export const DesktopOptions = () => {
             </Dropdown.Item>
           ) : null}
 
-          {isBRBEnabled && !showStreamingUI ? (
+          {isBRBEnabled && screenType === 'hls_live_streaming' ? (
             <Dropdown.Item onClick={toggleBRB} data-testid="brb_btn">
               <BrbIcon />
               <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
@@ -120,18 +129,16 @@ export const DesktopOptions = () => {
             </Dropdown.Item>
           ) : null}
 
-          {(isBRBEnabled || isHandRaiseEnabled) && !showStreamingUI ? (
-            <Dropdown.ItemSeparator css={{ mx: '0' }} />
-          ) : null}
+          {isBRBEnabled && screenType === 'hls_live_streaming' ? <Dropdown.ItemSeparator css={{ mx: '0' }} /> : null}
 
-          {isPIPEnabled && !isHlsViewer ? (
+          {screenType !== 'hls_live_streaming' ? (
             <Dropdown.Item>
               <PIP
                 content={
                   <Flex css={{ w: '100%' }}>
                     <PipIcon />
                     <Text variant="sm" css={{ ml: '$4' }}>
-                      Picture in picture mode
+                      {isPipOn ? 'Disable' : 'Enable'} Picture-in-Picture
                     </Text>
                   </Flex>
                 }
@@ -153,63 +160,67 @@ export const DesktopOptions = () => {
             </Text>
           </Dropdown.Item>
 
-          {FeatureFlags.enableStatsForNerds &&
-            isSFNEnabled &&
-            (localPeerRole === 'hls-viewer' ? (
-              HMSHLSPlayer.isSupported() ? (
-                <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>
-
-                    <Text variant="sm" css={{ ml: '$4' }}>
-                      {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
-                    </Text>
-                  </Flex>
-                </Dropdown.Item>
-              ) : null
-            ) : (
+          {screenType === 'hls_live_streaming' ? (
+            HMSHLSPlayer.isSupported() ? (
               <Dropdown.Item
-                onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)}
-                data-testid="stats_for_nreds_btn"
+                onClick={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
+                data-testid="hls_stats"
               >
-                <InfoIcon />
-                <Text variant="sm" css={{ ml: '$4' }}>
-                  Stats for Nerds
-                </Text>
+                <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>
               </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) && (
-        <BulkRoleChangeModal onOpenChange={value => updateState(MODALS.BULK_ROLE_CHANGE, value)} />
+        <BulkRoleChangeModal onOpenChange={(value: boolean) => updateState(MODALS.BULK_ROLE_CHANGE, value)} />
+      )}
+      {openModals.has(MODALS.MUTE_ALL) && (
+        <MuteAllModal onOpenChange={(value: boolean) => updateState(MODALS.MUTE_ALL, value)} />
       )}
-      {openModals.has(MODALS.MUTE_ALL) && <MuteAllModal onOpenChange={value => updateState(MODALS.MUTE_ALL, value)} />}
 
       {openModals.has(MODALS.START_RECORDING) && (
-        <StartRecording open onOpenChange={value => updateState(MODALS.START_RECORDING, value)} />
+        <StartRecording open onOpenChange={(value: boolean) => updateState(MODALS.START_RECORDING, value)} />
       )}
       {openModals.has(MODALS.DEVICE_SETTINGS) && (
-        <SettingsModal open onOpenChange={value => updateState(MODALS.DEVICE_SETTINGS, value)} />
+        <SettingsModal
+          open
+          onOpenChange={(value: boolean) => updateState(MODALS.DEVICE_SETTINGS, value)}
+          screenType={screenType}
+        />
       )}
-      {FeatureFlags.enableStatsForNerds && openModals.has(MODALS.STATS_FOR_NERDS) && (
-        <StatsForNerds open onOpenChange={value => updateState(MODALS.STATS_FOR_NERDS, value)} />
+      {openModals.has(MODALS.STATS_FOR_NERDS) && (
+        <StatsForNerds open onOpenChange={(value: boolean) => updateState(MODALS.STATS_FOR_NERDS, value)} />
       )}
       {openModals.has(MODALS.SELF_ROLE_CHANGE) && (
-        <RoleChangeModal peerId={localPeerId} onOpenChange={value => updateState(MODALS.SELF_ROLE_CHANGE, value)} />
+        <RoleChangeModal
+          peerId={localPeerId}
+          onOpenChange={(value: boolean) => updateState(MODALS.SELF_ROLE_CHANGE, value)}
+        />
       )}
       {/* {openModals.has(MODALS.EMBED_URL) && (
         <EmbedUrlModal onOpenChange={value => updateState(MODALS.EMBED_URL, value)} />