Basic support for subtitles/captions

src/components/VideoViewer.js

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

src/containers/VideoViewer.js

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

src/lib/MiradorCanvas.js

@@ -99,6 +99,15 @@ export default class MiradorCanvas {
     return flatten(resources.filter((resource) => resource.getProperty('type') === 'Sound'));
   }
 
+  /** */
+  get vttContent() {
+    const resources = flattenDeep([
+      this.canvas.getContent().map(i => i.getBody()),
+    ]);
+
+    return flatten(resources.filter((resource) => resource.getProperty('format') === 'text/vtt'));
+  }
+
   /** */
   get resourceAnnotations() {
     return flattenDeep([

src/state/selectors/canvases.js

@@ -192,6 +192,14 @@ export const getVisibleCanvasVideoResources = createSelector(
     .map(canvas => new MiradorCanvas(canvas).videoResources)),
 );
 
+export const getVisibleCanvasCaptions = createSelector(
+  [
+    getVisibleCanvases,
+  ],
+  canvases => flatten(canvases
+    .map(canvas => new MiradorCanvas(canvas).vttContent)),
+);
+
 export const getVisibleCanvasAudioResources = createSelector(
   [
     getVisibleCanvases,