@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

package/src/Prebuilt/components/LayoutModeSelector.tsx

@@ -1,112 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';
-import { LayoutMode, LayoutModeIconMapping, LayoutModeKeys } from './Settings/LayoutSettings';
-import { Flex } from '../../Layout';
-import { Popover } from '../../Popover';
-import { Text } from '../../Text';
-// @ts-ignore: No implicit Any
-import { useSetUiSettings } from '../components/AppData/useUISettings';
-import { UI_SETTINGS } from '../common/constants';
-
-export const LayoutModeSelector = () => {
-  const [open, setOpen] = useState(false);
-  const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
-  const updateLayoutMode = useCallback(
-    (value: string) => {
-      setLayoutMode(value);
-      setOpen(false);
-    },
-    [setLayoutMode, setOpen],
-  );
-  return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
-      <Popover.Trigger asChild>
-        <Flex
-          align="center"
-          css={{
-            gap: '$4',
-            color: open ? '$on_surface_low' : '$on_surface_medium',
-            r: '$1',
-            p: '$2 $4',
-            height: '100%',
-          }}
-        >
-          <Flex
-            align="center"
-            justify="center"
-            css={{
-              color: 'inherit',
-              '& > svg': {
-                w: '$9',
-                h: '$9',
-              },
-            }}
-          >
-            {LayoutModeIconMapping[layoutMode as LayoutModeKeys]}
-          </Flex>
-          <Text variant="caption" css={{ color: 'inherit', lineHeight: '$sm' }}>
-            {layoutMode}
-          </Text>
-          {open ? <ChevronUpIcon width={16} height={16} /> : <ChevronDownIcon width={16} height={16} />}
-        </Flex>
-      </Popover.Trigger>
-      <Popover.Content
-        css={{
-          w: '10.75rem',
-          r: '$1',
-          py: '$4',
-          px: 0,
-          backgroundColor: '$surface_default',
-          overflowY: 'auto',
-          boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-          fontFamily: '$sans',
-          color: '$on_surface_high',
-        }}
-        side="bottom"
-        sideOffset={8}
-        align="end"
-      >
-        {Object.keys(LayoutMode).map(key => {
-          const value = LayoutMode[key as LayoutModeKeys];
-          return (
-            <Flex
-              key={key}
-              onClick={() => updateLayoutMode(value)}
-              align="center"
-              css={{
-                gap: '$4',
-                borderBottom: '1px solid $border_bright',
-                p: '$8',
-                '&:hover': {
-                  cursor: 'pointer',
-                  bg: '$surface_bright',
-                },
-                '&:focus-visible': {
-                  bg: '$surface_bright',
-                },
-              }}
-            >
-              <Flex
-                align="center"
-                justify="center"
-                css={{
-                  color: '$on_surface_medium',
-                  '& > svg': {
-                    w: '$9',
-                    h: '$9',
-                  },
-                }}
-              >
-                {LayoutModeIconMapping[value]}
-              </Flex>
-              <Text variant="caption" css={{ lineHeight: '$sm' }}>
-                {value}
-              </Text>
-              {value === layoutMode ? <CheckIcon width={20} height={20} style={{ marginLeft: 'auto' }} /> : null}
-            </Flex>
-          );
-        })}
-      </Popover.Content>
-    </Popover.Root>
-  );
-};

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

