From 49b8442124db4823a33e2649a78e8e1a18393463 Mon Sep 17 00:00:00 2001
From: jadmsaadaot <91914654+jadmsaadaot@users.noreply.github.com>
Date: Wed, 26 Jul 2023 22:54:29 -0700
Subject: [PATCH] Fix video player aspect ratio (#1891)
---
met-web/src/components/common/index.tsx | 15 ++++++
.../view/widgets/Video/VideoWidgetView.tsx | 54 ++++++++++---------
2 files changed, 45 insertions(+), 24 deletions(-)
diff --git a/met-web/src/components/common/index.tsx b/met-web/src/components/common/index.tsx
index a2b134adb..a2419a256 100644
--- 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) => (
@@ -454,3 +455,17 @@ export const MetDisclaimer = ({ children }: { children: React.ReactNode }) => {
);
};
+
+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
index 334b1a345..3972335d9 100644
--- 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 (
- <>
-
-
-
- Video
-
-
-
- {videoWidget.description}
-
-
-
-
+
+
+
+ Video
+
-
- >
+
+ {videoWidget.description}
+
+
+
+
+
+
+
+
);
};