fix: no controls for no-dvr

100mslive · Mar 1, 2024 · 1f5573f · 1f5573f
1 parent 0a5031f
commit 1f5573f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 27 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/VideoProgress.tsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/VideoProgress.tsx
@@ -3,7 +3,7 @@ import { Box, Flex, Slider } from '../../..';
 import { useHMSPlayerContext } from './PlayerContext';
 import { getPercentage } from './utils';
 
-export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
+export const VideoProgress = () => {
   const { hlsPlayer } = useHMSPlayerContext();
   const [videoProgress, setVideoProgress] = useState<number>(0);
   const [bufferProgress, setBufferProgress] = useState(0);
@@ -48,23 +48,22 @@ export const VideoProgress = ({ isDvr = true }: { isDvr: boolean }) => {
     return null;
   }
   return (
-    <Flex align="center" css={{ cursor: 'pointer', h: '$2', alignSelf: 'stretch', pointerEvents: isDvr ? '' : 'none' }}>
+    <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`,
-          pointerEvents: isDvr ? '' : 'none',
         }}
         min={0}
         max={100}
         step={1}
         value={[videoProgress]}
         showTooltip={false}
         onValueChange={onProgress}
-        thumbStyles={{ w: '$6', h: '$6', display: isDvr ? '' : 'none' }}
+        thumbStyles={{ w: '$6', h: '$6' }}
       />
       <Box
         id="video-buffer"

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
@@ -299,7 +299,7 @@ const HLSView = () => {
   }, []);
   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 +314,7 @@ const HLSView = () => {
         setIsSeekEnabled(false);
       }, 200);
     },
-    [isLandscape, isMobile, onSeekTo],
+    [hlsState?.variants, isLandscape, isMobile, onSeekTo],
   );
   const onClickHandler = useCallback(() => {
     if (!(isMobile || isLandscape)) {
@@ -401,7 +401,7 @@ const HLSView = () => {
                 <>
                   {isMobile || isLandscape ? (
                     <>
-                      {!showLoader && (
+                      {!showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && (
                         <Flex
                           align="center"
                           justify="center"
@@ -511,7 +511,7 @@ const HLSView = () => {
                       opacity: controlsVisible ? `1` : '0',
                     }}
                   >
-                    <HMSVideoPlayer.Progress isDvr={hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR} />
+                    {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? <HMSVideoPlayer.Progress /> : null}
                     <HMSVideoPlayer.Controls.Root
                       css={{
                         p: '$4 $8',
@@ -520,24 +520,28 @@ const HLSView = () => {
                       <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}
+                            {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 />
                           </>
                         )}
@@ -572,7 +576,11 @@ const HLSView = () => {
                             </Flex>
                           </Tooltip>
                         </IconButton>
-                        {(isMobile || isLandscape) && !isVideoLive ? <HMSVideoPlayer.Duration /> : null}
+                        {(isMobile || isLandscape) &&
+                        !isVideoLive &&
+                        hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
+                          <HMSVideoPlayer.Duration />
+                        ) : null}
                       </HMSVideoPlayer.Controls.Left>
 
                       <HMSVideoPlayer.Controls.Right>