icedream
/
gdq-archive
1
0
Fork 0
Code Issues Pull Requests 2 Releases Activity

Fix video player responsive embed. 

ResponsiveEmbed was renamed to Ratio and now behaves slightly different
compared to old Bootstrap 4.
new-frontend
Icedream 2023-01-09 04:02:56 +01:00
parent dc95cad8c8
commit 4f49e08179
Signed by: icedream
GPG Key ID: 468BBEEBB9EC6AEA
1 changed files with 35 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
frontend/components/VideoPlayer.tsx
View File

@ -16,13 +16,13 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Ratio } from 'react-bootstrap';
import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'; import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
import 'videojs-errors'; import 'videojs-errors';
// TODO - localization // TODO - localization
// import 'videojs-errors/dist/lang/de'; // import 'videojs-errors/dist/lang/de';
// import 'videojs-errors/dist/lang/en'; // import 'videojs-errors/dist/lang/en';
// import 'videojs-contrib-dash'; // import 'videojs-contrib-dash';
import { ResponsiveEmbed } from 'react-bootstrap';
export default class VideoPlayer extends React.Component<{ export default class VideoPlayer extends React.Component<{
onReady?: () => void, onReady?: () => void,
@ -64,44 +64,40 @@ export default class VideoPlayer extends React.Component<{
...videoJsOptions ...videoJsOptions
} = this.props; } = this.props;
return ( return (
<ResponsiveEmbed aspectRatio="16by9"> <Ratio aspectRatio="16by9" data-vjs-player>
<div> {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
<div data-vjs-player> <video
{/* eslint-disable-next-line jsx-a11y/media-has-caption */} ref={(node) => { this.videoNode = node; }}
<video className="video-js"
ref={(node) => { this.videoNode = node; }} data-setup={
className="video-js" JSON.stringify({
data-setup={ autoplay,
JSON.stringify({ controls,
autoplay, ...videoJsOptions,
controls, })
...videoJsOptions, }
}) controls={controls}
} autoPlay={!!(autoplay === 'true' || autoplay === true)}
controls={controls} >
autoPlay={!!(autoplay === 'true' || autoplay === true)} {sources.map(
> ({ src, type }) => (
{sources.map( <source
({ src, type }) => ( key={`${JSON.stringify({ src, type })}`}
<source src={src}
key={`${JSON.stringify({ src, type })}`} type={type}
src={src} />
type={type} ),
/> )}
), <p className="vjs-no-js">
)} {/* TODO - localize */}
<p className="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a
{/* TODO - localize */} web browser that
To view this video please enable JavaScript, and consider upgrading to a <a href="https://videojs.com/html5-video-support/" target="_blank" rel="noreferrer">
web browser that supports HTML5 video
<a href="https://videojs.com/html5-video-support/" target="_blank" rel="noreferrer"> </a>
supports HTML5 video </p>
</a> </video>
</p> </Ratio>
</video>
</div>
</div>
</ResponsiveEmbed>
); );
} }
} }