From da637d3c8f98b2405075a8bd1eeb21b59e4f0e9d Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 2 Jun 2022 06:06:39 -0600
Subject: [PATCH] Limit size of player in events view (#3288)

* Set max width

* Set data-options so videojs accepts size changing

* Add comment to explain exmpty data-setup value

* Clarify comment
---
 web/src/components/VideoPlayer.jsx | 3 ++-
 web/src/routes/Events.jsx          | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/components/VideoPlayer.jsx b/web/src/components/VideoPlayer.jsx
index 2ef534464..49a79d38f 100644
--- a/web/src/components/VideoPlayer.jsx
+++ b/web/src/components/VideoPlayer.jsx
@@ -93,7 +93,8 @@ export default function VideoPlayer({ children, options, seekOptions = {}, onRea
 
   return (
     <div data-vjs-player>
-      <video ref={playerRef} className="small-player video-js vjs-default-skin" controls playsinline />
+      {/* Setting an empty data-setup is required to override the default values and allow video to be fit the size of its parent */}
+      <video ref={playerRef} className="small-player video-js vjs-default-skin" data-setup="{}" controls playsinline />
       {children}
     </div>
   );
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 729087101..b6c6fa77f 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -494,7 +494,7 @@ export default function Events({ path, ...props }) {
                   </div>
                   {viewEvent !== event.id ? null : (
                     <div className="space-y-4">
-                      <div className="mx-auto">
+                      <div className="mx-auto max-w-7xl">
                         {event.has_clip ? (
                           <>
                             <Heading size="lg">Clip</Heading>