From f44ddbe7d3800f1c6e99bdb4cdf66cc62a8c1995 Mon Sep 17 00:00:00 2001
From: caseymm <casey@bocoup.com>
Date: Thu, 28 Oct 2021 15:39:49 -0700
Subject: [PATCH] fix video disappearing after fullscreen is entered and exited

---
 .../text-and-media-snippet.jsx                | 40 ++++++++++++++-----
 .../video-preview/video-preview.jsx           |  7 +++-
 .../annual-report/2020/annual-report.jsx      | 24 +++++------
 3 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/components/text-and-media-snippet/text-and-media-snippet.jsx b/src/components/text-and-media-snippet/text-and-media-snippet.jsx
index cb20bb069..1a0cfc391 100644
--- a/src/components/text-and-media-snippet/text-and-media-snippet.jsx
+++ b/src/components/text-and-media-snippet/text-and-media-snippet.jsx
@@ -2,6 +2,8 @@ const classNames = require('classnames');
 const PropTypes = require('prop-types');
 const React = require('react');
 const VideoPreview = require('../video-preview/video-preview.jsx');
+const MediaQuery = require('react-responsive').default;
+const frameless = require('../../lib/frameless');
 
 require('./text-and-media-snippet.scss');
 
@@ -10,16 +12,34 @@ const TextAndMediaSnippet = props => (
         {props.className === 'regular' &&
             <div className="half">
                 {props.type === 'video' &&
-                    <VideoPreview
-                        buttonMessage=""
-                        thumbnail={props.largeImage}
-                        thumbnailWidth="320"
-                        videoHeight="230"
-                        videoId={props.videoId}
-                        videoWidth="380"
-                        alt={props.alt}
-                        spinnerColor={props.spinnerColor}
-                    />
+                    <div>
+                        <MediaQuery
+                            minWidth={frameless.mobile}
+                        >
+                            <VideoPreview
+                                buttonMessage=""
+                                thumbnail={props.largeImage}
+                                thumbnailWidth="430"
+                                videoHeight={430 * .568}
+                                videoId={props.videoId}
+                                videoWidth="430"
+                                alt={props.alt}
+                                spinnerColor={props.spinnerColor}
+                            />
+                        </MediaQuery>
+                        <MediaQuery maxWidth={frameless.mobile - 1}>
+                            <VideoPreview
+                                buttonMessage=""
+                                thumbnail={props.largeImage}
+                                thumbnailWidth="300"
+                                videoHeight={300 * .568}
+                                videoId={props.videoId}
+                                videoWidth="300"
+                                alt={props.alt}
+                                spinnerColor={props.spinnerColor}
+                            />
+                        </MediaQuery>
+                    </div>
                 }
                 {props.type !== 'video' &&
                     <img
diff --git a/src/components/video-preview/video-preview.jsx b/src/components/video-preview/video-preview.jsx
index 9d5b3e4d6..0edac89e0 100644
--- a/src/components/video-preview/video-preview.jsx
+++ b/src/components/video-preview/video-preview.jsx
@@ -35,7 +35,12 @@ class VideoPreview extends React.Component {
 
     render () {
         return (
-            <div className="video-preview">
+            // Adding a width to this div allows the videoFoam property on the embedded video
+            // to fill the size of the div once fullscreen has been entered and exited
+            <div
+                className="video-preview"
+                style={{width: `${this.props.videoWidth}px`}}
+            >
                 {this.state.videoOpen ?
                     (
                         <div className="spinner-video-container">
diff --git a/src/views/annual-report/2020/annual-report.jsx b/src/views/annual-report/2020/annual-report.jsx
index ce2e95e62..aa56bcd89 100644
--- a/src/views/annual-report/2020/annual-report.jsx
+++ b/src/views/annual-report/2020/annual-report.jsx
@@ -1074,8 +1074,8 @@ class AnnualReport extends React.Component {
                                                 thumbnail="/images/annual-report/2020/connectivity/aroundtheworld_videothumb.png"
                                                 videoId="rlsjbx0st4"
                                                 thumbnailWidth="580"
-                                                videoHeight="320"
-                                                videoWidth="568"
+                                                videoHeight={580 * .568}
+                                                videoWidth="580"
                                                 alt={
                                                     this.props.intl.formatMessage(
                                                         {id: 'annualReport.2020.altConnectivityVideoPreview'}
@@ -1094,8 +1094,8 @@ class AnnualReport extends React.Component {
                                                 thumbnail="/images/annual-report/2020/connectivity/aroundtheworld_videothumb.png"
                                                 videoId="rlsjbx0st4"
                                                 thumbnailWidth="400"
-                                                videoHeight="320"
-                                                videoWidth="568"
+                                                videoHeight={400 * .568}
+                                                videoWidth="400"
                                                 alt={
                                                     this.props.intl.formatMessage(
                                                         {id: 'annualReport.2020.altConnectivityVideoPreview'}
@@ -1111,8 +1111,8 @@ class AnnualReport extends React.Component {
                                                 thumbnail="/images/annual-report/2020/connectivity/aroundtheworld_videothumb.png"
                                                 videoId="rlsjbx0st4"
                                                 thumbnailWidth="300"
-                                                videoHeight="216"
-                                                videoWidth="380"
+                                                videoHeight={300 * .568}
+                                                videoWidth="300"
                                                 alt={
                                                     this.props.intl.formatMessage(
                                                         {id: 'annualReport.2020.altConnectivityVideoPreview'}
@@ -1448,8 +1448,8 @@ class AnnualReport extends React.Component {
                                                 thumbnail="/images/annual-report/2020/adaptation/createalongs_videothumb.png"
                                                 videoId="uzfapi7t03"
                                                 thumbnailWidth="580"
-                                                videoHeight="320"
-                                                videoWidth="568"
+                                                videoHeight={580 * .568}
+                                                videoWidth="580"
                                                 alt={
                                                     this.props.intl.formatMessage(
                                                         {id: 'annualReport.2020.altAdaptationVideoPreview'}
@@ -1468,8 +1468,8 @@ class AnnualReport extends React.Component {
                                                 thumbnail="/images/annual-report/2020/adaptation/createalongs_videothumb.png"
                                                 videoId="uzfapi7t03"
                                                 thumbnailWidth="400"
-                                                videoHeight="320"
-                                                videoWidth="568"
+                                                videoHeight={400 * .568}
+                                                videoWidth="400"
                                                 alt={
                                                     this.props.intl.formatMessage(
                                                         {id: 'annualReport.2020.altAdaptationVideoPreview'}
@@ -1485,8 +1485,8 @@ class AnnualReport extends React.Component {
                                                 thumbnail="/images/annual-report/2020/adaptation/createalongs_videothumb.png"
                                                 videoId="uzfapi7t03"
                                                 thumbnailWidth="300"
-                                                videoHeight="216"
-                                                videoWidth="380"
+                                                videoHeight={300 * .568}
+                                                videoWidth="300"
                                                 alt={
                                                     this.props.intl.formatMessage(
                                                         {id: 'annualReport.2020.altAdaptationVideoPreview'}