From 55350dc3fc3e01e1c37a70d49e599319dc794ded Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFs=20Poujade?= <lois.poujade@tetras-libre.fr>
Date: Wed, 14 Dec 2022 11:03:06 +0100
Subject: [PATCH] Change video player reference

For a ref to video size/position, use AnnotationsOverlayVideo canvas instead
of video element
+ always show this overlay, even if there is no annotations to display
---
 src/components/AnnotationSettings.js                        | 4 ++--
 src/components/AnnotationsOverlayVideo.js                   | 6 ++----
 src/components/VideoViewer.js                               | 5 +----
 .../{VideoViewersReferences.js => VideosReferences.js}      | 2 +-
 4 files changed, 6 insertions(+), 11 deletions(-)
 rename src/plugins/{VideoViewersReferences.js => VideosReferences.js} (78%)

diff --git a/src/components/AnnotationSettings.js b/src/components/AnnotationSettings.js
index 7bb90697e..096e1f6d5 100644
--- a/src/components/AnnotationSettings.js
+++ b/src/components/AnnotationSettings.js
@@ -5,7 +5,7 @@ import SyncDisabledIcon from '@material-ui/icons/SyncDisabled';
 import VisibilityIcon from '@material-ui/icons/VisibilitySharp';
 import VisibilityOffIcon from '@material-ui/icons/VisibilityOffSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
-import { VideoViewersReferences } from '../plugins/VideoViewersReferences';
+import { VideosReferences } from '../plugins/VideosReferences';
 
 /**
  * AnnotationSettings is a component to handle various annotation
@@ -21,7 +21,7 @@ export class AnnotationSettings extends Component {
       displayAll, displayAllDisabled, t, toggleAnnotationAutoScroll, toggleAnnotationDisplay,
     } = this.props;
 
-    const mediaIsVideo = typeof VideoViewersReferences.get(windowId) !== 'undefined';
+    const mediaIsVideo = typeof VideosReferences.get(windowId) !== 'undefined';
 
     return (
       <>
diff --git a/src/components/AnnotationsOverlayVideo.js b/src/components/AnnotationsOverlayVideo.js
index 7e1a5f436..bc4562cfc 100755
--- a/src/components/AnnotationsOverlayVideo.js
+++ b/src/components/AnnotationsOverlayVideo.js
@@ -10,6 +10,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import CanvasOverlayVideo from '../lib/CanvasOverlayVideo';
 import CanvasWorld from '../lib/CanvasWorld';
 import CanvasAnnotationDisplay from '../lib/CanvasAnnotationDisplay';
+import { VideosReferences } from '../plugins/VideosReferences';
 
 /** AnnotationsOverlayVideo - based on AnnotationsOverlay */
 export class AnnotationsOverlayVideo extends Component {
@@ -64,6 +65,7 @@ export class AnnotationsOverlayVideo extends Component {
     super(props);
 
     this.ref = React.createRef();
+    VideosReferences.set(props.windowId, this);
     this.canvasOverlay = null;
     // An initial value for the updateCanvas method
     this.updateCanvas = () => {};
@@ -621,12 +623,8 @@ export class AnnotationsOverlayVideo extends Component {
    * Renders things
    */
   render() {
-    const { annotations, searchAnnotations } = this.props;
     const { showProgress } = this.state;
     const circularProgress = (<CircularProgress style={{ left: '50%', position: 'absolute', top: '50%' }} />);
-    if (annotations.length === 0 && searchAnnotations.length === 0) {
-      return (<>{ showProgress && circularProgress }</>);
-    }
     return (
       <>
         <canvas ref={this.ref} style={{ left: 0, position: 'absolute', top: 0 }} />
diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js
index 6dd39e8be..d13ebbdaf 100644
--- a/src/components/VideoViewer.js
+++ b/src/components/VideoViewer.js
@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import AnnotationItem from '../lib/AnnotationItem';
 import AnnotationsOverlayVideo from '../containers/AnnotationsOverlayVideo';
 import WindowCanvasNavigationControlsVideo from '../containers/WindowCanvasNavigationControlsVideo';
-import { VideoViewersReferences } from '../plugins/VideoViewersReferences';
 
 /** */
 export class VideoViewer extends Component {
@@ -13,8 +12,6 @@ export class VideoViewer extends Component {
   constructor(props) {
     super(props);
     this.videoRef = React.createRef();
-    this.apiRef = React.createRef();
-    VideoViewersReferences.set(props.windowId, this);
 
     this.state = {
       start: 0,
@@ -159,7 +156,7 @@ export class VideoViewer extends Component {
       };
     }
     return (
-      <div className={classes.flexContainer} ref={this.apiRef}>
+      <div className={classes.flexContainer}>
         <div className={classes.flexFill}>
           { video && (
             <>
diff --git a/src/plugins/VideoViewersReferences.js b/src/plugins/VideosReferences.js
similarity index 78%
rename from src/plugins/VideoViewersReferences.js
rename to src/plugins/VideosReferences.js
index 1d6c0cf3a..db859ee35 100644
--- a/src/plugins/VideoViewersReferences.js
+++ b/src/plugins/VideosReferences.js
@@ -1,4 +1,4 @@
-export const VideoViewersReferences = {
+export const VideosReferences = {
   /** */
   get(windowId) {
     return this.refs[windowId];
-- 
GitLab