Fix video player aspect ratio (#1891)

bcgov · Jul 27, 2023 · 49b8442 · 49b8442
1 parent fd70b29
commit 49b8442
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 24 deletions.
diff --git a/met-web/src/components/common/index.tsx b/met-web/src/components/common/index.tsx
@@ -20,6 +20,7 @@ import { Palette } from 'styles/Theme';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { MET_Header_Font_Family, MET_Header_Font_Weight } from '../../styles/constants';
 import { When } from 'react-if';
+import ReactPlayer from 'react-player';
 
 export const MetTooltip = styled(({ className, ...props }: TooltipProps) => (
     <Tooltip {...props} classes={{ popper: className }} />
@@ -454,3 +455,17 @@ export const MetDisclaimer = ({ children }: { children: React.ReactNode }) => {
         </Box>
     );
 };
+
+export const AspectRatioContainer = styled('div')({
+    position: 'relative',
+    width: '100%',
+    paddingTop: '56.25%' /* 16:9 aspect ratio (height / width * 100) */,
+});
+
+export const ReactPlayerWrapper = styled(ReactPlayer)({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+});
diff --git a/met-web/src/components/engagement/view/widgets/Video/VideoWidgetView.tsx b/met-web/src/components/engagement/view/widgets/Video/VideoWidgetView.tsx
@@ -1,12 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { MetPaper, MetHeader2, MetParagraph } from 'components/common';
+import { MetPaper, MetHeader2, MetParagraph, AspectRatioContainer, ReactPlayerWrapper } from 'components/common';
 import { Grid, Skeleton, Divider } from '@mui/material';
 import { Widget } from 'models/widget';
 import { useAppDispatch } from 'hooks';
 import { openNotification } from 'services/notificationService/notificationSlice';
 import { VideoWidget } from 'models/videoWidget';
 import { fetchVideoWidgets } from 'services/widgetService/VideoService';
-import ReactPlayer from 'react-player/lazy';
 
 interface VideoWidgetProps {
     widget: Widget;
@@ -69,29 +68,36 @@ const VideoWidgetView = ({ widget }: VideoWidgetProps) => {
     }
 
     return (
-        <>
-            <MetPaper elevation={1} sx={{ paddingTop: '0.5em', padding: '1em' }}>
-                <Grid container justifyContent={{ xs: 'center' }} alignItems="center" rowSpacing={2}>
-                    <Grid
-                        item
-                        container
-                        justifyContent={{ xs: 'center', md: 'flex-start' }}
-                        flexDirection={'column'}
-                        xs={12}
-                        paddingBottom={0}
-                    >
-                        <MetHeader2 bold>Video</MetHeader2>
-                        <Divider sx={{ borderWidth: 1, marginTop: 0.5 }} />
-                    </Grid>
-                    <Grid item xs={12}>
-                        <MetParagraph>{videoWidget.description}</MetParagraph>
-                    </Grid>
-                    <Grid item xs={12}>
-                        <ReactPlayer url={videoWidget.video_url} controls width="100%" config={playerConfig} />
-                    </Grid>
+        <MetPaper elevation={1} sx={{ paddingTop: '0.5em', padding: '1em' }}>
+            <Grid container justifyContent={{ xs: 'center' }} alignItems="center" rowSpacing={2}>
+                <Grid
+                    item
+                    container
+                    justifyContent={{ xs: 'center', md: 'flex-start' }}
+                    flexDirection={'column'}
+                    xs={12}
+                    paddingBottom={0}
+                >
+                    <MetHeader2 bold>Video</MetHeader2>
+                    <Divider sx={{ borderWidth: 1, marginTop: 0.5 }} />
                 </Grid>
-            </MetPaper>
-        </>
+                <Grid item xs={12}>
+                    <MetParagraph>{videoWidget.description}</MetParagraph>
+                </Grid>
+                <Grid item xs={12}>
+                    <AspectRatioContainer>
+                        <ReactPlayerWrapper
+                            url={videoWidget.video_url}
+                            controls
+                            width="100%"
+                            height={'100%'}
+                            config={playerConfig}
+                            light
+                        />
+                    </AspectRatioContainer>
+                </Grid>
+            </Grid>
+        </MetPaper>
     );
 };