Add:Narrators page #860 #1139

client/assets/app.css

@@ -112,7 +112,7 @@ input[type=number] {
   background-color: #373838;
 }
 
-.tracksTable tr:hover {
+.tracksTable tr:hover:not(:has(th)) {
   background-color: #474747;
 }
 

client/components/app/SideRail.vue

@@ -49,6 +49,14 @@
       <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
+    <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons text-2.5xl">queue_music</span>
+
+      <p class="pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>
+
+      <div v-show="isPlaylistsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
     <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <svg class="w-6 h-6" viewBox="0 0 24 24">
         <path
@@ -62,6 +70,14 @@
       <div v-show="isAuthorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
+    <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/narrators`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isNarratorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons text-2xl">record_voice_over</span>
+
+      <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.LabelNarrators }}</p>
+
+      <div v-show="isNarratorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
     <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <span class="abs-icons icon-podcast text-xl"></span>
 
@@ -78,14 +94,6 @@
       <div v-show="isMusicAlbumsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
-    <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <span class="material-icons text-2.5xl">queue_music</span>
-
-      <p class="pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>
-
-      <div v-show="isPlaylistsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
-
     <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/download-queue`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastDownloadQueuePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <span class="material-icons text-2xl">file_download</span>
 
@@ -178,6 +186,9 @@ export default {
     isAuthorsPage() {
       return this.$route.name === 'library-library-authors'
     },
+    isNarratorsPage() {
+      return this.$route.name === 'library-library-narrators'
+    },
     isPlaylistsPage() {
       return this.paramId === 'playlists'
     },

client/components/cards/NarratorCard.vue

@@ -1,8 +1,8 @@
 <template>
   <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(narrator.name)}`">
     <div :style="{ width: width + 'px', height: height + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
-      <div class="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none opacity-20">
-        <span class="material-icons-outlined text-8xl">record_voice_over</span>
+      <div class="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none opacity-40">
+        <span class="material-icons-outlined text-[10rem]">record_voice_over</span>
       </div>
 
       <!-- Narrator name & num books overlay -->

client/pages/config/item-metadata-utils/tags.vue

@@ -17,8 +17,8 @@
           <ui-text-input v-else v-model="newTagName" />
           <div class="flex-grow" />
           <template v-if="editingTag !== tag">
-            <ui-icon-btn v-if="editingTag !== tag" icon="edit" borderless :size="8" icon-font-size="1.1rem" class="mx-1" @click="editTagClick(tag)" />
-            <ui-icon-btn v-if="editingTag !== tag" icon="delete" borderless :size="8" icon-font-size="1.1rem" @click="removeTagClick(tag)" />
+            <ui-icon-btn icon="edit" borderless :size="8" icon-font-size="1.1rem" class="mx-1" @click="editTagClick(tag)" />
+            <ui-icon-btn icon="delete" borderless :size="8" icon-font-size="1.1rem" @click="removeTagClick(tag)" />
           </template>
           <template v-else>
             <ui-btn color="success" small class="mx-2" @click.stop="saveTagClick">{{ $strings.ButtonSave }}</ui-btn>

client/pages/library/_library/narrators.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="page relative" :class="streamLibraryItem ? 'streaming' : ''">
+    <app-book-shelf-toolbar page="narrators" is-home />
+    <div id="bookshelf" class="w-full h-full px-1 py-4 md:p-8 relative overflow-y-auto">
+      <table class="tracksTable max-w-2xl mx-auto">
+        <tr>
+          <th class="text-left">{{ $strings.LabelName }}</th>
+          <th class="text-center w-24">{{ $strings.LabelBooks }}</th>
+          <th v-if="userCanUpdate" class="w-40"></th>
+        </tr>
+        <tr v-for="narrator in narrators" :key="narrator.id">
+          <td>
+            <p v-if="selectedNarrator?.id !== narrator.id" class="text-sm md:text-base text-gray-100">{{ narrator.name }}</p>
+            <form v-else @submit.prevent="saveClick">
+              <ui-text-input v-model="newNarratorName" />
+            </form>
+          </td>
+          <td class="text-center w-24">
+            <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${narrator.id}`" class="hover:underline">{{ narrator.numBooks }}</nuxt-link>
+          </td>
+          <td v-if="userCanUpdate" class="w-40">
+            <div class="flex justify-end items-center h-10">
+              <template v-if="selectedNarrator?.id !== narrator.id">
+                <ui-icon-btn icon="edit" borderless :size="8" icon-font-size="1.1rem" class="mx-1" @click="editClick(narrator)" />
+                <ui-icon-btn icon="delete" borderless :size="8" icon-font-size="1.1rem" @click="removeClick(narrator)" />
+              </template>
+              <template v-else>
+                <ui-btn color="success" small class="mr-2" @click.stop="saveClick">{{ $strings.ButtonSave }}</ui-btn>
+                <ui-btn small @click.stop="cancelEditClick">{{ $strings.ButtonCancel }}</ui-btn>
+              </template>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
+
+    <div v-if="loading" class="absolute top-0 left-0 w-full h-[calc(100%-40px)] mt-10 flex items-center justify-center bg-black/25">
+      <ui-loading-indicator />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ store, params, redirect, query, app }) {
+    const libraryId = params.library
+    const libraryData = await store.dispatch('libraries/fetch', libraryId)
+    if (!libraryData) {
+      return redirect('/oops?message=Library not found')
+    }
+
+    const library = libraryData.library
+    if (library.mediaType === 'podcast') {
+      return redirect(`/library/${libraryId}`)
+    }
+
+    return {
+      libraryId
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      narrators: [],
+      selectedNarrator: null,
+      newNarratorName: null
+    }
+  },
+  computed: {
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    }
+  },
+  methods: {
+    removeClick(narrator) {
+      const payload = {
+        message: this.$getString('MessageConfirmRemoveNarrator', [narrator.name]),
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.removeNarrator(narrator.id)
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    editClick(narrator) {
+      this.selectedNarrator = narrator
+      this.newNarratorName = narrator.name
+    },
+    cancelEditClick() {
+      this.selectedNarrator = null
+      this.newNarratorName = null
+    },
+    saveClick() {
+      if (!this.selectedNarrator) return
+      this.newNarratorName = this.newNarratorName?.trim() || ''
+      if (!this.newNarratorName || this.newNarratorName === this.selectedNarrator.name) {
+        this.cancelEditClick()
+        return
+      }
+
+      this.loading = true
+      this.$axios
+        .$patch(`/api/libraries/${this.currentLibraryId}/narrators/${this.selectedNarrator.id}`, { name: this.newNarratorName })
+        .then((data) => {
+          if (data.updated) {
+            this.$toast.success(this.$getString('MessageItemsUpdated', [data.updated]))
+          } else {
+            this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
+          }
+          this.cancelEditClick()
+          this.init()
+        })
+        .catch((error) => {
+          console.error('Failed to updated narrator', error)
+          this.$toast.error('Failed to update narrator')
+          this.loading = false
+        })
+    },
+    removeNarrator(id) {
+      this.loading = true
+      this.$axios
+        .$delete(`/api/libraries/${this.currentLibraryId}/narrators/${id}`)
+        .then((data) => {
+          if (data.updated) {
+            this.$toast.success(this.$getString('MessageItemsUpdated', [data.updated]))
+          } else {
+            this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
+          }
+          this.init()
+        })
+        .catch((error) => {
+          console.error('Failed to remove narrator', error)
+          this.$toast.error('Failed to remove narrator')
+          this.loading = false
+        })
+    },
+    async init() {
+      this.narrators = await this.$axios
+        .$get(`/api/libraries/${this.currentLibraryId}/narrators`)
+        .then((response) => response.narrators)
+        .catch((error) => {
+          console.error('Failed to load narrators', error)
+          return []
+        })
+      this.loading = false
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {}
+}
+</script>

client/strings/en-us.json

@@ -483,6 +483,7 @@
   "MessageConfirmRemoveCollection": "Are you sure you want to remove collection \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Are you sure you want to remove episode \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Are you sure you want to remove {0} episodes?",
+  "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Are you sure you want to remove your playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Are you sure you want to rename genre \"{0}\" to \"{1}\" for all items?",
   "MessageConfirmRenameGenreMergeNote": "Note: This genre already exists so they will be merged.",

server/controllers/LibraryController.js

@@ -684,13 +684,12 @@ class LibraryController {
   }
 
   async getAuthors(req, res) {
-    var libraryItems = req.libraryItems
-    var authors = {}
-    libraryItems.forEach((li) => {
+    const authors = {}
+    req.libraryItems.forEach((li) => {
       if (li.media.metadata.authors && li.media.metadata.authors.length) {
         li.media.metadata.authors.forEach((au) => {
           if (!authors[au.id]) {
-            var _author = this.db.authors.find(_au => _au.id === au.id)
+            const _author = this.db.authors.find(_au => _au.id === au.id)
             if (_author) {
               authors[au.id] = _author.toJSON()
               authors[au.id].numBooks = 1
@@ -707,6 +706,83 @@ class LibraryController {
     })
   }
 
+  async getNarrators(req, res) {
+    const narrators = {}
+    req.libraryItems.forEach((li) => {
+      if (li.media.metadata.narrators && li.media.metadata.narrators.length) {
+        li.media.metadata.narrators.forEach((n) => {
+          if (!narrators[n]) {
+            narrators[n] = {
+              id: encodeURIComponent(Buffer.from(n).toString('base64')),
+              name: n,
+              numBooks: 1
+            }
+          } else {
+            narrators[n].numBooks++
+          }
+        })
+      }
+    })
+
+    res.json({
+      narrators: naturalSort(Object.values(narrators)).asc(n => n.name)
+    })
+  }
+
+  async updateNarrator(req, res) {
+    if (!req.user.canUpdate) {
+      Logger.error(`[LibraryController] Unauthorized user "${req.user.username}" attempted to update narrator`)
+      return res.sendStatus(403)
+    }
+
+    const narratorName = libraryHelpers.decode(req.params.narratorId)
+    const updatedName = req.body.name
+    if (!updatedName) {
+      return res.status(400).send('Invalid request payload. Name not specified.')
+    }
+
+    const itemsUpdated = []
+    for (const libraryItem of req.libraryItems) {
+      if (libraryItem.media.metadata.updateNarrator(narratorName, updatedName)) {
+        itemsUpdated.push(libraryItem)
+      }
+    }
+
+    if (itemsUpdated.length) {
+      await this.db.updateLibraryItems(itemsUpdated)
+      SocketAuthority.emitter('items_updated', itemsUpdated.map(li => li.toJSONExpanded()))
+    }
+
+    res.json({
+      updated: itemsUpdated.length
+    })
+  }
+
+  async removeNarrator(req, res) {
+    if (!req.user.canUpdate) {
+      Logger.error(`[LibraryController] Unauthorized user "${req.user.username}" attempted to remove narrator`)
+      return res.sendStatus(403)
+    }
+
+    const narratorName = libraryHelpers.decode(req.params.narratorId)
+
+    const itemsUpdated = []
+    for (const libraryItem of req.libraryItems) {
+      if (libraryItem.media.metadata.removeNarrator(narratorName)) {
+        itemsUpdated.push(libraryItem)
+      }
+    }
+
+    if (itemsUpdated.length) {
+      await this.db.updateLibraryItems(itemsUpdated)
+      SocketAuthority.emitter('items_updated', itemsUpdated.map(li => li.toJSONExpanded()))
+    }
+
+    res.json({
+      updated: itemsUpdated.length
+    })
+  }
+
   async matchAll(req, res) {
     if (!req.user.isAdminOrUp) {
       Logger.error(`[LibraryController] Non-root user attempted to match library items`, req.user)
@@ -776,7 +852,7 @@ class LibraryController {
       return res.sendStatus(404)
     }
 
-    var library = this.db.libraries.find(lib => lib.id === req.params.id)
+    const library = this.db.libraries.find(lib => lib.id === req.params.id)
     if (!library) {
       return res.status(404).send('Library not found')
     }

server/objects/metadata/BookMetadata.js

@@ -221,6 +221,32 @@ class BookMetadata {
     })
   }
 
+  /**
+   * Update narrator name if narrator is in book
+   * @param {String} oldNarratorName - Narrator name to get updated
+   * @param {String} newNarratorName - Updated narrator name
+   * @return {Boolean} True if narrator was updated
+   */
+  updateNarrator(oldNarratorName, newNarratorName) {
+    if (!this.hasNarrator(oldNarratorName)) return false
+    this.narrators = this.narrators.filter(n => n !== oldNarratorName)
+    if (!this.hasNarrator(newNarratorName)) {
+      this.narrators.push(newNarratorName)
+    }
+    return true
+  }
+
+  /**
+   * Remove narrator name if narrator is in book
+   * @param {String} narratorName - Narrator name to remove
+   * @return {Boolean} True if narrator was updated
+   */
+  removeNarrator(narratorName) {
+    if (!this.hasNarrator(narratorName)) return false
+    this.narrators = this.narrators.filter(n => n !== narratorName)
+    return true
+  }
+
   setData(scanMediaData = {}) {
     this.title = scanMediaData.title || null
     this.subtitle = scanMediaData.subtitle || null

server/routers/ApiRouter.js

@@ -84,6 +84,9 @@ class ApiRouter {
     this.router.get('/libraries/:id/search', LibraryController.middleware.bind(this), LibraryController.search.bind(this))
     this.router.get('/libraries/:id/stats', LibraryController.middleware.bind(this), LibraryController.stats.bind(this))
     this.router.get('/libraries/:id/authors', LibraryController.middleware.bind(this), LibraryController.getAuthors.bind(this))
+    this.router.get('/libraries/:id/narrators', LibraryController.middleware.bind(this), LibraryController.getNarrators.bind(this))
+    this.router.patch('/libraries/:id/narrators/:narratorId', LibraryController.middleware.bind(this), LibraryController.updateNarrator.bind(this))
+    this.router.delete('/libraries/:id/narrators/:narratorId', LibraryController.middleware.bind(this), LibraryController.removeNarrator.bind(this))
     this.router.get('/libraries/:id/matchall', LibraryController.middleware.bind(this), LibraryController.matchAll.bind(this))
     this.router.post('/libraries/:id/scan', LibraryController.middleware.bind(this), LibraryController.scan.bind(this))
     this.router.get('/libraries/:id/recent-episodes', LibraryController.middleware.bind(this), LibraryController.getRecentEpisodes.bind(this))