Merge remote-tracking branch 'origin/master' into auth_passportjs

client/pages/author/_id.vue

@@ -43,8 +43,8 @@
 
 <script>
 export default {
-  async asyncData({ store, app, params, redirect }) {
-    const author = await app.$axios.$get(`/api/authors/${params.id}?library=${store.state.libraries.currentLibraryId}&include=items,series`).catch((error) => {
+  async asyncData({ store, app, params, redirect, query }) {
+    const author = await app.$axios.$get(`/api/authors/${params.id}?library=${query.library || store.state.libraries.currentLibraryId}&include=items,series`).catch((error) => {
       console.error('Failed to get author', error)
       return null
     })
@@ -53,6 +53,10 @@ export default {
       return redirect(`/library/${store.state.libraries.currentLibraryId}/authors`)
     }
 
+    if (query.library) {
+      store.commit('libraries/setCurrentLibrary', query.library)
+    }
+
     return {
       author
     }

client/pages/config/index.vue

@@ -39,11 +39,15 @@
             <ui-multi-select v-model="newServerSettings.sortingPrefixes" small :items="newServerSettings.sortingPrefixes" :label="$strings.LabelPrefixesToIgnore" @input="updateSortingPrefixes" :disabled="updatingServerSettings" />
           </div>
 
-          <div class="flex items-center py-2">
+          <div class="flex items-center py-2 mb-2">
             <ui-toggle-switch labeledBy="settings-chromecast-support" v-model="newServerSettings.chromecastEnabled" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('chromecastEnabled', val)" />
             <p class="pl-4" id="settings-chromecast-support">{{ $strings.LabelSettingsChromecastSupport }}</p>
           </div>
 
+          <div class="w-44 mb-2">
+            <ui-dropdown v-model="newServerSettings.metadataFileFormat" small :items="metadataFileFormats" label="Metadata File Format" @input="updateMetadataFileFormat" :disabled="updatingServerSettings" />
+          </div>
+
           <div class="pt-4">
             <h2 class="font-semibold">{{ $strings.HeaderSettingsDisplay }}</h2>
           </div>
@@ -272,7 +276,17 @@ export default {
       useBookshelfView: false,
       isPurgingCache: false,
       newServerSettings: {},
-      showConfirmPurgeCache: false
+      showConfirmPurgeCache: false,
+      metadataFileFormats: [
+        {
+          text: '.json',
+          value: 'json'
+        },
+        {
+          text: '.abs',
+          value: 'abs'
+        }
+      ]
     }
   },
   watch: {
@@ -341,6 +355,10 @@ export default {
     updateServerLanguage(val) {
       this.updateSettingsKey('language', val)
     },
+    updateMetadataFileFormat(val) {
+      if (this.serverSettings.metadataFileFormat === val) return
+      this.updateSettingsKey('metadataFileFormat', val)
+    },
     updateSettingsKey(key, val) {
       this.updateServerSettings({
         [key]: val
@@ -350,8 +368,7 @@ export default {
       this.updatingServerSettings = true
       this.$store
         .dispatch('updateServerSettings', payload)
-        .then((success) => {
-          console.log('Updated Server Settings', success)
+        .then(() => {
           this.updatingServerSettings = false
           this.$toast.success('Server settings updated')
 

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/item/_id/index.vue

@@ -42,89 +42,12 @@
                   <nuxt-link v-for="(artist, index) in musicArtists" :key="index" :to="`/artist/${$encode(artist)}`" class="hover:underline">{{ artist }}<span v-if="index < musicArtists.length - 1">,&nbsp;</span></nuxt-link>
                 </p>
                 <p v-else-if="authors.length" class="mb-2 mt-0.5 text-gray-200 text-lg md:text-xl max-w-[calc(100vw-2rem)] overflow-hidden overflow-ellipsis">
-                  by <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
+                  by <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}?library=${libraryItem.libraryId}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
                 </p>
                 <p v-else class="mb-2 mt-0.5 text-gray-200 text-xl">by Unknown</p>
               </template>
 
-              <div v-if="narrator" class="flex py-0.5 mt-4">
-                <div class="w-32">
-                  <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelNarrators }}</span>
-                </div>
-                <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-ellipsis">
-                  <template v-for="(narrator, index) in narrators">
-                    <nuxt-link :key="narrator" :to="`/library/${libraryId}/bookshelf?filter=narrators.${$encode(narrator)}`" class="hover:underline">{{ narrator }}</nuxt-link
-                    ><span :key="index" v-if="index < narrators.length - 1">,&nbsp;</span>
-                  </template>
-                </div>
-              </div>
-              <div v-if="publishedYear" class="flex py-0.5">
-                <div class="w-32">
-                  <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelPublishYear }}</span>
-                </div>
-                <div>
-                  {{ publishedYear }}
-                </div>
-              </div>
-              <div v-if="musicAlbum" class="flex py-0.5">
-                <div class="w-32">
-                  <span class="text-white text-opacity-60 uppercase text-sm">Album</span>
-                </div>
-                <div>
-                  {{ musicAlbum }}
-                </div>
-              </div>
-              <div v-if="musicAlbumArtist" class="flex py-0.5">
-                <div class="w-32">
-                  <span class="text-white text-opacity-60 uppercase text-sm">Album Artist</span>
-                </div>
-                <div>
-                  {{ musicAlbumArtist }}
-                </div>
-              </div>
-              <div v-if="musicTrackPretty" class="flex py-0.5">
-                <div class="w-32">
-                  <span class="text-white text-opacity-60 uppercase text-sm">Track</span>
-                </div>
-                <div>
-                  {{ musicTrackPretty }}
-                </div>
-              </div>
-              <div v-if="musicDiscPretty" class="flex py-0.5">
-                <div class="w-32">
-                  <span class="text-white text-opacity-60 uppercase text-sm">Disc</span>
-                </div>
-                <div>
-                  {{ musicDiscPretty }}
-                </div>
-              </div>
-              <div class="flex py-0.5" v-if="genres.length">
-                <div class="w-32">
-                  <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelGenres }}</span>
-                </div>
-                <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-ellipsis">
-                  <template v-for="(genre, index) in genres">
-                    <nuxt-link :key="genre" :to="`/library/${libraryId}/bookshelf?filter=genres.${$encode(genre)}`" class="hover:underline">{{ genre }}</nuxt-link
-                    ><span :key="index" v-if="index < genres.length - 1">,&nbsp;</span>
-                  </template>
-                </div>
-              </div>
-              <div v-if="tracks.length || audioFile || (isPodcast && totalPodcastDuration)" class="flex py-0.5">
-                <div class="w-32">
-                  <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelDuration }}</span>
-                </div>
-                <div>
-                  {{ durationPretty }}
-                </div>
-              </div>
-              <div class="flex py-0.5">
-                <div class="w-32">
-                  <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelSize }}</span>
-                </div>
-                <div>
-                  {{ sizePretty }}
-                </div>
-              </div>
+              <content-library-item-details :library-item="libraryItem" />
             </div>
             <div class="hidden md:block flex-grow" />
           </div>
@@ -339,9 +262,6 @@ export default {
     libraryId() {
       return this.libraryItem.libraryId
     },
-    folderId() {
-      return this.libraryItem.folderId
-    },
     libraryItemId() {
       return this.libraryItem.id
     },
@@ -367,19 +287,10 @@ export default {
     title() {
       return this.mediaMetadata.title || 'No Title'
     },
-    publishedYear() {
-      return this.mediaMetadata.publishedYear
-    },
-    narrator() {
-      return this.mediaMetadata.narratorName
-    },
     bookSubtitle() {
       if (this.isPodcast) return null
       return this.mediaMetadata.subtitle
     },
-    genres() {
-      return this.mediaMetadata.genres || []
-    },
     podcastAuthor() {
       return this.mediaMetadata.author || ''
     },
@@ -389,25 +300,6 @@ export default {
     musicArtists() {
       return this.mediaMetadata.artists || []
     },
-    musicAlbum() {
-      return this.mediaMetadata.album || ''
-    },
-    musicAlbumArtist() {
-      return this.mediaMetadata.albumArtist || ''
-    },
-    musicTrackPretty() {
-      if (!this.mediaMetadata.trackNumber) return null
-      if (!this.mediaMetadata.trackTotal) return this.mediaMetadata.trackNumber
-      return `${this.mediaMetadata.trackNumber} / ${this.mediaMetadata.trackTotal}`
-    },
-    musicDiscPretty() {
-      if (!this.mediaMetadata.discNumber) return null
-      if (!this.mediaMetadata.discTotal) return this.mediaMetadata.discNumber
-      return `${this.mediaMetadata.discNumber} / ${this.mediaMetadata.discTotal}`
-    },
-    narrators() {
-      return this.mediaMetadata.narrators || []
-    },
     series() {
       return this.mediaMetadata.series || []
     },
@@ -421,26 +313,10 @@ export default {
         }
       })
     },
-    durationPretty() {
-      if (this.isPodcast) return this.$elapsedPrettyExtended(this.totalPodcastDuration)
-
-      if (!this.tracks.length && !this.audioFile) return 'N/A'
-      if (this.audioFile) return this.$elapsedPrettyExtended(this.duration)
-      return this.$elapsedPretty(this.duration)
-    },
     duration() {
       if (!this.tracks.length && !this.audioFile) return 0
       return this.media.duration
     },
-    totalPodcastDuration() {
-      if (!this.podcastEpisodes.length) return 0
-      let totalDuration = 0
-      this.podcastEpisodes.forEach((ep) => (totalDuration += ep.duration || 0))
-      return totalDuration
-    },
-    sizePretty() {
-      return this.$bytesPretty(this.media.size)
-    },
     libraryFiles() {
       return this.libraryItem.libraryFiles || []
     },
@@ -726,10 +602,11 @@ export default {
       }
     },
     clearProgressClick() {
+      if (!this.userMediaProgress) return
       if (confirm(`Are you sure you want to reset your progress?`)) {
         this.resettingProgress = true
         this.$axios
-          .$delete(`/api/me/progress/${this.libraryItemId}`)
+          .$delete(`/api/me/progress/${this.userMediaProgress.id}`)
           .then(() => {
             console.log('Progress reset complete')
             this.$toast.success(`Your progress was reset`)

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/pages/library/_library/podcast/latest.vue

@@ -45,7 +45,7 @@
                 <widgets-podcast-type-indicator :type="episode.episodeType" />
               </div>
 
-              <p class="text-sm text-gray-200 mb-4">{{ episode.subtitle }}</p>
+              <p class="text-sm text-gray-200 mb-4 episode-subtitle-long" v-html="episode.subtitle || episode.description" />
 
               <div class="flex items-center">
                 <button class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer focus:outline-none" :class="episode.progress && episode.progress.isFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick(episode)">