@100mslive/roomkit-react 0.2.8-alpha.7 → 0.2.8-alpha.9

package/src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx

@@ -14,6 +14,7 @@ export function HLSQualitySelector({
   onQualityChange,
   selection,
   isAuto,
+  containerRef,
 }: {
   open: boolean;
   onOpenChange: (value: boolean) => void;
@@ -21,9 +22,14 @@ export function HLSQualitySelector({
   onQualityChange: (quality: { [key: string]: string | number } | HMSHLSLayer) => void;
   selection: HMSHLSLayer;
   isAuto: boolean;
+  containerRef?: HTMLDivElement;
 }) {
   const isMobile = useMedia(config.media.md);
   const isLandscape = useIsLandscape();
+
+  if (layers.length === 0) {
+    return null;
+  }
   if (isMobile || isLandscape) {
     return (
       <Sheet.Root open={open} onOpenChange={onOpenChange}>
@@ -39,86 +45,87 @@ export function HLSQualitySelector({
             <SettingsIcon />
           </Flex>
         </Sheet.Trigger>
-
-        {layers.length > 0 && (
-          <Sheet.Content css={{ bg: '$surface_default', pb: '$1' }} onClick={() => onOpenChange(false)}>
-            <Sheet.Title
-              css={{
-                display: 'flex',
-                color: '$on_surface_high',
-                w: '100%',
-                justifyContent: 'space-between',
-                mt: '$8',
-                fontSize: '$md',
-                px: '$10',
-                pb: '$8',
-                borderBottom: '1px solid $border_bright',
-                alignItems: 'center',
-              }}
-            >
-              Quality
-              <Sheet.Close css={{ color: '$on_surface_high' }} onClick={() => onOpenChange(false)}>
-                <CrossIcon />
-              </Sheet.Close>
-            </Sheet.Title>
-            {layers.map(layer => {
-              return (
-                <Flex
-                  align="center"
-                  css={{
-                    w: '100%',
-                    bg: '$surface_default',
-                    '&:hover': {
-                      bg: '$surface_brighter',
-                    },
-                    cursor: 'pointer',
-                    gap: '$4',
-                    py: '$8',
-                    px: '$10',
-                  }}
-                  key={layer.width}
-                  onClick={() => onQualityChange(layer)}
-                >
-                  <Text variant="caption" css={{ fontWeight: '$semiBold' }}>
-                    {getQualityText(layer)}
-                  </Text>
-                  <Text variant="caption" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>
-                    {getBitrateText(layer)}
-                  </Text>
-                  {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (
-                    <CheckIcon width="16px" height="16px" />
-                  )}
-                </Flex>
-              );
-            })}
-            <Flex
-              align="center"
-              css={{
-                w: '100%',
-                bg: '$surface_default',
-                '&:hover': {
-                  bg: '$surface_brighter',
-                },
-                cursor: 'pointer',
-                gap: '$4',
-                py: '$8',
-                px: '$10',
-              }}
-              key="auto"
-              onClick={() => onQualityChange({ height: 'auto' })}
-            >
-              <Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
-                Auto
-              </Text>
-              {isAuto && <CheckIcon width="16px" height="16px" />}
-            </Flex>
-          </Sheet.Content>
-        )}
+        <Sheet.Content
+          container={containerRef}
+          css={{ bg: '$surface_default', pb: '$1' }}
+          onClick={() => onOpenChange(false)}
+        >
+          <Sheet.Title
+            css={{
+              display: 'flex',
+              color: '$on_surface_high',
+              w: '100%',
+              justifyContent: 'space-between',
+              mt: '$8',
+              fontSize: '$md',
+              px: '$10',
+              pb: '$8',
+              borderBottom: '1px solid $border_bright',
+              alignItems: 'center',
+            }}
+          >
+            Quality
+            <Sheet.Close css={{ color: '$on_surface_high' }} onClick={() => onOpenChange(false)}>
+              <CrossIcon />
+            </Sheet.Close>
+          </Sheet.Title>
+          {layers.map(layer => {
+            return (
+              <Flex
+                align="center"
+                css={{
+                  w: '100%',
+                  bg: '$surface_default',
+                  '&:hover': {
+                    bg: '$surface_brighter',
+                  },
+                  cursor: 'pointer',
+                  gap: '$4',
+                  py: '$8',
+                  px: '$10',
+                }}
+                key={layer.width}
+                onClick={() => onQualityChange(layer)}
+              >
+                <Text variant="caption" css={{ fontWeight: '$semiBold' }}>
+                  {getQualityText(layer)}
+                </Text>
+                <Text variant="caption" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>
+                  {getBitrateText(layer)}
+                </Text>
+                {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (
+                  <CheckIcon width="16px" height="16px" />
+                )}
+              </Flex>
+            );
+          })}
+          <Flex
+            align="center"
+            css={{
+              w: '100%',
+              bg: '$surface_default',
+              '&:hover': {
+                bg: '$surface_brighter',
+              },
+              cursor: 'pointer',
+              gap: '$4',
+              py: '$8',
+              px: '$10',
+            }}
+            key="auto"
+            onClick={() => onQualityChange({ height: 'auto' })}
+          >
+            <Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
+              Auto
+            </Text>
+            {isAuto && <CheckIcon width="16px" height="16px" />}
+          </Flex>
+        </Sheet.Content>
       </Sheet.Root>
     );
   }
   return (
-    <Dropdown.Root open={open} onOpenChange={value => onOpenChange(value)}>
+    <Dropdown.Root open={open} onOpenChange={value => onOpenChange(value)} modal={false}>
       <Dropdown.Trigger asChild data-testid="quality_selector">
         <Flex
           css={{
@@ -169,7 +176,7 @@ export function HLSQualitySelector({
           </Tooltip>
         </Flex>
       </Dropdown.Trigger>
-      {layers.length > 0 && (
+      <Dropdown.Portal container={containerRef}>
         <Dropdown.Content
           sideOffset={5}
           align="end"
@@ -232,7 +239,7 @@ export function HLSQualitySelector({
             {isAuto && <CheckIcon width="16px" height="16px" />}
           </Dropdown.Item>
         </Dropdown.Content>
-      )}
+      </Dropdown.Portal>
     </Dropdown.Root>
   );
 }

package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx

@@ -14,13 +14,12 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
         position: 'relative',
         '& video::cue': {
           color: 'white',
-          // textShadow: '0px 0px 4px #000',
           whiteSpace: 'pre-line',
-          fontSize: '$lg',
+          fontSize: '$sm',
           fontStyle: 'normal',
-          fontWeight: '$semiBold',
+          fontWeight: '$regular',
           lineHeight: '$sm',
-          letterSpacing: '0.5px',
+          letterSpacing: '0.25px',
         },
         '& video::-webkit-media-text-track-display': {
           padding: '0 $4',

package/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx

@@ -1,13 +1,14 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { selectHLSState, selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
+import React from 'react';
+import { ChevronDownIcon } from '@100mslive/react-icons';
 import { Flex } from '../../../Layout';
 import { Text } from '../../../Text';
 // @ts-ignore: No implicit any
 import { Logo } from '../Header/HeaderComponents';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
-import { getFormattedCount } from '../../common/utils';
-import { getTime } from './utils';
+import { RoomDetailsRow } from '../RoomDetails/RoomDetailsRow';
+import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore
+import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
 /*
 	player handler --> left -> go live with timer or live, right -> expand icon 
@@ -16,39 +17,41 @@ import { getTime } from './utils';
 	half page will have chat or participant view
 */
 export const HLSViewTitle = () => {
-  const peerCount = useHMSStore(selectPeerCount);
-  const hlsState = useHMSStore(selectHLSState);
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
-  const { screenType } = useRoomLayoutConferencingScreen();
-  const [liveTime, setLiveTime] = useState(0);
-
-  const startTimer = useCallback(() => {
-    intervalRef.current = setInterval(() => {
-      const timeStamp = hlsState?.variants[0]?.[screenType === 'hls_live_streaming' ? 'startedAt' : 'initialisedAt'];
-      if (hlsState?.running && timeStamp) {
-        setLiveTime(Date.now() - timeStamp.getTime());
-      }
-    }, 60000);
-  }, [hlsState?.running, hlsState?.variants, screenType]);
-
-  useEffect(() => {
-    if (hlsState?.running) {
-      startTimer();
-      const timeStamp = hlsState?.variants[0]?.[screenType === 'hls_live_streaming' ? 'startedAt' : 'initialisedAt'];
-      if (hlsState?.running && timeStamp) {
-        setLiveTime(Date.now() - timeStamp.getTime());
-      }
-    }
-    if (!hlsState?.running && intervalRef.current) {
-      clearInterval(intervalRef.current);
-    }
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, [hlsState?.running, hlsState?.variants, screenType, startTimer]);
+  const { title, details } = useRoomLayoutHeader();
+  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+  const isDetailSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.ROOM_DETAILS);
 
+  if (isDetailSidepaneOpen) {
+    return (
+      <Flex
+        gap="4"
+        align="center"
+        justify="between"
+        css={{
+          position: 'relative',
+          h: 'fit-content',
+          w: '100%',
+          borderBottom: '1px solid $border_bright',
+          p: '$8',
+          backgroundColor: '$surface_dim',
+        }}
+      >
+        <Text variant="sub2" css={{ fontWeight: '$semiBold' }}>
+          About Session
+        </Text>
+        <Flex
+          onClick={toggleDetailsPane}
+          css={{
+            color: '$on_surface_high',
+            cursor: 'pointer',
+            '&:hover': { opacity: '0.8' },
+          }}
+        >
+          <ChevronDownIcon />
+        </Flex>
+      </Flex>
+    );
+  }
   return (
     <Flex
       gap="4"
@@ -64,25 +67,15 @@ export const HLSViewTitle = () => {
     >
       <Logo />
       <Flex direction="column">
-        <Text variant="sub2" css={{ fontWeight: '$semiBold' }}>
-          Tech Talk
-        </Text>
-        <Flex gap="1">
-          <Text variant="caption" css={{ color: '$on_surface_medium' }}>
-            {getFormattedCount(peerCount) + ' watching'}
+        {title ? (
+          <Text variant="sub2" css={{ fontWeight: '$semiBold' }}>
+            {title}
           </Text>
-          <Flex
-            direction="column"
-            css={{
-              w: '$3',
-              h: '$3',
-              backgroundColor: '$on_surface_medium',
-              borderRadius: '50%',
-              alignSelf: 'center',
-            }}
-          />
-          <Text variant="caption" css={{ color: '$on_surface_medium' }}>
-            {'Started ' + getTime(liveTime) + ' ago'}
+        ) : null}
+        <Flex>
+          <RoomDetailsRow details={details} />
+          <Text variant="caption" css={{ color: '$on_surface_medium' }} onClick={toggleDetailsPane}>
+            &nbsp;...more
           </Text>
         </Flex>
       </Flex>

package/src/Prebuilt/components/HMSVideo/VideoProgress.tsx

@@ -3,7 +3,7 @@ import { Box, Flex, Slider } from '../../..';
 import { useHMSPlayerContext } from './PlayerContext';
 import { getPercentage } from './utils';
 
-export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
+export const VideoProgress = () => {
   const { hlsPlayer } = useHMSPlayerContext();
   const [videoProgress, setVideoProgress] = useState<number>(0);
   const [bufferProgress, setBufferProgress] = useState(0);
@@ -20,10 +20,11 @@ export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
       if (!videoEl) {
         return;
       }
-      const videoProgress = Math.floor(getPercentage(videoEl.currentTime, videoEl.duration));
+      const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable?.end(0) || 0;
+      const videoProgress = Math.floor(getPercentage(videoEl.currentTime, duration));
       let bufferProgress = 0;
       if (videoEl.buffered.length > 0) {
-        bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), videoEl.duration));
+        bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), duration));
       }
 
       setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress);
@@ -48,7 +49,7 @@ export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
     return null;
   }
   return (
-    <Flex align="center" css={{ cursor: 'pointer', h: '$2', alignSelf: 'stretch', pointerEvents: isDvr ? '' : 'none' }}>
+    <Flex align="center" css={{ cursor: 'pointer', h: '$2', alignSelf: 'stretch' }}>
       <Slider
         id="video-actual-rest"
         css={{
@@ -56,7 +57,6 @@ export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
           h: '$2',
           zIndex: 1,
           transition: `all .2s ease .5s`,
-          pointerEvents: isDvr ? '' : 'none',
         }}
         min={0}
         max={100}
@@ -64,7 +64,7 @@ export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
         value={[videoProgress]}
         showTooltip={false}
         onValueChange={onProgress}
-        thumbStyles={{ w: '$6', h: '$6', display: isDvr ? '' : 'none' }}
+        thumbStyles={{ w: '$6', h: '$6' }}
       />
       <Box
         id="video-buffer"

package/src/Prebuilt/components/HMSVideo/VideoTime.tsx

@@ -12,7 +12,8 @@ export const VideoTime = () => {
     const timeupdateHandler = (currentTime: number) => {
       const videoEl = hlsPlayer?.getVideoElement();
       if (videoEl) {
-        setVideoTime(getDurationFromSeconds(videoEl.duration - currentTime));
+        const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable.end(0) || 0;
+        setVideoTime(getDurationFromSeconds(duration - currentTime));
       } else {
         setVideoTime(getDurationFromSeconds(currentTime));
       }

package/src/Prebuilt/components/HMSVideo/utils.ts

@@ -25,11 +25,3 @@ export function getDurationFromSeconds(timeInSeconds: number) {
   }
   return videoTimeStr;
 }
-
-export function getTime(timeInMilles: number) {
-  const timeInSeconds = Math.floor(timeInMilles / 1000);
-  const hours = Math.floor(timeInSeconds / 3600);
-  const minutes = Math.floor((timeInSeconds % 3600) / 60);
-  const hour = hours !== 0 ? `${hours < 10 ? '0' : ''}${hours}` : '';
-  return hour + `${hour ? 'h:' : ''}` + minutes + 'm';
-}

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx

@@ -24,7 +24,7 @@ const IconSection = styled(IconButton, {
   h: '$14',
   p: '$4',
   r: '$1',
-  bg: '$transparent',
+  bg: 'transparent',
   borderTopRightRadius: 0,
   borderColor: '$border_bright',
   borderBottomRightRadius: 0,

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

@@ -17,10 +17,12 @@ export const DesktopLeaveRoom = ({
   leaveRoom,
   screenType,
   endRoom,
+  container,
 }: {
   leaveRoom: (options?: { endStream?: boolean }) => Promise<void>;
   screenType: keyof ConferencingScreen;
   endRoom: () => Promise<void>;
+  container?: HTMLElement;
 }) => {
   const [open, setOpen] = useState(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
@@ -69,54 +71,56 @@ export const DesktopLeaveRoom = ({
                 <VerticalMenuIcon />
               </MenuTriggerButton>
             </Dropdown.Trigger>
-            <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()}
-                  css={{ p: '$8 $4' }}
-                />
-              </Dropdown.Item>
+            <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()}
+                    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);
+                <Dropdown.Item
+                  css={{
+                    bg: '$alert_error_dim',
+                    color: '$alert_error_bright',
+                    '&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
+                    p: '0',
                   }}
-                  css={{ p: '$8 $4' }}
-                />
-              </Dropdown.Item>
-            </Dropdown.Content>
+                  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>
       ) : (

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

@@ -14,13 +14,18 @@ import {
 } 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 { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 
-export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
+export const LeaveRoom = ({
+  screenType,
+  container,
+}: {
+  screenType: keyof ConferencingScreen;
+  container?: HTMLElement;
+}) => {
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const isMobile = useMedia(cssConfig.media.md);
@@ -65,11 +70,11 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
     return null;
   }
   if (isMobileHLSStream || isLandscapeHLSStream) {
-    return <MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} />;
+    return <MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} container={container} />;
   }
   return isMobile ? (
-    <MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} />
+    <MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} container={container} />
   ) : (
-    <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} />
+    <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} container={container} />
   );
 };

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

@@ -19,9 +19,11 @@ import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 export const MwebLeaveRoom = ({
   leaveRoom,
   endRoom,
+  container,
 }: {
   leaveRoom: (options?: { endStream?: boolean }) => Promise<void>;
   endRoom: () => Promise<void>;
+  container?: HTMLElement;
 }) => {
   const [open, setOpen] = useState(false);
   const { screenType } = useRoomLayoutConferencingScreen();
@@ -44,9 +46,13 @@ export const MwebLeaveRoom = ({
       {showLeaveOptions ? (
         <Sheet.Root open={open} onOpenChange={setOpen}>
           <Sheet.Trigger asChild>
-            <LeaveButton onClick={() => setOpen(!open)} />
+            <LeaveButton
+              onClick={() => {
+                setOpen(open => !open);
+              }}
+            />
           </Sheet.Trigger>
-          <Sheet.Content>
+          <Sheet.Content container={container}>
             <LeaveCard
               title={showStream ? 'Leave Stream' : 'Leave Session'}
               subtitle={`Others will continue after you leave. You can join the ${
@@ -79,7 +85,7 @@ export const MwebLeaveRoom = ({
         <LeaveButton onClick={() => setShowLeaveRoomAlert(true)} />
       )}
       <Sheet.Root open={showEndStreamAlert} onOpenChange={setShowEndStreamAlert}>
-        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
+        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }} container={container}>
           <EndSessionContent
             setShowEndStreamAlert={setShowEndStreamAlert}
             leaveRoom={isStreamingOn ? leaveRoom : endRoom}
@@ -89,7 +95,7 @@ export const MwebLeaveRoom = ({
       </Sheet.Root>
 
       <Sheet.Root open={showLeaveRoomAlert} onOpenChange={setShowLeaveRoomAlert}>
-        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }}>
+        <Sheet.Content css={{ bg: '$surface_dim', p: '$10', pb: '$12' }} container={container}>
           <LeaveSessionContent setShowLeaveRoomAlert={setShowLeaveRoomAlert} leaveRoom={leaveRoom} />
         </Sheet.Content>
       </Sheet.Root>
@@ -102,7 +108,7 @@ const LeaveButton = ({ onClick }: { onClick: () => void }) => {
   const isLandscapeHLSStream = useLandscapeHLSStream();
 
   return isMobileHLSStream || isLandscapeHLSStream ? (
-    <IconButton key="LeaveRoom" data-testid="leave_room_btn" onClick={() => onClick()}>
+    <IconButton key="LeaveRoom" data-testid="leave_room_btn" onClick={onClick}>
       <Tooltip title="Leave Room">
         <Box>
           <CrossIcon />
@@ -117,7 +123,7 @@ const LeaveButton = ({ onClick }: { onClick: () => void }) => {
         borderTopRightRadius: '$1',
         borderBottomRightRadius: '$1',
       }}
-      onClick={() => onClick()}
+      onClick={onClick}
     >
       <Tooltip title="Leave Room">
         <Box>