COLUMBIA: Use videojs fill in a 100% container instead of fluid for r…

…esponsive sizing

- update videojs to 8.10.0
- disable the transpiling loader for videojs with bang syntax

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"
   }
 }

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%' }} />
   );
 };
 

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} />;
   }
 }
 

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} />;
   }
 }