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

package/src/Prebuilt/layouts/HLSView.jsx

@@ -3,6 +3,7 @@ import { useFullscreen, useMedia, usePrevious, useToggle } from 'react-use';
 import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents } from '@100mslive/hls-player';
 import screenfull from 'screenfull';
 import {
+  HLSPlaylistType,
   HMSNotificationTypes,
   selectAppData,
   selectHLSState,
@@ -13,23 +14,28 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-import { ColoredHandIcon, ExpandIcon, GoLiveIcon, PlayIcon, ShrinkIcon } from '@100mslive/react-icons';
+import { ColoredHandIcon, GoLiveIcon, PauseIcon, PlayIcon } from '@100mslive/react-icons';
+import { ChatToggle } from '../components/Footer/ChatToggle';
 import { HlsStatsOverlay } from '../components/HlsStatsOverlay';
 import { HMSVideoPlayer } from '../components/HMSVideo';
 import { FullScreenButton } from '../components/HMSVideo/FullscreenButton';
 import { HLSAutoplayBlockedPrompt } from '../components/HMSVideo/HLSAutoplayBlockedPrompt';
 import { HLSCaptionSelector } from '../components/HMSVideo/HLSCaptionSelector';
 import { HLSQualitySelector } from '../components/HMSVideo/HLSQualitySelector';
+import { HLSViewTitle } from '../components/HMSVideo/MwebHLSViewTitle';
+import { HMSPlayerContext } from '../components/HMSVideo/PlayerContext';
 import { ToastManager } from '../components/Toast/ToastManager';
 import { Button } from '../../Button';
 import { IconButton } from '../../IconButton';
 import { Box, Flex } from '../../Layout';
 import { Loading } from '../../Loading';
 import { Text } from '../../Text';
-import { config, useTheme } from '../../Theme';
+import { config, theme, useTheme } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
-import { usePollViewToggle } from '../components/AppData/useSidepane';
-import { APP_DATA, EMOJI_REACTION_TYPE } from '../common/constants';
+import { usePollViewToggle, useSidepaneToggle } from '../components/AppData/useSidepane';
+import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useIsLandscape } from '../common/hooks';
+import { APP_DATA, EMOJI_REACTION_TYPE, SIDE_PANE_OPTIONS } from '../common/constants';
 
 let hlsPlayer;
 const toastMap = {};
