From 4f49e0817948ce241be68fe51295ee5cb0e87cde Mon Sep 17 00:00:00 2001
From: Carl Kittelberger <icedream@icedream.pw>
Date: Mon, 9 Jan 2023 04:02:56 +0100
Subject: [PATCH] Fix video player responsive embed.

ResponsiveEmbed was renamed to Ratio and now behaves slightly different
compared to old Bootstrap 4.
---
 frontend/components/VideoPlayer.tsx | 74 ++++++++++++++---------------
 1 file changed, 35 insertions(+), 39 deletions(-)

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