fix: make hls player take more space when in fullscreen

100mslive · Sep 13, 2024 · 3af7440 · 3af7440
1 parent 62491d4
commit 3af7440
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/packages/hls-player/src/controllers/HMSHLSPlayer.ts b/packages/hls-player/src/controllers/HMSHLSPlayer.ts
@@ -236,7 +236,7 @@ export class HMSHLSPlayer implements IHMSHLSPlayer, IHMSHLSPlayerEventEmitter {
     });
   };
   private volumeEventHandler = () => {
-    this._volume = this._videoEl.volume;
+    this._volume = Math.round(this._videoEl.volume * 100);
   };
 
   private reConnectToStream = () => {

diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx
@@ -1,7 +1,28 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import { Flex } from '../../../Layout';
 
 export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
+  const [width, setWidth] = useState('auto');
+
+  useEffect(() => {
+    const updatingVideoWidth = () => {
+      const videoEl = videoRef.current;
+      if (!videoEl) {
+        return;
+      }
+      if (videoEl.videoWidth > videoEl.videoHeight && width !== '100%') {
+        setWidth('100%');
+      }
+    };
+    const videoEl = videoRef.current;
+    if (!videoEl) {
+      return;
+    }
+    videoEl.addEventListener('loadedmetadata', updatingVideoWidth);
+    return () => {
+      videoEl.removeEventListener('loadedmetadata', updatingVideoWidth);
+    };
+  }, []);
   return (
     <Flex
       data-testid="hms-video"
@@ -11,9 +32,8 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
         justifyContent: 'center',
         transition: 'all 0.3s ease-in-out',
         '@md': {
-          height: 'auto',
           '& video': {
-            height: '$60 !important',
+            height: props.isFullScreen ? '' : '$60 !important',
           },
         },
         '& video::cue': {
@@ -41,7 +61,7 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
         style={{
           margin: '0 auto',
           objectFit: 'contain',
-          width: 'auto',
+          width: width,
           height: '100%',
           maxWidth: '100%',
         }}

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
@@ -485,11 +485,6 @@ const HLSView = () => {
       css={{
         flex: isLandscape ? '2 1 0' : '1 1 0',
         transition: 'all 0.3s ease-in-out',
-        '&:fullscreen': {
-          '& video': {
-            height: 'unset !important',
-          },
-        },
       }}
     >
       {hlsViewRef.current && (isMobile || isLandscape) && (
@@ -541,6 +536,7 @@ const HLSView = () => {
             onMouseMove={onHoverHandler}
             onMouseLeave={onHoverHandler}
             onClick={onClickHandler}
+            isFullScreen={isFullScreen}
             onDoubleClick={e => {
               onDoubleClickHandler(e);
             }}
@@ -728,6 +724,7 @@ const HLSView = () => {
                           selection={currentSelectedQuality}
                           onQualityChange={handleQuality}
                           isAuto={isUserSelectedAuto}
+                          containerRef={hlsViewRef.current}
                         />
                       ) : null}
                       {isFullScreenSupported ? (