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

package/src/Prebuilt/layouts/HLSView.jsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useFullscreen, useMedia, usePrevious, useToggle } from 'react-use';
 import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents } from '@100mslive/hls-player';
 import screenfull from 'screenfull';
+import { match, P } from 'ts-pattern';
 import {
   HLSPlaylistType,
   HMSNotificationTypes,
@@ -33,20 +34,41 @@ import { Loading } from '../../Loading';
 import { Text } from '../../Text';
 import { config, theme, useTheme } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
-import { usePollViewToggle, useSidepaneToggle } from '../components/AppData/useSidepane';
+import { 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';
+import { APP_DATA, EMOJI_REACTION_TYPE, POLL_STATE, POLL_VIEWS, SIDE_PANE_OPTIONS } from '../common/constants';
 
 let hlsPlayer;
 const toastMap = {};
 
+const ToggleChat = () => {
+  const { elements } = useRoomLayoutConferencingScreen();
+  const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const showChat = !!elements?.chat;
+  const isMobile = useMedia(config.media.md);
+  const hmsActions = useHMSActions();
+
+  useEffect(() => {
+    match({ sidepane, isMobile, showChat })
+      .with({ isMobile: true, showChat: true, sidepane: P.when(value => !value) }, () => {
+        toggleChat();
+      })
+      .with({ showChat: false, isMobile: true, sidepane: SIDE_PANE_OPTIONS.CHAT }, () => {
+        hmsActions.setAppData(APP_DATA.sidePane, '');
+      })
+      .otherwise(() => {
+        //do nothing
+      });
+  }, [sidepane, isMobile, toggleChat, showChat, hmsActions]);
+  return null;
+};
 const HLSView = () => {
   const videoRef = useRef(null);
   const hlsViewRef = useRef();
   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 } = useTheme();
@@ -63,16 +85,13 @@ const HLSView = () => {
   const [isPaused, setIsPaused] = useState(false);
   const [show, toggle] = useToggle(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 [seekProgress, setSeekProgress] = useState(false);
   const isFullScreenSupported = screenfull.isEnabled;
 
   const isMobile = useMedia(config.media.md);
@@ -83,13 +102,6 @@ const HLSView = () => {
   });
   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(() => {
     /**
@@ -175,7 +187,13 @@ const HLSView = () => {
             title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,
             action: (
               <Button
-                onClick={() => togglePollView(pollId)}
+                onClick={() => {
+                  hmsActions.setAppData(APP_DATA.pollState, {
+                    [POLL_STATE.pollInView]: pollId,
+                    [POLL_STATE.view]: POLL_VIEWS.VOTE,
+                  });
+                  hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.POLLS);
+                }}
                 variant="standard"
                 css={{
                   backgroundColor: '$surface_bright',
@@ -245,7 +263,7 @@ const HLSView = () => {
         hlsPlayer.reset();
       };
     }
-  }, [hlsUrl, togglePollView, vanillaStore]);
+  }, [hlsUrl, vanillaStore, hmsActions]);
 
   /**
    * initialize and subscribe to hlsState
@@ -285,21 +303,23 @@ const HLSView = () => {
       clearTimeout(controlsTimerRef.current);
     }
     controlsTimerRef.current = setTimeout(() => {
-      setControlsVisible(false);
+      if (!seekProgress) {
+        setControlsVisible(false);
+      }
     }, 5000);
     return () => {
       if (controlsTimerRef.current) {
         clearTimeout(controlsTimerRef.current);
       }
     };
-  }, [controlsVisible, isFullScreen, qualityDropDownOpen]);
+  }, [controlsVisible, isFullScreen, seekProgress, qualityDropDownOpen]);
 
   const onSeekTo = useCallback(seek => {
     hlsPlayer?.seekTo(videoRef.current?.currentTime + seek);
   }, []);
   const onDoubleClickHandler = useCallback(
     event => {
-      if (!(isMobile || isLandscape)) {
+      if (!(isMobile || isLandscape) || hlsState?.variants[0]?.playlist_type !== HLSPlaylistType.DVR) {
         return;
       }
       const sidePercentage = (event.screenX * 100) / event.target.clientWidth;
@@ -314,7 +334,7 @@ const HLSView = () => {
         setIsSeekEnabled(false);
       }, 200);
     },
-    [isLandscape, isMobile, onSeekTo],
+    [hlsState?.variants, isLandscape, isMobile, onSeekTo],
   );
   const onClickHandler = useCallback(() => {
     if (!(isMobile || isLandscape)) {
@@ -335,251 +355,187 @@ const HLSView = () => {
         setControlsVisible(true);
         return;
       }
-      if (event.type === 'mouseleave') {
+      if (event.type === 'mouseleave' && !seekProgress) {
         setControlsVisible(false);
-      } else if (isFullScreen && !controlsVisible && event.type === 'mousemove') {
+      } else if (!controlsVisible && event.type === 'mousemove') {
         setControlsVisible(true);
         if (controlsTimerRef.current) {
           clearTimeout(controlsTimerRef.current);
         }
       }
     },
-    [controlsVisible, isFullScreen, isLandscape, isMobile, qualityDropDownOpen],
+    [controlsVisible, isLandscape, isMobile, qualityDropDownOpen, seekProgress],
   );
 
+  if (!hlsUrl || streamEnded) {
+    return (
+      <>
+        <ToggleChat />
+        {hlsViewRef.current && (isMobile || isLandscape) && (
+          <Box css={{ position: 'fixed', left: '$4', top: '$4', zIndex: 11 }}>
+            <LeaveRoom screenType="hls_live_streaming" container={hlsViewRef.current} />
+          </Box>
+        )}
+        <Flex
+          key="hls-viewer"
+          id={`hls-viewer-${themeType}`}
+          ref={hlsViewRef}
+          direction={isMobile || isLandscape ? 'column' : 'row'}
+          justify="center"
+          css={{
+            flex: isLandscape ? '2 1 0' : '1 1 0',
+          }}
+        >
+          <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' }}>
+              {streamEnded ? <ColoredHandIcon height={56} width={56} /> : <GoLiveIcon height={56} width={56} />}
+            </Flex>
+            <Text variant="h5" css={{ c: '$on_surface_high', mt: '$10', mb: 0, textAlign: 'center' }}>
+              {streamEnded ? 'Stream has ended' : 'Stream yet to start'}
+            </Text>
+            <Text variant="md" css={{ textAlign: 'center', mt: '$4', c: '$on_surface_medium' }}>
+              {streamEnded ? 'Have a nice day!' : 'Sit back and relax'}
+            </Text>
+          </Flex>
+        </Flex>
+      </>
+    );
+  }
   return (
     <Flex
       key="hls-viewer"
       id={`hls-viewer-${themeType}`}
       ref={hlsViewRef}
       direction={isMobile || isLandscape ? 'column' : 'row'}
+      justify="center"
       css={{
-        w: sidepane !== '' && isLandscape ? '' : '100%',
-        h: sidepane !== '' && isMobile ? '36%' : '100%',
-        flex: '1 1 0',
+        flex: isLandscape ? '2 1 0' : '1 1 0',
+        '&:fullscreen': {
+          '& video': {
+            height: 'unset !important',
+          },
+        },
       }}
     >
-      {hlsUrl && !streamEnded ? (
-        <>
-          <HMSPlayerContext.Provider value={{ hlsPlayer }}>
-            {hlsStatsState?.url && enablHlsStats && !(isMobile || isLandscape) ? (
-              <HlsStatsOverlay hlsStatsState={hlsStatsState} onClose={sfnOverlayClose} />
-            ) : null}
+      {hlsViewRef.current && (isMobile || isLandscape) && (
+        <Box css={{ position: 'fixed', left: '$4', top: '$4', zIndex: 11 }}>
+          <LeaveRoom screenType="hls_live_streaming" container={hlsViewRef.current} />
+        </Box>
+      )}
+
+      <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={{
+            size: '100%',
+            margin: '0 auto',
+            '@md': {
+              height: 'auto',
+            },
+          }}
+        >
+          {!(isMobile || isLandscape) && (
+            <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
+          )}
+          {showLoader && (
             <Flex
-              id="hls-player-container"
               align="center"
               justify="center"
               css={{
-                size: '100%',
-                margin: '0 auto',
+                position: 'absolute',
               }}
             >
-              {!(isMobile || isLandscape) && (
-                <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
-              )}
-              {showLoader && (
-                <Flex
-                  align="center"
-                  justify="center"
-                  css={{
-                    position: 'absolute',
-                  }}
-                >
-                  <Loading width={72} height={72} />
-                </Flex>
-              )}
-              <HMSVideoPlayer.Root
-                ref={videoRef}
-                onMouseEnter={onHoverHandler}
-                onMouseMove={onHoverHandler}
-                onMouseLeave={onHoverHandler}
-                onClick={onClickHandler}
-                onDoubleClick={e => {
-                  onDoubleClickHandler(e);
-                }}
-              >
+              <Loading width={72} height={72} />
+            </Flex>
+          )}
+          <HMSVideoPlayer.Root
+            ref={videoRef}
+            onMouseEnter={onHoverHandler}
+            onMouseMove={onHoverHandler}
+            onMouseLeave={onHoverHandler}
+            onClick={onClickHandler}
+            onDoubleClick={e => {
+              onDoubleClickHandler(e);
+            }}
+          >
+            <>
+              {isMobile || isLandscape ? (
                 <>
-                  {isMobile || isLandscape ? (
-                    <>
-                      {!showLoader && (
-                        <Flex
-                          align="center"
-                          justify="center"
+                  <Flex
+                    align="center"
+                    justify="center"
+                    css={{
+                      position: 'absolute',
+                      bg: '#00000066',
+                      display: 'inline-flex',
+                      gap: '$2',
+                      zIndex: 1,
+                      size: '100%',
+                      visibility: controlsVisible ? `` : `hidden`,
+                      opacity: controlsVisible ? `1` : '0',
+                    }}
+                  >
+                    {!showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && (
+                      <>
+                        <HMSVideoPlayer.Seeker
+                          title="backward"
                           css={{
-                            bg: '#00000066',
-                            display: 'inline-flex',
-                            gap: '$2',
-                            zIndex: 1,
-                            size: '100%',
-                            visibility: controlsVisible ? `` : `hidden`,
-                            opacity: controlsVisible ? `1` : '0',
+                            visibility: isSeekEnabled ? `` : `hidden`,
+                            opacity: isSeekEnabled ? `1` : '0',
                           }}
                         >
-                          <HMSVideoPlayer.Seeker
-                            title="backward"
-                            css={{
-                              visibility: isSeekEnabled ? `` : `hidden`,
-                              opacity: isSeekEnabled ? `1` : '0',
-                            }}
-                          >
-                            <BackwardArrowIcon width={32} height={32} />
-                          </HMSVideoPlayer.Seeker>
-                          <Box
-                            css={{
-                              bg: 'rgba(0, 0, 0, 0.6)',
-                              r: '$round',
-                            }}
-                          >
-                            <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} width={48} height={48} />
-                          </Box>
-                          <HMSVideoPlayer.Seeker
-                            title="forward"
-                            css={{
-                              visibility: isSeekEnabled ? `` : `hidden`,
-                              opacity: isSeekEnabled ? `1` : '0',
-                            }}
-                          >
-                            <ForwardArrowIcon width={32} height={32} />
-                          </HMSVideoPlayer.Seeker>
-                        </Flex>
-                      )}
-                      <Flex
-                        ref={controlsRef}
-                        direction="column"
-                        justify="start"
-                        align="start"
-                        css={{
-                          position: 'absolute',
-                          top: '0',
-                          left: '0',
-                          width: '100%',
-                          flexShrink: 0,
-                          zIndex: 1,
-                          visibility: controlsVisible ? `` : `hidden`,
-                          opacity: controlsVisible ? `1` : '0',
-                        }}
-                      >
-                        <HMSVideoPlayer.Controls.Root
+                          <BackwardArrowIcon width={32} height={32} />
+                        </HMSVideoPlayer.Seeker>
+                        <Box
                           css={{
-                            p: '$4 $8',
+                            bg: 'rgba(0, 0, 0, 0.6)',
+                            r: '$round',
                           }}
                         >
-                          <HMSVideoPlayer.Controls.Left>
-                            {hlsViewRef.current && <LeaveRoom screenType={screenType} container={hlsViewRef.current} />}
-                          </HMSVideoPlayer.Controls.Left>
-                          <HMSVideoPlayer.Controls.Right>
-                            {isLandscape && <ChatToggle />}
-                            {hasCaptions && !isHlsAutoplayBlocked && (
-                              <HLSCaptionSelector isEnabled={isCaptionEnabled} />
-                            )}
-                            {hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? (
-                              <HLSQualitySelector
-                                layers={availableLayers}
-                                onOpenChange={setQualityDropDownOpen}
-                                open={qualityDropDownOpen}
-                                selection={currentSelectedQuality}
-                                onQualityChange={handleQuality}
-                                isAuto={isUserSelectedAuto}
-                                containerRef={hlsViewRef.current}
-                              />
-                            ) : null}
-                            <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
-                          </HMSVideoPlayer.Controls.Right>
-                        </HMSVideoPlayer.Controls.Root>
-                      </Flex>
-                    </>
-                  ) : null}
+                          <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} width={48} height={48} />
+                        </Box>
+                        <HMSVideoPlayer.Seeker
+                          title="forward"
+                          css={{
+                            visibility: isSeekEnabled ? `` : `hidden`,
+                            opacity: isSeekEnabled ? `1` : '0',
+                          }}
+                        >
+                          <ForwardArrowIcon width={32} height={32} />
+                        </HMSVideoPlayer.Seeker>
+                      </>
+                    )}
+                  </Flex>
                   <Flex
                     ref={controlsRef}
-                    direction={isMobile ? 'columnReverse' : 'column'}
-                    justify="end"
+                    direction="column"
+                    justify="start"
                     align="start"
                     css={{
                       position: 'absolute',
-                      bottom: isFullScreen && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? '$8' : '0',
+                      top: '0',
                       left: '0',
-                      zIndex: 1,
-                      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',
+                      zIndex: 1,
                       visibility: controlsVisible ? `` : `hidden`,
                       opacity: controlsVisible ? `1` : '0',
                     }}
                   >
-                    <HMSVideoPlayer.Progress isDvr={hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR} />
                     <HMSVideoPlayer.Controls.Root
                       css={{
                         p: '$4 $8',
                       }}
                     >
-                      <HMSVideoPlayer.Controls.Left>
-                        {!(isMobile || isLandscape) && (
-                          <>
-                            <HMSVideoPlayer.Seeker
-                              onClick={() => {
-                                onSeekTo(-10);
-                              }}
-                              title="backward"
-                            >
-                              <BackwardArrowIcon width={20} height={20} />
-                            </HMSVideoPlayer.Seeker>
-                            <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} />
-                            <HMSVideoPlayer.Seeker
-                              onClick={() => {
-                                onSeekTo(10);
-                              }}
-                              title="forward"
-                            >
-                              <ForwardArrowIcon width={20} height={20} />
-                            </HMSVideoPlayer.Seeker>
-                            {!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 && !(isMobile || isLandscape) && (
-                          <HLSCaptionSelector isEnabled={isCaptionEnabled} />
-                        )}
-                        {availableLayers.length > 0 && !(isMobile || isLandscape) ? (
+                        {isLandscape && <ChatToggle />}
+                        {hasCaptions && !isHlsAutoplayBlocked && <HLSCaptionSelector isEnabled={isCaptionEnabled} />}
+                        {hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? (
                           <HLSQualitySelector
                             layers={availableLayers}
                             onOpenChange={setQualityDropDownOpen}
@@ -587,37 +543,135 @@ const HLSView = () => {
                             selection={currentSelectedQuality}
                             onQualityChange={handleQuality}
                             isAuto={isUserSelectedAuto}
+                            containerRef={hlsViewRef.current}
                           />
                         ) : null}
-                        {isFullScreenSupported ? (
-                          <FullScreenButton isFullScreen={isFullScreen} onToggle={toggle} />
-                        ) : null}
+                        <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
                       </HMSVideoPlayer.Controls.Right>
                     </HMSVideoPlayer.Controls.Root>
                   </Flex>
                 </>
-              </HMSVideoPlayer.Root>
-            </Flex>
-          </HMSPlayerContext.Provider>
+              ) : null}
+              {controlsVisible && (
+                <Flex
+                  ref={controlsRef}
+                  direction={isMobile ? 'columnReverse' : 'column'}
+                  justify="end"
+                  align="start"
+                  css={{
+                    position: 'absolute',
+                    bottom: isFullScreen && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? '$8' : '0',
+                    left: '0',
+                    zIndex: 1,
+                    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',
+                  }}
+                >
+                  {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
+                    <HMSVideoPlayer.Progress seekProgress={seekProgress} setSeekProgress={setSeekProgress} />
+                  ) : null}
+                  <HMSVideoPlayer.Controls.Root
+                    css={{
+                      p: '$4 $8',
+                    }}
+                  >
+                    <HMSVideoPlayer.Controls.Left>
+                      {!(isMobile || isLandscape) && (
+                        <>
+                          {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
+                            <>
+                              <HMSVideoPlayer.Seeker
+                                onClick={() => {
+                                  onSeekTo(-10);
+                                }}
+                                title="backward"
+                              >
+                                <BackwardArrowIcon width={20} height={20} />
+                              </HMSVideoPlayer.Seeker>
+                              <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} />
+                              <HMSVideoPlayer.Seeker
+                                onClick={() => {
+                                  onSeekTo(10);
+                                }}
+                                title="forward"
+                              >
+                                <ForwardArrowIcon width={20} height={20} />
+                              </HMSVideoPlayer.Seeker>
+                              {!isVideoLive ? <HMSVideoPlayer.Duration /> : null}
+                            </>
+                          ) : 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 &&
+                      hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
+                        <HMSVideoPlayer.Duration />
+                      ) : null}
+                    </HMSVideoPlayer.Controls.Left>
 
-          {isMobile && !isFullScreen && <HLSViewTitle />}
-        </>
-      ) : (
-        <Flex align="center" justify="center" direction="column" css={{ size: '100%', px: '$10' }}>
-          <Flex align="center" gap="2" css={{ position: 'absolute', left: '$4', top: '$4', zIndex: 1 }}>
-            {isMobile || isLandscape ? <LeaveRoom screenType={screenType} /> : null}
-          </Flex>
-          <Flex css={{ c: '$on_surface_high', r: '$round', bg: '$surface_default', p: '$2' }}>
-            {streamEnded ? <ColoredHandIcon height={56} width={56} /> : <GoLiveIcon height={56} width={56} />}
-          </Flex>
-          <Text variant="h5" css={{ c: '$on_surface_high', mt: '$10', mb: 0, textAlign: 'center' }}>
-            {streamEnded ? 'Stream has ended' : 'Stream yet to start'}
-          </Text>
-          <Text variant="md" css={{ textAlign: 'center', mt: '$4', c: '$on_surface_medium' }}>
-            {streamEnded ? 'Have a nice day!' : 'Sit back and relax'}
-          </Text>
+                    <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>
+                </Flex>
+              )}
+            </>
+          </HMSVideoPlayer.Root>
         </Flex>
-      )}
+      </HMSPlayerContext.Provider>
+      <ToggleChat />
+      {isMobile && !isFullScreen && <HLSViewTitle />}
     </Flex>
   );
 };