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

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

@@ -1,282 +0,0 @@
-import React, { Fragment, useState } from 'react';
-import { HMSHLSPlayer } from '@100mslive/hls-player';
-import {
-  ConferencingScreen,
-  DefaultConferencingScreen_Elements,
-  HLSLiveStreamingScreen_Elements,
-} from '@100mslive/types-prebuilt';
-import { match } from 'ts-pattern';
-import {
-  HMSTranscriptionMode,
-  selectAppData,
-  selectIsTranscriptionAllowedByMode,
-  selectIsTranscriptionEnabled,
-  selectLocalPeerID,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import {
-  BrbIcon,
-  CheckIcon,
-  HamburgerMenuIcon,
-  InfoIcon,
-  OpenCaptionIcon,
-  PipIcon,
-  SettingsIcon,
-} from '@100mslive/react-icons';
-import { Checkbox, Dropdown, Flex, Switch, Text, Tooltip } from '../../../..';
-import IconButton from '../../../IconButton';
-// @ts-ignore: No implicit any
-import { PIP } from '../../PIP';
-import { PIPChat } from '../../PIP/PIPChat';
-// @ts-ignore: No implicit any
-import { PIPChatOption } from '../../PIP/PIPChatOption';
-import { PictureInPicture } from '../../PIP/PIPManager';
-import { PIPWindow } from '../../PIP/PIPWindow';
-// @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';
-import { CaptionModal } from '../CaptionModal';
-// @ts-ignore: No implicit any
-import { FullScreenItem } from '../FullScreenItem';
-import { MuteAllModal } from '../MuteAllModal';
-// @ts-ignore: No implicit any
-import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../../AppData/useSidepane';
-// @ts-ignore: No implicit any
-import { useDropdownList } from '../../hooks/useDropdownList';
-import { useMyMetadata } from '../../hooks/useMetadata';
-// @ts-ignore: No implicit any
-import { usePIPChat } from '../../PIP/usePIPChat';
-// @ts-ignore: No implicit any
-import { APP_DATA, isMacOS, SIDE_PANE_OPTIONS } 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',
-  CAPTION: 'caption',
-};
-
-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;
-  const isTranscriptionAllowed = useHMSStore(selectIsTranscriptionAllowedByMode(HMSTranscriptionMode.CAPTION));
-  const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
-  const { isSupported, pipWindow, requestPipWindow } = usePIPChat();
-  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  // Hide if pip chat is already open
-  const showPipChatOption = !!elements?.chat && isSupported && !pipWindow;
-
-  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>
-      {isSupported && pipWindow ? (
-        <PIPWindow pipWindow={pipWindow}>
-          <PIPChat />
-        </PIPWindow>
-      ) : null}
-      <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>
-              <HamburgerMenuIcon />
-            </IconButton>
-          </Dropdown.Trigger>
-        </Tooltip>
-
-        <Dropdown.Content
-          sideOffset={5}
-          onCloseAutoFocus={e => {
-            e.preventDefault();
-          }}
-          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}
-          {isTranscriptionAllowed ? (
-            <Dropdown.Item
-              data-testid="closed_caption_admin"
-              onClick={() => {
-                updateState(MODALS.CAPTION, true);
-              }}
-            >
-              <OpenCaptionIcon />
-              <Flex direction="column" css={{ flexGrow: '1' }}>
-                <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
-                  Closed Captions
-                </Text>
-                <Text variant="caption" css={{ ml: '$4', color: '$on_surface_medium' }}>
-                  {isTranscriptionEnabled ? 'Enabled' : 'Disabled'}
-                </Text>
-              </Flex>
-              <Switch id="closed_caption_start_stop" checked={isTranscriptionEnabled} disabled={false} />
-            </Dropdown.Item>
-          ) : null}
-          {screenType !== 'hls_live_streaming' ? (
-            <Dropdown.Item css={{ p: 0, '&:empty': { display: 'none' } }}>
-              <PIP
-                content={
-                  <Flex css={{ w: '100%', h: '100%', p: '$8' }}>
-                    <PipIcon />
-                    <Text variant="sm" css={{ ml: '$4' }}>
-                      {isPipOn ? 'Disable' : 'Enable'} Picture-in-Picture
-                    </Text>
-                  </Flex>
-                }
-              />
-            </Dropdown.Item>
-          ) : null}
-
-          <PIPChatOption
-            showPIPChat={showPipChatOption}
-            openChat={async () => {
-              isChatOpen && toggleChat();
-              await requestPipWindow(350, 500);
-            }}
-          />
-          <FullScreenItem />
-          <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>
-          {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>
-
-                    <Text variant="sm" css={{ ml: '$4' }}>
-                      {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
-                    </Text>
-                  </Flex>
-                </Dropdown.Item>
-              );
-            })
-            .otherwise(() => (
-              <Dropdown.Item
-                onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)}
-                data-testid="stats_for_nerds_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.CAPTION) && (
-        <CaptionModal onOpenChange={(value: boolean) => updateState(MODALS.CAPTION, value)} />
-      )}
-      {/* {openModals.has(MODALS.EMBED_URL) && (
-        <EmbedUrlModal onOpenChange={value => updateState(MODALS.EMBED_URL, value)} />
-      )} */}
-    </Fragment>
-  );
-};

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

