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

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/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>

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

@@ -54,6 +54,7 @@ import { useDropdownList } from '../../hooks/useDropdownList';
 // @ts-ignore: No implicit any
 import { useMyMetadata } from '../../hooks/useMetadata';
 import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../../../common/hooks';
 // @ts-ignore: No implicit any
 import { getFormattedCount } from '../../../common/utils';
 // @ts-ignore: No implicit any
@@ -99,6 +100,8 @@ export const MwebOptions = ({
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
   const { title, description } = useRoomLayoutHeader();
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
@@ -121,7 +124,7 @@ export const MwebOptions = ({
       <Sheet.Root open={openOptionsSheet} onOpenChange={setOpenOptionsSheet}>
         <Tooltip title="More options">
           <Sheet.Trigger asChild data-testid="more_settings_btn">
-            <IconButton css={{ '@md': { bg: screenType === 'hls_live_streaming' ? '$surface_default' : '' } }}>
+            <IconButton css={{ bg: isMobileHLSStream || isLandscapeHLSStream ? '$surface_default' : '' }}>
               <HamburgerMenuIcon />
             </IconButton>
           </Sheet.Trigger>
@@ -197,7 +200,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             ) : null} */}
 
-            {elements?.emoji_reactions && (
+            {elements?.emoji_reactions && !(isLandscapeHLSStream || isMobileHLSStream) && (
               <ActionTile.Root
                 onClick={() => {
                   setShowEmojiCard(true);

package/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx

@@ -3,6 +3,7 @@ import {
   HMSNotificationTypes,
   HMSRoomState,
   selectHasPeerHandRaised,
+  selectPeerByID,
   selectRoomState,
   useHMSNotifications,
   useHMSStore,
@@ -32,8 +33,10 @@ export const HandRaisedNotifications = () => {
       return;
     }
     const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
+    const peer = vanillaStore.getState(selectPeerByID(notification.data.id));
     if (hasPeerHandRaised) {
-      ToastBatcher.showToast({ notification, type: on_stage_exp ? 'RAISE_HAND_HLS' : 'RAISE_HAND' });
+      const showCTA = peer?.roleName && (on_stage_exp?.off_stage_roles || [])?.includes(peer.roleName);
+      ToastBatcher.showToast({ notification, type: showCTA ? 'RAISE_HAND_HLS' : 'RAISE_HAND' });
       console.debug('Metadata updated', notification.data);
     }
   }, [isSubscribing, notification, on_stage_exp, roomState, vanillaStore]);

package/src/Prebuilt/components/Polls/Voting/Voting.tsx

@@ -38,9 +38,9 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
       <Flex
         align="center"
         css={{
-          gap: '$6',
+          gap: '$4',
           py: '$6',
-          px: '$10',
+          px: '$8',
           my: '$4',
           w: '100%',
           color: '$on_surface_high',
@@ -60,6 +60,7 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
             marginLeft: 'auto',
             cursor: 'pointer',
             '&:hover': { opacity: '0.8' },
+            height: 'fit-content',
           }}
         >
           <CrossIcon onClick={toggleVoting} />

package/src/Prebuilt/components/Polls/common/OptionInputWithDelete.tsx

@@ -29,7 +29,7 @@ export const OptionInputWithDelete = ({
         key={index}
         onChange={event => handleOptionTextChange(index, event.target.value)}
       />
-      <IconButton onClick={() => removeOption(index)} css={{ bg: '$transparent', border: 'none' }}>
+      <IconButton onClick={() => removeOption(index)} css={{ bg: 'transparent', border: 'none' }}>
         <TrashIcon />
       </IconButton>
     </>

package/src/Prebuilt/components/Polls/common/utils.ts

@@ -4,7 +4,7 @@ export const getFormattedTime = (milliseconds: number | undefined, precise = tru
   const totalSeconds = milliseconds / 1000;
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = precise ? totalSeconds % 60 : Math.floor(totalSeconds % 60);
+  const seconds = totalSeconds % 60;
 
   let formattedTime = '';
   if (hours) {
@@ -16,7 +16,7 @@ export const getFormattedTime = (milliseconds: number | undefined, precise = tru
   if (!precise && (hours || minutes)) {
     return formattedTime;
   }
-  formattedTime += `${seconds}s`;
+  formattedTime += `${minutes >= 1 ? Math.floor(seconds) : seconds.toFixed(3)}s`;
 
   return formattedTime;
 };

package/src/Prebuilt/components/RaiseHand.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
 import { HandIcon, HandRaiseSlashedIcon } from '@100mslive/react-icons';
+import { CSS } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 // @ts-ignore: No implicit Any
 import IconButton from '../IconButton';
 // @ts-ignore: No implicit Any
 import { useMyMetadata } from './hooks/useMetadata';
 
-export const RaiseHand = () => {
+export const RaiseHand = ({ css }: { css?: CSS }) => {
   const { isHandRaised, toggleHandRaise } = useMyMetadata();
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
-      <IconButton data-testid="hand_raise_btn" active={!isHandRaised} onClick={async () => await toggleHandRaise()}>
+      <IconButton
+        data-testid="hand_raise_btn"
+        css={css}
+        active={!isHandRaised}
+        onClick={async () => await toggleHandRaise()}
+      >
         {isHandRaised ? <HandRaiseSlashedIcon /> : <HandIcon />}
       </IconButton>
     </Tooltip>

package/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx

@@ -2,31 +2,32 @@ import React from 'react';
 import { CrossIcon } from '@100mslive/react-icons';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
+// @ts-ignore: No implicit any
+import { Logo } from '../Header/HeaderComponents';
 import { RoomDetailsRow } from './RoomDetailsRow';
 import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore
 import { useSidepaneToggle } from '../AppData/useSidepane';
+import { useMobileHLSStream } from '../../common/hooks';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
 export const RoomDetailsPane = () => {
-  const { title, description, details } = useRoomLayoutHeader();
-  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+  const { description } = useRoomLayoutHeader();
+  const isMwebHLSStream = useMobileHLSStream();
   return (
     <Box css={{ flex: '1 1 0' }}>
-      <Flex justify="between" align="center" css={{ w: '100%' }}>
-        <Text variant="h6">{title}</Text>
-        <Flex
-          onClick={toggleDetailsPane}
-          css={{ color: '$on_surface_high', cursor: 'pointer', '&:hover': { opacity: '0.8' } }}
-        >
-          <CrossIcon />
+      {isMwebHLSStream ? (
+        <Flex direction="row" align="center" gap="2">
+          <Logo />
+          <ShowRoomDetailHeader />
         </Flex>
-      </Flex>
-
-      <RoomDetailsRow details={details} />
-
+      ) : (
+        <ShowRoomDetailHeader />
+      )}
       <Box css={{ mt: '$10' }}>
-        <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>Description</Text>
+        <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold', display: isMwebHLSStream ? 'none' : '' }}>
+          Description
+        </Text>
         <Text variant="sm" css={{ c: '$on_surface_medium' }}>
           {description}
         </Text>
@@ -34,3 +35,29 @@ export const RoomDetailsPane = () => {
     </Box>
   );
 };
+
+const ShowRoomDetailHeader = () => {
+  const { title, details } = useRoomLayoutHeader();
+  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+  const isMwebHLSStream = useMobileHLSStream();
+  return (
+    <Flex direction="column">
+      <Flex justify="between" align="center" css={{ w: '100%' }}>
+        <Text variant="h6">{title}</Text>
+        {!isMwebHLSStream && (
+          <Flex
+            onClick={toggleDetailsPane}
+            css={{
+              color: '$on_surface_high',
+              cursor: 'pointer',
+              '&:hover': { opacity: '0.8' },
+            }}
+          >
+            <CrossIcon />
+          </Flex>
+        )}
+      </Flex>
+      <RoomDetailsRow details={details} />
+    </Flex>
+  );
+};

package/src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx

@@ -61,7 +61,7 @@ export function ShareScreenOptions() {
               pt: '$10',
               pb: '$6',
               '&:hover': {
-                bg: '$transparent',
+                bg: 'transparent',
                 cursor: 'default',
               },
             }}
@@ -78,7 +78,7 @@ export function ShareScreenOptions() {
               pt: '$6',
               pb: '$10',
               '&:hover': {
-                bg: '$transparent',
+                bg: 'transparent',
                 cursor: 'default',
               },
             }}

package/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx

@@ -36,7 +36,7 @@ export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
                 w: '100%',
                 '&:focus': {
                   boxShadow: '0 0 0 1px $colors$primary_default',
-                  border: '1px solid $transparent',
+                  border: '1px solid transparent',
                 },
                 mb: 0,
                 mt: '$6',