View the transcript

app/assets/stylesheets/media.scss

@@ -363,7 +363,7 @@
       }
     }
 
-    .metadataList, .rightsList, .contentsList {
+    .metadataList, .rightsList, .contentsList, .transcript {
       color: var(--text-color);
       padding: var(--drawer-content-padding);
       font-family: "Roboto", "Helvetica", "Arial", sans-serif;
@@ -385,6 +385,12 @@
       }
     }
 
+    .transcript {
+      .cue {
+        margin-bottom: 1em;
+      }
+    }
+
     .default-thumbnail-icon {
       font-size: 64px;
     }

app/components/embed/media_with_companion_windows_component.html.erb

@@ -57,9 +57,12 @@
         <button data-action="click->media#displayMetadata" data-media-target="leftButton" class="active" aria-label="About this item" aria-controls="about" aria-selected="true" role="tab">
           <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>
         </button>
-          <button data-action="click->media#displayContents" data-media-target="leftButton"  aria-label="Content" aria-controls="media-content" role="tab">
+        <button data-action="click->media#displayContents" data-media-target="leftButton"  aria-label="Content" aria-controls="media-content" role="tab">
           <svg class="MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"></path></svg>
         </button>
+        <button data-action="click->media#displayTranscript" data-media-target="leftButton"  aria-label="Transcript" aria-controls="media-content" role="tab">
+          <svg class="MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"></path></svg>
+        </button>
         <button data-action="click->media#displayRights" data-media-target="leftButton" aria-label="Use and reproduction" aria-controls="rights" role="tab">
           <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.08 10.86c.05-.33.16-.62.3-.87s.34-.46.59-.62c.24-.15.54-.22.91-.23.23.01.44.05.63.13.2.09.38.21.52.36s.25.33.34.53.13.42.14.64h1.79c-.02-.47-.11-.9-.28-1.29s-.4-.73-.7-1.01-.66-.5-1.08-.66-.88-.23-1.39-.23c-.65 0-1.22.11-1.7.34s-.88.53-1.2.92-.56.84-.71 1.36S8 11.29 8 11.87v.27c0 .58.08 1.12.23 1.64s.39.97.71 1.35.72.69 1.2.91c.48.22 1.05.34 1.7.34.47 0 .91-.08 1.32-.23s.77-.36 1.08-.63.56-.58.74-.94.29-.74.3-1.15h-1.79c-.01.21-.06.4-.15.58s-.21.33-.36.46-.32.23-.52.3c-.19.07-.39.09-.6.1-.36-.01-.66-.08-.89-.23-.25-.16-.45-.37-.59-.62s-.25-.55-.3-.88-.08-.67-.08-1v-.27c0-.35.03-.68.08-1.01zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg>
         </button>
@@ -71,13 +74,21 @@
           </div>
           <dl data-controller="iiif-metadata" class="metadataList" data-iiif-metadata-url-value="<%= manifest_json_url %>"></dl>
         </section>
+
         <section id="media-content" data-media-target="contents" role="tabpanel" hidden>
           <div class="header-background">
             <h3>Media Content</h3>
           </div>
-
           <ul class="contentsList" data-media-tag-target="list" role="tablist"></ul>
         </section>
+
+        <section id="transcript" data-media-target="transcript" role="tabpanel" hidden>
+          <div class="header-background">
+            <h3>Transcript</h3>
+          </div>
+          <div class="transcript" data-controller="transcript" data-action="media-loaded@window->transcript#load"></div>
+        </section>
+
         <section id="rights" data-media-target="rights" role="tabpanel" hidden>
           <div class="header-background">
             <h3>Rights</h3>

app/javascript/src/controllers/media_controller.js

@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 import { EmbedThis } from '../modules/embed_this.js';
 
 export default class extends Controller {
-  static targets = [ "leftDrawer", "leftButton", "metadata", "shareModal", "contents",
+  static targets = [ "leftDrawer", "leftButton", "metadata", "shareModal", "contents", "transcript",
                      "downloadModal", "rights", "accessibility", "modalComponentsPopover"]
   connect() {
     this.element.style.display = ''
@@ -54,6 +54,8 @@ export default class extends Controller {
     this.metadataTarget.hidden = false
     this.contentsTarget.hidden = true
     this.rightsTarget.hidden = true
+    this.transcriptTarget.hidden = true
+
   }
 
   displayContents(evt) {
@@ -62,6 +64,7 @@ export default class extends Controller {
     this.metadataTarget.hidden = true
     this.contentsTarget.hidden = false
     this.rightsTarget.hidden = true
+    this.transcriptTarget.hidden = true
   }
 
   displayRights(evt) {
@@ -70,6 +73,16 @@ export default class extends Controller {
     this.metadataTarget.hidden = true
     this.contentsTarget.hidden = true
     this.rightsTarget.hidden = false
+    this.transcriptTarget.hidden = true
+  }
+
+  displayTranscript(evt) {
+    this.setLeftButtonActive(evt)
+
+    this.metadataTarget.hidden = true
+    this.contentsTarget.hidden = true
+    this.rightsTarget.hidden = true
+    this.transcriptTarget.hidden = false
   }
 
   setLeftButtonActive(evt) {

app/javascript/src/controllers/media_tag_controller.js

@@ -44,7 +44,11 @@ export default class extends Controller {
   initializeVideoJSPlayer() {
     this.mediaTagTargets.forEach((mediaTag) => {
       mediaTag.classList.add('video-js', 'vjs-default-skin')
-      videojs(mediaTag.id)
+      const player = videojs(mediaTag.id)
+      player.on('loadedmetadata', () => {
+        const event = new CustomEvent('media-loaded', { detail: player })
+        window.dispatchEvent(event)
+      })
     })
   }
 

app/javascript/src/controllers/transcript_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+import videojs from 'video.js';
+
+// This is tightly coupled to VideoJS's tracks implementation, because VideoJS removes the tracks from the
+// native player when it initializes.  This depends on the media_tag_controller.js emitting a custom media-loaded
+// event.  The load method on this class is called when that happens, and draws the transcript.
+export default class extends Controller {
+  static targets = [ ]
+
+  load(evt) {
+    const track = evt.detail.textTracks_.tracks_.find((track) => track.kind === 'captions' )
+    const cues = track.cues.cues_.map((cue) => `<p class="cue" data-cue-id="${cue.id}" data-cue-start-time="${cue.startTime}" data-cue-end-time="${cue.endTime}">${cue.text}</p>`)
+    this.element.innerHTML = cues.join('')
+  }
+}