@@ -1,166 +0,0 @@
-import React, { Fragment, useState } from 'react';
-import { ConferencingScreen } from '@100mslive/types-prebuilt';
-import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
-import { ExitIcon, StopIcon, VerticalMenuIcon } from '@100mslive/react-icons';
-import { Dropdown } from '../../../Dropdown';
-import { Box, Flex } from '../../../Layout';
-import { Dialog } from '../../../Modal';
-import { Tooltip } from '../../../Tooltip';
-import { EndSessionContent } from './EndSessionContent';
-import { LeaveIconButton, MenuTriggerButton } from './LeaveAtoms';
-import { LeaveCard } from './LeaveCard';
-import { LeaveSessionContent } from './LeaveSessionContent';
-// @ts-ignore: No implicit Any
-import { useDropdownList } from '../hooks/useDropdownList';
-
-export const DesktopLeaveRoom = ({
-  leaveRoom,
-  screenType,
-  endRoom,
-  container,
-}: {
-  leaveRoom: (options?: { endStream?: boolean; sendReason?: boolean }) => Promise<void>;
-  screenType: keyof ConferencingScreen;
-  endRoom: () => Promise<void>;
-  container?: HTMLElement;
-}) => {
-  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 showStream = screenType !== 'hls_live_streaming' && isStreamingOn && permissions?.hlsStreaming;
-  const showLeaveOptions = (permissions?.hlsStreaming && isStreamingOn) || permissions?.endRoom;
-
-  useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: 'LeaveRoom' });
-
-  if (!permissions || !isConnected) {
-    return null;
-  }
-
-  return (
-    <Fragment>
-      {showLeaveOptions ? (
-        <Flex>
-          <LeaveIconButton
-            key="LeaveRoom"
-            data-testid="leave_room_btn"
-            css={{
-              borderTopRightRadius: 0,
-              borderBottomRightRadius: 0,
-            }}
-            onClick={() => setShowLeaveRoomAlert(true)}
-          >
-            <Tooltip title="Leave Room">
-              <Box>
-                <ExitIcon style={{ transform: 'rotate(180deg)' }} />
-              </Box>
-            </Tooltip>
-          </LeaveIconButton>
-          <Dropdown.Root open={open} onOpenChange={setOpen} modal={false}>
-            <Dropdown.Trigger
-              asChild
-              css={{
-                '&[data-state="open"]': {
-                  bg: '$alert_error_dim',
-                },
-              }}
-            >
-              <MenuTriggerButton data-testid="leave_end_dropdown_trigger">
-                <VerticalMenuIcon />
-              </MenuTriggerButton>
-            </Dropdown.Trigger>
-            <Dropdown.Portal container={container}>
-              <Dropdown.Content css={{ p: 0, w: '$100' }} alignOffset={-50} sideOffset={10}>
-                <Dropdown.Item
-                  css={{
-                    bg: '$surface_dim',
-                    color: '$on_surface_medium',
-                    '&:hover': { bg: '$surface_default', color: '$on_surface_high' },
-                    p: '0',
-                  }}
-                  data-testid="just_leave_btn"
-                >
-                  <LeaveCard
-                    title={showStream ? 'Leave Stream' : 'Leave Session'}
-                    subtitle={`Others will continue after you leave. You can join the ${
-                      showStream ? 'stream' : 'session'
-                    } again.`}
-                    bg=""
-                    titleColor="$on_surface_high"
-                    icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
-                    onClick={async () => await leaveRoom({ sendReason: true })}
-                    css={{ p: '$8 $4' }}
-                  />
-                </Dropdown.Item>
-
-                <Dropdown.Item
-                  css={{
-                    bg: '$alert_error_dim',
-                    color: '$alert_error_bright',
-                    '&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
-                    p: '0',
-                  }}
-                  data-testid="end_room_btn"
-                >
-                  <LeaveCard
-                    title={showStream ? 'End Stream' : 'End Session'}
-                    subtitle={`The ${
-                      showStream ? 'stream' : 'session'
-                    } will end for everyone. You can't undo this action.`}
-                    bg=""
-                    titleColor="$alert_error_brighter"
-                    icon={<StopIcon height={24} width={24} />}
-                    onClick={() => {
-                      setOpen(false);
-                      setShowEndStreamAlert(true);
-                    }}
-                    css={{ p: '$8 $4' }}
-                  />
-                </Dropdown.Item>
-              </Dropdown.Content>
-            </Dropdown.Portal>
-          </Dropdown.Root>
-        </Flex>
-      ) : (
-        <LeaveIconButton
-          onClick={() => {
-            setShowLeaveRoomAlert(true);
-          }}
-          key="LeaveRoom"
-          data-testid="leave_room_btn"
-        >
-          <Tooltip title="Leave Room">
-            <Box>
-              <ExitIcon style={{ transform: 'rotate(180deg)' }} />
-            </Box>
-          </Tooltip>
-        </LeaveIconButton>
-      )}
-
-      <Dialog.Root open={showEndStreamAlert} modal={false}>
-        <Dialog.Portal>
-          <Dialog.Overlay />
-          <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
-            <EndSessionContent
-              setShowEndStreamAlert={setShowEndStreamAlert}
-              leaveRoom={isStreamingOn ? () => leaveRoom({ endStream: true }) : endRoom}
-              isStreamingOn={isStreamingOn}
-              isModal
-            />
-          </Dialog.Content>
-        </Dialog.Portal>
-      </Dialog.Root>
-
-      <Dialog.Root open={showLeaveRoomAlert} modal={false}>
-        <Dialog.Portal>
-          <Dialog.Overlay />
-          <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
-            <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} isModal />
-          </Dialog.Content>
-        </Dialog.Portal>
-      </Dialog.Root>
-    </Fragment>
-  );
-};

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

