COLUMBIA: Convert VideoJSViewer to a functional component

- correct a propType validation on audio viewer
cul · Feb 12, 2025 · f6209f2 · f6209f2
1 parent 785b9a3
commit f6209f2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 27 deletions.
diff --git a/src/culPlugins/mirador-videojs/components/VideoJS.js b/src/culPlugins/mirador-videojs/components/VideoJS.js
@@ -4,7 +4,7 @@ import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
 
 /** */
-export const VideoJS = ({ options = {}, onReady }) => {
+export const VideoJS = ({ options = {}, onReady = null }) => {
   const videoRef = React.useRef(null);
   const playerRef = React.useRef(null);
 
@@ -53,7 +53,7 @@ export const VideoJS = ({ options = {}, onReady }) => {
 export default VideoJS;
 
 VideoJS.propTypes = {
-  onReady: PropTypes.func.isRequired,
+  onReady: PropTypes.func,
   options: PropTypes.shape({
     autoplay: PropTypes.bool,
     sources: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types

diff --git a/src/culPlugins/mirador-videojs/components/VideoJSViewer.js b/src/culPlugins/mirador-videojs/components/VideoJSViewer.js
@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
 import { VideoViewer } from '../../../components/VideoViewer';
 import { getConfig, getVisibleCanvasCaptions, getVisibleCanvasVideoResources } from '../../../state/selectors';
 
@@ -22,36 +23,35 @@ const enhance = compose(
 );
 
 /** */
-class VideoJSViewerBase extends VideoViewer {
-  /** */
-  render() {
-    const {
-      captions, videoOptions, videoResources,
-    } = this.props;
+function VideoJSViewerBase({ captions, videoOptions, videoResources }) {
+  const videoJsOptions = {
+    ...videoOptions,
+    autoplay: false,
+    controlBar: {
+      remainingTimeDisplay: false,
+    },
+    controls: true,
+    fill: true,
+    playbackRates: [0.5, 1, 1.5, 2],
+    responsive: true,
+    sources: videoResources.filter(video => video.id && video.getFormat()).map(
+      video => ({ src: video.id, type: video.getFormat() }),
+    ),
+    tracks: captions.filter(caption => caption.id).map(caption => ({ kind: (caption.kind || 'captions'), src: caption.id })),
+  };
 
-    const videoJsOptions = {
-      ...videoOptions,
-      autoplay: false,
-      controlBar: {
-        remainingTimeDisplay: false,
-      },
-      controls: true,
-      fill: true,
-      playbackRates: [0.5, 1, 1.5, 2],
-      responsive: true,
-      sources: videoResources.filter(video => video.id && video.getFormat()).map(
-        video => ({ src: video.id, type: video.getFormat() }),
-      ),
-      tracks: captions.filter(caption => caption.id).map(caption => ({ kind: (caption.kind || 'captions'), src: caption.id })),
-    };
-
-    if (videoJsOptions.sources.length === 0) return <ForbiddenComponent id="this content" />;
-    return <VideoJS options={videoJsOptions} />;
-  }
+  if (videoJsOptions.sources.length === 0) return <ForbiddenComponent id="this content" />;
+  return <VideoJS options={videoJsOptions} />;
 }
 
 export const VideoJSViewer = enhance(VideoJSViewerBase);
 /** */
 const VideoJSViewerPlugin = ({ targetProps }) => (<VideoJSViewer {...targetProps} />); // eslint-disable-line react/prop-types
 /** */
 export default VideoJSViewerPlugin;
+
+VideoJSViewerBase.propTypes = {
+  captions: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  videoOptions: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  videoResources: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+};