Merge pull request #499 from performant-software/feature/archnet1476_video_captions

Archnet #1476 - Video captions

Author: dleadbetter

packages/semantic-ui/src/components/LazyMedia.js

@@ -16,7 +16,7 @@ import i18n from '../i18n/i18n';
 import LazyAudio from './LazyAudio';
 import LazyDocument from './LazyDocument';
 import LazyImage from './LazyImage';
-import LazyVideo from './LazyVideo';
+import LazyVideo, { type Transcription } from './LazyVideo';
 
 type Props = {
   children?: Node,
@@ -27,7 +27,8 @@ type Props = {
   onUpload: (file: File) => void,
   preview?: string,
   size?: string,
-  src?: string
+  src?: string,
+  transcriptions?: Array<Transcription>
 };
 
 const ContentTypes = {
@@ -146,6 +147,7 @@ const LazyMedia: ComponentType<any> = (props: Props) => {
           preview={preview}
           src={source}
           size={props.size}
+          transcriptions={props.transcriptions}
         >
           { renderChildren() }
         </LazyVideo>

packages/semantic-ui/src/components/LazyVideo.js

@@ -19,7 +19,7 @@ import {
 import i18n from '../i18n/i18n';
 import DownloadButton from './DownloadButton';
 import LazyLoader from './LazyLoader';
-import VideoPlayer from './VideoPlayer';
+import VideoPlayer, { type Transcription } from './VideoPlayer';
 import './LazyVideo.css';
 
 type Props = {
@@ -35,7 +35,8 @@ type Props = {
   playButtonLabel?: string,
   preview?: ?string,
   size?: string,
-  src?: string
+  src?: string,
+  transcriptions?: Array<Transcription>
 };
 
 const LazyVideo = (props: Props) => {
@@ -184,6 +185,7 @@ const LazyVideo = (props: Props) => {
           open={modal}
           placeholder={props.preview}
           size='large'
+          transcriptions={props.transcriptions}
           video={props.src}
         />
       )}
@@ -201,3 +203,7 @@ LazyVideo.defaultProps = {
 };
 
 export default LazyVideo;
+
+export type {
+  Transcription
+};

packages/semantic-ui/src/components/MediaGallery.js

@@ -8,7 +8,7 @@ import {
   Transition
 } from 'semantic-ui-react';
 import PlayButton from './PlayButton';
-import VideoPlayer from './VideoPlayer';
+import VideoPlayer, { type Transcription } from './VideoPlayer';
 import VideoPlayerButton from './VideoPlayerButton';
 import './MediaGallery.css';
 
@@ -17,6 +17,7 @@ type Item = {
   embedded?: boolean,
   preview?: string,
   src?: string,
+  transcriptions?: Array<Transcription>,
   type: 'image' | 'video'
 };
 
@@ -136,6 +137,7 @@ const MediaGallery = (props: Props) => {
               open={video}
               placeholder={props.item.preview}
               size='huge'
+              transcriptions={props.item.transcriptions}
               video={props.item.src}
             />
           )}

packages/semantic-ui/src/components/VideoPlayer.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { ModalContext } from '@performant-software/shared-components';
+import { ModalContext, VideoTrack } from '@performant-software/shared-components';
 import React, {
   useEffect,
   useRef,
@@ -13,9 +13,17 @@ import {
   Modal,
   Ref
 } from 'semantic-ui-react';
+import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import './VideoPlayer.css';
 
+export type Transcription = {
+  default?: boolean,
+  label: string,
+  language: string,
+  src: string
+};
+
 type Props = {
   autoPlay?: boolean,
   embedded?: boolean,
@@ -25,6 +33,7 @@ type Props = {
   placeholder?: ?string,
   placeholderAlt?: string,
   size?: string,
+  transcriptions?: Array<Transcription>,
   video: string
 };
 
@@ -85,7 +94,18 @@ const VideoPlayer = (props: Props) => {
                 controls
                 onError={() => setError(true)}
                 src={props.video}
-              />
+              >
+                { _.map(props.transcriptions, (transcription) => (
+                  <VideoTrack
+                    default={transcription.default}
+                    key={transcription.language}
+                    kind='captions'
+                    label={transcription.label}
+                    srcLang={transcription.language}
+                    src={transcription.src}
+                  />
+                ))}
+              </video>
             )}
           </Modal.Content>
         </Modal>

packages/shared/src/components/VideoTrack.js

@@ -0,0 +1,41 @@
+// @flow
+
+import React, { useEffect, useMemo, useState } from 'react';
+
+type Props = {
+  src: string
+};
+
+const VideoTrack = (props: Props) => {
+  const [content, setContent] = useState();
+
+  /**
+   * Memo-izes the local file URL.
+   */
+  const src = useMemo(() => {
+    const blob = new Blob([content], { type: 'text/plain' });
+    return URL.createObjectURL(blob);
+  }, [content]);
+
+  /**
+   * Fetches the `src` attribute to store on the state. This will avoid any cross-domain issue with loading VTTs.
+   */
+  useEffect(() => {
+    fetch(props.src)
+      .then((response) => response.text())
+      .then(setContent);
+  }, [props.src]);
+
+  if (!src) {
+    return null;
+  }
+
+  return (
+    <track
+      {...props}
+      src={src}
+    />
+  );
+};
+
+export default VideoTrack;

packages/shared/src/index.js

@@ -8,6 +8,7 @@ export { default as GoogleScript } from './components/GoogleScript';
 export { default as InfiniteScroll } from './components/InfiniteScroll';
 export { default as Keyboard } from './components/Keyboard';
 export { default as RichTextArea } from './components/RichTextArea';
+export { default as VideoTrack } from './components/VideoTrack';
 
 // Context
 export { default as ModalContext } from './context/ModalContext';

packages/storybook/src/assets/test.vtt

@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00:00.500 --> 00:00:02.000
+The Web is always changing
+
+00:00:02.500 --> 00:00:04.300
+and the way we access it is changing

packages/storybook/src/semantic-ui/LazyMedia.stories.js

@@ -6,6 +6,7 @@ import LazyMedia from '../../../semantic-ui/src/components/LazyMedia';
 import audio from '../assets/SampleAudio.mp3';
 import image from '../assets/test-image.jpg';
 import document from '../assets/sample2.pdf';
+import video from '../assets/SampleVideo.mp4';
 
 export default {
   title: 'Components/Semantic UI/LazyMedia',
@@ -37,6 +38,25 @@ export const Image = () => (
   />
 );
 
+export const Video = () => (
+  <LazyMedia
+    contentType='video/mp4'
+    src={video}
+  />
+);
+
+export const VideoWithCaptions = () => (
+  <LazyMedia
+    contentType='video/mp4'
+    src={video}
+    transcriptions={[{
+      label: 'English',
+      language: 'en',
+      src: '/src/assets/test.vtt'
+    }]}
+  />
+);
+
 export const Uploadable = () => {
   const [file, setFile] = useState();
 

packages/storybook/src/semantic-ui/LazyVideo.stories.js

@@ -269,3 +269,18 @@ export const Downloadable = () => (
     src={video}
   />
 );
+
+export const Transcriptions = () => (
+  <LazyVideo
+    image={{
+      alt: 'Test Image'
+    }}
+    preview={image}
+    src={video}
+    transcriptions={[{
+      label: 'English',
+      language: 'en',
+      src: '/src/assets/test.vtt'
+    }]}
+  />
+);

packages/storybook/src/semantic-ui/MediaGallery.stories.js

@@ -79,3 +79,19 @@ export const Video = () => (
     visible
   />
 );
+
+export const VideoWithCaptions = () => (
+  <MediaGallery
+    item={{
+      src: video,
+      transcriptions: [{
+        label: 'English',
+        language: 'en',
+        src: '/src/assets/test.vtt'
+      }],
+      type: 'video'
+    }}
+    onClose={action('close')}
+    visible
+  />
+);