@@ -1,64 +0,0 @@
-import React from 'react';
-import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons';
-import { Button } from '../../../Button';
-import { Box, Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-
-export const EndSessionContent = ({
-  setShowEndStreamAlert,
-  leaveRoom,
-  isModal = false,
-  isStreamingOn = false,
-}: {
-  setShowEndStreamAlert: (value: boolean) => void;
-  leaveRoom: (options?: { endStream?: boolean }) => Promise<void>;
-  isModal?: boolean;
-  isStreamingOn: boolean;
-}) => {
-  return (
-    <Box>
-      <Flex
-        css={{
-          color: '$alert_error_default',
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />
-        <Text variant="lg" css={{ color: 'inherit', fontWeight: '$semiBold' }}>
-          End {isStreamingOn ? 'Stream' : 'Session'}
-        </Text>
-        {isModal ? null : (
-          <Box css={{ color: '$on_surface_high', ml: 'auto' }} onClick={() => setShowEndStreamAlert(false)}>
-            <CrossIcon />
-          </Box>
-        )}
-      </Flex>
-      <Text variant="sm" css={{ color: '$on_surface_medium', mb: '$8', mt: '$4' }}>
-        The {isStreamingOn ? 'stream' : 'session'} will end for everyone. You can't undo this action.
-      </Text>
-      <Flex align="center" justify="between" css={{ w: '100%', gap: '$8' }}>
-        <Button
-          outlined
-          variant="standard"
-          css={{ w: '100%', '@md': { display: 'none' } }}
-          onClick={() => setShowEndStreamAlert(false)}
-        >
-          Cancel
-        </Button>
-        <Button
-          variant="danger"
-          css={{ w: '100%' }}
-          onClick={async () => {
-            await leaveRoom({ endStream: true });
-            setShowEndStreamAlert(false);
-          }}
-          id="stopStream"
-          data-testid="stop_stream_btn"
-        >
-          End {isStreamingOn ? 'Stream' : 'Session'}
-        </Button>
-      </Flex>
-    </Box>
-  );
-};

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

@@ -1,26 +0,0 @@
-import { IconButton } from '../../../IconButton';
-import { styled } from '../../../Theme';
-
-export const LeaveIconButton = styled(IconButton, {
-  color: '$on_primary_high',
-  h: '$14',
-  px: '$4',
-  r: '$1',
-  bg: '$alert_error_default',
-  '&:not([disabled]):hover': {
-    bg: '$alert_error_bright',
-  },
-  '&:not([disabled]):active': {
-    bg: '$alert_error_default',
-  },
-  '@md': {
-    mx: 0,
-  },
-});
-
-export const MenuTriggerButton = styled(LeaveIconButton, {
-  borderLeft: '1px solid $alert_error_dim',
-  borderTopLeftRadius: 0,
-  borderBottomLeftRadius: 0,
-  px: '$2',
-});

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

@@ -1,36 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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
-import { ToastManager } from '../Toast/ToastManager';
-import { DesktopLeaveRoom } from './DesktopLeaveRoom';
-import { MwebLeaveRoom } from './MwebLeaveRoom';
-import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
-
-export const LeaveRoom = ({
-  screenType,
-  container,
-}: {
-  screenType: keyof ConferencingScreen;
-  container?: HTMLElement;
-}) => {
-  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 isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-
-  const stopStream = async (stop_reason = '') => {
-    try {
-      if (permissions?.hlsStreaming) {
-        console.log('Stopping HLS stream');
-        await hmsActions.stopHLSStreaming({ stop_reason });
-        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 endRoom = async () => {
-    await hmsActions.endRoom(false, 'End Room');
-  };
-
-  const leaveRoom = async (
-    options: { endStream?: boolean; sendReason?: boolean } = { endStream: false, sendReason: false },
-  ) => {
-    if (options.endStream || (hlsState.running && peersWithStreamingRights.length === 1)) {
-      await stopStream(options.sendReason ? 'last publisher left' : '');
-    }
-    await hmsActions.leave();
-  };
-
-  if (!permissions || !isConnected) {
-    return null;
-  }
-  if (isMobileHLSStream || isLandscapeHLSStream) {
-    return <MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} container={container} />;
-  }
-  return isMobile ? (
-    <MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} container={container} />
-  ) : (
-    <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} container={container} />
-  );
-};

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

@@ -1,61 +0,0 @@
-import React from 'react';
-import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons';
-import { Button } from '../../../Button';
-import { Box, Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-
-export const LeaveSessionContent = ({
-  setShowLeaveRoomAlert,
-  leaveRoom,
-  isModal = false,
-}: {
-  setShowLeaveRoomAlert: (value: boolean) => void;
-  leaveRoom: (options?: { endStream?: boolean; sendReason?: boolean }) => Promise<void>;
-  isModal?: boolean;
-}) => {
-  return (
-    <Box>
-      <Flex
-        css={{
-          color: '$alert_error_default',
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />
-        <Text variant="lg" css={{ color: 'inherit', fontWeight: '$semiBold' }}>
-          Leave
-        </Text>
-        {isModal ? null : (
-          <Box css={{ color: '$on_surface_high', ml: 'auto' }} onClick={() => setShowLeaveRoomAlert(false)}>
-            <CrossIcon />
-          </Box>
-        )}
-      </Flex>
-      <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' }}>
-        <Button
-          outlined
-          variant="standard"
-          css={{ w: '100%', '@md': { display: 'none' } }}
-          onClick={() => setShowLeaveRoomAlert(false)}
-        >
-          Cancel
-        </Button>
-        <Button
-          variant="danger"
-          css={{ w: '100%' }}
-          onClick={async () => {
-            await leaveRoom({ sendReason: true });
-          }}
-          id="leaveRoom"
-          data-testid="leave_room"
-        >
-          Leave Session
-        </Button>
-      </Flex>
-    </Box>
-  );
-};

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

@@ -1,135 +0,0 @@
-import React, { Fragment, useState } from 'react';
-// @ts-ignore: No implicit Any
-import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
-import { CrossIcon, ExitIcon, StopIcon } from '@100mslive/react-icons';
-import { IconButton } from '../../../IconButton';
-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';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
-import { useDropdownList } from '../hooks/useDropdownList';
-import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
-
-export const MwebLeaveRoom = ({
-  leaveRoom,
-  endRoom,
-  container,
-}: {
-  leaveRoom: (options?: { endStream?: boolean; sendReason?: boolean }) => Promise<void>;
-  endRoom: () => Promise<void>;
-  container?: HTMLElement;
-}) => {
-  const [open, setOpen] = useState(false);
-  const { screenType } = useRoomLayoutConferencingScreen();
-  const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
-  const [showEndStreamAlert, setShowEndStreamAlert] = useState(false);
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const permissions = useHMSStore(selectPermissions);
-  const { isStreamingOn } = useRecordingStreaming();
-  const showStream = screenType !== 'hls_live_streaming' && isStreamingOn && permissions?.hlsStreaming;
-  const showLeaveOptions = (permissions?.hlsStreaming && isStreamingOn) || permissions?.endRoom;
-
-  useDropdownList({ open, name: 'LeaveRoom' });
-
-  if (!permissions || !isConnected) {
-    return null;
-  }
-
-  return (
-    <Fragment>
-      {showLeaveOptions ? (
-        <Sheet.Root open={open} onOpenChange={setOpen}>
-          <Sheet.Trigger asChild>
-            <LeaveButton
-              onClick={() => {
-                setOpen(open => !open);
-              }}
-            />
-          </Sheet.Trigger>
-          <Sheet.Content container={container}>
-            <LeaveCard
-              title={showStream ? 'Leave Stream' : 'Leave Session'}
-              subtitle={`Others will continue after you leave. You can join the ${
-                showStream ? 'stream' : 'session'
-              } again.`}
-              bg="$surface_default"
-              titleColor="$on_surface_high"
-              icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
-              onClick={async () => await leaveRoom({ sendReason: true })}
-              css={{ pt: 0, mt: '$10', color: '$on_surface_low', '&:hover': { color: '$on_surface_high' } }}
-            />
-
-            <LeaveCard
-              title={showStream ? 'End Stream' : 'End Session'}
-              subtitle={`The will end the ${
-                showStream ? 'stream' : 'session'
-              } for everyone. You can't undo this action.`}
-              bg="$alert_error_dim"
-              titleColor="$alert_error_brighter"
-              css={{ color: '$alert_error_bright', '&:hover': { color: '$alert_error_brighter' } }}
-              icon={<StopIcon height={24} width={24} />}
-              onClick={() => {
-                setOpen(false);
-                setShowEndStreamAlert(true);
-              }}
-            />
-          </Sheet.Content>
-        </Sheet.Root>
-      ) : (
-        <LeaveButton onClick={() => setShowLeaveRoomAlert(true)} />
-      )}
-      <Sheet.Root open={showEndStreamAlert} onOpenChange={setShowEndStreamAlert}>
-        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }} container={container}>
-          <EndSessionContent
-            setShowEndStreamAlert={setShowEndStreamAlert}
-            leaveRoom={isStreamingOn ? leaveRoom : endRoom}
-            isStreamingOn={isStreamingOn}
-          />
-        </Sheet.Content>
-      </Sheet.Root>
-
-      <Sheet.Root open={showLeaveRoomAlert} onOpenChange={setShowLeaveRoomAlert}>
-        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }} container={container}>
-          <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} />
-        </Sheet.Content>
-      </Sheet.Root>
-    </Fragment>
-  );
-};
-
-const LeaveButton = ({ onClick }: { onClick: () => void }) => {
-  const isMobileHLSStream = useMobileHLSStream();
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-
-  return isMobileHLSStream || isLandscapeHLSStream ? (
-    <IconButton key="LeaveRoom" data-testid="leave_room_btn" onClick={onClick}>
-      <Tooltip title="Leave Room">
-        <Box>
-          <CrossIcon />
-        </Box>
-      </Tooltip>
-    </IconButton>
-  ) : (
-    <LeaveIconButton
-      key="LeaveRoom"
-      data-testid="leave_room_btn"
-      css={{
-        borderTopRightRadius: '$1',
-        borderBottomRightRadius: '$1',
-      }}
-      onClick={onClick}
-    >
-      <Tooltip title="Leave Room">
-        <Box>
-          <ExitIcon style={{ transform: 'rotate(180deg)' }} />
-        </Box>
-      </Tooltip>
-    </LeaveIconButton>
-  );
-};