From 17843cb11f15edc332d0ac7e2c79bae7745be560 Mon Sep 17 00:00:00 2001 From: Anthony Geourjon <122985699+geourjoa@users.noreply.github.com> Date: Fri, 29 Nov 2024 16:07:30 +0100 Subject: [PATCH] 13 clean code + lint (#14) * Clean code + fix lint error --- src/components/AnnotationSettings.js | 11 +-- src/components/AnnotationsOverlayVideo.js | 50 ++++++++------ src/components/MiradorMenuButton.js | 1 - src/components/VideoViewer.js | 83 ++++++++++------------- src/components/ViewerNavigation.js | 11 +-- src/components/ViewerNavigationVideo.js | 5 -- src/containers/AnnotationsOverlayVideo.js | 26 +++---- src/containers/VideoViewer.js | 14 ++-- 8 files changed, 89 insertions(+), 112 deletions(-) diff --git a/src/components/AnnotationSettings.js b/src/components/AnnotationSettings.js index fed1c56763..f4884497d5 100644 --- a/src/components/AnnotationSettings.js +++ b/src/components/AnnotationSettings.js @@ -11,13 +11,13 @@ import { VideosReferences } from '../plugins/VideosReferences'; * display settings in the Annotation companion window */ export function AnnotationSettings({ - autoScroll, - autoScrollDisabled, + autoScroll = true, + autoScrollDisabled = true, displayAll, displayAllDisabled, t, toggleAnnotationDisplay, - toggleAnnotationAutoScroll, + toggleAnnotationAutoScroll = () => {}, windowId, }) { const mediaIsVideo = typeof VideosReferences.get(windowId) !== 'undefined'; @@ -46,11 +46,6 @@ export function AnnotationSettings({ ); } -AnnotationSettings.defaultProps = { - autoScroll: true, - autoScrollDisabled: true, - toggleAnnotationAutoScroll: () => {}, -}; AnnotationSettings.propTypes = { autoScroll: PropTypes.bool, autoScrollDisabled: PropTypes.bool, diff --git a/src/components/AnnotationsOverlayVideo.js b/src/components/AnnotationsOverlayVideo.js index d6b80c48b8..e8b1eae5e3 100755 --- a/src/components/AnnotationsOverlayVideo.js +++ b/src/components/AnnotationsOverlayVideo.js @@ -64,8 +64,11 @@ export class AnnotationsOverlayVideo extends Component { constructor(props) { super(props); + // eslint-disable-next-line react/no-unused-class-component-methods this.drawAnnotations = true; // TODO force + // eslint-disable-next-line react/no-unused-class-component-methods this.highlightAllAnnotations = true; // TODO force + // eslint-disable-next-line react/no-unused-class-component-methods this.drawSearchAnnotations = true; // TODO force this.ref = createRef(); @@ -84,21 +87,22 @@ export class AnnotationsOverlayVideo extends Component { this.onCanvasResize = this.onCanvasResize.bind(this); - this.props.onFunctionsReady({ + const { onFunctionsReady } = this.props; + + onFunctionsReady({ onPlay: this.onVideoPlaying, }); this.imagesLoading = []; this.imagesReady = []; - this.currentOrientation = props.currentOrientation; - const { videoTarget: temporalfragment } = this.props; if (temporalfragment && temporalfragment.length > 0) { this.temporalOffset = temporalfragment[0] || 0; } else { this.temporalOffset = 0; } + // eslint-disable-next-line react/no-unused-class-component-methods this.currentTimeNearestAnnotationId = null; this.state = { @@ -259,8 +263,10 @@ export class AnnotationsOverlayVideo extends Component { this.updateCanvas(); } - /** */ - onVideoLoadedMetadata(event) { + /** + * @event event + * */ + onVideoLoadedMetadata(event) { // eslint-disable-line class-methods-use-this // if (this.video) { // const { currentTime } = this.props; // const { temporalOffset } = this; @@ -289,7 +295,9 @@ export class AnnotationsOverlayVideo extends Component { this.setState({ showProgress: true }); } - /** */ + /** + * @event click event + * */ onCanvasClick(event) { const { canvas: canvas_, canvasWorld, currentTime } = this.props; @@ -631,20 +639,25 @@ export class AnnotationsOverlayVideo extends Component { */ render() { const { showProgress } = this.state; - const { debug } = this.props; - console.log('AnnotationsOverlayVideo render debug', debug); + const { + currentTime, + debug, + paused, + seekToTime, + selectedAnnotationId, + } = this.props; const circularProgress = (); return ( <> @@ -661,7 +674,7 @@ export class AnnotationsOverlayVideo extends Component { Selected Annot {' '} {' '} - {this.props.selectedAnnotationId} + {selectedAnnotationId} {' '}
@@ -670,7 +683,7 @@ export class AnnotationsOverlayVideo extends Component { Current Time {' '} {' '} - {this.props.currentTime} + {currentTime} {' '} {' '} @@ -690,7 +703,7 @@ export class AnnotationsOverlayVideo extends Component { Seek Time {' '} {' '} - {this.props.seekToTime} + {seekToTime} {' '} {' '} @@ -700,7 +713,7 @@ export class AnnotationsOverlayVideo extends Component { Paused {' '} {' '} - {this.props.paused ? 'Paused' : 'Not paused'} + {paused ? 'Paused' : 'Not paused'} {' '} @@ -736,26 +749,25 @@ AnnotationsOverlayVideo.propTypes = { annotations: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types canvas: PropTypes.object, // eslint-disable-line react/forbid-prop-types canvasWorld: PropTypes.instanceOf(CanvasWorld).isRequired, - currentOrientation: PropTypes.string, currentTime: PropTypes.number, debug: PropTypes.bool.isRequired, deselectAnnotation: PropTypes.func, drawAnnotations: PropTypes.bool, drawSearchAnnotations: PropTypes.bool, highlightAllAnnotations: PropTypes.bool, - onFunctionsReady: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types - hoverAnnotation: PropTypes.func, + hoverAnnotation: PropTypes.func, // eslint-disable-line react/forbid-prop-types hoveredAnnotationIds: PropTypes.arrayOf(PropTypes.string), + onFunctionsReady: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types palette: PropTypes.object, // eslint-disable-line react/forbid-prop-types paused: PropTypes.bool, + playerRef: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types searchAnnotations: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types seekToTime: PropTypes.number, selectAnnotation: PropTypes.func, selectedAnnotationId: PropTypes.string, setCurrentTime: PropTypes.func, - setPaused: PropTypes.func, + setPaused: PropTypes.func, // eslint-disable-line react/forbid-prop-types videoRef: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types - playerRef: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types videoTarget: PropTypes.arrayOf(PropTypes.number), windowId: PropTypes.string.isRequired, }; diff --git a/src/components/MiradorMenuButton.js b/src/components/MiradorMenuButton.js index 7ece49a426..c42a113713 100644 --- a/src/components/MiradorMenuButton.js +++ b/src/components/MiradorMenuButton.js @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; import Badge from '@mui/material/Badge'; diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js index e7427bafa9..e08f8fa34f 100644 --- a/src/components/VideoViewer.js +++ b/src/components/VideoViewer.js @@ -1,6 +1,6 @@ import flatten from 'lodash/flatten'; import flattenDeep from 'lodash/flattenDeep'; -import React, { createRef, Component } from 'react'; +import { createRef, Component } from 'react'; import PropTypes from 'prop-types'; import ResizeObserver from 'react-resize-observer'; import ReactPlayer from '@celluloid/react-player'; @@ -13,44 +13,34 @@ export class VideoViewer extends Component { /** */ constructor(props) { super(props); - this.videoRef = createRef(); this.playerRef = createRef(); - console.log('Debug mode', this.props.debug); - this.state = { containerRatio: 1, - start: 0, - time: 0, handleVideoEventFunctions: { onPlay: () => { console.log('onPlay'); }, }, + start: 0, + time: 0, }; } - handleVideoEventFunctions = (handleVideoEventFunctions) => { - this.setState({ handleVideoEventFunctions }); - }; - /** */ componentDidMount() { const { setPaused } = this.props; setPaused(true); // TODO Implement text track support - /* const video = this.videoRef.current; - if (video && video.textTracks.length > 0) setHasTextTrack(true); */ } /** */ componentDidUpdate(prevProps) { console.log('componentDidUpdate in VideoViewer.js'); const { - canvas, currentTime, muted, paused, + canvas, currentTime, paused, setCurrentTime, setPaused, - textTrackDisabled, } = this.props; if (paused !== prevProps.paused) { @@ -80,6 +70,17 @@ export class VideoViewer extends Component { this.timerStop(); } + /** + * @param {S[string]} handleVideoEventFunctions + */ + handleVideoEventFunctions = (handleVideoEventFunctions) => { + this.setState({ handleVideoEventFunctions }); + }; + + setContainerRatio = (ref) => { + this.setState({ containerRatio: ref.width / ref.height }); + }; + /** */ timerStart() { const { currentTime } = this.props; @@ -107,15 +108,11 @@ export class VideoViewer extends Component { this.setState({ time: 0 }); } - setContainerRatio = (ref) => { - this.setState({ containerRatio: ref.width / ref.height }); - }; - /* eslint-disable jsx-a11y/media-has-caption */ /** */ render() { const { - annotations, canvas, currentTime, videoOptions, windowId, paused, muted, debug, + canvas, currentTime, windowId, paused, muted, debug, } = this.props; const { containerRatio } = this.state; @@ -140,10 +137,6 @@ export class VideoViewer extends Component { ]).filter((resource) => resource.body && resource.body[0].__jsonld && resource.body[0].__jsonld.type === 'Video'), ); - // const vttContent = annotations - // .flatMap(annoPage => annoPage.json.items.map(anno => anno.body)) - // .flat().filter((body) => body.format === 'text/vtt'); - // Only one video can be displayed at a time in this implementation. const len = videoResources.length; const video = len > 0 @@ -163,12 +156,11 @@ export class VideoViewer extends Component { }; const playerStyle = { + aspectRatio: `${videoAspectRatio}`, height: (videoAspectRatio < containerRatio ? '100%' : 'auto'), width: (videoAspectRatio < containerRatio ? 'auto' : '100%'), - aspectRatio: `${videoAspectRatio}`, }; - const { handleVideoEventFunctions } = this.state; return ( @@ -176,35 +168,35 @@ export class VideoViewer extends Component { className="outerContainer" style={{ border: debug ? '6px solid blue' : 'none', - width: '100%', - height: '100%', display: 'flex', + height: '100%', justifyContent: 'center', position: 'relative', + width: '100%', }} > {video && ( <>
)} @@ -273,15 +265,12 @@ VideoViewer.propTypes = { annotations: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types // eslint-disable-next-line react/forbid-prop-types canvas: PropTypes.object, - captions: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types currentTime: PropTypes.number, debug: PropTypes.bool.isRequired, muted: PropTypes.bool, paused: PropTypes.bool, setCurrentTime: PropTypes.func, - setHasTextTrack: PropTypes.func, setPaused: PropTypes.func, - textTrackDisabled: PropTypes.bool, videoOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types windowId: PropTypes.string.isRequired, }; @@ -289,16 +278,12 @@ VideoViewer.propTypes = { VideoViewer.defaultProps = { annotations: [], canvas: {}, - captions: [], currentTime: 0, muted: false, paused: true, setCurrentTime: () => { }, - setHasTextTrack: () => { - }, setPaused: () => { }, - textTrackDisabled: true, videoOptions: {}, }; diff --git a/src/components/ViewerNavigation.js b/src/components/ViewerNavigation.js index 67a7f9e56f..4c86324c0e 100644 --- a/src/components/ViewerNavigation.js +++ b/src/components/ViewerNavigation.js @@ -12,7 +12,7 @@ export function ViewerNavigation({ setNextCanvas = () => {}, setPreviousCanvas = () => {}, t, - beforeClick, + beforeClick = () => {}, viewingDirection = '', }) { let htmlDir = 'ltr'; @@ -71,12 +71,3 @@ ViewerNavigation.propTypes = { t: PropTypes.func.isRequired, viewingDirection: PropTypes.string, }; - -ViewerNavigation.defaultProps = { - beforeClick: () => {}, - hasNextCanvas: false, - hasPreviousCanvas: false, - setNextCanvas: () => {}, - setPreviousCanvas: () => {}, - viewingDirection: '', -}; diff --git a/src/components/ViewerNavigationVideo.js b/src/components/ViewerNavigationVideo.js index de45c13746..1fd5a17ab0 100755 --- a/src/components/ViewerNavigationVideo.js +++ b/src/components/ViewerNavigationVideo.js @@ -74,11 +74,6 @@ export class ViewerNavigationVideo extends Component { } return ( - - - Current {currentTime} - - ({ - annotations: getPresentAnnotationsOnSelectedCanvases(state, {windowId}), - canvas: (getCurrentCanvas(state, {windowId}) || {}), - canvasWorld: getCurrentCanvasWorld(state, {windowId}), - currentTime: getWindowCurrentTime(state, {windowId}), + annotations: getPresentAnnotationsOnSelectedCanvases(state, { windowId }), + canvas: (getCurrentCanvas(state, { windowId }) || {}), + canvasWorld: getCurrentCanvasWorld(state, { windowId }), + currentTime: getWindowCurrentTime(state, { windowId }), debug: getConfig(state).debug || false, drawAnnotations: getConfig(state).window.forceDrawAnnotations || getCompanionWindowsForContent(state, { content: 'annotations', - windowId + windowId, }).length > 0, drawSearchAnnotations: getConfig(state).window.forceDrawAnnotations || getCompanionWindowsForContent(state, { content: 'search', - windowId + windowId, }).length > 0, - highlightAllAnnotations: getWindow(state, {windowId}).highlightAllAnnotations, - hoveredAnnotationIds: getWindow(state, {windowId}).hoveredAnnotationIds, + highlightAllAnnotations: getWindow(state, { windowId }).highlightAllAnnotations, + hoveredAnnotationIds: getWindow(state, { windowId }).hoveredAnnotationIds, palette: getTheme(state).palette, - paused: getWindowPausedStatus(state, {windowId}), + paused: getWindowPausedStatus(state, { windowId }), searchAnnotations: getSearchAnnotationsForWindow( - state, - {windowId}, + state, + { windowId }, ), - seekToTime: getWindowSeekToTime(state, {windowId}), - selectedAnnotationId: getSelectedAnnotationId(state, {windowId}), + seekToTime: getWindowSeekToTime(state, { windowId }), + selectedAnnotationId: getSelectedAnnotationId(state, { windowId }), }); /** diff --git a/src/containers/VideoViewer.js b/src/containers/VideoViewer.js index dcc8c37f4e..e6e32fa2f9 100644 --- a/src/containers/VideoViewer.js +++ b/src/containers/VideoViewer.js @@ -17,14 +17,14 @@ import { /** */ const mapStateToProps = (state, { windowId }) => ({ - annotations: getPresentAnnotationsOnSelectedCanvases(state, {windowId}), - canvas: (getCurrentCanvas(state, {windowId}) || {}), - canvasWorld: getCurrentCanvasWorld(state, {windowId}), - currentTime: getWindowCurrentTime(state, {windowId}), + annotations: getPresentAnnotationsOnSelectedCanvases(state, { windowId }), + canvas: (getCurrentCanvas(state, { windowId }) || {}), + canvasWorld: getCurrentCanvasWorld(state, { windowId }), + currentTime: getWindowCurrentTime(state, { windowId }), debug: getConfig(state).debug || false, - muted: getWindowMutedStatus(state, {windowId}), - paused: getWindowPausedStatus(state, {windowId}), - textTrackDisabled: getWindowTextTrackDisabledStatus(state, {windowId}), + muted: getWindowMutedStatus(state, { windowId }), + paused: getWindowPausedStatus(state, { windowId }), + textTrackDisabled: getWindowTextTrackDisabledStatus(state, { windowId }), videoOptions: getConfig(state).videoOptions, });