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

package/src/Prebuilt/components/InsetTile.tsx

@@ -1,136 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import Draggable from 'react-draggable';
-import { useMedia } from 'react-use';
-import {
-  selectIsAllowedToPublish,
-  selectLocalPeer,
-  selectPeerByID,
-  selectVideoTrackByID,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { ExpandIcon } from '@100mslive/react-icons';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
-import { config as cssConfig } from '../../Theme';
-// @ts-ignore: No implicit Any
-import IconButton from '../IconButton';
-// @ts-ignore: No implicit Any
-import { AudioVideoToggle } from './AudioVideoToggle';
-// @ts-ignore: No implicit Any
-import VideoTile from './VideoTile';
-// @ts-ignore: No implicit Any
-import { useSetAppDataByKey } from './AppData/useUISettings';
-import { useVideoTileContext } from './hooks/useVideoTileLayout';
-// @ts-ignore: No implicit Any
-import { APP_DATA } from '../common/constants';
-
-const MinimisedTile = ({ setMinimised }: { setMinimised: (value: boolean) => void }) => {
-  return (
-    <Flex align="center" css={{ gap: '$6', r: '$1', bg: '$surface_default', p: '$4', color: '$on_surface_high' }}>
-      <AudioVideoToggle hideOptions={true} />
-      <Text>You</Text>
-      <IconButton
-        className="__cancel-drag-event"
-        onClick={() => setMinimised(false)}
-        css={{ bg: 'transparent', border: 'transparent' }}
-      >
-        <ExpandIcon />
-      </IconButton>
-    </Flex>
-  );
-};
-
-const insetHeightPx = 180;
-const insetMaxWidthPx = 240;
-const defaultMobileAspectRatio = 9 / 16;
-const desktopAspectRatio = 1 / defaultMobileAspectRatio;
-
-export const InsetTile = ({ peerId }: { peerId?: string }) => {
-  const isMobile = useMedia(cssConfig.media.md);
-  const isLandscape = useMedia(cssConfig.media.ls);
-  const selector = peerId ? selectPeerByID(peerId) : selectLocalPeer;
-  const peer = useHMSStore(selector);
-  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  const videoTrack = useHMSStore(selectVideoTrackByID(peer?.videoTrack));
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  const videoTileProps = useVideoTileContext();
-  let aspectRatio = isMobile ? defaultMobileAspectRatio : desktopAspectRatio;
-  if (videoTrack?.width && videoTrack?.height && !isMobile) {
-    aspectRatio = videoTrack.width / videoTrack.height;
-  }
-  let height = insetHeightPx;
-  let width = height * aspectRatio;
-  // Convert to 16/9 in landscape mode with a max width of 240
-  if (isLandscape && width > insetMaxWidthPx) {
-    width = 240;
-    height = width / aspectRatio;
-  }
-
-  const nodeRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const node = nodeRef.current;
-    if (!node || !window.ResizeObserver) {
-      return;
-    }
-    const resizeObserver = new ResizeObserver(entries => {
-      entries.forEach(entry => {
-        if (entry.target === node.parentElement) {
-          // reset to original position on resize
-          node.style.transform = `translate(0,0)`;
-        }
-      });
-    });
-    node.parentElement && resizeObserver.observe(node.parentElement);
-    return () => {
-      node?.parentElement && resizeObserver?.unobserve(node.parentElement);
-      resizeObserver?.disconnect();
-    };
-  }, []);
-
-  if (!isAllowedToPublish.video && !isAllowedToPublish.audio) {
-    return null;
-  }
-
-  return (
-    <Draggable bounds="parent" nodeRef={nodeRef} cancel=".__cancel-drag-event">
-      <Box
-        ref={nodeRef}
-        css={{
-          position: 'absolute',
-          bottom: 0,
-          right: 0,
-          zIndex: 10,
-          boxShadow: '0 0 8px 0 rgba(0,0,0,0.3)',
-          r: '$2',
-          ...(!minimised
-            ? {
-                aspectRatio: `${aspectRatio}`,
-                h: height,
-              }
-            : {}),
-        }}
-      >
-        {minimised ? (
-          <MinimisedTile setMinimised={setMinimised} />
-        ) : (
-          <VideoTile
-            peerId={peer?.id}
-            trackId={peer?.videoTrack}
-            rootCSS={{
-              size: '100%',
-              padding: 0,
-            }}
-            width={width}
-            height={height}
-            containerCSS={{ background: '$surface_default' }}
-            canMinimise
-            isDragabble
-            {...videoTileProps}
-            hideParticipantNameOnTile
-          />
-        )}
-      </Box>
-    </Draggable>
-  );
-};

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>
-  );
-};