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

10
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,9 +64,7 @@ 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>
<div data-vjs-player>
{/* eslint-disable-next-line jsx-a11y/media-has-caption */} {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
<video <video
ref={(node) => { this.videoNode = node; }} ref={(node) => { this.videoNode = node; }}
@ -99,9 +97,7 @@ export default class VideoPlayer extends React.Component<{
</a> </a>
</p> </p>
</video> </video>
</div> </Ratio>
</div>
</ResponsiveEmbed>
); );
} }
} }