@100mslive/roomkit-react 0.2.8-alpha.3 → 0.2.8-alpha.5

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

@@ -0,0 +1,91 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { selectHLSState, selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
+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';
+
+/*
+	player handler --> left -> go live with timer or live, right -> expand icon 
+	inbetween -> play pause icon, double tap to go back/forward
+	seekbar
+	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]);
+
+  return (
+    <Flex
+      gap="4"
+      align="center"
+      css={{
+        position: 'relative',
+        h: 'fit-content',
+        w: '100%',
+        borderBottom: '1px solid $border_bright',
+        p: '$8',
+        backgroundColor: '$surface_dim',
+      }}
+    >
+      <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'}
+          </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'}
+          </Text>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};

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

@@ -0,0 +1,27 @@
+import React, { MouseEvent } from 'react';
+import { PauseIcon, PlayIcon } from '@100mslive/react-icons';
+import { IconButton, Tooltip } from '../../..';
+import { useHMSPlayerContext } from './PlayerContext';
+
+export const PlayButton = ({
+  isPaused,
+  width = 20,
+  height = 20,
+}: {
+  isPaused: boolean;
+  width: number;
+  height: number;
+}) => {
+  const { hlsPlayer } = useHMSPlayerContext();
+  const onClick = async (event: MouseEvent) => {
+    event?.stopPropagation();
+    isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
+  };
+  return (
+    <Tooltip title={isPaused ? 'Play' : 'Pause'} side="top">
+      <IconButton onClick={onClick} data-testid="play_pause_btn">
+        {isPaused ? <PlayIcon width={width} height={height} /> : <PauseIcon width={width} height={height} />}
+      </IconButton>
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import { HMSHLSPlayer } from '@100mslive/hls-player';
+
+type IHMSPlayerContext = {
+  hlsPlayer?: HMSHLSPlayer;
+};
+
+export const HMSPlayerContext = React.createContext<IHMSPlayerContext>({
+  hlsPlayer: undefined,
+});
+
+export const useHMSPlayerContext = () => {
+  const context = useContext(HMSPlayerContext);
+  return context;
+};

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

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Flex, Slider } from '../../..';
+import { useHMSPlayerContext } from './PlayerContext';
+import { getPercentage } from './utils';
+
+export const VideoProgress = () => {
+  const { hlsPlayer } = useHMSPlayerContext();
+  const [videoProgress, setVideoProgress] = useState<number>(0);
+  const [bufferProgress, setBufferProgress] = useState(0);
+  const videoEl = hlsPlayer?.getVideoElement();
+
+  const onValueChange = (time: number) => {
+    hlsPlayer?.seekTo(time);
+  };
+  useEffect(() => {
+    if (!videoEl) {
+      return;
+    }
+    const timeupdateHandler = () => {
+      if (!videoEl) {
+        return;
+      }
+      const videoProgress = Math.floor(getPercentage(videoEl.currentTime, videoEl.duration));
+      let bufferProgress = 0;
+      if (videoEl.buffered.length > 0) {
+        bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), videoEl.duration));
+      }
+
+      setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress);
+      setBufferProgress(isNaN(bufferProgress) ? 0 : bufferProgress);
+    };
+    videoEl.addEventListener('timeupdate', timeupdateHandler);
+    return function cleanup() {
+      videoEl?.removeEventListener('timeupdate', timeupdateHandler);
+    };
+  }, [videoEl]);
+
+  const onProgress = (progress: number[]) => {
+    const progress1 = Math.floor(getPercentage(progress[0], 100));
+    const videoEl = hlsPlayer?.getVideoElement();
+    const currentTime = (progress1 * (videoEl?.duration || 0)) / 100;
+    if (onValueChange) {
+      onValueChange(currentTime);
+    }
+  };
+
+  if (!videoEl) {
+    return null;
+  }
+  return (
+    <Flex align="center" css={{ cursor: 'pointer', h: '$2', alignSelf: 'stretch' }}>
+      <Slider
+        id="video-actual-rest"
+        css={{
+          cursor: 'pointer',
+          h: '$2',
+          zIndex: 1,
+          transition: `all .2s ease .5s`,
+        }}
+        min={0}
+        max={100}
+        step={1}
+        value={[videoProgress]}
+        showTooltip={false}
+        onValueChange={onProgress}
+        thumbStyles={{ w: '$6', h: '$6' }}
+      />
+      <Box
+        id="video-buffer"
+        css={{
+          h: '$2',
+          width: `${bufferProgress - videoProgress}%`,
+          background: '$on_surface_high',
+          position: 'absolute',
+          left: `${videoProgress}%`,
+          opacity: '25%',
+        }}
+      />
+    </Flex>
+  );
+};

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

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from 'react';
+import { HMSHLSPlayerEvents } from '@100mslive/hls-player';
+import { Text } from '../../../Text';
+import { useHMSPlayerContext } from './PlayerContext';
+import { getDurationFromSeconds } from './utils';
+
+export const VideoTime = () => {
+  const { hlsPlayer } = useHMSPlayerContext();
+  const [videoTime, setVideoTime] = useState('');
+
+  useEffect(() => {
+    const timeupdateHandler = (currentTime: number) => {
+      const videoEl = hlsPlayer?.getVideoElement();
+      if (videoEl) {
+        setVideoTime(getDurationFromSeconds(videoEl.duration - currentTime));
+      } else {
+        setVideoTime(getDurationFromSeconds(currentTime));
+      }
+    };
+    if (hlsPlayer) {
+      hlsPlayer.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
+    }
+    return function cleanup() {
+      hlsPlayer?.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
+    };
+  }, [hlsPlayer]);
+
+  return hlsPlayer ? (
+    <Text
+      variant="body1"
+      css={{
+        minWidth: '$16',
+        c: '$on_surface_medium',
+        display: 'flex',
+        justifyContent: 'center',
+        fontWeight: '$regular',
+      }}
+    >
+      -{videoTime}
+    </Text>
+  ) : null;
+};

package/src/Prebuilt/components/HMSVideo/{VolumeControl.jsx → VolumeControl.tsx}

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import { VolumeOneIcon, VolumeTwoIcon, VolumeZeroIcon } from '@100mslive/react-icons';
-import { Flex, Slider } from '../../../';
+import { Flex, Slider } from '../../..';
+import { useHMSPlayerContext } from './PlayerContext';
 
-export const VolumeControl = ({ hlsPlayer }) => {
-  const [volume, setVolume] = useState(hlsPlayer?.volume ?? 100);
+export const VolumeControl = () => {
+  const { hlsPlayer } = useHMSPlayerContext();
+  const [volume, setVolume] = useState(hlsPlayer?.volume || 0);
   const [showSlider, setShowSlider] = useState(false);
 
   return (
@@ -47,7 +49,7 @@ export const VolumeControl = ({ hlsPlayer }) => {
         step={1}
         value={[volume]}
         onValueChange={volume => {
-          hlsPlayer.setVolume(volume[0]);
+          hlsPlayer?.setVolume(volume[0]);
           setVolume(volume[0]);
         }}
         thumbStyles={{ w: '$6', h: '$6' }}
@@ -56,7 +58,7 @@ export const VolumeControl = ({ hlsPlayer }) => {
   );
 };
 
-const VolumeIcon = ({ volume, onClick }) => {
+const VolumeIcon = ({ volume, onClick }: { volume: number; onClick: () => void }) => {
   if (volume === 0) {
     return <VolumeZeroIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />;
   }

package/src/Prebuilt/components/HMSVideo/{index.js → index.ts}

@@ -1,4 +1,6 @@
+// @ts-ignore
 import { LeftControls, RightControls, VideoControls } from './Controls';
+// @ts-ignore
 import { HMSVideo } from './HMSVideo';
 import { PlayButton } from './PlayButton';
 import { VideoProgress } from './VideoProgress';

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

@@ -0,0 +1,35 @@
+export function getPercentage(a: number, b: number) {
+  return (a / b) * 100;
+}
+
+/**
+ * Take a time in seconds and return its equivalent time in hh:mm:ss format
+ * @param {number} timeInSeconds if given as floating point value, it is floored.
+ *
+ * @returns a string representing timeInSeconds in HH:MM:SS format.
+ */
+export function getDurationFromSeconds(timeInSeconds: number) {
+  let time = Math.floor(timeInSeconds);
+  const hours = Math.floor(time / 3600);
+  time = time - hours * 3600;
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time - minutes * 60);
+
+  const prefixedMinutes = `${minutes < 10 ? `0${minutes}` : minutes}`;
+  const prefixedSeconds = `${seconds < 10 ? `0${seconds}` : seconds}`;
+
+  let videoTimeStr = `${prefixedMinutes}:${prefixedSeconds}`;
+  if (hours) {
+    const prefixedHours = `${hours < 10 ? `0${hours}` : hours}`;
+    videoTimeStr = `${prefixedHours}:${prefixedMinutes}:${prefixedSeconds}`;
+  }
+  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/Leave/LeaveRoom.tsx

@@ -18,6 +18,7 @@ import { config as cssConfig } from '../../../Theme';
 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 }) => {
   const isConnected = useHMSStore(selectIsConnectedToRoom);
@@ -33,6 +34,8 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
   );
   const hlsState = useHMSStore(selectHLSState);
   const hmsActions = useHMSActions();
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
 
   const stopStream = async () => {
     try {
@@ -61,8 +64,11 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
   if (!permissions || !isConnected) {
     return null;
   }
+  if (isMobileHLSStream || isLandscapeHLSStream) {
+    return <MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} />;
+  }
   return isMobile ? (
-    <MwebLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} />
+    <MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} />
   ) : (
     <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} />
   );

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,20 @@ 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,
 }: {
   leaveRoom: (options?: { endStream?: boolean }) => Promise<void>;
-  screenType: keyof ConferencingScreen;
   endRoom: () => Promise<void>;
 }) => {
   const [open, setOpen] = useState(false);
+  const { screenType } = useRoomLayoutConferencingScreen();
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
   const [showEndStreamAlert, setShowEndStreamAlert] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
@@ -43,20 +44,7 @@ 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',
-              }}
-            >
-              <Tooltip title="Leave Room">
-                <Box>
-                  <ExitIcon style={{ transform: 'rotate(180deg)' }} />
-                </Box>
-              </Tooltip>
-            </LeaveIconButton>
+            <LeaveButton onClick={() => setOpen(!open)} />
           </Sheet.Trigger>
           <Sheet.Content>
             <LeaveCard