@@ -1,387 +0,0 @@
-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 {
-  HMSTranscriptionMode,
-  selectIsConnectedToRoom,
-  selectIsLocalVideoEnabled,
-  selectIsTranscriptionAllowedByMode,
-  selectIsTranscriptionEnabled,
-  selectPeerCount,
-  selectPermissions,
-  useHMSActions,
-  useHMSStore,
-  useRecordingStreaming,
-} from '@100mslive/react-sdk';
-import {
-  BrbIcon,
-  ClosedCaptionIcon,
-  CrossIcon,
-  EmojiIcon,
-  HamburgerMenuIcon,
-  HandIcon,
-  HandRaiseSlashedIcon,
-  InfoIcon,
-  OpenCaptionIcon,
-  PeopleIcon,
-  QuizActiveIcon,
-  QuizIcon,
-  RecordIcon,
-  SettingsIcon,
-  VirtualBackgroundIcon,
-} from '@100mslive/react-icons';
-import { Box, Loading, Tooltip } from '../../../..';
-import { Sheet } from '../../../../Sheet';
-// @ts-ignore: No implicit any
-import IconButton from '../../../IconButton';
-import { NoiseCancellation } from '../../AudioVideoToggle';
-// @ts-ignore: No implicit any
-import { EmojiReaction } from '../../EmojiReaction';
-// @ts-ignore: No implicit any
-import { StopRecordingInSheet } from '../../Header/StreamActions';
-// @ts-ignore: No implicit any
-import SettingsModal from '../../Settings/SettingsModal';
-// @ts-ignore: No implicit any
-import { StatsForNerds } from '../../StatsForNerds';
-// @ts-ignore: No implicit any
-import { ToastManager } from '../../Toast/ToastManager';
-// @ts-ignore: No implicit any
-import { ActionTile } from '../ActionTile';
-import { CaptionModal } from '../CaptionModal';
-// @ts-ignore: No implicit any
-import { ChangeNameModal } from '../ChangeNameModal';
-// @ts-ignore: No implicit any
-import { MuteAllModal } from '../MuteAllModal';
-import { useRoomLayoutHeader } from '../../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useSheetToggle } from '../../AppData/useSheet';
-// @ts-ignore: No implicit any
-import { usePollViewToggle, useSidepaneToggle } from '../../AppData/useSidepane';
-// @ts-ignore: No implicit Any
-import { useSetIsCaptionEnabled, useShowPolls } from '../../AppData/useUISettings';
-// @ts-ignore: No implicit any
-import { useDropdownList } from '../../hooks/useDropdownList';
-import { useMyMetadata } from '../../hooks/useMetadata';
-import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
-import { useLandscapeHLSStream, useMobileHLSStream, useRecordingHandler } from '../../../common/hooks';
-// @ts-ignore: No implicit any
-import { getFormattedCount } from '../../../common/utils';
-// @ts-ignore: No implicit any
-import { SHEET_OPTIONS, SIDE_PANE_OPTIONS } 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',
-  CAPTION: 'caption',
-};
-
-export const MwebOptions = ({
-  elements,
-  screenType,
-}: {
-  elements: DefaultConferencingScreen_Elements;
-  screenType: keyof ConferencingScreen;
-}) => {
-  const hmsActions = useHMSActions();
-  const permissions = useHMSStore(selectPermissions);
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
-  const [openModals, setOpenModals] = useState(new Set());
-  const [openOptionsSheet, setOpenOptionsSheet] = useState(false);
-  const [openSettingsSheet, setOpenSettingsSheet] = useState(false);
-  const [openStatsForNerdsSheet, setOpenStatsForNerdsSheet] = useState(false);
-  const [showEmojiCard, setShowEmojiCard] = useState(false);
-  const [showRecordingOn, setShowRecordingOn] = useState(false);
-  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const { showPolls } = useShowPolls();
-  const togglePollView = usePollViewToggle();
-  const peerCount = useHMSStore(selectPeerCount);
-  const emojiCardRef = useRef(null);
-  const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
-  const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
-  const { title, description } = useRoomLayoutHeader();
-  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
-  const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
-  const { startRecording, isRecordingLoading } = useRecordingHandler();
-  const isTranscriptionAllowed = useHMSStore(selectIsTranscriptionAllowedByMode(HMSTranscriptionMode.CAPTION));
-  const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
-
-  const [isCaptionEnabled] = useSetIsCaptionEnabled();
-  useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
-
-  const updateState = (modalName: string, value: boolean) => {
-    setOpenModals(modals => {
-      const copy = new Set(modals);
-      if (value) {
-        copy.add(modalName);
-      } else {
-        copy.delete(modalName);
-      }
-      return copy;
-    });
-  };
-
-  useClickAway(emojiCardRef, () => setShowEmojiCard(false));
-
-  return (
-    <>
-      <Sheet.Root open={openOptionsSheet} onOpenChange={setOpenOptionsSheet}>
-        <Tooltip title="More options">
-          <Sheet.Trigger asChild data-testid="more_settings_btn">
-            <IconButton css={{ bg: isMobileHLSStream || isLandscapeHLSStream ? '$surface_default' : '' }}>
-              <HamburgerMenuIcon />
-            </IconButton>
-          </Sheet.Trigger>
-        </Tooltip>
-        <Sheet.Content css={{ bg: '$surface_dim', pb: '$14' }}>
-          <Sheet.Title
-            css={{
-              display: 'flex',
-              color: '$on_surface_high',
-              w: '100%',
-              justifyContent: 'space-between',
-              fontSize: '$md',
-              mt: '$8',
-              px: '$10',
-              pb: '$8',
-              borderBottom: '1px solid $border_default',
-              mb: '$8',
-              alignItems: 'center',
-            }}
-          >
-            Options
-            <Sheet.Close>
-              <Box css={{ color: '$on_surface_high' }}>
-                <CrossIcon />
-              </Box>
-            </Sheet.Close>
-          </Sheet.Title>
-          <Box
-            css={{
-              display: 'grid',
-              gridTemplateColumns: '1fr 1fr 1fr',
-              gridTemplateRows: 'auto',
-              gridColumnGap: '$6',
-              gridRowGap: '$8',
-              px: '$9',
-            }}
-          >
-            {elements?.participant_list && (
-              <ActionTile.Root
-                onClick={() => {
-                  toggleParticipants();
-                  setOpenOptionsSheet(false);
-                }}
-              >
-                <ActionTile.Count>{getFormattedCount(peerCount)}</ActionTile.Count>
-                <PeopleIcon />
-                <ActionTile.Title>Participants</ActionTile.Title>
-              </ActionTile.Root>
-            )}
-
-            {elements.hand_raise ? (
-              <ActionTile.Root
-                active={isHandRaised}
-                onClick={() => {
-                  toggleHandRaise();
-                  setOpenOptionsSheet(false);
-                }}
-              >
-                {isHandRaised ? <HandRaiseSlashedIcon /> : <HandIcon />}
-                <ActionTile.Title>{isHandRaised ? 'Lower' : 'Raise'} Hand</ActionTile.Title>
-              </ActionTile.Root>
-            ) : null}
-            <NoiseCancellation setOpenOptionsSheet={setOpenOptionsSheet} actionTile />
-            {isTranscriptionAllowed ? (
-              <ActionTile.Root
-                onClick={() => {
-                  setOpenOptionsSheet(false);
-                  updateState(MODALS.CAPTION, true);
-                }}
-              >
-                {isTranscriptionEnabled && isCaptionEnabled ? <ClosedCaptionIcon /> : <OpenCaptionIcon />}
-                <ActionTile.Title>Closed Caption</ActionTile.Title>
-              </ActionTile.Root>
-            ) : null}
-            {isLocalVideoEnabled && !!elements?.virtual_background ? (
-              <ActionTile.Root
-                onClick={() => {
-                  toggleVB();
-                  setOpenOptionsSheet(false);
-                }}
-              >
-                <VirtualBackgroundIcon />
-                <ActionTile.Title>Virtual Background</ActionTile.Title>
-              </ActionTile.Root>
-            ) : null}
-
-            {elements?.emoji_reactions && !(isLandscapeHLSStream || isMobileHLSStream) && (
-              <ActionTile.Root
-                onClick={() => {
-                  setShowEmojiCard(true);
-                  setOpenOptionsSheet(false);
-                }}
-              >
-                <EmojiIcon />
-                <ActionTile.Title>Emoji Reactions</ActionTile.Title>
-              </ActionTile.Root>
-            )}
-
-            {showPolls && (
-              <ActionTile.Root
-                onClick={() => {
-                  togglePollView();
-                  setOpenOptionsSheet(false);
-                  setUnreadPollQuiz(false);
-                }}
-              >
-                {unreadPollQuiz ? <QuizActiveIcon /> : <QuizIcon />}
-                <ActionTile.Title>Polls and Quizzes</ActionTile.Title>
-              </ActionTile.Root>
-            )}
-
-            {elements?.brb && (
-              <ActionTile.Root
-                active={isBRBOn}
-                onClick={() => {
-                  toggleBRB();
-                  setOpenOptionsSheet(false);
-                }}
-              >
-                <BrbIcon />
-                <ActionTile.Title>Be Right Back</ActionTile.Title>
-              </ActionTile.Root>
-            )}
-
-            <ActionTile.Root
-              onClick={() => {
-                setOpenSettingsSheet(true);
-                setOpenOptionsSheet(false);
-              }}
-            >
-              <SettingsIcon />
-              <ActionTile.Title>Settings</ActionTile.Title>
-            </ActionTile.Root>
-            <ActionTile.Root
-              onClick={() => {
-                setOpenStatsForNerdsSheet(true);
-                setOpenOptionsSheet(false);
-              }}
-            >
-              <InfoIcon />
-              <ActionTile.Title>Stats For Nerds</ActionTile.Title>
-            </ActionTile.Root>
-            {isConnected && permissions?.browserRecording ? (
-              <ActionTile.Root
-                disabled={isHLSRunning}
-                onClick={async () => {
-                  if (isRecordingLoading) {
-                    return;
-                  }
-                  if (isBrowserRecordingOn || isStreamingOn) {
-                    setOpenOptionsSheet(false);
-                    setShowRecordingOn(true);
-                  } else {
-                    // start recording
-                    await startRecording();
-                    setOpenOptionsSheet(false);
-                  }
-                  if (isHLSRunning) {
-                    setOpenOptionsSheet(false);
-                  }
-                }}
-              >
-                {isRecordingLoading ? <Loading /> : <RecordIcon />}
-                <ActionTile.Title>
-                  {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}
-
-            {title || description ? (
-              <ActionTile.Root
-                onClick={() => {
-                  setOpenOptionsSheet(false);
-                  toggleDetailsSheet();
-                }}
-              >
-                <InfoIcon />
-                <ActionTile.Title>About Session</ActionTile.Title>
-              </ActionTile.Root>
-            ) : null}
-          </Box>
-        </Sheet.Content>
-      </Sheet.Root>
-      <SettingsModal open={openSettingsSheet} onOpenChange={setOpenSettingsSheet} screenType={screenType} />
-
-      {openStatsForNerdsSheet && (
-        <StatsForNerds open={openStatsForNerdsSheet} onOpenChange={setOpenStatsForNerdsSheet} />
-      )}
-
-      {openModals.has(MODALS.MUTE_ALL) && (
-        <MuteAllModal onOpenChange={(value: boolean) => updateState(MODALS.MUTE_ALL, value)} isMobile />
-      )}
-      {openModals.has(MODALS.CHANGE_NAME) && (
-        <ChangeNameModal
-          onOpenChange={(value: boolean) => updateState(MODALS.CHANGE_NAME, value)}
-          openParentSheet={() => setOpenOptionsSheet(true)}
-        />
-      )}
-      {openModals.has(MODALS.CAPTION) && (
-        <CaptionModal onOpenChange={(value: boolean) => updateState(MODALS.CAPTION, value)} />
-      )}
-      {showEmojiCard && (
-        <Box
-          ref={emojiCardRef}
-          css={{
-            maxWidth: '100%',
-            w: '100%',
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            bottom: '$18',
-            bg: '$surface_default',
-            zIndex: '10',
-            p: '$8',
-            pb: 0,
-            r: '$1',
-            mx: '$4',
-          }}
-        >
-          <EmojiReaction showCard />
-        </Box>
-      )}
-      {showRecordingOn && (
-        <StopRecordingInSheet
-          onClose={() => setShowRecordingOn(false)}
-          onStopRecording={async () => {
-            try {
-              await hmsActions.stopRTMPAndRecording();
-              setShowRecordingOn(false);
-            } catch (error) {
-              ToastManager.addToast({
-                // @ts-ignore
-                title: error.message,
-                variant: 'error',
-              });
-            }
-          }}
-        />
-      )}
-    </>
-  );
-};

package/src/Prebuilt/components/MoreSettings/constants.ts

@@ -1,14 +0,0 @@
-export const trackSourceOptions = [
-  { label: 'All Track Sources', value: '' },
-  { label: 'regular', value: 'regular' },
-  { label: 'screen', value: 'screen' },
-  { label: 'audioplaylist', value: 'audioplaylist' },
-  { label: 'videoplaylist', value: 'videoplaylist' },
-];
-export const trackTypeOptions = [
-  { label: 'All Track Types', value: '' },
-  { label: 'audio', value: 'audio' },
-  { label: 'video', value: 'video' },
-];
-
-export const DEFAULT_TILES_IN_VIEW = { MWEB: 4, DESKTOP: 9 };