feat: use title in streaming from layout api

packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -204,12 +204,12 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
             align="center"
             css={{
               bg: isOverlayChat && isMobile ? '$surface_dim' : '$surface_default',
+              minHeight: '$16',
               maxHeight: '$24',
               position: 'relative',
-              minHeight: '$16',
               py: '$6',
               pl: '$8',
-              flexGrow: '1',
+              flexGrow: 1,
               r: '$1',
               '@md': {
                 minHeight: 'unset',

packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx

@@ -8,7 +8,6 @@ import {
   selectLocalPeerID,
   useCustomEvent,
   useHMSStore,
-  useRecordingStreaming,
 } from '@100mslive/react-sdk';
 import { EmojiIcon } from '@100mslive/react-icons';
 import { EmojiCard } from './Footer/EmojiCard';
@@ -18,14 +17,14 @@ import { config as cssConfig } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
 import { useDropdownList } from './hooks/useDropdownList';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 import { EMOJI_REACTION_TYPE } from '../common/constants';
 
 init({ data });
 
 export const EmojiReaction = () => {
   const [open, setOpen] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const { isHLSRunning } = useRecordingStreaming();
   useDropdownList({ open: open, name: 'EmojiReaction' });
 
   // const hmsActions = useHMSActions();
@@ -34,6 +33,8 @@ export const EmojiReaction = () => {
   // const { isStreamingOn } = useRecordingStreaming();
   const isMobile = useMedia(cssConfig.media.md);
   const isLandscape = useMedia(cssConfig.media.ls);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeStream = useLandscapeHLSStream();
 
   const { sendEvent } = useCustomEvent({
     type: EMOJI_REACTION_TYPE,
@@ -66,7 +67,7 @@ export const EmojiReaction = () => {
   if (!isConnected) {
     return null;
   }
-  return (isMobile || isLandscape) && !isHLSRunning ? (
+  return (isMobile || isLandscape) && !(isLandscapeStream || isMobileHLSStream) ? (
     <EmojiCard sendReaction={sendReaction} />
   ) : (
     <Dropdown.Root open={open} onOpenChange={setOpen}>

packages/roomkit-react/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>

packages/roomkit-react/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';
-}

packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -100,8 +100,8 @@ export const MwebOptions = ({
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
   const { title, description } = useRoomLayoutHeader();
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
-  const isLandscapeHLSStream = useLandscapeHLSStream();
   const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
@@ -200,7 +200,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             ) : null} */}
 
-            {elements?.emoji_reactions && !isHLSRunning && (
+            {elements?.emoji_reactions && !(isLandscapeHLSStream || isMobileHLSStream) && (
               <ActionTile.Root
                 onClick={() => {
                   setShowEmojiCard(true);

packages/roomkit-react/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx

@@ -2,35 +2,62 @@ 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>
       </Box>
     </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>
+  );
+};

packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx

@@ -60,8 +60,7 @@ const Wrapper = styled('div', {
     mobileStream: {
       true: {
         '@md': {
-          position: 'unset !important',
-          background: 'red',
+          position: 'unset',
         },
       },
     },

packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -31,7 +31,7 @@ import {
   // @ts-ignore: No implicit Any
 } from '../components/AppData/useUISettings';
 import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
-import { useMobileHLSStream } from '../common/hooks';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 // @ts-ignore: No implicit Any
 import { SESSION_STORE_KEY } from '../common/constants';
 
@@ -57,6 +57,7 @@ export const VideoStreamingSection = ({
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFConfig();
   const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
   useCloseScreenshareWhiteboard();
 
   useEffect(() => {
@@ -104,7 +105,7 @@ export const VideoStreamingSection = ({
         css={{
           size: '100%',
           position: 'relative',
-          gap: '$4',
+          gap: isMobileHLSStream || isLandscapeHLSStream ? '0' : '$4',
         }}
         direction={isMobileHLSStream ? 'column' : 'row'}
       >