From a5e7ccfa75dd3c9cd2ff6d366bac62029c8a7dba Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <cbegelan@gmail.com>
Date: Thu, 19 Aug 2021 20:49:31 +0200
Subject: [PATCH] added data-vjs-player and added 2/3 scaling wrapper in
 event.js

---
 web/src/components/VideoPlayer.jsx |  2 +-
 web/src/routes/Event.jsx           | 32 ++++++++++++++++--------------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/web/src/components/VideoPlayer.jsx b/web/src/components/VideoPlayer.jsx
index 39c013fc8..3560d964a 100644
--- a/web/src/components/VideoPlayer.jsx
+++ b/web/src/components/VideoPlayer.jsx
@@ -87,7 +87,7 @@ export default function VideoPlayer({ children, options, seekOptions = {}, onRea
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <div className="md:w-2/3 sm:w-full m-auto">
+    <div data-vjs-player>
       <video ref={playerRef} className="video-js vjs-default-skin" controls playsinline />
       {children}
     </div>
diff --git a/web/src/routes/Event.jsx b/web/src/routes/Event.jsx
index f3e66d5f8..516582837 100644
--- a/web/src/routes/Event.jsx
+++ b/web/src/routes/Event.jsx
@@ -119,21 +119,23 @@ export default function Event({ eventId }) {
       {data.has_clip ? (
         <Fragment>
           <Heading size="lg">Clip</Heading>
-          <VideoPlayer
-            options={{
-              sources: [
-                {
-                  src: `${apiHost}/vod/event/${eventId}/index.m3u8`,
-                  type: 'application/vnd.apple.mpegurl',
-                },
-              ],
-              poster: data.has_snapshot
-                ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
-                : `data:image/jpeg;base64,${data.thumbnail}`,
-            }}
-            seekOptions={{ forward: 10, back: 5 }}
-            onReady={(player) => {}}
-          />
+          <div className="md:w-2/3 sm:w-full m-auto">
+            <VideoPlayer
+              options={{
+                sources: [
+                  {
+                    src: `${apiHost}/vod/event/${eventId}/index.m3u8`,
+                    type: 'application/vnd.apple.mpegurl',
+                  },
+                ],
+                poster: data.has_snapshot
+                  ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
+                  : `data:image/jpeg;base64,${data.thumbnail}`,
+              }}
+              seekOptions={{ forward: 10, back: 5 }}
+              onReady={(player) => {}}
+            />
+          </div>
           <div className="text-center">
             <Button
               className="mx-2"