Merge pull request #3379 from ProjectMirador/fix-av

Fixes an issue with A/V to allow configurable element attribution and crossOrigin options

__tests__/integration/mirador/video.html

@@ -24,7 +24,7 @@
            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'
+           manifestId: 'https://preview.iiif.io/cookbook/0219-using-caption-file/recipe/0219-using-caption-file/manifest.json'
          }
       ],
      });

__tests__/src/components/AudioViewer.test.js

@@ -7,6 +7,7 @@ function createWrapper(props, suspenseFallback) {
   return shallow(
     <AudioViewer
       classes={{}}
+      audioOptions={{ crossOrigin: 'anonymous' }}
       {...props}
     />,
   );
@@ -22,8 +23,16 @@ describe('AudioViewer', () => {
           { getFormat: () => 'video/mp4', id: 2 },
         ],
       }, true);
-      expect(wrapper.contains(<source src="1" type="video/mp4" />));
-      expect(wrapper.contains(<source src="2" type="video/mp4" />));
+      expect(wrapper.contains(<source src={1} type="video/mp4" />)).toBe(true);
+      expect(wrapper.contains(<source src={2} type="video/mp4" />)).toBe(true);
+    });
+    it('passes through configurable options', () => {
+      wrapper = createWrapper({
+        audioResources: [
+          { getFormat: () => 'audio/mp3', id: 1 },
+        ],
+      }, true);
+      expect(wrapper.exists('audio[crossOrigin="anonymous"]')).toBe(true); // eslint-disable-line jsx-a11y/media-has-caption
     });
     it('captions', () => {
       wrapper = createWrapper({
@@ -31,12 +40,12 @@ describe('AudioViewer', () => {
           { getFormat: () => 'video/mp4', id: 1 },
         ],
         captions: [
-          { getLabel: () => 'English', getProperty: () => 'en', id: 1 },
-          { getLabel: () => 'French', getProperty: () => 'fr', id: 2 },
+          { getDefaultLabel: () => 'English', getProperty: () => 'en', id: 1 },
+          { getDefaultLabel: () => 'French', getProperty: () => 'fr', id: 2 },
         ],
       }, true);
-      expect(wrapper.contains(<track src="1" label="English" srcLang="en" />));
-      expect(wrapper.contains(<track src="2" label="French" srcLang="fr" />));
+      expect(wrapper.contains(<track src={1} label="English" srcLang="en" />)).toBe(true);
+      expect(wrapper.contains(<track src={2} label="French" srcLang="fr" />)).toBe(true);
     });
   });
 });

__tests__/src/components/VideoViewer.test.js

@@ -7,6 +7,7 @@ function createWrapper(props, suspenseFallback) {
   return shallow(
     <VideoViewer
       classes={{}}
+      videoOptions={{ crossOrigin: 'anonymous' }}
       {...props}
     />,
   );
@@ -22,21 +23,29 @@ describe('VideoViewer', () => {
           { getFormat: () => 'video/mp4', id: 2 },
         ],
       }, true);
-      expect(wrapper.contains(<source src="1" type="video/mp4" />));
-      expect(wrapper.contains(<source src="2" type="video/mp4" />));
+      expect(wrapper.contains(<source src={1} type="video/mp4" />)).toBe(true);
+      expect(wrapper.contains(<source src={2} type="video/mp4" />)).toBe(true);
+    });
+    it('passes through configurable options', () => {
+      wrapper = createWrapper({
+        videoResources: [
+          { getFormat: () => 'video/mp4', id: 1 },
+        ],
+      }, true);
+      expect(wrapper.exists('video[crossOrigin="anonymous"]')).toBe(true); // eslint-disable-line jsx-a11y/media-has-caption
     });
     it('captions', () => {
       wrapper = createWrapper({
         captions: [
-          { getLabel: () => 'English', getProperty: () => 'en', id: 1 },
-          { getLabel: () => 'French', getProperty: () => 'fr', id: 2 },
+          { getDefaultLabel: () => 'English', getProperty: () => 'en', id: 1 },
+          { getDefaultLabel: () => 'French', getProperty: () => 'fr', id: 2 },
         ],
         videoResources: [
           { getFormat: () => 'video/mp4', id: 1 },
         ],
       }, true);
-      expect(wrapper.contains(<track src="1" label="English" srcLang="en" />));
-      expect(wrapper.contains(<track src="2" label="French" srcLang="fr" />));
+      expect(wrapper.contains(<track src={1} label="English" srcLang="en" />)).toBe(true);
+      expect(wrapper.contains(<track src={2} label="French" srcLang="fr" />)).toBe(true);
     });
   });
 });

src/components/AudioViewer.js

