Merge 2f515cc207 into 9c33446449

client/components/app/MediaPlayerContainer.vue

@@ -1,5 +1,6 @@
 <template>
-  <div v-if="streamLibraryItem" id="mediaPlayerContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 lg:h-40 z-50 bg-primary px-2 lg:px-4 pb-1 lg:pb-4 pt-2">
+    <div v-if="streamLibraryItem" id="mediaPlayerContainer"  class="w-full fixed bottom-0 left-0 right-0 z-50 bg-primary px-2 lg:px-4 pb-1 lg:pb-4 pt-2"
+         :class="[showTranscriptionUi ? 'h-64' : 'h-48', showTranscriptionUi ? 'lg:h-64' : 'lg:h-40']">
     <div id="videoDock" />
     <div class="absolute left-2 top-2 lg:left-4 cursor-pointer">
       <covers-book-cover expand-on-click :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
@@ -43,6 +44,7 @@
       :sleep-timer-set="sleepTimerSet"
       :sleep-timer-remaining="sleepTimerRemaining"
       :is-podcast="isPodcast"
+      :transcription-enabled="showTranscriptionUi"
       @playPause="playPause"
       @jumpForward="jumpForward"
       @jumpBackward="jumpBackward"
@@ -53,6 +55,12 @@
       @showBookmarks="showBookmarks"
       @showSleepTimer="showSleepTimerModal = true"
       @showPlayerQueueItems="showPlayerQueueItemsModal = true"
+      @showTranscription="showTranscriptionUi = !showTranscriptionUi"
+    />
+
+    <transcription-ui
+      v-if="showTranscriptionUi"
+      @seek="seek"
     />
 
     <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :current-time="bookmarkCurrentTime" :library-item-id="libraryItemId" @select="selectBookmark" />
@@ -65,8 +73,10 @@
 
 <script>
 import PlayerHandler from '@/players/PlayerHandler'
