A proof of concept for Video

c65dd369 · Jack Reed · Chris Beer · acdff8b7 · c65dd369 · c65dd369
Commit c65dd369 authored Jun 15, 2020 by Jack Reed Committed by Chris Beer Oct 15, 2020
--- a/__tests__/integration/mirador/video.html
+++ b/__tests__/integration/mirador/video.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>Mirador</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+  </head>
+  <body>
+    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+    <script>document.write("<script type='text/javascript' src='../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
+    <script type="text/javascript">
+     var miradorInstance = Mirador.viewer({
+       id: 'mirador',
+       windows: [
+         {
+           manifestId: 'https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/manifest.json',
+           view: 'av'
+         },
+         {
+           manifestId: 'https://preview.iiif.io/cookbook/0026_0064_0065-opera-recipes/recipe/0064-opera-one-canvas/manifest.json',
+           view: 'av'
+         }
+      ],
+     });
+    </script>
+  </body>
+</html>
--- a/src/components/AVViewer.js
+++ b/src/components/AVViewer.js
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/** */
+export class AVViewer extends Component {
+  /** */
+  render() {
+    const { currentCanvases } = this.props;
+    const video = currentCanvases[0].getContent()[0].getBody()[0];
+    return (
+      <div style={{ display: 'flex', 'alignItems': 'center' }}>
+        <video controls>
+          <source src={video.id} type={video.format} />
+        </video>
+      </div>
+    );
+  }
+}
+
+AVViewer.propTypes = {
+  currentCanvases: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  windowId: PropTypes.string.isRequired,
+};
--- a/src/components/PrimaryWindow.js
+++ b/src/components/PrimaryWindow.js
@@ -9,6 +9,7 @@ import ns from '../config/css-ns';
 const GalleryView = lazy(() => import('../containers/GalleryView'));
 const SelectCollection = lazy(() => import('../containers/SelectCollection'));
 const WindowViewer = lazy(() => import('../containers/WindowViewer'));
+const AVViewer = lazy(() => import('../containers/AVViewer'));

 GalleryView.displayName = 'GalleryView';
 SelectCollection.displayName = 'SelectCollection';
@@ -46,6 +47,13 @@ export class PrimaryWindow extends Component {
          />
        );
      }
+      if (view === 'av') {
+        return (
+          <AVViewer
+            windowId={windowId}
+          />
+        );
+      }
      return (
        <WindowViewer
          windowId={windowId}

--- a/src/containers/AVViewer.js
+++ b/src/containers/AVViewer.js
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withTranslation } from 'react-i18next';
+import { withPlugins } from '../extend/withPlugins';
+import { AVViewer } from '../components/AVViewer';
+import { getVisibleCanvases } from '../state/selectors';
+
+/** */
+const mapStateToProps = (state, { windowId }) => (
+  {
+    currentCanvases: getVisibleCanvases(state, { windowId }) || [],
+  }
+);
+
+const enhance = compose(
+  withTranslation(),
+  connect(mapStateToProps, null),
+  withPlugins('AVViewer'),
+);
+
+export default enhance(AVViewer);