@@ -6,16 +6,23 @@ export class AudioViewer extends Component {
   /* eslint-disable jsx-a11y/media-has-caption */
   /** */
   render() {
-    const { classes, audioResources } = this.props;
+    const {
+      captions, classes, audioOptions, audioResources,
+    } = this.props;
 
     return (
       <div className={classes.container}>
-        <audio controls className={classes.audio}>
+        <audio className={classes.audio} {...audioOptions}>
           {audioResources.map(audio => (
             <Fragment key={audio.id}>
               <source src={audio.id} type={audio.getFormat()} />
             </Fragment>
           ))}
+          {captions.map(caption => (
+            <Fragment key={caption.id}>
+              <track src={caption.id} label={caption.getDefaultLabel()} srcLang={caption.getProperty('language')} />
+            </Fragment>
+          ))}
         </audio>
       </div>
     );
@@ -24,10 +31,14 @@ export class AudioViewer extends Component {
 }
 
 AudioViewer.propTypes = {
+  audioOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   audioResources: PropTypes.arrayOf(PropTypes.object),
+  captions: PropTypes.arrayOf(PropTypes.object),
   classes: PropTypes.objectOf(PropTypes.string).isRequired,
 };
 
 AudioViewer.defaultProps = {
+  audioOptions: {},
   audioResources: [],
+  captions: [],
 };

src/components/VideoViewer.js

@@ -6,10 +6,12 @@ export class VideoViewer extends Component {
   /* eslint-disable jsx-a11y/media-has-caption */
   /** */
   render() {
-    const { captions, classes, videoResources } = this.props;
+    const {
+      captions, classes, videoOptions, videoResources,
+    } = this.props;
     return (
       <div className={classes.container}>
-        <video controls className={classes.video}>
+        <video className={classes.video} {...videoOptions}>
           {videoResources.map(video => (
             <Fragment key={video.id}>
               <source src={video.id} type={video.getFormat()} />
@@ -17,7 +19,7 @@ export class VideoViewer extends Component {
           ))}
           {captions.map(caption => (
             <Fragment key={caption.id}>
-              <track src={caption.id} label={caption.getLabel()} srcLang={caption.getProperty('language')} />
+              <track src={caption.id} label={caption.getDefaultLabel()} srcLang={caption.getProperty('language')} />
             </Fragment>
           ))}
         </video>
@@ -30,10 +32,12 @@ export class VideoViewer extends Component {
 VideoViewer.propTypes = {
   captions: PropTypes.arrayOf(PropTypes.object),
   classes: PropTypes.objectOf(PropTypes.string).isRequired,
+  videoOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   videoResources: PropTypes.arrayOf(PropTypes.object),
 };
 
 VideoViewer.defaultProps = {
   captions: [],
+  videoOptions: {},
   videoResources: [],
 };

src/config/settings.js

@@ -344,6 +344,14 @@ export default {
     windows: true,
     workspace: true,
   },
+  audioOptions: { // Additional props passed to <audio> element
+    controls: true,
+    crossOrigin: 'anonymous',
+  },
+  videoOptions: { // Additional props passed to <audio> element
+    controls: true,
+    crossOrigin: 'anonymous',
+  },
   auth: {
     serviceProfiles: [
       { profile: 'http://iiif.io/api/auth/1/external', external: true },

src/containers/AudioViewer.js

@@ -4,12 +4,14 @@ import { withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core';
 import { withPlugins } from '../extend/withPlugins';
 import { AudioViewer } from '../components/AudioViewer';
-import { getVisibleCanvasAudioResources } from '../state/selectors';
+import { getConfig, getVisibleCanvasAudioResources, getVisibleCanvasCaptions } from '../state/selectors';
 
 /** */
 const mapStateToProps = (state, { windowId }) => (
   {
+    audioOptions: getConfig(state).audioOptions,
     audioResources: getVisibleCanvasAudioResources(state, { windowId }) || [],
+    captions: getVisibleCanvasCaptions(state, { windowId }) || [],
   }
 );
 

src/containers/VideoViewer.js

@@ -4,12 +4,13 @@ import { withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core';
 import { withPlugins } from '../extend/withPlugins';
 import { VideoViewer } from '../components/VideoViewer';
-import { getVisibleCanvasCaptions, getVisibleCanvasVideoResources } from '../state/selectors';
+import { getConfig, getVisibleCanvasCaptions, getVisibleCanvasVideoResources } from '../state/selectors';
 
 /** */
 const mapStateToProps = (state, { windowId }) => (
   {
     captions: getVisibleCanvasCaptions(state, { windowId }) || [],
+    videoOptions: getConfig(state).videoOptions,
     videoResources: getVisibleCanvasVideoResources(state, { windowId }) || [],
   }
 );