Initial transcription support

client/components/player/PlayerUi.vue

@@ -36,6 +36,13 @@
           </button>
         </ui-tooltip>
 
+        <ui-tooltip direction="top" :text="$strings.LabelViewTranscription">
+          <button :aria-label="$strings.LabelViewTranscription" class="outline-none text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showTranscription')">
+            <span v-if="!transcriptionEnabled" class="material-icons text-2xl">subtitles</span>
+            <span v-else  class="material-icons text-2xl text-warning">subtitles</span>
+          </button>
+        </ui-tooltip>
+
         <ui-tooltip v-if="chapters.length" direction="top" :text="useChapterTrack ? $strings.LabelUseFullTrack : $strings.LabelUseChapterTrack">
           <button :aria-label="useChapterTrack ? $strings.LabelUseFullTrack : $strings.LabelUseChapterTrack" class="text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="setUseChapterTrack">
             <span class="material-icons text-2xl sm:text-3xl transform transition-transform" :class="useChapterTrack ? 'rotate-180' : ''">timelapse</span>
@@ -78,7 +85,8 @@ export default {
     },
     sleepTimerSet: Boolean,
     sleepTimerRemaining: Number,
-    isPodcast: Boolean
+    isPodcast: Boolean,
+    transcriptionEnabled: Boolean
   },
   data() {
     return {
@@ -368,4 +376,4 @@ export default {
     left: 100%;
   }
 }
-</style>
+</style>

client/components/player/TranscriptionLine.vue

@@ -0,0 +1,29 @@
+<template>
+  <div :class="{ 'text-warning': isActive }">
+    <div v-html="cue.text"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    cue: VTTCue
+  },
+  data() {
+    return {
+      isActive: false
+    };
+  },
+  created() {
+    this.cue.onenter = () => (this.isActive = true);
+    this.cue.onexit = () => (this.isActive = false);
+  },
+  watch: {
+    isActive(newVal) {
+      if (newVal) {
+        this.$el.scrollIntoView({behavior: 'smooth'});
+      }
+    }
+  }
+};
+</script>

client/components/player/TranscriptionUi.vue

@@ -0,0 +1,40 @@
+<template>
+  <div id="transcription-panel">
+    <transcription-line
+      v-for="(cue, index) in cues"
+      :key="index"
+      :cue="cue"
+      ref="transcriptionLine + index"
+    ></transcription-line>
+  </div>
+</template>
+
+<script>
+import TranscriptionLine from "./TranscriptionLine.vue";
+
+export default {
+  components: {
+    TranscriptionLine
+  },
+  data() {
+    return {
+      cues: [],
+    };
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const trackElement = document.getElementById("transcription-track");
+      this.cues = trackElement.track.cues;
+    },
+  },
+};
+</script>
+<style>
+#transcription-panel {
+  max-height: 75px;
+  overflow-y: auto;
+}
+</style>