Support multiple audio/video sources

__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'
          }
       ],
      });

src/components/AudioViewer.js

-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}>
+          {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: [],
+};

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,
 };

src/components/VideoViewer.js

-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}>
+          {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: [],
 };