Avoid error: "Cannot read properties of null (reading 'track')"

client/components/app/MediaPlayerContainer.vue

@@ -101,9 +101,9 @@ export default {
     'playerHandler.playerState': function (newVal) {
       // Refresh the transcription UI when the audio track is changed
       if (newVal === 'LOADED') {
-        this.showTranscriptionUi = false;
+        this.showTranscriptionUi = false
         this.$nextTick(() => {
-          this.showTranscriptionUi = true;
+          this.showTranscriptionUi = true
         });
       }
     },
@@ -507,6 +507,7 @@ export default {
     this.$eventBus.$on('playback-time-update', this.playbackTimeUpdate)
     this.$eventBus.$on('play-item', this.playLibraryItem)
     this.$eventBus.$on('pause-item', this.pauseItem)
+    this.showTranscriptionUi = false
   },
   beforeDestroy() {
     this.$eventBus.$off('cast-session-active', this.castSessionActive)

client/components/player/TranscriptionUi.vue

@@ -17,9 +17,15 @@ export default {
   components: {
     TranscriptionLine
   },
+  watch: {
+    trackElement() {
+      this.setCues();
+    }
+  },
   data() {
     return {
       cues: [],
+      trackElement: null
     };
   },
   mounted() {
@@ -27,12 +33,17 @@ export default {
   },
   methods: {
     init() {
-      const trackElement = document.getElementById("transcription-track");
-      this.cues = trackElement.track.cues;
+      this.trackElement = document.getElementById("transcription-track")
+      if (this.trackElement && this.trackElement.track) {
+        this.setCues()
+      }
     },
     seek(time) {
       this.$emit('seek', time)
     },
+    setCues() {
+      this.cues = this.trackElement.track.cues
+    }
   },
 };
 </script>