Audiobook tools page include edit item button and item title linked to item page

Update episode secondary sort to pubDate and episode #4262

client/components/modals/item/tabs/Tools.vue

@@ -74,19 +74,12 @@ export default {
     mediaTracks() {
       return this.media.tracks || []
     },
-    isSingleM4b() {
-      return this.mediaTracks.length === 1 && this.mediaTracks[0].metadata.ext.toLowerCase() === '.m4b'
-    },
     chapters() {
       return this.media.chapters || []
     },
     showM4bDownload() {
       if (!this.mediaTracks.length) return false
-      return !this.isSingleM4b
+      return true
-    },
-    showMp3Split() {
-      if (!this.mediaTracks.length) return false
-      return this.isSingleM4b && this.chapters.length
     },
     queuedEmbedLIds() {
       return this.$store.state.tasks.queuedEmbedLIds || []

client/components/tables/podcast/LazyEpisodesTable.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div id="lazy-episodes-table" class="w-full py-6">
     <div class="flex flex-wrap flex-col md:flex-row md:items-center mb-4">
@@ -176,6 +175,13 @@ export default {
           return episodeProgress && !episodeProgress.isFinished
         })
         .sort((a, b) => {
+          // Swap values if sort descending
+          if (this.sortDesc) {
+            const temp = a
+            a = b
+            b = temp
+          }
+
           let aValue
           let bValue
 
@@ -194,10 +200,23 @@ export default {
             if (!bValue) bValue = Number.MAX_VALUE
           }
 
-          if (this.sortDesc) {
+          const primaryCompare = String(aValue).localeCompare(String(bValue), undefined, { numeric: true, sensitivity: 'base' })
-            return String(bValue).localeCompare(String(aValue), undefined, { numeric: true, sensitivity: 'base' })
+          if (primaryCompare !== 0 || this.sortKey === 'publishedAt') return primaryCompare
+
+          // When sorting by season, secondary sort is by episode number
+          if (this.sortKey === 'season') {
+            const aEpisode = a.episode || ''
+            const bEpisode = b.episode || ''
+
+            const secondaryCompare = String(aEpisode).localeCompare(String(bEpisode), undefined, { numeric: true, sensitivity: 'base' })
+            if (secondaryCompare !== 0) return secondaryCompare
           }
-          return String(aValue).localeCompare(String(bValue), undefined, { numeric: true, sensitivity: 'base' })
+
+          // Final sort by publishedAt
+          let aPubDate = a.publishedAt || Number.MAX_VALUE
+          let bPubDate = b.publishedAt || Number.MAX_VALUE
+
+          return String(aPubDate).localeCompare(String(bPubDate), undefined, { numeric: true, sensitivity: 'base' })
         })
     },
     episodesList() {

client/pages/audiobook/_id/manage.vue

@@ -2,7 +2,14 @@
   <div id="page-wrapper" class="bg-bg page p-8 overflow-auto relative" :class="streamLibraryItem ? 'streaming' : ''">
     <div class="flex items-center justify-center mb-6">
       <div class="w-full max-w-2xl">
-        <p class="text-2xl mb-2">{{ $strings.HeaderAudiobookTools }}</p>
+        <div class="flex items-center mb-4">
+          <nuxt-link :to="`/item/${libraryItem.id}`" class="hover:underline">
+            <h1 class="text-lg lg:text-xl">{{ mediaMetadata.title }}</h1>
+          </nuxt-link>
+          <button class="w-7 h-7 flex items-center justify-center mx-4 hover:scale-110 duration-100 transform text-gray-200 hover:text-white" @click="editItem">
+            <span class="material-symbols text-base">edit</span>
+          </button>
+        </div>
       </div>
       <div class="w-full max-w-2xl">
         <div class="flex justify-end">
@@ -13,7 +20,7 @@
 
     <div class="flex justify-center mb-2">
       <div class="w-full max-w-2xl">
-        <p class="text-xl">{{ $strings.HeaderMetadataToEmbed }}</p>
+        <p class="text-lg">{{ $strings.HeaderMetadataToEmbed }}</p>
       </div>
       <div class="w-full max-w-2xl"></div>
     </div>
@@ -266,9 +273,6 @@ export default {
     audioFiles() {
       return (this.media.audioFiles || []).filter((af) => !af.exclude)
     },
-    isSingleM4b() {
-      return this.audioFiles.length === 1 && this.audioFiles[0].metadata.ext.toLowerCase() === '.m4b'
-    },
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
     },
@@ -276,14 +280,10 @@ export default {
       return this.media.chapters || []
     },
     availableTools() {
-      if (this.isSingleM4b) {
+      return [
-        return [{ value: 'embed', text: this.$strings.LabelToolsEmbedMetadata }]
+        { value: 'embed', text: this.$strings.LabelToolsEmbedMetadata },
-      } else {
+        { value: 'm4b', text: this.$strings.LabelToolsM4bEncoder }
-        return [
+      ]
-          { value: 'embed', text: this.$strings.LabelToolsEmbedMetadata },
-          { value: 'm4b', text: this.$strings.LabelToolsM4bEncoder }
-        ]
-      }
     },
     taskFailed() {
       return this.isTaskFinished && this.task.isFailed
@@ -431,10 +431,24 @@ export default {
     },
     taskUpdated(task) {
       this.processing = !task.isFinished
+    },
+    editItem() {
+      this.$store.commit('showEditModal', this.libraryItem)
+    },
+    libraryItemUpdated(libraryItem) {
+      if (libraryItem.id === this.libraryItem.id) {
+        this.libraryItem = libraryItem
+        this.fetchMetadataEmbedObject()
+      }
     }
   },
   mounted() {
     this.init()
+
+    this.$eventBus.$on(`${this.libraryItem.id}_updated`, this.libraryItemUpdated)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off(`${this.libraryItem.id}_updated`, this.libraryItemUpdated)
   }
 }
 </script>

client/players/AudioTrack.js

@@ -1,5 +1,5 @@
 export default class AudioTrack {
-  constructor(track, userToken, routerBasePath) {
+  constructor(track, sessionId, routerBasePath) {
     this.index = track.index || 0
     this.startOffset = track.startOffset || 0 // Total time of all previous tracks
     this.duration = track.duration || 0
@@ -8,28 +8,29 @@ export default class AudioTrack {
     this.mimeType = track.mimeType
     this.metadata = track.metadata || {}
 
-    this.userToken = userToken
+    this.sessionId = sessionId
     this.routerBasePath = routerBasePath || ''
+    if (this.contentUrl?.startsWith('/hls')) {
+      this.sessionTrackUrl = this.contentUrl
+    } else {
+      this.sessionTrackUrl = `/public/session/${sessionId}/track/${this.index}`
+    }
   }
 
   /**
    * Used for CastPlayer
    */
   get fullContentUrl() {
-    if (!this.contentUrl || this.contentUrl.startsWith('http')) return this.contentUrl
-
     if (process.env.NODE_ENV === 'development') {
-      return `${process.env.serverUrl}${this.contentUrl}?token=${this.userToken}`
+      return `${process.env.serverUrl}${this.sessionTrackUrl}`
     }
-    return `${window.location.origin}${this.routerBasePath}${this.contentUrl}?token=${this.userToken}`
+    return `${window.location.origin}${this.routerBasePath}${this.sessionTrackUrl}`
   }
 
   /**
    * Used for LocalPlayer
    */
   get relativeContentUrl() {
-    if (!this.contentUrl || this.contentUrl.startsWith('http')) return this.contentUrl
+    return `${this.routerBasePath}${this.sessionTrackUrl}`
-
-    return `${this.routerBasePath}${this.contentUrl}?token=${this.userToken}`
   }
 }

client/players/PlayerHandler.js

@@ -37,9 +37,6 @@ export default class PlayerHandler {
   get isPlayingLocalItem() {
     return this.libraryItem && this.player instanceof LocalAudioPlayer
   }
-  get userToken() {
-    return this.ctx.$store.getters['user/getToken']
-  }
   get playerPlaying() {
     return this.playerState === 'PLAYING'
   }
@@ -226,7 +223,7 @@ export default class PlayerHandler {
 
     console.log('[PlayerHandler] Preparing Session', session)
 
-    var audioTracks = session.audioTracks.map((at) => new AudioTrack(at, this.userToken, this.ctx.$config.routerBasePath))
+    var audioTracks = session.audioTracks.map((at) => new AudioTrack(at, session.id, this.ctx.$config.routerBasePath))
 
     this.ctx.playerLoading = true
     this.isHlsTranscode = true

server/Server.js

@@ -313,7 +313,7 @@ class Server {
     router.use(express.json({ limit: '5mb' }))
 
     router.use('/api', this.auth.ifAuthNeeded(this.authMiddleware.bind(this)), this.apiRouter.router)
-    router.use('/hls', this.authMiddleware.bind(this), this.hlsRouter.router)
+    router.use('/hls', this.hlsRouter.router)
     router.use('/public', this.publicRouter.router)
 
     // Static path to generated nuxt

server/controllers/SessionController.js

@@ -1,7 +1,9 @@
+const Path = require('path')
 const { Request, Response, NextFunction } = require('express')
 const Logger = require('../Logger')
 const Database = require('../Database')
 const { toNumber, isUUID } = require('../utils/index')
+const { getAudioMimeTypeFromExtname, encodeUriPath } = require('../utils/fileUtils')
 
 const ShareManager = require('../managers/ShareManager')
 
@@ -266,6 +268,51 @@ class SessionController {
     this.playbackSessionManager.syncLocalSessionsRequest(req, res)
   }
 
+  /**
+   * GET: /public/session/:id/track/:index
+   * While a session is open, this endpoint can be used to stream the audio track
+   *
+   * @this {import('../routers/PublicRouter')}
+   *
+   * @param {Request} req
+   * @param {Response} res
+   */
+  async getTrack(req, res) {
+    const audioTrackIndex = toNumber(req.params.index, null)
+    if (audioTrackIndex === null) {
+      Logger.error(`[SessionController] Invalid audio track index "${req.params.index}"`)
+      return res.sendStatus(400)
+    }
+
+    const playbackSession = this.playbackSessionManager.getSession(req.params.id)
+    if (!playbackSession) {
+      Logger.error(`[SessionController] Unable to find playback session with id=${req.params.id}`)
+      return res.sendStatus(404)
+    }
+
+    const audioTrack = playbackSession.audioTracks.find((t) => t.index === audioTrackIndex)
+    if (!audioTrack) {
+      Logger.error(`[SessionController] Unable to find audio track with index=${audioTrackIndex}`)
+      return res.sendStatus(404)
+    }
+
+    const user = await Database.userModel.getUserById(playbackSession.userId)
+    Logger.debug(`[SessionController] Serving audio track ${audioTrack.index} for session "${req.params.id}" belonging to user "${user.username}"`)
+
+    if (global.XAccel) {
+      const encodedURI = encodeUriPath(global.XAccel + audioTrack.metadata.path)
+      Logger.debug(`Use X-Accel to serve static file ${encodedURI}`)
+      return res.status(204).header({ 'X-Accel-Redirect': encodedURI }).send()
+    }
+
+    // Express does not set the correct mimetype for m4b files so use our defined mimetypes if available
+    const audioMimeType = getAudioMimeTypeFromExtname(Path.extname(audioTrack.metadata.path))
+    if (audioMimeType) {
+      res.setHeader('Content-Type', audioMimeType)
+    }
+    res.sendFile(audioTrack.metadata.path)
+  }
+
   /**
    *
    * @param {RequestWithUser} req

server/managers/PlaybackSessionManager.js

@@ -26,6 +26,12 @@ class PlaybackSessionManager {
     this.sessions = []
   }
 
+  /**
+   * Get open session by id
+   *
+   * @param {string} sessionId
+   * @returns {PlaybackSession}
+   */
   getSession(sessionId) {
     return this.sessions.find((s) => s.id === sessionId)
   }

server/routers/PublicRouter.js

@@ -1,5 +1,6 @@
 const express = require('express')
 const ShareController = require('../controllers/ShareController')
+const SessionController = require('../controllers/SessionController')
 
 class PublicRouter {
   constructor(playbackSessionManager) {
@@ -17,6 +18,7 @@ class PublicRouter {
     this.router.get('/share/:slug/cover', ShareController.getMediaItemShareCoverImage.bind(this))
     this.router.get('/share/:slug/download', ShareController.downloadMediaItemShare.bind(this))
     this.router.patch('/share/:slug/progress', ShareController.updateMediaItemShareProgress.bind(this))
+    this.router.get('/session/:id/track/:index', SessionController.getTrack.bind(this))
   }
 }
 module.exports = PublicRouter

server/utils/queries/libraryItemsBookFilters.js

@@ -1247,7 +1247,12 @@ module.exports = {
         libraryId
       }
     })
-    return statResults[0]
+    return {
+      totalSize: statResults?.[0]?.totalSize || 0,
+      totalDuration: statResults?.[0]?.totalDuration || 0,
+      numAudioFiles: statResults?.[0]?.numAudioFiles || 0,
+      totalItems: statResults?.[0]?.totalItems || 0
+    }
   },
 
   /**

server/utils/queries/libraryItemsPodcastFilters.js

@@ -533,8 +533,10 @@ module.exports = {
       }
     })
     return {
-      ...statResults[0],
+      totalDuration: statResults?.[0]?.totalDuration || 0,
-      totalSize: sizeResults[0].totalSize || 0
+      numAudioFiles: statResults?.[0]?.numAudioFiles || 0,
+      totalItems: statResults?.[0]?.totalItems || 0,
+      totalSize: sizeResults?.[0]?.totalSize || 0
     }
   },