@100mslive/roomkit-react 0.2.8-alpha.1 → 0.2.8-alpha.11

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

@@ -1,9 +1,9 @@
 import React, { Fragment, useState } from 'react';
-import { ConferencingScreen } from '@100mslive/types-prebuilt';
 // @ts-ignore: No implicit Any
 import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 // @ts-ignore: No implicit Any
-import { ExitIcon, StopIcon } from '@100mslive/react-icons';
+import { CrossIcon, ExitIcon, StopIcon } from '@100mslive/react-icons';
+import { IconButton } from '../../../IconButton';
 import { Box } from '../../../Layout';
 import { Sheet } from '../../../Sheet';
 import { Tooltip } from '../../../Tooltip';
@@ -11,19 +11,22 @@ 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,
-  screenType,
   endRoom,
+  container,
 }: {
   leaveRoom: (options?: { endStream?: boolean }) => Promise<void>;
-  screenType: keyof ConferencingScreen;
   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);
@@ -43,22 +46,13 @@ export const MwebLeaveRoom = ({
       {showLeaveOptions ? (
         <Sheet.Root open={open} onOpenChange={setOpen}>
           <Sheet.Trigger asChild>
-            <LeaveIconButton
-              key="LeaveRoom"
-              data-testid="leave_room_btn"
-              css={{
-                borderTopRightRadius: '$1',
-                borderBottomRightRadius: '$1',
+            <LeaveButton
+              onClick={() => {
+                setOpen(open => !open);
               }}
-            >
-              <Tooltip title="Leave Room">
-                <Box>
-                  <ExitIcon style={{ transform: 'rotate(180deg)' }} />
-                </Box>
-              </Tooltip>
-            </LeaveIconButton>
+            />
           </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 ${
@@ -88,16 +82,10 @@ export const MwebLeaveRoom = ({
           </Sheet.Content>
         </Sheet.Root>
       ) : (
-        <LeaveIconButton key="LeaveRoom" data-testid="leave_room_btn" onClick={() => setShowLeaveRoomAlert(true)}>
-          <Tooltip title="Leave Room">
-            <Box>
-              <ExitIcon style={{ transform: 'rotate(180deg)' }} />
-            </Box>
-          </Tooltip>
-        </LeaveIconButton>
+        <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}
@@ -107,10 +95,41 @@ 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>
     </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>
+  );
+};

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

@@ -10,6 +10,7 @@ import { DesktopOptions } from './SplitComponents/DesktopOptions';
 // @ts-ignore: No implicit Any
 import { MwebOptions } from './SplitComponents/MwebOptions';
 import { config as cssConfig } from '../../..';
+import { useLandscapeHLSStream } from '../../common/hooks';
 
 export const MoreSettings = ({
   elements,
@@ -19,7 +20,8 @@ export const MoreSettings = ({
   screenType: keyof ConferencingScreen;
 }) => {
   const isMobile = useMedia(cssConfig.media.md);
-  return isMobile ? (
+  const isLandscapeHLSStream = useLandscapeHLSStream();
+  return isMobile || isLandscapeHLSStream ? (
     <MwebOptions elements={elements} screenType={screenType} />
   ) : (
     <DesktopOptions elements={elements} screenType={screenType} />

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

@@ -5,6 +5,7 @@ import {
   DefaultConferencingScreen_Elements,
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
 import { selectAppData, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { BrbIcon, CheckIcon, HamburgerMenuIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
 import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../..';
@@ -143,41 +144,46 @@ export const DesktopOptions = ({
               Settings
             </Text>
           </Dropdown.Item>
+          {match({ screenType, isSupported: HMSHLSPlayer.isSupported() })
+            .with({ screenType: 'hls_live_streaming', isSupported: false }, () => null)
+            .with({ screenType: 'hls_live_streaming', isSupported: true }, () => {
+              return (
+                <Dropdown.Item
+                  onClick={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
+                  data-testid="hls_stats"
+                >
+                  <Checkbox.Root
+                    css={{ margin: '$2' }}
+                    checked={enablHlsStats}
+                    onCheckedChange={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
+                  >
+                    <Checkbox.Indicator>
+                      <CheckIcon width={16} height={16} />
+                    </Checkbox.Indicator>
+                  </Checkbox.Root>
+                  <Flex justify="between" css={{ width: '100%' }}>
+                    <Text variant="sm" css={{ ml: '$4' }}>
+                      Show HLS Stats
+                    </Text>
 
-          {screenType === 'hls_live_streaming' ? (
-            HMSHLSPlayer.isSupported() ? (
+                    <Text variant="sm" css={{ ml: '$4' }}>
+                      {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
+                    </Text>
+                  </Flex>
+                </Dropdown.Item>
+              );
+            })
+            .otherwise(() => (
               <Dropdown.Item
-                onClick={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
-                data-testid="hls_stats"
+                onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)}
+                data-testid="stats_for_nerds_btn"
               >
-                <Checkbox.Root
-                  css={{ margin: '$2' }}
-                  checked={enablHlsStats}
-                  onCheckedChange={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
-                >
-                  <Checkbox.Indicator>
-                    <CheckIcon width={16} height={16} />
-                  </Checkbox.Indicator>
-                </Checkbox.Root>
-                <Flex justify="between" css={{ width: '100%' }}>
-                  <Text variant="sm" css={{ ml: '$4' }}>
-                    Show HLS Stats
-                  </Text>
-
-                  <Text variant="sm" css={{ ml: '$4' }}>
-                    {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
-                  </Text>
-                </Flex>
+                <InfoIcon />
+                <Text variant="sm" css={{ ml: '$4' }}>
+                  Stats for Nerds
+                </Text>
               </Dropdown.Item>
-            ) : null
-          ) : (
-            <Dropdown.Item onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)} data-testid="stats_for_nreds_btn">
-              <InfoIcon />
-              <Text variant="sm" css={{ ml: '$4' }}>
-                Stats for Nerds
-              </Text>
-            </Dropdown.Item>
-          )}
+            ))}
         </Dropdown.Content>
       </Dropdown.Root>
       {openModals.has(MODALS.BULK_ROLE_CHANGE) && (

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

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { useClickAway } from 'react-use';
 import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
 import {
   selectIsConnectedToRoom,
   selectPeerCount,
@@ -53,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
@@ -98,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' });
 
@@ -120,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>
+            <IconButton css={{ bg: isMobileHLSStream || isLandscapeHLSStream ? '$surface_default' : '' }}>
               <HamburgerMenuIcon />
             </IconButton>
           </Sheet.Trigger>
@@ -196,7 +200,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             ) : null} */}
 
-            {elements?.emoji_reactions && (
+            {elements?.emoji_reactions && !(isLandscapeHLSStream || isMobileHLSStream) && (
               <ActionTile.Root
                 onClick={() => {
                   setShowEmojiCard(true);
@@ -287,11 +291,11 @@ export const MwebOptions = ({
               >
                 {isRecordingLoading ? <Loading /> : <RecordIcon />}
                 <ActionTile.Title>
-                  {isBrowserRecordingOn
-                    ? 'Recording On'
-                    : isRecordingLoading
-                    ? 'Starting Recording'
-                    : 'Start Recording'}
+                  {match({ isBrowserRecordingOn, isRecordingLoading })
+                    .with({ isBrowserRecordingOn: true, isRecordingLoading: false }, () => 'Recording On')
+                    .with({ isRecordingLoading: true }, () => 'Starting Recording')
+                    .with({ isRecordingLoading: false }, () => 'Start Recording')
+                    .otherwise(() => null)}
                 </ActionTile.Title>
               </ActionTile.Root>
             ) : null}
@@ -339,7 +343,7 @@ export const MwebOptions = ({
             mx: '$4',
           }}
         >
-          <EmojiReaction />
+          <EmojiReaction showCard />
         </Box>
       )}
       {showRecordingOn && (

package/src/Prebuilt/components/MwebLandscapePrompt.tsx

@@ -1,17 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
+import { match, P } from 'ts-pattern';
 import { RefreshIcon } from '@100mslive/react-icons';
 import { Button } from '../../Button';
 import { Box, Flex } from '../../Layout';
 import { Dialog } from '../../Modal';
 import { Text } from '../../Text';
 import { config as cssConfig } from '../../Theme';
+import { useLandscapeHLSStream } from '../common/hooks';
 // @ts-ignore
 import { isMobileUserAgent } from '../common/utils';
 
 export const MwebLandscapePrompt = () => {
   const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState(false);
   const isLandscape = useMedia(cssConfig.media.ls);
+  const isLandscapeHLSStream = useLandscapeHLSStream();
 
   useEffect(() => {
     if (!isMobileUserAgent) {
@@ -20,22 +23,30 @@ export const MwebLandscapePrompt = () => {
     }
 
     if (!window.screen?.orientation) {
-      setShowMwebLandscapePrompt(isLandscape);
+      setShowMwebLandscapePrompt(isLandscape && !isLandscapeHLSStream);
       return;
     }
     const handleRotation = () => {
       const angle = window.screen.orientation.angle;
       const type = window.screen.orientation.type || '';
       // Angle check needed to diff bw mobile and desktop
-      setShowMwebLandscapePrompt(angle ? angle >= 90 && type.includes('landscape') : isLandscape);
+      setShowMwebLandscapePrompt(
+        match({ angle, isLandscapeHLSStream, isLandscape, type })
+          .with({ isLandscapeHLSStream }, () => false)
+          .with({ angle: P.when(angle => angle && angle >= 90) }, ({ type }) => type.includes('landscape'))
+          .otherwise(() => isLandscape),
+      );
     };
     handleRotation();
     window.screen.orientation.addEventListener('change', handleRotation);
     return () => {
       window.screen.orientation.removeEventListener('change', handleRotation);
     };
-  }, [isLandscape]);
+  }, [isLandscape, isLandscapeHLSStream]);
 
+  if (isLandscapeHLSStream) {
+    return null;
+  }
   return (
     <Dialog.Root open={showMwebLandscapePrompt} onOpenChange={setShowMwebLandscapePrompt}>
       <Dialog.Portal>

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

@@ -3,6 +3,7 @@ import {
   HMSNotificationTypes,
   HMSRoomState,
   selectHasPeerHandRaised,
+  selectPeerByID,
   selectRoomState,
   useHMSNotifications,
   useHMSStore,
@@ -28,12 +29,14 @@ export const HandRaisedNotifications = () => {
     }
 
     // Don't show toast message in case of local peer.
-    if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !on_stage_exp || !isSubscribing) {
+    if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !isSubscribing) {
       return;
     }
     const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
+    const peer = vanillaStore.getState(selectPeerByID(notification.data.id));
     if (hasPeerHandRaised) {
-      ToastBatcher.showToast({ notification, type: '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/Notifications/PeerNotifications.tsx

@@ -49,7 +49,7 @@ export const PeerNotifications = () => {
     }
 
     ToastBatcher.showToast({ notification });
-  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]);
+  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, selectedPeer.id, setPeerSelector]);
 
   return null;
 };

package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx

@@ -1,5 +1,6 @@
 // @ts-check
 import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { match } from 'ts-pattern';
 import { selectLocalPeer, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { CheckCircleIcon, ChevronDownIcon, CrossCircleIcon } from '@100mslive/react-icons';
 import { Box, Button, Flex, Text } from '../../../../';
@@ -92,20 +93,30 @@ export const QuestionCard = ({
         <Text
           variant="caption"
           css={{
-            color:
-              respondedToQuiz && !isLive
-                ? isCorrectAnswer
-                  ? '$alert_success'
-                  : '$alert_error_default'
-                : '$on_surface_low',
+            color: match({ respondedToQuiz, isLive, isCorrectAnswer })
+              .when(
+                ({ respondedToQuiz, isLive }) => respondedToQuiz && !isLive,
+                ({ isCorrectAnswer }) => (isCorrectAnswer ? '$alert_success' : '$alert_error_default'),
+              )
+              .otherwise(() => '$on_surface_low'),
             fontWeight: '$semiBold',
             display: 'flex',
             alignItems: 'center',
             gap: '$4',
           }}
         >
-          {respondedToQuiz && isCorrectAnswer && pollEnded ? <CheckCircleIcon height={16} width={16} /> : null}
-          {respondedToQuiz && !isCorrectAnswer && pollEnded ? <CrossCircleIcon height={16} width={16} /> : null}
+          {match({ respondedToQuiz, pollEnded, isCorrectAnswer })
+            .when(
+              ({ respondedToQuiz, pollEnded }) => respondedToQuiz && pollEnded,
+              ({ isCorrectAnswer }) => {
+                return isCorrectAnswer ? (
+                  <CheckCircleIcon height={16} width={16} />
+                ) : (
+                  <CrossCircleIcon height={16} width={16} />
+                );
+              },
+            )
+            .otherwise(() => null)}
           QUESTION {index} OF {totalQuestions}: {type.toUpperCase()}
         </Text>
       </Flex>

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 += `${precise ? seconds.toFixed(3) : Math.floor(seconds)}s`;
 
   return formattedTime;
 };

package/src/Prebuilt/components/RaiseHand.tsx

@@ -0,0 +1,24 @@
+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 = ({ css }: { css?: CSS }) => {
+  const { isHandRaised, toggleHandRaise } = useMyMetadata();
+  return (
+    <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
+      <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>
+  );
+};