+import TranscriptionUi from "@/components/player/TranscriptionUi.vue"
 
 export default {
+  components: {TranscriptionUi},
   data() {
     return {
       playerHandler: new PlayerHandler(this),
@@ -78,6 +88,7 @@ export default {
       currentTime: 0,
       showSleepTimerModal: false,
       showPlayerQueueItemsModal: false,
+      showTranscriptionUi: false,
       sleepTimerSet: false,
       sleepTimerTime: 0,
       sleepTimerRemaining: 0,
@@ -88,6 +99,17 @@ export default {
       coverAspectRatio: 1
     }
   },
+  watch: {
+    'playerHandler.playerState': function (newVal) {
+      // Refresh the transcription UI when the audio track is changed
+      if (newVal === 'LOADED') {
+        this.showTranscriptionUi = false
+        this.$nextTick(() => {
+          this.showTranscriptionUi = true
+        });
+      }
+    },
+  },
   computed: {
     isSquareCover() {
       return this.coverAspectRatio === 1
@@ -487,6 +509,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/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 {

client/components/player/TranscriptionLine.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :class="{ 'text-warning': isActive }"  class="cursor-pointer" @click.stop="clickSeek">
+    <div v-html="cue.text"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    cue: VTTCue
+  },
+  data() {
+    return {
+      isActive: false
+    };
+  },
+  methods: {
+    clickSeek() {
+      const time = this.cue.startTime
+      this.$emit('seek', time)
+    },
+    scrollIntoView() {
+      this.$el.scrollIntoView({behavior: 'smooth'})
+    }
+  },
+  mounted() {
+    if (this.isActive) {
+      this.scrollIntoView()
+    }
+  },
+  created() {
+    this.cue.onenter = () => (this.isActive = true)
+    this.cue.onexit = () => (this.isActive = false)
+  },
+  watch: {
+    isActive(newVal) {
+      if (newVal) {
+        this.scrollIntoView()
+      }
+    }
+  }
+};
+</script>

client/components/player/TranscriptionUi.vue

@@ -0,0 +1,55 @@
+<template>
+  <div id="transcription-panel">
+    <transcription-line
+      v-for="(cue, index) in cues"
+      :key="index"
+      :cue="cue"
+      ref="transcriptionLine + index"
+      @seek="seek"
+    ></transcription-line>
+  </div>
+</template>
+
+<script>
+import TranscriptionLine from "./TranscriptionLine.vue"
+
+export default {
+  components: {
+    TranscriptionLine
+  },
+  watch: {
+    trackElement() {
+      this.setCues()
+    }
+  },
+  data() {
+    return {
+      cues: [],
+      trackElement: null
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      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>
+<style>
+#transcription-panel {
+  max-height: 75px;
+  overflow-y: auto;
+}
+</style>

client/players/AudioTrack.js

@@ -5,6 +5,7 @@ export default class AudioTrack {
     this.duration = track.duration || 0
     this.title = track.title || ''
     this.contentUrl = track.contentUrl || null
+    this.transcriptUrl = track.transcriptUrl || null
     this.mimeType = track.mimeType
     this.metadata = track.metadata || {}
 
@@ -29,4 +30,14 @@ export default class AudioTrack {
 
     return this.contentUrl + `?token=${this.userToken}`
   }
+
+  get relativeTranscriptionUrl() {
+    if (!this.transcriptUrl || this.transcriptUrl.startsWith('http')) return this.transcriptUrl
+
+    if (process.env.NODE_ENV === 'development') {
+      return `${process.env.serverUrl}${this.transcriptUrl}?token=${this.userToken}`
+    }
+
+    return this.transcriptUrl + `?token=${this.userToken}`
+  }
 }

client/players/LocalAudioPlayer.js

@@ -35,6 +35,8 @@ export default class LocalAudioPlayer extends EventEmitter {
     var audioEl = document.createElement('audio')
     audioEl.id = 'audio-player'
     audioEl.style.display = 'none'
+    audioEl.crossOrigin = 'anonymous'
+
     document.body.appendChild(audioEl)
     this.player = audioEl
 
@@ -135,6 +137,8 @@ export default class LocalAudioPlayer extends EventEmitter {
       this.usingNativeplayer = true
       this.player.src = this.currentTrack.relativeContentUrl
       this.player.currentTime = this.startTime
+
+      this.createTranscriptionTrack()
       return
     }
 
@@ -168,7 +172,7 @@ export default class LocalAudioPlayer extends EventEmitter {
 
     this.hlsInstance.attachMedia(this.player)
     this.hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
-      this.hlsInstance.loadSource(this.currentTrack.relativeContentUrl)
+    this.hlsInstance.loadSource(this.currentTrack.relativeContentUrl)
 
       this.hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
         console.log('[HLS] Manifest Parsed')
@@ -206,9 +210,28 @@ export default class LocalAudioPlayer extends EventEmitter {
     this.trackStartTime = Math.max(0, this.startTime - (this.currentTrack.startOffset || 0))
     this.player.src = this.currentTrack.relativeContentUrl
     console.log(`[LocalPlayer] Loading track src ${this.currentTrack.relativeContentUrl}`)
+
+    this.createTranscriptionTrack()
+
     this.player.load()
   }
 
+  createTranscriptionTrack() {
+    if (document.getElementById('transcription-track')) {
+      document.getElementById('transcription-track').remove()
+    }
+
+    const trackElement = document.createElement("track")
+
+    trackElement.id = "transcription-track"
+    trackElement.kind = "subtitles"
+    trackElement.label = "Transcription"
+    trackElement.default = true
+    trackElement.src = this.currentTrack.relativeTranscriptionUrl
+
+    this.player.appendChild(trackElement)
+  }
+
   destroyHlsInstance() {
     if (!this.hlsInstance) return
     if (this.hlsInstance.destroy) {

client/plugins/constants.js

@@ -4,7 +4,8 @@ const SupportedFileTypes = {
   ebook: ['epub', 'pdf', 'mobi', 'azw3', 'cbr', 'cbz'],
   info: ['nfo'],
   text: ['txt'],
-  metadata: ['opf', 'abs', 'xml', 'json']
+  metadata: ['opf', 'abs', 'xml', 'json'],
+  subtitle: ['srt', 'vtt']
 }
 
 const DownloadStatus = {

client/strings/en-us.json

@@ -585,6 +585,7 @@
   "LabelViewBookmarks": "View bookmarks",
   "LabelViewChapters": "View chapters",
   "LabelViewQueue": "View player queue",
+  "LabelViewTranscription": "View transcription",
   "LabelVolume": "Volume",
   "LabelWeekdaysToRun": "Weekdays to run",
   "LabelYearReviewHide": "Hide Year in Review",

server/controllers/LibraryItemController.js

@@ -640,6 +640,31 @@ class LibraryItemController {
     res.sendFile(libraryFile.metadata.path)
   }
 
+  /**
+   * GET api/items/:id/file/:fileid/transcript
+   *
+   * @param {express.Request} req
+   * @param {express.Response} res
+   */
+  async getTranscriptionFile(req, res) {
+    const libraryFile = req.libraryFile
+
+    const baseName = Path.basename(libraryFile.metadata.path, Path.extname(libraryFile.metadata.path))
+
+    const vttFilePath = Path.join(Path.dirname(libraryFile.metadata.path), `${baseName}.vtt`)
+
+    if (global.XAccel) {
+      const encodedURI = encodeUriPath(global.XAccel + vttFilePath)
+      Logger.debug(`Use X-Accel to serve static file ${encodedURI}`)
+      return res.status(204).header({ 'X-Accel-Redirect': encodedURI }).send()
+    }
+
+    // Set the correct mimetype for .vtt files
+    res.setHeader('Content-Type', 'text/vtt')
+
+    res.sendFile(vttFilePath)
+  }
+
   /**
    * DELETE api/items/:id/file/:fileid
    *

server/objects/files/AudioTrack.js

@@ -5,6 +5,7 @@ class AudioTrack {
     this.duration = null
     this.title = null
     this.contentUrl = null
+    this.transcriptUrl = null
     this.mimeType = null
     this.codec = null
     this.metadata = null
@@ -17,6 +18,7 @@ class AudioTrack {
       duration: this.duration,
       title: this.title,
       contentUrl: this.contentUrl,
+      transcriptUrl: this.transcriptUrl,
       mimeType: this.mimeType,
       codec: this.codec,
       metadata: this.metadata?.toJSON() || null
@@ -30,6 +32,7 @@ class AudioTrack {
     this.title = audioFile.metadata.filename || ''
 
     this.contentUrl = `${global.RouterBasePath}/api/items/${itemId}/file/${audioFile.ino}`
+    this.transcriptUrl = `${global.RouterBasePath}/api/items/${itemId}/file/${audioFile.ino}/transcript`
     this.mimeType = audioFile.mimeType
     this.codec = audioFile.codec || null
     this.metadata = audioFile.metadata.clone()

server/objects/files/LibraryFile.js

@@ -46,6 +46,7 @@ class LibraryFile {
     if (globals.SupportedVideoTypes.includes(this.metadata.format)) return 'video'
     if (globals.TextFileTypes.includes(this.metadata.format)) return 'text'
     if (globals.MetadataFileTypes.includes(this.metadata.format)) return 'metadata'
+    if (globals.SubtitleFileTypes.includes(this.metadata.format)) return 'subtitle'
     return 'unknown'
   }
 

server/routers/ApiRouter.js

@@ -116,6 +116,7 @@ class ApiRouter {
     this.router.post('/items/:id/chapters', LibraryItemController.middleware.bind(this), LibraryItemController.updateMediaChapters.bind(this))
     this.router.get('/items/:id/ffprobe/:fileid', LibraryItemController.middleware.bind(this), LibraryItemController.getFFprobeData.bind(this))
     this.router.get('/items/:id/file/:fileid', LibraryItemController.middleware.bind(this), LibraryItemController.getLibraryFile.bind(this))
+    this.router.get('/items/:id/file/:fileid/transcript', LibraryItemController.middleware.bind(this), LibraryItemController.getTranscriptionFile.bind(this))
     this.router.delete('/items/:id/file/:fileid', LibraryItemController.middleware.bind(this), LibraryItemController.deleteLibraryFile.bind(this))
     this.router.get('/items/:id/file/:fileid/download', LibraryItemController.middleware.bind(this), LibraryItemController.downloadLibraryFile.bind(this))
     this.router.get('/items/:id/ebook/:fileid?', LibraryItemController.middleware.bind(this), LibraryItemController.getEBookFile.bind(this))

server/utils/globals.js

@@ -4,7 +4,8 @@ const globals = {
   SupportedEbookTypes: ['epub', 'pdf', 'mobi', 'azw3', 'cbr', 'cbz'],
   SupportedVideoTypes: ['mp4'],
   TextFileTypes: ['txt', 'nfo'],
-  MetadataFileTypes: ['opf', 'abs', 'xml', 'json']
+  MetadataFileTypes: ['opf', 'abs', 'xml', 'json'],
+  SubtitleFileTypes: ['srt', 'vtt']
 }
 
 module.exports = globals