diff --git a/__tests__/integration/mirador/video.html b/__tests__/integration/mirador/video.html
new file mode 100644
index 0000000000000000000000000000000000000000..45c8db36dbbbd11ad70e73f814a55bfcf9eecf03
--- /dev/null
+++ b/__tests__/integration/mirador/video.html
@@ -0,0 +1,29 @@
+<!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>
diff --git a/src/components/AVViewer.js b/src/components/AVViewer.js
new file mode 100644
index 0000000000000000000000000000000000000000..d06c1cfa06a4e2ee8e67fa9a3f8fefc7d1cf9338
--- /dev/null
+++ b/src/components/AVViewer.js
@@ -0,0 +1,23 @@
+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,
+};
diff --git a/src/components/PrimaryWindow.js b/src/components/PrimaryWindow.js
index 05a9c2f55ac9bc13c4876183db250f65f3db644e..df0e9e89ac23a8ec42aa5479329cd139e5b893dd 100644
--- 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}
diff --git a/src/containers/AVViewer.js b/src/containers/AVViewer.js
new file mode 100644
index 0000000000000000000000000000000000000000..b6e452ef3a26f5fcb633b3fccc4f24fad51ab1a7
--- /dev/null
+++ b/src/containers/AVViewer.js
@@ -0,0 +1,21 @@
+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);