diff --git a/client/components/app/MediaPlayerContainer.vue b/client/components/app/MediaPlayerContainer.vue index c34e8595b..f384c7dbf 100644 --- a/client/components/app/MediaPlayerContainer.vue +++ b/client/components/app/MediaPlayerContainer.vue @@ -56,7 +56,10 @@ @showTranscription="showTranscriptionUi = !showTranscriptionUi" /> - + @@ -95,8 +98,8 @@ export default { } }, watch: { - 'playerHandler.playerState': function (newVal, oldVal) { - // Refresh the transcription UI when the player is changed + 'playerHandler.playerState': function (newVal) { + // Refresh the transcription UI when the audio track is changed if (newVal === 'LOADED') { this.showTranscriptionUi = false; this.$nextTick(() => { diff --git a/client/components/player/TranscriptionLine.vue b/client/components/player/TranscriptionLine.vue index ff074977e..9f5ac3ddd 100644 --- a/client/components/player/TranscriptionLine.vue +++ b/client/components/player/TranscriptionLine.vue @@ -1,5 +1,5 @@ @@ -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); diff --git a/client/components/player/TranscriptionUi.vue b/client/components/player/TranscriptionUi.vue index 73d807f2b..11f013b3c 100644 --- a/client/components/player/TranscriptionUi.vue +++ b/client/components/player/TranscriptionUi.vue @@ -5,6 +5,7 @@ :key="index" :cue="cue" ref="transcriptionLine + index" + @seek="seek" > @@ -29,6 +30,9 @@ export default { const trackElement = document.getElementById("transcription-track"); this.cues = trackElement.track.cues; }, + seek(time) { + this.$emit('seek', time) + }, }, };