@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.1

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

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

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
+import {
+  HMSPeer,
+  HMSRole,
+  selectHLSState,
+  selectIsConnectedToRoom,
+  selectPeersByCondition,
+  selectPermissions,
+  selectRolesMap,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { config as cssConfig } from '../../../Theme';
+// @ts-ignore: No implicit Any
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+import { DesktopLeaveRoom } from './DesktopLeaveRoom';
+import { MwebLeaveRoom } from './MwebLeaveRoom';
+import { useRedirectToLeave } from '../hooks/useRedirectToLeave';
+
+export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const permissions = useHMSStore(selectPermissions);
+  const isMobile = useMedia(cssConfig.media.md);
+  const rolesMap: Record<string, HMSRole> = useHMSStore(selectRolesMap);
+  const streamingPermissionRoles = Object.keys(rolesMap).filter(roleName => {
+    const roleObj = rolesMap[roleName];
+    return roleObj.permissions.hlsStreaming;
+  });
+  const peersWithStreamingRights = useHMSStore(
+    selectPeersByCondition((peer: HMSPeer) => streamingPermissionRoles.includes(peer.roleName || '')),
+  );
+  const hlsState = useHMSStore(selectHLSState);
+  const hmsActions = useHMSActions();
+  const { redirectToLeave } = useRedirectToLeave();
+
+  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 leaveRoom = async ({ endstream = false }) => {
+    if (endstream || (hlsState.running && peersWithStreamingRights.length === 1)) {
+      await stopStream();
+    }
+    hmsActions.leave();
+    redirectToLeave();
+  };
+
+  if (!permissions || !isConnected) {
+    return null;
+  }
+  return isMobile ? (
+    <MwebLeaveRoom leaveRoom={leaveRoom} screenType={screenType} />
+  ) : (
+    <DesktopLeaveRoom leaveRoom={leaveRoom} 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: (args: { endstream: boolean }) => 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' }}>
@@ -36,7 +44,13 @@ export const LeaveSessionContent = ({ setShowLeaveRoomAlert, leaveRoom, isModal
         >
           Cancel
         </Button>
-        <Button variant="danger" css={{ w: '100%' }} onClick={leaveRoom} id="leaveRoom" data-testid="leave_room">
+        <Button
+          variant="danger"
+          css={{ w: '100%' }}
+          onClick={() => leaveRoom({ endstream: false })}
+          id="leaveRoom"
+          data-testid="leave_room"
+        >
           Leave Session
         </Button>
       </Flex>

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';
+// @ts-ignore: No implicit Any
 import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
 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,
+  screenType,
+}: {
+  leaveRoom: (args: { endstream: boolean }) => 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={{
@@ -54,10 +63,9 @@ export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, leaveRoom, sto
               } again.`}
               bg="$surface_default"
               titleColor="$on_surface_high"
-              subtitleColor="$on_surface_low"
               icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
-              onClick={leaveRoom}
-              css={{ pt: 0, mt: '$10' }}
+              onClick={() => leaveRoom({ endstream: false })}
+              css={{ pt: 0, mt: '$10', color: '$on_surface_low', '&:hover': { color: '$on_surface_high' } }}
             />
             {isStreamingOn && permissions?.hlsStreaming ? (
               <LeaveCard
@@ -67,7 +75,7 @@ export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, leaveRoom, sto
                 } for everyone. You can't undo this action.`}
                 bg="$alert_error_dim"
                 titleColor="$alert_error_brighter"
-                subtitleColor="$alert_error_bright"
+                css={{ color: '$alert_error_bright', '&:hover': { color: '$alert_error_brighter' } }}
                 icon={<StopIcon height={24} width={24} />}
                 onClick={() => {
                   setOpen(false);
@@ -78,7 +86,17 @@ 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);
+            } else {
+              leaveRoom({ endstream: false });
+            }
+          }}
+        >
           <Tooltip title="Leave Room">
             <Box>
               <ExitIcon style={{ transform: 'rotate(180deg)' }} />
@@ -90,11 +108,18 @@ export const MwebLeaveRoom = ({ leaveIconButton: LeaveIconButton, leaveRoom, sto
         <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
           <EndSessionContent
             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,28 @@ export const ChangeNameContent = ({
           color: '$on_surface_high',
           fontWeight: '$semiBold',
           display: 'flex',
-          borderBottom: isMobile ? '1px solid $border_default' : '',
-          pb: '$6',
-          mb: '$8',
-          px: isMobile ? '$8' : '',
+          pb: '$4',
+          '@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);
           }}
@@ -52,6 +58,9 @@ export const ChangeNameContent = ({
           onKeyDown={async e => {
             if (e.key === 'Enter' && currentName.trim().length > 0 && currentName !== localPeerName) {
               e.preventDefault();
+              if (isMobile) {
+                return;
+              }
               changeName();
             }
           }}
@@ -65,7 +74,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} screenType={screenType} />
+  ) : (
+    <DesktopOptions elements={elements} screenType={screenType} />
+  );
+};

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

@@ -0,0 +1,216 @@
+import React, { Fragment, useState } from 'react';
+import { HMSHLSPlayer } from '@100mslive/hls-player';
+import {
+  ConferencingScreen,
+  DefaultConferencingScreen_Elements,
+  HLSLiveStreamingScreen_Elements,
+} from '@100mslive/types-prebuilt';
+import { selectAppData, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { BrbIcon, CheckIcon, DragHandleIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
+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';
+// @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';
+// @ts-ignore: No implicit any
+import { useMyMetadata } from '../../hooks/useMetadata';
+// @ts-ignore: No implicit any
+import { APP_DATA, isMacOS } from '../../../common/constants';
+
+const MODALS = {
+  CHANGE_NAME: 'changeName',
+  SELF_ROLE_CHANGE: 'selfRoleChange',
+  MORE_SETTINGS: 'moreSettings',
+  START_RECORDING: 'startRecording',
+  DEVICE_SETTINGS: 'deviceSettings',
+  STATS_FOR_NERDS: 'statsForNerds',
+  BULK_ROLE_CHANGE: 'bulkRoleChange',
+  MUTE_ALL: 'muteAll',
+  EMBED_URL: 'embedUrl',
+};
+
+export const DesktopOptions = ({
+  elements,
+  screenType,
+}: {
+  elements: DefaultConferencingScreen_Elements & HLSLiveStreamingScreen_Elements;
+  screenType: keyof ConferencingScreen;
+}) => {
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const hmsActions = useHMSActions();
+  const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
+  const [openModals, setOpenModals] = useState(new Set());
+  const { isBRBOn, toggleBRB } = useMyMetadata();
+  const isPipOn = PictureInPicture.isOn();
+  const isBRBEnabled = !!elements?.brb;
+
+  useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
+
+  const updateState = (modalName: string, value: boolean) => {
+    setOpenModals(modals => {
+      const copy = new Set(modals);
+      if (value) {
+        // avoiding extra set state trigger which removes currently open dialog by clearing set.
+        copy.clear();
+        copy.add(modalName);
+      } else {
+        copy.delete(modalName);
+      }
+      return copy;
+    });
+  };
+
+  return (
+    <Fragment>
+      <Dropdown.Root
+        open={openModals.has(MODALS.MORE_SETTINGS)}
+        onOpenChange={value => updateState(MODALS.MORE_SETTINGS, value)}
+        modal={false}
+      >
+        <Tooltip title="More options">
+          <Dropdown.Trigger asChild data-testid="more_settings_btn">
+            <IconButton>
+              <DragHandleIcon />
+            </IconButton>
+          </Dropdown.Trigger>
+        </Tooltip>
+
+        <Dropdown.Content
+          sideOffset={5}
+          align="end"
+          css={{
+            py: '$0',
+            maxHeight: 'unset',
+            '@md': { w: '$64' },
+            "div[role='separator']:first-child": {
+              display: 'none',
+            },
+          }}
+        >
+          {isBRBEnabled && screenType !== 'hls_live_streaming' ? (
+            <Dropdown.Item onClick={toggleBRB} data-testid="brb_btn">
+              <BrbIcon />
+              <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
+                Be Right Back
+              </Text>
+              <Flex justify="end" css={{ color: '$on_surface_high', flexGrow: '1' }}>
+                {isBRBOn ? <CheckIcon /> : null}
+              </Flex>
+            </Dropdown.Item>
+          ) : null}
+
+          {screenType !== 'hls_live_streaming' ? (
+            <Dropdown.Item>
+              <PIP
+                content={
+                  <Flex css={{ w: '100%' }}>
+                    <PipIcon />
+                    <Text variant="sm" css={{ ml: '$4' }}>
+                      {isPipOn ? 'Disable' : 'Enable'} Picture-in-Picture
+                    </Text>
+                  </Flex>
+                }
+              />
+            </Dropdown.Item>
+          ) : null}
+
+          <FullScreenItem />
+          {/* {isAllowedToPublish.screen && isEmbedEnabled && (
+            <EmbedUrl setShowOpenUrl={() => updateState(MODALS.EMBED_URL, true)} />
+          )} */}
+
+          <Dropdown.ItemSeparator css={{ mx: 0 }} />
+
+          <Dropdown.Item onClick={() => updateState(MODALS.DEVICE_SETTINGS, true)} data-testid="device_settings_btn">
+            <SettingsIcon />
+            <Text variant="sm" css={{ ml: '$4' }}>
+              Settings
+            </Text>
+          </Dropdown.Item>
+
+          {screenType === 'hls_live_streaming' ? (
+            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
+          ) : (
+            <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: boolean) => updateState(MODALS.BULK_ROLE_CHANGE, value)} />
+      )}
+      {openModals.has(MODALS.MUTE_ALL) && (
+        <MuteAllModal onOpenChange={(value: boolean) => updateState(MODALS.MUTE_ALL, value)} />
+      )}
+
+      {openModals.has(MODALS.START_RECORDING) && (
+        <StartRecording open onOpenChange={(value: boolean) => updateState(MODALS.START_RECORDING, value)} />
+      )}
+      {openModals.has(MODALS.DEVICE_SETTINGS) && (
+        <SettingsModal
+          open
+          onOpenChange={(value: boolean) => updateState(MODALS.DEVICE_SETTINGS, value)}
+          screenType={screenType}
+        />
+      )}
+      {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: boolean) => updateState(MODALS.SELF_ROLE_CHANGE, value)}
+        />
+      )}
+      {/* {openModals.has(MODALS.EMBED_URL) && (
+        <EmbedUrlModal onOpenChange={value => updateState(MODALS.EMBED_URL, value)} />
+      )} */}
+    </Fragment>
+  );
+};