[F] Support webVTT captions on video resources

client/src/backend/components/resource/form/kind/Video/Video.styles.js

@@ -0,0 +1,21 @@
+import styled from "@emotion/styled";
+
+export const Group = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+
+  > * {
+    inline-size: max(200px, min(calc(50% - 20px), 400px));
+    display: flex;
+    flex-direction: column;
+
+    > div {
+      flex-grow: 1;
+    }
+
+    > label {
+      block-size: 15px;
+    }
+  }
+`;

client/src/backend/components/resource/form/kind/Video.js → client/src/backend/components/resource/form/kind/Video/index.js

@@ -2,6 +2,7 @@ import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 import Form from "global/components/form";
 import { withTranslation } from "react-i18next";
+import * as Styled from "./Video.styles";
 
 class ResourceFormKindVideo extends PureComponent {
   static displayName = "Resource.Form.Kind.Video";
@@ -42,15 +43,26 @@ class ResourceFormKindVideo extends PureComponent {
 
   renderVideoAttachmentForm() {
     return (
-      <Form.Upload
-        layout="square"
-        label={this.props.t("resources.new.video_file")}
-        accepts="video"
-        readFrom="attributes[attachmentFileName]"
-        name="attributes[attachment]"
-        remove="attributes[removeAttachment]"
-        {...this.props}
-      />
+      <Styled.Group>
+        <Form.Upload
+          layout="square"
+          label={this.props.t("resources.new.video_file")}
+          accepts="video"
+          readFrom="attributes[attachmentFileName]"
+          name="attributes[attachment]"
+          remove="attributes[removeAttachment]"
+          {...this.props}
+        />
+        <Form.Upload
+          layout="landscape"
+          label={this.props.t("resources.new.captions")}
+          accepts="vtt"
+          readFrom="attributes[captionsTrackFileName]"
+          name="attributes[captionsTrack]"
+          remove="attributes[removeCaptionsTrack]"
+          {...this.props}
+        />
+      </Styled.Group>
     );
   }
 

client/src/backend/containers/resource/breadcrumbs.js

@@ -24,7 +24,7 @@ export const getBreadcrumbs = (resource, project, belongsToJournalIssue, t) => {
           }
         ];
 
-  return belongsToJournalIssue
+  return belongsToJournalIssue && project.relationships.journal
     ? [
         {
           to: lh.link("backendJournals"),

client/src/config/app/locale/en-US/json/backend/resources.json

@@ -59,7 +59,8 @@
       "presentation": "Presentation",
       "interactive": "Interactive",
       "resource_kind": "Resource Kind",
-      "kind": "Kind"
+      "kind": "Kind",
+      "captions": "Captions"
     },
     "properties": {
       "title_instructions": "This field accepts Markdown.",

client/src/frontend/components/resource-player/Video/index.js

@@ -104,23 +104,49 @@ class ResourcePlayerVideo extends Component {
     this.props.dispatch(notificationActions.addNotification(notification));
   };
 
+  trackRef = el => {
+    if (!el) return;
+
+    el.addEventListener("load", () => {
+      if (!el.track?.cues) return;
+      Array.from(el.track.cues).forEach(c => {
+        // eslint-disable-next-line no-param-reassign
+        c.line = -3;
+      });
+    });
+  };
+
   renderFileVideo() {
     if (!this.state.inBrowser) return null;
 
     const {
       variantPosterStyles,
-      attachmentStyles
+      attachmentStyles,
+      captionsTrackUrl
     } = this.props.resource.attributes;
 
+    // Use the proxy if running over ports in dev to avoid CORS error
+    const captionsSrc =
+      process.env.NODE_ENV === "development"
+        ? captionsTrackUrl.replace("3020", "3010")
+        : captionsTrackUrl;
+
     return (
       <Styled.VideoWrapper>
         <Video
           ref={this.playerRef}
-          controls={["PlayPause", "Seek", "Time", "Volume", "Fullscreen"]}
           poster={variantPosterStyles.mediumLandscape}
           onError={this.handleError}
         >
           <source src={attachmentStyles.original} type="video/mp4" />
+          {!!captionsTrackUrl && (
+            <track
+              kind="captions"
+              src={captionsSrc}
+              srcLang="en"
+              ref={this.trackRef}
+            />
+          )}
         </Video>
       </Styled.VideoWrapper>
     );

client/src/frontend/components/resource-player/Video/styles.js

@@ -6,6 +6,13 @@ export const VideoWrapper = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
+
+  video::cue {
+    font-size: 16px;
+    background: rgba(0, 0, 0, 0.75);
+    color: var(--color-base-neutral-white);
+    font-family: var(--font-family-heading);
+  }
 `;
 
 export const Video = styled.iframe`

client/src/global/components/form/Upload/index.js

@@ -57,6 +57,10 @@ export class FormUpload extends Component {
       accepts: "application/json",
       extensions: "json"
     },
+    vtt: {
+      accepts: "text/vtt",
+      extensions: "vtt"
+    },
     any: {
       accepts: null,
       extensions: null

client/src/theme/styles/vendor/react-html5video.js

@@ -158,6 +158,16 @@ export default `
 
   .rh5v-Captions_component {
     position: relative;
+
+    &:has(.rh5v-Captions_activeTrackItem) {
+      svg {
+        fill: var(--hover-color);
+
+        &:hover {
+          fill: var(--color-interaction-dark);
+        }
+      }
+    }
   }
 
   .rh5v-Captions_component:hover {
@@ -178,7 +188,8 @@ export default `
   }
 
   .rh5v-Captions_icon {
-    padding: 5px;
+    padding: 1px;
+    margin-block-start: 4px;
   }
 
   .rh5v-Captions_trackList {