@@ -39,35 +45,49 @@ const HLSView = () => {
   const hlsViewRef = useRef(null);
   const hlsState = useHMSStore(selectHLSState);
   const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
+  const { elements, screenType } = useRoomLayoutConferencingScreen();
   const notification = useHMSNotifications(HMSNotificationTypes.POLL_STOPPED);
   const hmsActions = useHMSActions();
-  const { themeType, theme } = useTheme();
+  const { themeType } = useTheme();
   const [streamEnded, setStreamEnded] = useState(false);
   let [hlsStatsState, setHlsStatsState] = useState(null);
   const hlsUrl = hlsState.variants[0]?.url;
   const [availableLayers, setAvailableLayers] = useState([]);
   const [isVideoLive, setIsVideoLive] = useState(true);
-  const [isUserSelectedAuto, setIsUserSelectedAuto] = useState(true);
   const [isCaptionEnabled, setIsCaptionEnabled] = useState(true);
   const [hasCaptions, setHasCaptions] = useState(false);
   const [currentSelectedQuality, setCurrentSelectedQuality] = useState(null);
   const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
-  const isFullScreenSupported = screenfull.isEnabled;
   const [show, toggle] = useToggle(false);
-  const [controlsVisible, setControlsVisible] = useState(true);
-  const controlsRef = useRef();
-  const controlsTimerRef = useRef();
-  const [qualityDropDownOpen, setQualityDropDownOpen] = useState(false);
   const lastHlsUrl = usePrevious(hlsUrl);
   const togglePollView = usePollViewToggle();
   const vanillaStore = useHMSVanillaStore();
+  const [controlsVisible, setControlsVisible] = useState(true);
+  const [isUserSelectedAuto, setIsUserSelectedAuto] = useState(true);
+  const [qualityDropDownOpen, setQualityDropDownOpen] = useState(false);
+  const controlsRef = useRef(null);
+  const controlsTimerRef = useRef();
+  const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const showChat = !!elements?.chat;
+  const isFullScreenSupported = screenfull.isEnabled;
 
   const isMobile = useMedia(config.media.md);
+  const isLandscape = useIsLandscape();
+
   const isFullScreen = useFullscreen(hlsViewRef, show, {
     onClose: () => toggle(false),
   });
   const [showLoader, setShowLoader] = useState(false);
+
+  const isMwebHLSStream = screenType === 'hls_live_streaming' && isMobile;
+
+  useEffect(() => {
+    if (sidepane === '' && isMwebHLSStream && showChat) {
+      toggleChat();
+    }
+  }, [sidepane, isMwebHLSStream, toggleChat, showChat]);
   // FIXME: move this logic to player controller in next release
   useEffect(() => {
     /**
@@ -111,6 +131,15 @@ const HLSView = () => {
     };
   }, [hlsUrl]);
 
+  const handleQuality = useCallback(
+    quality => {
+      if (hlsPlayer) {
+        setIsUserSelectedAuto(quality.height?.toString().toLowerCase() === 'auto');
+        hlsPlayer?.setLayer(quality);
+      }
+    },
+    [availableLayers], //eslint-disable-line
+  );
   /**
    * initialize HMSHLSPlayer and add event listeners.
    */
@@ -210,10 +239,9 @@ const HLSView = () => {
         hlsPlayer.off(HMSHLSPlayerEvents.MANIFEST_LOADED, manifestLoadedHandler);
         hlsPlayer.off(HMSHLSPlayerEvents.LAYER_UPDATED, layerUpdatedHandler);
         hlsPlayer.reset();
-        hlsPlayer = null;
       };
     }
-  }, [hlsUrl]);
+  }, [hlsUrl, togglePollView, vanillaStore]);
 
   /**
    * initialize and subscribe to hlsState
@@ -239,16 +267,6 @@ const HLSView = () => {
     }
   };
 
-  const handleQuality = useCallback(
-    quality => {
-      if (hlsPlayer) {
-        setIsUserSelectedAuto(quality.height.toString().toLowerCase() === 'auto');
-        hlsPlayer.setLayer(quality);
-      }
-    },
-    [availableLayers], //eslint-disable-line
-  );
-
   const sfnOverlayClose = () => {
     hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);
   };
@@ -272,8 +290,31 @@ const HLSView = () => {
     };
   }, [controlsVisible, isFullScreen, qualityDropDownOpen]);
 
+  const onTouchHandler = useCallback(
+    event => {
+      event.preventDefault();
+      // logic for invisible when tapping
+      if (event.type === 'ontouchstart' && controlsVisible) {
+        setControlsVisible(false);
+        return;
+      }
+      // normal scemnario
+      if (event.type === 'ontouchstart' || qualityDropDownOpen) {
+        setControlsVisible(true);
+        return;
+      }
+      if (isFullScreen && !controlsVisible && event.type === 'touchmove') {
+        setControlsVisible(true);
+        if (controlsTimerRef.current) {
+          clearTimeout(controlsTimerRef.current);
+        }
+      }
+    },
+    [controlsVisible, isFullScreen, qualityDropDownOpen],
+  );
   const onHoverHandler = useCallback(
     event => {
+      // normal scemnario
       if (event.type === 'mouseenter' || qualityDropDownOpen) {
         setControlsVisible(true);
         return;
@@ -295,157 +336,232 @@ const HLSView = () => {
       key="hls-viewer"
       id={`hls-viewer-${themeType}`}
       ref={hlsViewRef}
+      direction={isMobile || isLandscape ? 'column' : 'row'}
       css={{
-        size: '100%',
+        w: sidepane !== '' && isLandscape ? '55%' : '100%',
+        h: sidepane !== '' && isMobile ? '36%' : '100%',
       }}
     >
-      {hlsStatsState?.url && enablHlsStats ? (
-        <HlsStatsOverlay hlsStatsState={hlsStatsState} onClose={sfnOverlayClose} />
-      ) : null}
       {hlsUrl && !streamEnded ? (
-        <Flex
-          id="hls-player-container"
-          align="center"
-          justify="center"
-          css={{
-            width: '100%',
-            margin: '0 auto',
-            height: '100%',
-          }}
-        >
-          <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
-          {showLoader && (
+        <>
+          <HMSPlayerContext.Provider value={{ hlsPlayer }}>
+            {hlsStatsState?.url && enablHlsStats && !(isMobile || isLandscape) ? (
+              <HlsStatsOverlay hlsStatsState={hlsStatsState} onClose={sfnOverlayClose} />
+            ) : null}
             <Flex
+              id="hls-player-container"
               align="center"
               justify="center"
               css={{
-                position: 'absolute',
+                size: '100%',
+                margin: '0 auto',
               }}
             >
-              <Loading width={72} height={72} />
-            </Flex>
-          )}
-          <HMSVideoPlayer.Root
-            ref={videoRef}
-            onMouseEnter={onHoverHandler}
-            onMouseMove={onHoverHandler}
-            onMouseLeave={onHoverHandler}
-          >
-            {isMobile && isPaused && (
-              <Box
-                css={{
-                  position: 'absolute',
-                  top: '40%',
-                  left: '50%',
-                  transform: 'translateY(-40%) translateX(-50%)',
-                  padding: '$8 14px $8 18px',
-                  display: 'inline-flex',
-                  r: '50%',
-                  gap: '$1',
-                  bg: '$primary_default',
-                  zIndex: 21,
-                }}
-              >
-                <IconButton onClick={async () => await hlsPlayer?.play()} data-testid="play_btn">
-                  <PlayIcon width="60px" height="60px" />
-                </IconButton>
-              </Box>
-            )}
-            <Flex
-              ref={controlsRef}
-              direction="column"
-              justify="flex-end"
-              align="flex-start"
-              css={{
-                position: 'absolute',
-                bottom: '0',
-                left: '0',
-                background: `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
-                width: '100%',
-                pt: '$8',
-                flexShrink: 0,
-                transition: 'visibility 0s 0.5s, opacity 0.5s linear',
-                visibility: controlsVisible ? `` : `hidden`,
-                opacity: controlsVisible ? `1` : '0',
-              }}
-            >
-              {!isMobile && (
-                <HMSVideoPlayer.Controls.Root
+              <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
+              {showLoader && (
+                <Flex
+                  align="center"
+                  justify="center"
                   css={{
-                    p: '$4 $8',
+                    position: 'absolute',
                   }}
                 >
-                  <HMSVideoPlayer.Controls.Left>
-                    <HMSVideoPlayer.PlayButton
-                      onClick={async () => {
-                        isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
-                      }}
-                      isPaused={isPaused}
-                    />
-                    <HMSVideoPlayer.Duration hlsPlayer={hlsPlayer} />
-                    <HMSVideoPlayer.Volume hlsPlayer={hlsPlayer} />
-                    <IconButton
-                      variant="standard"
-                      css={{ px: '$2' }}
-                      onClick={async () => {
-                        await hlsPlayer.seekToLivePosition();
-                        setIsVideoLive(true);
+                  <Loading width={72} height={72} />
+                </Flex>
+              )}
+              <HMSVideoPlayer.Root
+                ref={videoRef}
+                onMouseEnter={onHoverHandler}
+                onMouseMove={onHoverHandler}
+                onMouseLeave={onHoverHandler}
+                onTouchStart={onTouchHandler}
+                onTouchMove={onTouchHandler}
+              >
+                <>
+                  {isMobile || isLandscape ? (
+                    <>
+                      {!showLoader && (
+                        <Box
+                          css={{
+                            position: 'absolute',
+                            top: '40%',
+                            left: '50%',
+                            transform: 'translateY(-40%) translateX(-50%)',
+                            padding: '$4',
+                            display: 'inline-flex',
+                            r: '$round',
+                            gap: '$1',
+                            bg: 'rgba(0, 0, 0, 0.6)',
+                            zIndex: 1,
+                            visibility: controlsVisible ? `` : `hidden`,
+                            opacity: controlsVisible ? `1` : '0',
+                          }}
+                        >
+                          {isPaused ? (
+                            <IconButton
+                              onClick={async () => {
+                                await hlsPlayer?.play();
+                              }}
+                              data-testid="play_btn"
+                            >
+                              <PlayIcon width="48px" height="48px" />
+                            </IconButton>
+                          ) : (
+                            <IconButton
+                              onClick={async () => {
+                                await hlsPlayer?.pause();
+                              }}
+                              data-testid="pause_btn"
+                            >
+                              <PauseIcon width="48px" height="48px" />
+                            </IconButton>
+                          )}
+                        </Box>
+                      )}
+                      <Flex
+                        ref={controlsRef}
+                        direction="column"
+                        justify="start"
+                        align="start"
+                        css={{
+                          position: 'absolute',
+                          top: '0',
+                          left: '0',
+                          width: '100%',
+                          flexShrink: 0,
+                          visibility: controlsVisible ? `` : `hidden`,
+                          opacity: controlsVisible ? `1` : '0',
+                        }}
+                      >
+                        <HMSVideoPlayer.Controls.Root
+                          css={{
+                            p: '$4 $8',
+                          }}
+                        >
+                          <HMSVideoPlayer.Controls.Right>
+                            {isLandscape && <ChatToggle />}
+                            {hasCaptions && <HLSCaptionSelector isEnabled={isCaptionEnabled} />}
+                            {availableLayers.length > 0 ? (
+                              <HLSQualitySelector
+                                layers={availableLayers}
+                                onOpenChange={setQualityDropDownOpen}
+                                open={qualityDropDownOpen}
+                                selection={currentSelectedQuality}
+                                onQualityChange={handleQuality}
+                                isAuto={isUserSelectedAuto}
+                              />
+                            ) : null}
+                          </HMSVideoPlayer.Controls.Right>
+                        </HMSVideoPlayer.Controls.Root>
+                      </Flex>
+                    </>
+                  ) : null}
+                  <Flex
+                    ref={controlsRef}
+                    direction="column"
+                    justify="end"
+                    align="start"
+                    css={{
+                      position: 'absolute',
+                      bottom: '0',
+                      left: '0',
+                      background:
+                        isMobile || isLandscape
+                          ? ''
+                          : `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
+                      width: '100%',
+                      pt: '$8',
+                      flexShrink: 0,
+                      transition: 'visibility 0s 0.5s, opacity 0.5s linear',
+                      visibility: controlsVisible ? `` : `hidden`,
+                      opacity: controlsVisible ? `1` : '0',
+                    }}
+                  >
+                    {!(isMobile || isLandscape) && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && (
+                      <HMSVideoPlayer.Progress />
+                    )}
+                    <HMSVideoPlayer.Controls.Root
+                      css={{
+                        p: '$4 $8',
                       }}
-                      key="jump-to-live_btn"
-                      data-testid="jump-to-live_btn"
                     >
-                      <Tooltip title="Go to Live" side="top">
-                        <Flex justify="center" gap={2} align="center">
-                          <Box
-                            css={{
-                              height: '$4',
-                              width: '$4',
-                              background: isVideoLive ? '$alert_error_default' : '$on_primary_medium',
-                              r: '$1',
-                            }}
-                          />
-                          <Text
-                            variant={{
-                              '@sm': 'xs',
-                            }}
-                            css={{
-                              c: isVideoLive ? '$on_surface_high' : '$on_surface_medium',
-                            }}
-                          >
-                            {isVideoLive ? 'LIVE' : 'GO LIVE'}
-                          </Text>
-                        </Flex>
-                      </Tooltip>
-                    </IconButton>
-                  </HMSVideoPlayer.Controls.Left>
+                      <HMSVideoPlayer.Controls.Left>
+                        {!(isMobile || isLandscape) && (
+                          <>
+                            <HMSVideoPlayer.PlayButton
+                              onClick={async () => {
+                                isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
+                              }}
+                              isPaused={isPaused}
+                            />
+                            {!isVideoLive ? <HMSVideoPlayer.Duration /> : null}
+                            <HMSVideoPlayer.Volume />
+                          </>
+                        )}
+                        <IconButton
+                          css={{ px: '$2' }}
+                          onClick={async () => {
+                            await hlsPlayer?.seekToLivePosition();
+                            setIsVideoLive(true);
+                          }}
+                          key="jump-to-live_btn"
+                          data-testid="jump-to-live_btn"
+                        >
+                          <Tooltip title={isVideoLive ? 'Live' : 'Go to Live'} side="top">
+                            <Flex justify="center" gap={2} align="center">
+                              <Box
+                                css={{
+                                  height: '$4',
+                                  width: '$4',
+                                  background: isVideoLive ? '$alert_error_default' : '$on_primary_medium',
+                                  r: '$1',
+                                }}
+                              />
+                              <Text
+                                variant="$body1"
+                                css={{
+                                  c: isVideoLive ? '$on_surface_high' : '$on_surface_medium',
+                                  fontWeight: '$semiBold',
+                                }}
+                              >
+                                {isVideoLive ? 'LIVE' : 'GO LIVE'}
+                              </Text>
+                            </Flex>
+                          </Tooltip>
+                        </IconButton>
+                        {(isMobile || isLandscape) && !isVideoLive ? <HMSVideoPlayer.Duration /> : null}
+                      </HMSVideoPlayer.Controls.Left>
 
-                  <HMSVideoPlayer.Controls.Right>
-                    {hasCaptions && (
-                      <HLSCaptionSelector onClick={() => hlsPlayer?.toggleCaption()} isEnabled={isCaptionEnabled} />
-                    )}
-                    {availableLayers.length > 0 ? (
-                      <HLSQualitySelector
-                        layers={availableLayers}
-                        onOpen={setQualityDropDownOpen}
-                        open={qualityDropDownOpen}
-                        selection={currentSelectedQuality}
-                        onQualityChange={handleQuality}
-                        isAuto={isUserSelectedAuto}
-                      />
-                    ) : null}
-                    {isFullScreenSupported ? (
-                      <FullScreenButton
-                        isFullScreen={isFullScreen}
-                        onToggle={toggle}
-                        icon={isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}
-                      />
+                      <HMSVideoPlayer.Controls.Right>
+                        {hasCaptions && !(isMobile || isLandscape) && (
+                          <HLSCaptionSelector isEnabled={isCaptionEnabled} />
+                        )}
+                        {availableLayers.length > 0 && !(isMobile || isLandscape) ? (
+                          <HLSQualitySelector
+                            layers={availableLayers}
+                            onOpenChange={setQualityDropDownOpen}
+                            open={qualityDropDownOpen}
+                            selection={currentSelectedQuality}
+                            onQualityChange={handleQuality}
+                            isAuto={isUserSelectedAuto}
+                          />
+                        ) : null}
+                        {isFullScreenSupported ? (
+                          <FullScreenButton isFullScreen={isFullScreen} onToggle={toggle} />
+                        ) : null}
+                      </HMSVideoPlayer.Controls.Right>
+                    </HMSVideoPlayer.Controls.Root>
+                    {(isMobile || isLandscape) && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
+                      <HMSVideoPlayer.Progress />
                     ) : null}
-                  </HMSVideoPlayer.Controls.Right>
-                </HMSVideoPlayer.Controls.Root>
-              )}
+                  </Flex>
+                </>
+              </HMSVideoPlayer.Root>
             </Flex>
-          </HMSVideoPlayer.Root>
-        </Flex>
+          </HMSPlayerContext.Provider>
+
+          {isMobile && !isFullScreen && <HLSViewTitle />}
+        </>
       ) : (
         <Flex align="center" justify="center" direction="column" css={{ size: '100%', px: '$10' }}>
           <Flex css={{ c: '$on_surface_high', r: '$round', bg: '$surface_default', p: '$2' }}>

package/src/Prebuilt/layouts/SidePane.tsx

@@ -20,6 +20,7 @@ import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,
 } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useIsLandscape, useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 import { translateAcross } from '../../utils';
 import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../common/constants';
 
@@ -31,6 +32,7 @@ const SidePane = ({
   hideControls?: boolean;
 }) => {
   const isMobile = useMedia(cssConfig.media.md);
+  const isLandscape = useIsLandscape();
   const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
   const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));
   const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id;
@@ -38,6 +40,9 @@ const SidePane = ({
   const { elements: preview_elements } = useRoomLayoutPreviewScreen();
   const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
 
+  const isLandscapeHLSStream = useLandscapeHLSStream();
+  const isMobileHLSStream = useMobileHLSStream();
+
   const backgroundMedia = preview_elements?.virtual_background?.background_media?.length
     ? preview_elements?.virtual_background?.background_media
     : elements?.virtual_background?.background_media || [];
@@ -48,7 +53,9 @@ const SidePane = ({
     ViewComponent = <Polls />;
   }
   if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
-    ViewComponent = <SidePaneTabs hideControls={hideControls} active={sidepane} />;
+    ViewComponent = (
+      <SidePaneTabs hideControls={hideControls} active={sidepane} hideTab={isMobileHLSStream || isLandscapeHLSStream} />
+    );
   }
   if (sidepane === SIDE_PANE_OPTIONS.VB) {
     ViewComponent = <VBPicker backgroundMedia={backgroundMedia} />;
@@ -82,11 +89,11 @@ const SidePane = ({
       justify="center"
       css={{
         w: '$100',
-        h: '100%',
+        h: isMobileHLSStream ? '64%' : '100%',
         flexShrink: 0,
         gap: '$4',
         position: 'relative',
-        '@md': { position: mwebStreamingChat ? 'absolute' : '', zIndex: 12 },
+        '@md': { position: mwebStreamingChat || isLandscape ? 'absolute' : '', zIndex: 12 },
       }}
     >
       {trackId && layoutMode === LayoutMode.GALLERY && (
@@ -103,14 +110,15 @@ const SidePane = ({
         <Box
           css={{
             w: '$100',
-            h: mwebStreamingChat ? '0' : '100%',
+            h: mwebStreamingChat || isLandscape ? '0' : '100%',
             p: VB ? '$10 $6 $10 $10' : '$10',
             flex: '1 1 0',
             minHeight: 0,
-            maxHeight: mwebStreamingChat ? '300px' : 'unset',
-            background: mwebStreamingChat
-              ? 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)'
-              : '$surface_dim',
+            maxHeight: mwebStreamingChat || isLandscape ? '300px' : 'unset',
+            background:
+              mwebStreamingChat || isLandscape
+                ? 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)'
+                : '$surface_dim',
             r: '$1',
             position: 'relative',
             '@lg': {
@@ -118,14 +126,17 @@ const SidePane = ({
               h: '100%',
               ml: 0,
               right: 0,
-              position: 'fixed',
+              position: isLandscapeHLSStream ? '' : 'fixed',
+              minHeight: isLandscapeHLSStream ? '100%' : '',
               bottom: 0,
               borderRadius: 0,
               zIndex: 10,
             },
             '@md': {
               p: '$6 $8',
-              pb: mwebStreamingChat ? '$20' : '$12',
+              h: isMobileHLSStream ? '64%' : '100%',
+              pb: '$12',
+              minHeight: isMobileHLSStream ? '64%' : '',
               borderTopLeftRadius: sidepane === SIDE_PANE_OPTIONS.POLLS ? '$2' : '0',
               borderTopRightRadius: sidepane === SIDE_PANE_OPTIONS.POLLS ? '$2' : '0',
               animation: `${translateAcross({ yFrom: '100%' })} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -31,6 +31,7 @@ import {
   // @ts-ignore: No implicit Any
 } from '../components/AppData/useUISettings';
 import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
+import { useMobileHLSStream } from '../common/hooks';
 // @ts-ignore: No implicit Any
 import { SESSION_STORE_KEY } from '../common/constants';
 
@@ -55,6 +56,7 @@ export const VideoStreamingSection = ({
   const waitingViewerRole = useWaitingViewerRole();
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFConfig();
+  const isMobileHLSStream = useMobileHLSStream();
   useCloseScreenshareWhiteboard();
 
   useEffect(() => {
@@ -104,9 +106,17 @@ export const VideoStreamingSection = ({
           position: 'relative',
           gap: '$4',
         }}
+        direction={isMobileHLSStream ? 'column' : 'row'}
       >
         {ViewComponent}
-        <Box css={{ height: '100%', maxHeight: '100%', overflowY: 'clip', '&:empty': { display: 'none' } }}>
+        <Box
+          css={{
+            height: isMobileHLSStream ? '50%' : '100%',
+            maxHeight: '100%',
+            '&:empty': { display: 'none' },
+            overflowY: 'clip',
+          }}
+        >
           <SidePane
             screenType={screenType}
             // @ts-ignore