diff --git a/__tests__/integration/mirador/video.html b/__tests__/integration/mirador/video.html index f245fb4c2d21320e5958cf36ae37082ed5ad85a8..f43c9ed04cd593ac04afe4498cce8d7b81c495f0 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 9c5d6c69c51fc8a8944881f33d5421b7eefafac3..85d9548c8850ed03414e8a03cf72d1fcdcc2e52d 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 97728d88907f03a67e4d534209d92601db75ce71..f7ad1d18b34ec846ba183d9078cf06d974747eb6 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 7a31969faaf5c1c7547d97a13af4d5cdbe8c089d..3e72dbcc28217cd1351499b50e7cd09edf965506 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: [], };