From c1ebe2ad9c4517b093a5679d1886193b20199cf0 Mon Sep 17 00:00:00 2001
From: Benjamin Armintor <armintor@gmail.com>
Date: Mon, 17 Jun 2024 13:15:01 -0400
Subject: [PATCH] COLUMBIA: Use videojs fill in a 100% container instead of
 fluid for responsive sizing - update videojs to 8.10.0 - disable the
 transpiling loader for videojs with bang syntax

---
 package.json                                              | 2 +-
 src/culPlugins/mirador-videojs/components/VideoJS.js      | 5 +++--
 .../mirador-videojs/components/VideoJSAudioViewer.js      | 8 ++------
 .../mirador-videojs/components/VideoJSViewer.js           | 8 ++------
 4 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 0fad172c35..689d952eab 100644
--- a/package.json
+++ b/package.json
@@ -145,6 +145,6 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "sass": "^1.34.0",
-    "video.js": "^7.17.0"
+    "video.js": "^8.10.0"
   }
 }
diff --git a/src/culPlugins/mirador-videojs/components/VideoJS.js b/src/culPlugins/mirador-videojs/components/VideoJS.js
index dd0b48abaa..9548336ed5 100644
--- a/src/culPlugins/mirador-videojs/components/VideoJS.js
+++ b/src/culPlugins/mirador-videojs/components/VideoJS.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import videojs from 'video.js';
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import videojs from '!video.js';
 import 'video.js/dist/video-js.css';
 
 /** */
@@ -46,7 +47,7 @@ export const VideoJS = (props) => {
   }, [playerRef]);
 
   return (
-    <div ref={videoRef} />
+    <div ref={videoRef} data-vjs-player style={{ width: '100%' }} />
   );
 };
 
diff --git a/src/culPlugins/mirador-videojs/components/VideoJSAudioViewer.js b/src/culPlugins/mirador-videojs/components/VideoJSAudioViewer.js
index ede6abc524..b4b32529b6 100644
--- a/src/culPlugins/mirador-videojs/components/VideoJSAudioViewer.js
+++ b/src/culPlugins/mirador-videojs/components/VideoJSAudioViewer.js
@@ -36,7 +36,7 @@ class VideoJSAudioViewerBase extends Component {
         remainingTimeDisplay: false,
       },
       controls: true,
-      fluid: true,
+      fill: true,
       playbackRates: [0.5, 1, 1.5, 2],
       responsive: true,
       sources: audioResources.filter(audio => audio.id && audio.getFormat()).map(
@@ -46,11 +46,7 @@ class VideoJSAudioViewerBase extends Component {
     };
 
     if (videoJsOptions.sources.length === 0) return <ForbiddenComponent id="this content" />;
-    return (
-      <div className="video-js vjs-fill" data-vjs-player>
-        <VideoJS options={videoJsOptions} />
-      </div>
-    );
+    return <VideoJS options={videoJsOptions} />;
   }
 }
 
diff --git a/src/culPlugins/mirador-videojs/components/VideoJSViewer.js b/src/culPlugins/mirador-videojs/components/VideoJSViewer.js
index a3a2cb329f..36e9f005e0 100644
--- a/src/culPlugins/mirador-videojs/components/VideoJSViewer.js
+++ b/src/culPlugins/mirador-videojs/components/VideoJSViewer.js
@@ -36,7 +36,7 @@ class VideoJSViewerBase extends VideoViewer {
         remainingTimeDisplay: false,
       },
       controls: true,
-      fluid: true,
+      fill: true,
       playbackRates: [0.5, 1, 1.5, 2],
       responsive: true,
       sources: videoResources.filter(video => video.id && video.getFormat()).map(
@@ -46,11 +46,7 @@ class VideoJSViewerBase extends VideoViewer {
     };
 
     if (videoJsOptions.sources.length === 0) return <ForbiddenComponent id="this content" />;
-    return (
-      <div className="video-js vjs-fill" data-vjs-player>
-        <VideoJS options={videoJsOptions} />
-      </div>
-    );
+    return <VideoJS options={videoJsOptions} />;
   }
 }