scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix video disappearing after fullscreen is entered and exited

Browse source
This commit is contained in:
caseymm 2021-10-28 15:39:49 -07:00
parent 739c001f66
commit f44ddbe7d3
3 changed files with 48 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/text-and-media-snippet/text-and-media-snippet.jsx
View file

@ -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

7
src/components/video-preview/video-preview.jsx
View file

@ -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">

24
src/views/annual-report/2020/annual-report.jsx
View file

@ -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'}