fix for mixed language media with transcripts

app/javascript/controllers/media_player_controller.js

@@ -5,9 +5,12 @@ export default class extends Controller {
   initializeVideoJSPlayer() {
     this.element.classList.add('video-js', 'vjs-default-skin')
     this.player = videojs(this.element.id, {"responsive": true})
-    this.player.on('loadedmetadata', () => {
-      const event = new CustomEvent('media-loaded', { detail: this.player })
-      window.dispatchEvent(event)
+    this.player.on('loadedmetadata', (evt) => {
+      // for multiple media items, we only want to load the first (visible) item
+      if (evt.target.player.index == 0){
+        const event = new CustomEvent('media-loaded', { detail: this.player })
+        window.dispatchEvent(event)
+      }
     })
 
     // occurs when time of the video changes.

app/javascript/controllers/transcript_controller.js

@@ -129,7 +129,12 @@ export default class extends Controller {
   }
 
   currentCues() {
-    return this.selectedLanguage ?
+    // We need to check if there are captions for multiple videos with mixed languages.
+    // for example if video 1 has english and russian captions and video 2 has spanish and english captions
+    // if we switched to russian, this.selectedLanguage = 'ru', but if we then switch to video 2
+    // it won't have any captions in russian.
+    // https://github.com/sul-dlss/sul-embed/issues/2293
+    return this.selectedLanguage && this.cuesByLanguage[this.selectedLanguage] ?
       this.cuesByLanguage[this.selectedLanguage] :
       Object.values(this.cuesByLanguage)[0]
   }
@@ -144,7 +149,11 @@ export default class extends Controller {
   }
 
   setupTranscriptLanguageSwitching() {
-    this.captionLanguageSelectTarget.innerHTML = this.captionTracks.map(track => `<option value="${track.language}">${track.label}</option>`).join("");
+    this.captionLanguageSelectTarget.innerHTML = this.captionTracks.map(track => `<option value="${track.language}" ${this.selectedDropdownLang(track.language) ? ' selected' : ''}>${track.label}</option>`).join("");
+  }
+
+  selectedDropdownLang(language) {
+    return language == this.selectedLanguage;
   }
 
   buildCue(cue) {