From bbe724b7058208c43df88cb4df8e097f44624ee9 Mon Sep 17 00:00:00 2001
From: Jack Reed <phillipjreed@gmail.com>
Date: Thu, 24 Sep 2020 07:30:49 -0600
Subject: [PATCH] Support multiple audio/video sources
---
__tests__/integration/mirador/video.html | 3 +++
src/components/AudioViewer.js | 16 +++++++++++-----
src/components/PrimaryWindow.js | 6 ++++--
src/components/VideoViewer.js | 16 +++++++++++-----
4 files changed, 29 insertions(+), 12 deletions(-)
diff --git a/__tests__/integration/mirador/video.html b/__tests__/integration/mirador/video.html
index f245fb4c2..f43c9ed04 100644
--- a/__tests__/integration/mirador/video.html
+++ b/__tests__/integration/mirador/video.html
@@ -22,6 +22,9 @@
},
{
manifestId: 'https://iiif.io/api/cookbook/recipe/0014-accompanyingcanvas/manifest.json'
+ },
+ {
+ manifestId: 'https://iiif-commons.github.io/iiif-av-component/examples/data/iiif/lunchroom-manners.json'
}
],
});
diff --git a/src/components/AudioViewer.js b/src/components/AudioViewer.js
index 9c5d6c69c..85d9548c8 100644
--- a/src/components/AudioViewer.js
+++ b/src/components/AudioViewer.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
/** */
@@ -7,13 +7,15 @@ export class AudioViewer extends Component {
/** */
render() {
const { classes, audioResources } = this.props;
- const audio = audioResources && audioResources[0];
- if (!audio) return <></>;
return (
<div className={classes.container}>
<audio controls className={classes.audio}>
- <source src={audio.id} type={audio.getFormat()} />
+ {audioResources.map(audio => (
+ <Fragment key={audio.id}>
+ <source src={audio.id} type={audio.getFormat()} />
+ </Fragment>
+ ))}
</audio>
</div>
);
@@ -22,6 +24,10 @@ export class AudioViewer extends Component {
}
AudioViewer.propTypes = {
- audioResources: PropTypes.arrayOf(PropTypes.object).isRequired,
+ audioResources: PropTypes.arrayOf(PropTypes.object),
classes: PropTypes.objectOf(PropTypes.string).isRequired,
};
+
+AudioViewer.defaultProps = {
+ audioResources: [],
+};
diff --git a/src/components/PrimaryWindow.js b/src/components/PrimaryWindow.js
index 97728d889..f7ad1d18b 100644
--- a/src/components/PrimaryWindow.js
+++ b/src/components/PrimaryWindow.js
@@ -89,19 +89,21 @@ export class PrimaryWindow extends Component {
}
PrimaryWindow.propTypes = {
- audioResources: PropTypes.arrayOf(PropTypes.object).isRequired,
+ audioResources: PropTypes.arrayOf(PropTypes.object),
classes: PropTypes.objectOf(PropTypes.string).isRequired,
isCollection: PropTypes.bool,
isCollectionDialogVisible: PropTypes.bool,
isFetching: PropTypes.bool,
- videoResources: PropTypes.arrayOf(PropTypes.object).isRequired,
+ videoResources: PropTypes.arrayOf(PropTypes.object),
view: PropTypes.string,
windowId: PropTypes.string.isRequired,
};
PrimaryWindow.defaultProps = {
+ audioResources: [],
isCollection: false,
isCollectionDialogVisible: false,
isFetching: false,
+ videoResources: [],
view: undefined,
};
diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js
index 7a31969fa..3e72dbcc2 100644
--- a/src/components/VideoViewer.js
+++ b/src/components/VideoViewer.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
/** */
@@ -7,13 +7,15 @@ export class VideoViewer extends Component {
/** */
render() {
const { classes, videoResources } = this.props;
- const video = videoResources && videoResources[0];
- if (!video) return <></>;
return (
<div className={classes.container}>
<video controls className={classes.video}>
- <source src={video.id} type={video.getFormat()} />
+ {videoResources.map(video => (
+ <Fragment key={video.id}>
+ <source src={video.id} type={video.getFormat()} />
+ </Fragment>
+ ))}
</video>
</div>
);
@@ -23,5 +25,9 @@ export class VideoViewer extends Component {
VideoViewer.propTypes = {
classes: PropTypes.objectOf(PropTypes.string).isRequired,
- videoResources: PropTypes.arrayOf(PropTypes.object).isRequired,
+ videoResources: PropTypes.arrayOf(PropTypes.object),
+};
+
+VideoViewer.defaultProps = {
+ videoResources: [],
};
--
GitLab