Add seek support to transcriptions

client/components/app/MediaPlayerContainer.vue

@@ -56,7 +56,10 @@
       @showTranscription="showTranscriptionUi = !showTranscriptionUi"
     />
 
-    <transcription-ui v-if="showTranscriptionUi"></transcription-ui>
+    <transcription-ui
+      v-if="showTranscriptionUi"
+      @seek="seek"
+    />
 
     <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :current-time="bookmarkCurrentTime" :library-item-id="libraryItemId" @select="selectBookmark" />
 
@@ -95,8 +98,8 @@ export default {
     }
   },
   watch: {
-    'playerHandler.playerState': function (newVal, oldVal) {
+    'playerHandler.playerState': function (newVal) {
-      // Refresh the transcription UI when the player is changed
+      // Refresh the transcription UI when the audio track is changed
       if (newVal === 'LOADED') {
         this.showTranscriptionUi = false;
         this.$nextTick(() => {

client/components/player/TranscriptionLine.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'text-warning': isActive }">
+  <div :class="{ 'text-warning': isActive }"  class="cursor-pointer" @click.stop="clickSeek">
     <div v-html="cue.text"></div>
   </div>
 </template>
@@ -14,6 +14,12 @@ export default {
       isActive: false
     };
   },
+  methods: {
+    clickSeek() {
+      const time = this.cue.startTime;
+      this.$emit('seek', time);
+    }
+  },
   created() {
     this.cue.onenter = () => (this.isActive = true);
     this.cue.onexit = () => (this.isActive = false);

client/components/player/TranscriptionUi.vue

@@ -5,6 +5,7 @@
       :key="index"
       :cue="cue"
       ref="transcriptionLine + index"
+      @seek="seek"
     ></transcription-line>
   </div>
 </template>
@@ -29,6 +30,9 @@ export default {
       const trackElement = document.getElementById("transcription-track");
       this.cues = trackElement.track.cues;
     },
+    seek(time) {
+      this.$emit('seek', time)
+    },
   },
 };
 </script>