Expose VideoViewerReferences like OSDReferences

OSDReferences is a list of ref to OpenSeadragon instances, used in
Mirador as an image viewer. This commit exposes a VideoViewerReferences,
to allows the annotations plugins to get video canvas dimensions and DOM
element

+ removed build warning
+ disable "prepare" script to speed up build

babel.config.js

@@ -47,44 +47,20 @@ module.exports = function (api) {
   const plugins = [
     'babel-plugin-macros',
     '@babel/plugin-transform-destructuring',
-    [
-      '@babel/plugin-proposal-class-properties',
-      {
-        loose: true,
-      },
-    ],
-    [
-      '@babel/plugin-proposal-object-rest-spread',
-      {
-        useBuiltIns: true,
-      },
-    ],
-    [
-      '@babel/plugin-transform-runtime',
-      {
+    // TODO loose: which options is ignored in depencies ?
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
+    ['@babel/plugin-transform-runtime', {
       corejs: false,
       helpers: false, // Needed to support IE/Edge
       regenerator: true,
     },
     ],
-    [
-      '@babel/plugin-transform-regenerator',
-      {
-        async: false,
-      },
-    ],
-    ['transform-react-remove-prop-types',
-      {
-        ignoreFilenames: ['node_modules'],
-        removeImport: true,
-      },
-    ],
-    ['lodash', {
-      id: [
-        'lodash',
-      ],
-    },
-    ],
+    ['@babel/plugin-transform-regenerator', { async: false }],
+    ['transform-react-remove-prop-types', { ignoreFilenames: ['node_modules'], removeImport: true }],
+    ['lodash', { id: ['lodash'] }],
   ].filter(Boolean);
 
   return {

package.json

@@ -9,7 +9,6 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "prepare": "npm run clean && npm run build:es && npm run build:cjs",
     "clean": "rm -rf ./dist",
     "lint": "node_modules/.bin/eslint ./ && npm run lint:translations && npm run lint:containers",
     "lint:containers": "node ./scripts/container-lint.js",

src/components/VideoViewer.js

@@ -5,6 +5,7 @@ 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 {
@@ -12,6 +13,8 @@ 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,
@@ -156,7 +159,7 @@ export class VideoViewer extends Component {
       };
     }
     return (
-      <div className={classes.flexContainer}>
+      <div className={classes.flexContainer} ref={this.apiRef}>
         <div className={classes.flexFill}>
           { video && (
             <>

src/lib/AnnotationItem.js

@@ -138,6 +138,7 @@ export default class AnnotationItem {
         break;
       case 'object':
         temporalfragmentSelector = selector.find(s => s.type && s.type === 'FragmentSelector');
+        // TODO regex for t=5,10 t=,10 t=5 ? cf w3c media fragments
         match = temporalfragmentSelector && temporalfragmentSelector.value.match(/t=(.*?)(&|$)/);
         break;
       default:

src/plugins/VideoViewersReferences.js

+export const VideoViewersReferences = {
+  /** */
+  get(windowId) {
+    return this.refs[windowId];
+  },
+  refs: {},
+  /** */
+  set(windowId, ref) {
+    this.refs[windowId] = ref;
+  },
+};