@@ -88,13 +76,7 @@ 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' }}>
@@ -114,3 +96,34 @@ export const MwebLeaveRoom = ({
     </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/MwebOptions.tsx

@@ -120,7 +120,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={{ '@md': { bg: screenType === 'hls_live_streaming' ? '$surface_default' : '' } }}>
               <HamburgerMenuIcon />
             </IconButton>
           </Sheet.Trigger>

package/src/Prebuilt/components/MwebLandscapePrompt.tsx

@@ -6,12 +6,14 @@ 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) {
@@ -36,6 +38,9 @@ export const MwebLandscapePrompt = () => {
     };
   }, [isLandscape]);
 
+  if (isLandscapeHLSStream) {
+    return null;
+  }
   return (
     <Dialog.Root open={showMwebLandscapePrompt} onOpenChange={setShowMwebLandscapePrompt}>
       <Dialog.Portal>

package/src/Prebuilt/components/{RaiseHand.jsx → RaiseHand.tsx}

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

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -40,18 +40,19 @@ const ParticipantCount = ({ count }: { count: number }) => {
 export const SidePaneTabs = React.memo<{
   active: 'Participants | Chat';
   hideControls?: boolean;
-}>(({ active = SIDE_PANE_OPTIONS.CHAT, hideControls }) => {
+  hideTab?: boolean;
+}>(({ active = SIDE_PANE_OPTIONS.CHAT, hideControls, hideTab = false }) => {
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const resetSidePane = useSidepaneReset();
   const [activeTab, setActiveTab] = useState(active);
   const [activeRole, setActiveRole] = useState('');
   const peerCount = useHMSStore(selectPeerCount);
-  const { elements } = useRoomLayoutConferencingScreen();
+  const { elements, screenType } = useRoomLayoutConferencingScreen();
   const chat_title = elements?.chat?.chat_title || 'Chat';
   const showChat = !!elements?.chat;
   const showParticipants = !!elements?.participant_list;
-  const hideTabs = !(showChat && showParticipants);
+  const hideTabs = !(showChat && showParticipants) || hideTab;
   const isMobile = useMedia(cssConfig.media.md);
   const isOverlayChat = !!elements?.chat?.is_overlay && isMobile;
   const { off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
@@ -107,10 +108,19 @@ export const SidePaneTabs = React.memo<{
         <>
           {hideTabs ? (
             <>
-              <Flex justify="between" css={{ w: '100%' }}>
-                <Text variant="sm" css={{ fontWeight: '$semiBold', p: '$4', c: '$on_surface_high', pr: '$12' }}>
-                  {showChat ? (
-                    chat_title
+              <Flex justify="between" css={{ w: '100%', '&:empty': { display: 'none' } }}>
+                <Text
+                  variant="sm"
+                  css={{
+                    fontWeight: '$semiBold',
+                    p: '$4',
+                    c: '$on_surface_high',
+                    pr: '$12',
+                    '&:empty': { display: 'none' },
+                  }}
+                >
+                  {activeTab === SIDE_PANE_OPTIONS.CHAT ? (
+                    screenType !== 'hls_live_streaming' && chat_title
                   ) : (
                     <span>
                       Participants&nbsp;
@@ -122,7 +132,12 @@ export const SidePaneTabs = React.memo<{
                   {showChatSettings ? <ChatSettings /> : null}
                   {isOverlayChat && isChatOpen ? null : (
                     <IconButton
-                      css={{ my: '$1', color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' } }}
+                      css={{
+                        my: '$1',
+                        color: '$on_surface_medium',
+                        '&:hover': { color: '$on_surface_high' },
+                        '&:empty': { display: 'none' },
+                      }}
                       onClick={e => {
                         e.stopPropagation();
                         if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
@@ -133,12 +148,16 @@ export const SidePaneTabs = React.memo<{
                       }}
                       data-testid="close_chat"
                     >
-                      <CrossIcon />
+                      {screenType === 'hls_live_streaming' && isChatOpen ? null : <CrossIcon />}
                     </IconButton>
                   )}
                 </Flex>
               </Flex>
-              {showChat ? <Chat /> : <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />}
+              {activeTab === SIDE_PANE_OPTIONS.CHAT ? (
+                <Chat />
+              ) : (
+                <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />
+              )}
             </>
           ) : (
             <Tabs.Root