fix transcript sidebar for multiple media objects

app/components/embed/media_component.html.erb

@@ -30,7 +30,7 @@
           </div>
         </div>
       </div>
-      <div class="left-drawer-content transcript" data-action="media-loaded@window->transcript#persistPlayer media-data-loaded@window->transcript#load time-update@window->transcript#highlightCue">
+      <div class="left-drawer-content transcript" data-action="media-loaded@window->transcript#persistPlayer switch-transcript@window->transcript#switchTranscript media-data-loaded@window->transcript#load time-update@window->transcript#highlightCue">
         <div data-transcript-target="outlet"></div>
       </div>
     </section>

app/components/embed/media_tag_component.rb

@@ -68,6 +68,7 @@ def media_tag # rubocop:disable Metrics/MethodLength
                id: "sul-embed-media-#{@resource_iteration.index}",
                data: {
                  auth_url: authentication_url,
+                 index: @resource_iteration.index,
                  media_tag_target: 'authorizeableResource',
                  controller: 'media-player',
                  action: 'media-seek@window->media-player#seek ' \
@@ -82,8 +83,9 @@ def media_tag # rubocop:disable Metrics/MethodLength
     end
 
     def streaming_source
+      type = Rails.env.development? ? file.mimetype : 'application/x-mpegURL'
       stacks_media_stream = Embed::StacksMediaStream.new(druid:, file:)
-      tag.source(src: stacks_media_stream.to_playlist_url, type: 'application/x-mpegURL')
+      tag.source(src: stacks_media_stream.to_playlist_url, type:)
     end
 
     # Generate the video caption elements

app/javascript/controllers/media_player_controller.js

@@ -16,12 +16,24 @@ export default class extends Controller {
       const event = new CustomEvent('time-update', { detail: timestamp })
       window.dispatchEvent(event)
     })
+
+    this.player.index = this.element.dataset.index;
+
+    this.player.on('loadedmetadata', (evt) => {
+      // only load media for the first player
+      if (evt.target.player.index == 0){
+        const event = new CustomEvent('media-loaded', { detail: this.player });
+        window.dispatchEvent(event);
+      }
+    })
 
     // The loadeddata event occurs when the first frame of the video is available, and
     // happens after loadedmetadata
-    this.player.on('loadeddata', () => {
-      const event = new CustomEvent('media-data-loaded')
-      window.dispatchEvent(event)
+    this.player.on('loadeddata', (evt) => {
+      if (evt.target.player.index == 0){
+        const event = new CustomEvent('media-data-loaded');
+        window.dispatchEvent(event);
+      }
     })
   }
 

app/javascript/controllers/media_wrapper_controller.js

@@ -11,13 +11,18 @@ export default class extends Controller {
   toggleVisibility(event) {
     const index =  event.detail.index
     this.element.hidden = this.indexValue !== index
-    this.pauseAllMedia()
+    this.pauseAllMedia(index)
   }
 
-  pauseAllMedia() {
+  // switch transcript if media object index is the same as the visible index.
+  pauseAllMedia(index) {
     const mediaObject = this.element.querySelector('.video-js')
     if (mediaObject) {
-      videojs(mediaObject.id).pause()
+      const playerObject = videojs(mediaObject.id);
+      playerObject.pause()
+      if (mediaObject.dataset.index == index){
+        window.dispatchEvent(new CustomEvent('switch-transcript', { detail: playerObject }))
+      }
     }
   }
 }

app/javascript/controllers/transcript_controller.js

@@ -28,6 +28,14 @@ export default class extends Controller {
     this.loaded = true
   }
 
+  // event called when switch-transcript event is fired.
+  // This really only happens when there are more than one media item with captions.
+  switchTranscript(evt) {
+    this.player = evt.detail;
+    this.setupTranscriptLanguageSwitching();
+    this.renderCues();
+  }
+
   // Safari cues require special handling.
   // We want the track cues to be available so we can properly generate the transcript sidebar language dropdown
   // if there is more than one language track.
@@ -136,12 +144,7 @@ export default class extends Controller {
   }
 
   setupTranscriptLanguageSwitching() {
-    this.captionTracks.forEach(track => {
-      this.captionLanguageSelectTarget.insertAdjacentHTML(
-        'beforeend',
-        `<option value="${track.language}">${track.label}</option>`
-      )
-    })
+    this.captionLanguageSelectTarget.innerHTML = this.captionTracks.map(track => `<option value="${track.language}">${track.label}</option>`).join("");
   }
 
   buildCue(cue) {