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

@@ -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 (
       <>

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

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 && (
             <>

src/plugins/VideoViewersReferences.js → src/plugins/VideosReferences.js

-export const VideoViewersReferences = {
+export const VideosReferences = {
   /** */
   get(windowId) {
     return this.refs[windowId];