fix: hls video dimensions

100mslive · Feb 28, 2024 · bc7bd71 · bc7bd71
1 parent 6479b59
commit bc7bd71
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 20 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx
@@ -1,13 +1,9 @@
 import React, { forwardRef } from 'react';
-import { useMedia } from 'react-use';
-import { config, Flex } from '../../../';
-import { useIsLandscape } from '../../common/hooks';
+import { Box } from '../../../Layout';
 
 export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
-  const isLandscape = useIsLandscape();
-  const isMobile = useMedia(config.media.md);
   return (
-    <Flex
+    <Box
       data-testid="hms-video"
       css={{
         size: '100%',
@@ -35,18 +31,19 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
     >
       <video
         style={{
-          flex: '1 1 0',
           margin: '0 auto',
-          minHeight: '0',
           objectFit: 'contain',
-          width: 'inherit',
-          height: isLandscape || isMobile ? '100%' : '',
-          position: isLandscape || isMobile ? 'absolute' : '',
+          maxWidth: '100%',
+          height: '100%',
+          '@lg': {
+            width: '100%',
+            heigth: 'auto',
+          },
         }}
         ref={videoRef}
         playsInline
       />
       {children}
-    </Flex>
+    </Box>
   );
 });
diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/SeekControls.tsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/SeekControls.tsx
@@ -1,5 +1,5 @@
 import React, { MouseEventHandler } from 'react';
-import { IconButton, Tooltip } from '../../..';
+import { CSS, IconButton, Tooltip } from '../../..';
 
 export const SeekControls = ({
   title,
@@ -9,7 +9,7 @@ export const SeekControls = ({
 }: {
   title: string;
   onClick?: MouseEventHandler<HTMLButtonElement>;
-  css: any;
+  css: CSS;
   children: React.ReactNode;
 }) => {
   return (

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
@@ -353,8 +353,8 @@ const HLSView = () => {
       direction={isMobile || isLandscape ? 'column' : 'row'}
       css={{
         w: sidepane !== '' && isLandscape ? '' : '100%',
-        h: sidepane !== '' && isMobile ? '36%' : '100%',
-        flex: '1 1 0',
+        h: sidepane !== '' && isMobile ? '' : '100%',
+        flex: sidepane !== '' && isMobile ? '' : '1 1 0',
       }}
     >
       {hlsUrl && !streamEnded ? (
@@ -409,6 +409,9 @@ const HLSView = () => {
                             gap: '$2',
                             zIndex: 1,
                             size: '100%',
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
                             visibility: controlsVisible ? `` : `hidden`,
                             opacity: controlsVisible ? `1` : '0',
                           }}
@@ -502,7 +505,6 @@ const HLSView = () => {
                           : `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',

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
@@ -52,16 +52,15 @@ const Wrapper = styled('div', {
     landscapeStream: {
       true: {
         '@lg': {
-          position: 'unset !important',
+          position: 'unset',
           minHeight: '100%',
         },
       },
     },
     mobileStream: {
       true: {
         '@md': {
-          position: 'unset !important',
-          background: 'red',
+          position: 'unset',
         },
       },
     },