Version bump 2.2.16

Improve podcast editing

.github/workflows/integration-test.yml

@@ -0,0 +1,44 @@
+name: Integration Test
+
+on:
+  pull_request:
+  push:
+    branches-ignore:
+      - 'dependabot/**'  # Don't run dependabot branches, as they are already covered by pull requests
+
+jobs:
+  build:
+    name: build and test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: setup nade
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: install pkg
+        run: npm install -g pkg
+
+      - name: get client dependencies
+        working-directory: client
+        run: npm ci
+
+      - name: build client
+        working-directory: client
+        run: npm run generate
+
+      - name: get server dependencies
+        run: npm ci --only=production
+
+      - name: build binary
+        run: pkg -t node18-linux-x64 -o audiobookshelf .
+
+      - name: run audiobookshelf
+        run: |
+          ./audiobookshelf &
+          sleep 5
+
+      - name: test if server is available
+        run: curl -sf http://127.0.0.1:3333 | grep Audiobookshelf

build/debian/lib/systemd/system/audiobookshelf.service

@@ -11,7 +11,6 @@ ExecReload=/bin/kill -HUP $MAINPID
 Restart=always
 User=audiobookshelf
 Group=audiobookshelf
-PermissionsStartOnly=true
 
 [Install]
 WantedBy=multi-user.target

client/assets/fonts.css

@@ -48,25 +48,6 @@
   font-size: 1.5rem;
 }
 
-@font-face {
-  font-family: 'Gentium Book Basic';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/GentiumBookBasic.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: 'Gentium Book Basic';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(~static/fonts/GentiumBookBasic.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
 /* cyrillic-ext */
 @font-face {
   font-family: 'Source Sans Pro';

client/components/app/Appbar.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="w-full h-16 bg-primary relative">
-    <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-50">
+    <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-60">
       <div class="flex h-full items-center">
         <nuxt-link to="/">
-          <img src="~static/icon.svg" class="w-8 min-w-8 h-8 mr-2 sm:w-12 sm:min-w-12 sm:h-12 sm:mr-4" />
+          <img src="~static/icon.svg" :alt="$strings.ButtonHome" class="w-8 min-w-8 h-8 mr-2 sm:w-10 sm:min-w-10 sm:h-10 sm:mr-4" />
         </nuxt-link>
 
         <nuxt-link to="/">
-          <h1 class="text-2xl font-book mr-6 hidden lg:block hover:underline">audiobookshelf <span v-if="showExperimentalFeatures" class="material-icons text-lg text-warning pr-1">logo_dev</span></h1>
+          <h1 class="text-xl mr-6 hidden lg:block hover:underline">audiobookshelf <span v-if="showExperimentalFeatures" class="material-icons text-lg text-warning pr-1">logo_dev</span></h1>
         </nuxt-link>
 
         <ui-libraries-dropdown class="mr-2" />
@@ -24,19 +24,25 @@
           <google-cast-launcher></google-cast-launcher>
         </div>
 
-        <nuxt-link v-if="currentLibrary" to="/config/stats" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 hidden sm:flex items-center justify-center mx-1">
-          <span class="material-icons text-2xl" aria-label="User Stats" role="button">equalizer</span>
+        <nuxt-link v-if="currentLibrary" to="/config/stats" class="hover:text-gray-200 cursor-pointer w-8 h-8 hidden sm:flex items-center justify-center mx-1">
+          <ui-tooltip :text="$strings.HeaderYourStats" direction="bottom" class="flex items-center">
+            <span class="material-icons text-2xl" aria-label="User Stats" role="button">equalizer</span>
+          </ui-tooltip>
         </nuxt-link>
 
-        <nuxt-link v-if="userCanUpload && currentLibrary" to="/upload" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
-          <span class="material-icons text-2xl" aria-label="Upload Media" role="button">upload</span>
+        <nuxt-link v-if="userCanUpload && currentLibrary" to="/upload" class="hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
+          <ui-tooltip :text="$strings.ButtonUpload" direction="bottom" class="flex items-center">
+            <span class="material-icons text-2xl" aria-label="Upload Media" role="button">upload</span>
+          </ui-tooltip>
         </nuxt-link>
 
-        <nuxt-link v-if="userIsAdminOrUp" to="/config" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
-          <span class="material-icons text-2xl" aria-label="System Settings" role="button">settings</span>
+        <nuxt-link v-if="userIsAdminOrUp" to="/config" class="hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
+          <ui-tooltip :text="$strings.HeaderSettings" direction="bottom" class="flex items-center">
+            <span class="material-icons text-2xl" aria-label="System Settings" role="button">settings</span>
+          </ui-tooltip>
         </nuxt-link>
 
-        <nuxt-link to="/account" class="relative w-9 h-9 md:w-32 bg-fg border border-gray-500 rounded shadow-sm ml-1.5 sm:ml-3 md:ml-5 md:pl-3 md:pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer hover:bg-bg hover:bg-opacity-40" aria-haspopup="listbox" aria-expanded="true">
+        <nuxt-link to="/account" class="relative w-9 h-9 md:w-32 bg-fg border border-gray-500 rounded shadow-sm ml-1.5 sm:ml-3 md:ml-5 md:pl-3 md:pr-10 py-2 text-left sm:text-sm cursor-pointer hover:bg-bg hover:bg-opacity-40" aria-haspopup="listbox" aria-expanded="true">
           <span class="items-center hidden md:flex">
             <span class="block truncate">{{ username }}</span>
           </span>
@@ -52,17 +58,17 @@
           <span class="material-icons text-2xl -ml-2 pr-1 text-white">play_arrow</span>
           {{ $strings.ButtonPlay }}
         </ui-btn>
-        <ui-tooltip v-if="userIsAdminOrUp && !isPodcastLibrary" :text="$strings.ButtonQuickMatch" direction="bottom">
+        <ui-tooltip v-if="userIsAdminOrUp && isBookLibrary" :text="$strings.ButtonQuickMatch" direction="bottom">
           <ui-icon-btn :disabled="processingBatch" icon="auto_awesome" @click="batchAutoMatchClick" class="mx-1.5" />
         </ui-tooltip>
-        <ui-tooltip v-if="!isPodcastLibrary" :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
+        <ui-tooltip v-if="isBookLibrary" :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
           <ui-read-icon-btn :disabled="processingBatch" :is-read="selectedIsFinished" @click="toggleBatchRead" class="mx-1.5" />
         </ui-tooltip>
-        <ui-tooltip v-if="userCanUpdate && !isPodcastLibrary" :text="$strings.LabelAddToCollection" direction="bottom">
+        <ui-tooltip v-if="userCanUpdate && isBookLibrary" :text="$strings.LabelAddToCollection" direction="bottom">
           <ui-icon-btn :disabled="processingBatch" icon="collections_bookmark" @click="batchAddToCollectionClick" class="mx-1.5" />
         </ui-tooltip>
         <template v-if="userCanUpdate">
-          <ui-tooltip text="Edit" direction="bottom">
+          <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
             <ui-icon-btn :disabled="processingBatch" icon="edit" bg-color="warning" class="mx-1.5" @click="batchEditClick" />
           </ui-tooltip>
         </template>
@@ -97,6 +103,9 @@ export default {
     isPodcastLibrary() {
       return this.libraryMediaType === 'podcast'
     },
+    isBookLibrary() {
+      return this.libraryMediaType === 'book'
+    },
     isHome() {
       return this.$route.name === 'library-library'
     },
@@ -116,7 +125,7 @@ export default {
       return this.$store.state.globals.selectedMediaItems
     },
     selectedMediaItemsArePlayable() {
-      return !this.selectedMediaItems.some(i => !i.hasTracks)
+      return !this.selectedMediaItems.some((i) => !i.hasTracks)
     },
     userMediaProgress() {
       return this.$store.state.user.user.mediaProgress || []
@@ -158,12 +167,15 @@ export default {
       this.$store.commit('setProcessingBatch', true)
 
       const libraryItemIds = this.selectedMediaItems.map((i) => i.id)
-      const libraryItems = await this.$axios.$post(`/api/items/batch/get`, { libraryItemIds }).catch((error) => {
-        const errorMsg = error.response.data || 'Failed to get items'
-        console.error(errorMsg, error)
-        this.$toast.error(errorMsg)
-        return []
-      })
+      const libraryItems = await this.$axios
+        .$post(`/api/items/batch/get`, { libraryItemIds })
+        .then((res) => res.libraryItems)
+        .catch((error) => {
+          const errorMsg = error.response.data || 'Failed to get items'
+          console.error(errorMsg, error)
+          this.$toast.error(errorMsg)
+          return []
+        })
 
       if (!libraryItems.length) {
         this.$store.commit('setProcessingBatch', false)
@@ -172,12 +184,15 @@ export default {
 
       const queueItems = []
       libraryItems.forEach((item) => {
+        let subtitle = ''
+        if (item.mediaType === 'book') subtitle = item.media.metadata.authors.map((au) => au.name).join(', ')
+        else if (item.mediaType === 'music') subtitle = item.media.metadata.artists.join(', ')
         queueItems.push({
           libraryItemId: item.id,
           libraryId: item.libraryId,
           episodeId: null,
           title: item.media.metadata.title,
-          subtitle: item.media.metadata.authors.map((au) => au.name).join(', '),
+          subtitle,
           caption: '',
           duration: item.media.duration || null,
           coverPath: item.media.coverPath || null

client/components/app/BookShelfCategorized.vue

@@ -1,17 +1,17 @@
 <template>
   <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative">
     <!-- Cover size widget -->
-    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-30" />
+    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-50" />
 
     <div v-if="loaded && !shelves.length && !search" class="w-full flex flex-col items-center justify-center py-12">
-      <p class="text-center text-2xl font-book mb-4 py-4">{{ libraryName }} Library is empty!</p>
+      <p class="text-center text-2xl mb-4 py-4">{{ libraryName }} Library is empty!</p>
       <div v-if="userIsAdminOrUp" class="flex">
         <ui-btn to="/config" color="primary" class="w-52 mr-2">Configure Scanner</ui-btn>
         <ui-btn color="success" class="w-52" @click="scan">Scan Library</ui-btn>
       </div>
     </div>
     <div v-else-if="loaded && !shelves.length && search" class="w-full h-40 flex items-center justify-center">
-      <p class="text-center text-xl font-book py-4">No results for query</p>
+      <p class="text-center text-xl py-4">No results for query</p>
     </div>
     <!-- Alternate plain view -->
     <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24">
@@ -136,7 +136,7 @@ export default {
             const mediaItem = {
               id: thisEntity.id,
               mediaType: thisEntity.mediaType,
-              hasTracks: thisEntity.mediaType === 'podcast' || thisEntity.media.numTracks || (thisEntity.media.tracks && thisEntity.media.tracks.length)
+              hasTracks: thisEntity.mediaType === 'podcast' || thisEntity.media.audioFile || thisEntity.media.numTracks || (thisEntity.media.tracks && thisEntity.media.tracks.length)
             }
             this.$store.commit('globals/setMediaItemSelected', { item: mediaItem, selected: isSelecting })
           } else {
@@ -147,7 +147,7 @@ export default {
         const mediaItem = {
           id: entity.id,
           mediaType: entity.mediaType,
-          hasTracks: entity.mediaType === 'podcast' || entity.media.numTracks || (entity.media.tracks && entity.media.tracks.length)
+          hasTracks: entity.mediaType === 'podcast' || entity.media.audioFile || entity.media.numTracks || (entity.media.tracks && entity.media.tracks.length)
         }
         this.$store.commit('globals/toggleMediaItemSelected', mediaItem)
       }
@@ -167,8 +167,8 @@ export default {
       this.loaded = true
     },
     async fetchCategories() {
-      var categories = await this.$axios
-        .$get(`/api/libraries/${this.currentLibraryId}/personalized`)
+      const categories = await this.$axios
+        .$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed`)
         .then((data) => {
           return data
         })
@@ -405,8 +405,6 @@ export default {
       }
     },
     removeListeners() {
-      this.$store.commit('user/removeSettingsListener', 'bookshelf')
-
       if (this.$root.socket) {
         this.$root.socket.off('user_updated', this.userUpdated)
         this.$root.socket.off('author_updated', this.authorUpdated)

client/components/app/BookShelfRow.vue

@@ -44,7 +44,7 @@
       </div>
     </div>
 
-    <div class="absolute text-center categoryPlacard font-book transform z-30 bottom-px left-4 md:left-8 w-44 rounded-md" style="height: 22px">
+    <div class="absolute text-center categoryPlacard transform z-30 bottom-px left-4 md:left-8 w-44 rounded-md" style="height: 22px">
       <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border">
         <p class="transform text-sm">{{ $strings[shelf.labelStringKey] }}</p>
       </div>

client/components/app/BookShelfToolbar.vue

@@ -16,17 +16,17 @@
       <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="flex-grow h-full flex justify-center items-center" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
         <p class="text-sm">{{ $strings.ButtonLatest }}</p>
       </nuxt-link>
-      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="flex-grow h-full flex justify-center items-center" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="flex-grow h-full flex justify-center items-center" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
         <p v-if="isSeriesPage" class="text-sm">{{ $strings.ButtonSeries }}</p>
         <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
         </svg>
       </nuxt-link>
-      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="isCollectionsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="isCollectionsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
         <p v-if="isCollectionsPage" class="text-sm">{{ $strings.ButtonCollections }}</p>
         <span v-else class="material-icons-outlined text-lg">collections_bookmark</span>
       </nuxt-link>
-      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/authors`" class="flex-grow h-full flex justify-center items-center" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+      <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/authors`" class="flex-grow h-full flex justify-center items-center" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
         <p v-if="isAuthorsPage" class="text-sm">{{ $strings.ButtonAuthors }}</p>
         <svg v-else class="w-5 h-5" viewBox="0 0 24 24">
           <path
@@ -39,10 +39,10 @@
         <p class="text-sm">{{ $strings.ButtonSearch }}</p>
       </nuxt-link>
     </div>
-    <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-30 flex items-center justify-end md:justify-start px-2 md:px-8">
+    <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-40 flex items-center justify-end md:justify-start px-2 md:px-8">
       <!-- Series books page -->
       <template v-if="selectedSeries">
-        <p class="pl-2 font-book text-base md:text-lg">
+        <p class="pl-2 text-base md:text-lg">
           {{ seriesName }}
         </p>
         <div class="w-6 h-6 rounded-full bg-black bg-opacity-30 flex items-center justify-center ml-3">
@@ -50,31 +50,36 @@
         </div>
         <div class="flex-grow" />
         <ui-checkbox v-if="!isBatchSelecting" v-model="settings.collapseBookSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseBookSeries" />
-        <ui-btn v-if="!isBatchSelecting" color="primary" small :loading="processingSeries" class="items-center ml-1 sm:ml-4 hidden md:flex" @click="markSeriesFinished">
-          <div class="h-5 w-5">
-            <svg v-if="isSeriesFinished" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(63, 181, 68)">
-              <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z" />
-            </svg>
-            <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-7 19.6l-7-4.66V3h14v12.93l-7 4.67zm-2.01-7.42l-2.58-2.59L6 12l4 4 8-8-1.42-1.42z" />
-            </svg>
-          </div>
-          <span class="pl-2"> {{ $strings.LabelMarkSeries }} {{ isSeriesFinished ? $strings.LabelNotFinished : $strings.LabelFinished }}</span>
-        </ui-btn>
-        <ui-btn v-if="isSeriesRemovedFromContinueListening && !isBatchSelecting" small :loading="processingSeries" @click="reAddSeriesToContinueListening" class="hidden md:block ml-2"> Re-Add Series to Continue Listening </ui-btn>
+
+        <!-- RSS feed -->
+        <ui-tooltip v-if="seriesRssFeed" :text="$strings.LabelOpenRSSFeed" direction="top">
+          <ui-icon-btn icon="rss_feed" class="mx-0.5" :size="7" icon-font-size="1.2rem" bg-color="success" outlined @click="showOpenSeriesRSSFeed" />
+        </ui-tooltip>
+
+        <ui-context-menu-dropdown v-if="!isBatchSelecting && seriesContextMenuItems.length" :items="seriesContextMenuItems" class="mx-px" @action="seriesContextMenuAction" />
       </template>
       <!-- library & collections page -->
       <template v-else-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome">
-        <p class="font-book hidden md:block">{{ numShowing }} {{ entityName }}</p>
+        <p class="hidden md:block">{{ numShowing }} {{ entityName }}</p>
 
         <div class="flex-grow hidden sm:inline-block" />
 
-        <ui-checkbox v-if="isLibraryPage && !isPodcastLibrary && !isBatchSelecting" v-model="settings.collapseSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
-        <controls-library-filter-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
-        <controls-library-sort-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateOrder" />
-        <controls-library-filter-select v-if="isSeriesPage && !isBatchSelecting" v-model="seriesFilterBy" is-series class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesFilter" />
-        <controls-sort-select v-if="isSeriesPage && !isBatchSelecting" v-model="seriesSortBy" :descending.sync="seriesSortDesc" :items="seriesSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesSort" />
+        <!-- collapse series checkbox -->
+        <ui-checkbox v-if="isLibraryPage && isBookLibrary && !isBatchSelecting" v-model="settings.collapseSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
 
+        <!-- library filter select -->
+        <controls-library-filter-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
+
+        <!-- library sort select -->
+        <controls-library-sort-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateOrder" />
+
+        <!-- series filter select -->
+        <controls-library-filter-select v-if="isSeriesPage && !isBatchSelecting" v-model="settings.seriesFilterBy" is-series class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesFilter" />
+
+        <!-- series sort select -->
+        <controls-sort-select v-if="isSeriesPage && !isBatchSelecting" v-model="settings.seriesSortBy" :descending.sync="settings.seriesSortDesc" :items="seriesSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesSort" />
+
+        <!-- issues page remove all button -->
         <ui-btn v-if="isIssuesFilter && userCanDelete && !isBatchSelecting" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">{{ $strings.ButtonRemoveAll }} {{ numShowing }} {{ entityName }}</ui-btn>
       </template>
       <!-- search page -->
@@ -118,6 +123,32 @@ export default {
     }
   },
   computed: {
+    seriesContextMenuItems() {
+      if (!this.selectedSeries) return []
+
+      const items = [
+        {
+          text: this.isSeriesFinished ? this.$strings.MessageMarkAsNotFinished : this.$strings.MessageMarkAsFinished,
+          action: 'mark-series-finished'
+        }
+      ]
+
+      if (this.userIsAdminOrUp || this.selectedSeries.rssFeed) {
+        items.push({
+          text: this.$strings.LabelOpenRSSFeed,
+          action: 'open-rss-feed'
+        })
+      }
+
+      if (this.isSeriesRemovedFromContinueListening) {
+        items.push({
+          text: 'Re-Add Series to Continue Listening',
+          action: 're-add-to-continue-listening'
+        })
+      }
+
+      return items
+    },
     seriesSortItems() {
       return [
         {
@@ -153,9 +184,15 @@ export default {
     currentLibraryMediaType() {
       return this.$store.getters['libraries/getCurrentLibraryMediaType']
     },
+    isBookLibrary() {
+      return this.currentLibraryMediaType === 'book'
+    },
     isPodcastLibrary() {
       return this.currentLibraryMediaType === 'podcast'
     },
+    isMusicLibrary() {
+      return this.currentLibraryMediaType === 'music'
+    },
     isLibraryPage() {
       return this.page === ''
     },
@@ -180,10 +217,16 @@ export default {
     isAuthorsPage() {
       return this.$route.name === 'library-library-authors'
     },
+    isAlbumsPage() {
+      return this.page === 'albums'
+    },
     numShowing() {
       return this.totalEntities
     },
     entityName() {
+      if (this.isAlbumsPage) return 'Albums'
+      if (this.isMusicLibrary) return 'Tracks'
+
       if (this.isPodcastLibrary) return this.$strings.LabelPodcasts
       if (!this.page) return this.$strings.LabelBooks
       if (this.isSeriesPage) return this.$strings.LabelSeries
@@ -200,6 +243,9 @@ export default {
     seriesProgress() {
       return this.selectedSeries ? this.selectedSeries.progress : null
     },
+    seriesRssFeed() {
+      return this.selectedSeries ? this.selectedSeries.rssFeed : null
+    },
     seriesLibraryItemIds() {
       if (!this.seriesProgress) return []
       return this.seriesProgress.libraryItemIds || []
@@ -219,33 +265,34 @@ export default {
     },
     isIssuesFilter() {
       return this.filterBy === 'issues' && this.$route.query.filter === 'issues'
-    },
-    seriesSortBy: {
-      get() {
-        return this.$store.state.libraries.seriesSortBy
-      },
-      set(val) {
-        this.$store.commit('libraries/setSeriesSortBy', val)
-      }
-    },
-    seriesSortDesc: {
-      get() {
-        return this.$store.state.libraries.seriesSortDesc
-      },
-      set(val) {
-        this.$store.commit('libraries/setSeriesSortDesc', val)
-      }
-    },
-    seriesFilterBy: {
-      get() {
-        return this.$store.state.libraries.seriesFilterBy
-      },
-      set(val) {
-        this.$store.commit('libraries/setSeriesFilterBy', val)
-      }
     }
   },
   methods: {
+    seriesContextMenuAction(action) {
+      if (action === 'open-rss-feed') {
+        this.showOpenSeriesRSSFeed()
+      } else if (action === 're-add-to-continue-listening') {
+        if (this.processingSeries) {
+          console.warn('Already processing series')
+          return
+        }
+        this.reAddSeriesToContinueListening()
+      } else if (action === 'mark-series-finished') {
+        if (this.processingSeries) {
+          console.warn('Already processing series')
+          return
+        }
+        this.markSeriesFinished()
+      }
+    },
+    showOpenSeriesRSSFeed() {
+      this.$store.commit('globals/setRSSFeedOpenCloseModal', {
+        id: this.selectedSeries.id,
+        name: this.selectedSeries.name,
+        type: 'series',
+        feed: this.selectedSeries.rssFeed
+      })
+    },
     reAddSeriesToContinueListening() {
       this.processingSeries = true
       this.$axios
@@ -310,27 +357,38 @@ export default {
       }
     },
     markSeriesFinished() {
-      var newIsFinished = !this.isSeriesFinished
-      this.processingSeries = true
-      var updateProgressPayloads = this.seriesLibraryItemIds.map((lid) => {
-        return {
-          libraryItemId: lid,
-          isFinished: newIsFinished
-        }
-      })
-      console.log('Progress payloads', updateProgressPayloads)
-      this.$axios
-        .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
-        .then(() => {
-          this.$toast.success('Series update success')
-          this.selectedSeries.progress.isFinished = newIsFinished
-          this.processingSeries = false
-        })
-        .catch((error) => {
-          this.$toast.error('Series update failed')
-          console.error('Failed to batch update read/not read', error)
-          this.processingSeries = false
-        })
+      const newIsFinished = !this.isSeriesFinished
+
+      const payload = {
+        message: newIsFinished ? this.$strings.MessageConfirmMarkSeriesFinished : this.$strings.MessageConfirmMarkSeriesNotFinished,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.processingSeries = true
+            const updateProgressPayloads = this.seriesLibraryItemIds.map((lid) => {
+              return {
+                libraryItemId: lid,
+                isFinished: newIsFinished
+              }
+            })
+            console.log('Progress payloads', updateProgressPayloads)
+            this.$axios
+              .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
+              .then(() => {
+                this.$toast.success(this.$strings.ToastSeriesUpdateSuccess)
+                this.selectedSeries.progress.isFinished = newIsFinished
+              })
+              .catch((error) => {
+                this.$toast.error(this.$strings.ToastSeriesUpdateFailed)
+                console.error('Failed to batch update read/not read', error)
+              })
+              .finally(() => {
+                this.processingSeries = false
+              })
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
     },
     updateOrder() {
       this.saveSettings()
@@ -339,10 +397,10 @@ export default {
       this.saveSettings()
     },
     updateSeriesSort() {
-      this.$eventBus.$emit('series-sort-updated')
+      this.saveSettings()
     },
     updateSeriesFilter() {
-      this.$eventBus.$emit('series-sort-updated')
+      this.saveSettings()
     },
     updateCollapseSeries() {
       this.saveSettings()
@@ -363,16 +421,32 @@ export default {
     },
     setBookshelfTotalEntities(totalEntities) {
       this.totalEntities = totalEntities
+    },
+    rssFeedOpen(data) {
+      if (data.entityId === this.seriesId) {
+        console.log('RSS Feed Opened', data)
+        this.selectedSeries.rssFeed = data
+      }
+    },
+    rssFeedClosed(data) {
+      if (data.entityId === this.seriesId) {
+        console.log('RSS Feed Closed', data)
+        this.selectedSeries.rssFeed = null
+      }
     }
   },
   mounted() {
     this.init()
-    this.$store.commit('user/addSettingsListener', { id: 'bookshelftoolbar', meth: this.settingsUpdated })
+    this.$eventBus.$on('user-settings', this.settingsUpdated)
     this.$eventBus.$on('bookshelf-total-entities', this.setBookshelfTotalEntities)
+    this.$root.socket.on('rss_feed_open', this.rssFeedOpen)
+    this.$root.socket.on('rss_feed_closed', this.rssFeedClosed)
   },
   beforeDestroy() {
-    this.$store.commit('user/removeSettingsListener', 'bookshelftoolbar')
+    this.$eventBus.$off('user-settings', this.settingsUpdated)
     this.$eventBus.$off('bookshelf-total-entities', this.setBookshelfTotalEntities)
+    this.$root.socket.off('rss_feed_open', this.rssFeedOpen)
+    this.$root.socket.off('rss_feed_closed', this.rssFeedClosed)
   }
 }
 </script>

client/components/app/ConfigSideNav.vue

@@ -1,15 +1,19 @@
 <template>
-  <div class="w-44 fixed left-0 top-16 h-full bg-bg bg-opacity-100 md:bg-opacity-70 shadow-lg border-r border-white border-opacity-5 py-3 transform transition-transform" :class="wrapperClass" v-click-outside="clickOutside">
-    <div class="md:hidden flex items-center justify-end pb-2 px-4 mb-1" @click="closeDrawer">
-      <span class="material-icons text-2xl">arrow_back</span>
+  <div>
+    <div class="w-44 fixed left-0 top-16 bg-bg bg-opacity-100 md:bg-opacity-70 shadow-lg border-r border-white border-opacity-5 py-3 transform transition-transform mb-12 overflow-y-auto" :class="wrapperClass + ' ' + (streamLibraryItem ? 'h-[calc(100%-270px)]' : 'h-[calc(100%-110px)]')" v-click-outside="clickOutside">
+      <div v-show="isMobilePortrait" class="flex items-center justify-end pb-2 px-4 mb-1" @click="closeDrawer">
+        <span class="material-icons text-2xl">arrow_back</span>
+      </div>
+
+      <nuxt-link v-for="route in configRoutes" :key="route.id" :to="route.path" class="w-full px-4 h-12 border-b border-primary border-opacity-30 flex items-center cursor-pointer relative" :class="routeName === route.id ? 'bg-primary bg-opacity-70' : 'hover:bg-primary hover:bg-opacity-30'">
+        <p>{{ route.title }}</p>
+        <div v-show="routeName === route.iod" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      </nuxt-link>
+
+      <modals-changelog-view-modal v-model="showChangelogModal" :changelog="currentVersionChangelog" :currentVersion="$config.version" />
     </div>
 
-    <nuxt-link v-for="route in configRoutes" :key="route.id" :to="route.path" class="w-full px-4 h-12 border-b border-primary border-opacity-30 flex items-center cursor-pointer relative" :class="routeName === route.id ? 'bg-primary bg-opacity-70' : 'hover:bg-primary hover:bg-opacity-30'">
-      <p>{{ route.title }}</p>
-      <div v-show="routeName === route.iod" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
-
-    <div class="w-full h-12 px-4 border-t border-black border-opacity-20 absolute left-0 flex flex-col justify-center" :style="{ bottom: streamLibraryItem && isMobileLandscape ? '300px' : '65px' }">
+    <div class="w-44 h-12 px-4 border-t bg-bg border-black border-opacity-20 fixed left-0 flex flex-col justify-center" :class="wrapperClass" :style="{ bottom: streamLibraryItem ? '160px' : '0px' }">
       <div class="flex justify-between">
         <p class="underline font-mono text-sm" @click="clickChangelog">v{{ $config.version }}</p>
 
@@ -17,8 +21,6 @@
       </div>
       <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xs">Latest: {{ latestVersion }}</a>
     </div>
-
-    <modals-changelog-view-modal v-model="showChangelogModal" :changelog="currentVersionChangelog" :currentVersion="$config.version" />
   </div>
 </template>
 
@@ -87,6 +89,11 @@ export default {
           id: 'config-notifications',
           title: this.$strings.HeaderNotifications,
           path: '/config/notifications'
+        },
+        {
+          id: 'config-item-metadata-utils',
+          title: this.$strings.HeaderItemMetadataUtils,
+          path: '/config/item-metadata-utils'
         }
       ]
 
@@ -109,7 +116,7 @@ export default {
       var classes = []
       if (this.drawerOpen) classes.push('translate-x-0')
       else classes.push('-translate-x-44')
-      if (this.isMobile) classes.push('z-50')
+      if (this.isMobilePortrait) classes.push('z-50')
       else classes.push('z-40')
       return classes.join(' ')
     },
@@ -119,9 +126,11 @@ export default {
     isMobileLandscape() {
       return this.$store.state.globals.isMobileLandscape
     },
+    isMobilePortrait() {
+      return this.$store.state.globals.isMobilePortrait
+    },
     drawerOpen() {
-      if (this.isMobile) return this.isOpen
-      return true
+      return !this.isMobilePortrait || this.isOpen
     },
     routeName() {
       return this.$route.name

client/components/app/LazyBookshelf.vue

@@ -6,8 +6,8 @@
       </div>
     </template>
 
-    <div v-if="initialized && !totalShelves && !hasFilter && entityName === 'books'" class="w-full flex flex-col items-center justify-center py-12">
-      <p class="text-center text-2xl font-book mb-4 py-4">{{ $getString('MessageXLibraryIsEmpty', [libraryName]) }}</p>
+    <div v-if="initialized && !totalShelves && !hasFilter && entityName === 'items'" class="w-full flex flex-col items-center justify-center py-12">
+      <p class="text-center text-2xl mb-4 py-4">{{ $getString('MessageXLibraryIsEmpty', [libraryName]) }}</p>
       <div v-if="userIsAdminOrUp" class="flex">
         <ui-btn to="/config" color="primary" class="w-52 mr-2">{{ $strings.ButtonConfigureScanner }}</ui-btn>
         <ui-btn color="success" class="w-52" @click="scan">{{ $strings.ButtonScanLibrary }}</ui-btn>
@@ -16,12 +16,12 @@
     <div v-else-if="!totalShelves && initialized" class="w-full py-16">
       <p class="text-xl text-center">{{ emptyMessage }}</p>
       <!-- Clear filter only available on Library bookshelf -->
-      <div v-if="entityName === 'books'" class="flex justify-center mt-2">
+      <div v-if="entityName === 'items'" class="flex justify-center mt-2">
         <ui-btn v-if="hasFilter" color="primary" @click="clearFilter">{{ $strings.ButtonClearFilter }}</ui-btn>
       </div>
     </div>
 
-    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-30" />
+    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-50" />
   </div>
 </template>
 
@@ -81,8 +81,11 @@ export default {
     showExperimentalFeatures() {
       return this.$store.state.showExperimentalFeatures
     },
+    libraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
     isPodcast() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
+      return this.libraryMediaType === 'podcast'
     },
     emptyMessage() {
       if (this.page === 'series') return this.$strings.MessageBookshelfNoSeries
@@ -96,17 +99,17 @@ export default {
       return this.$strings.MessageNoResults
     },
     entityName() {
-      if (!this.page) return 'books'
+      if (!this.page) return 'items'
       return this.page
     },
     seriesSortBy() {
-      return this.$store.state.libraries.seriesSortBy
+      return this.$store.getters['user/getUserSetting']('seriesSortBy')
     },
     seriesSortDesc() {
-      return this.$store.state.libraries.seriesSortDesc
+      return this.$store.getters['user/getUserSetting']('seriesSortDesc')
     },
     seriesFilterBy() {
-      return this.$store.state.libraries.seriesFilterBy
+      return this.$store.getters['user/getUserSetting']('seriesFilterBy')
     },
     orderBy() {
       return this.$store.getters['user/getUserSetting']('orderBy')
@@ -158,12 +161,9 @@ export default {
     libraryName() {
       return this.$store.getters['libraries/getCurrentLibraryName']
     },
-    isEntityBook() {
-      return this.entityName === 'series-books' || this.entityName === 'books'
-    },
     bookWidth() {
-      var coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
-      if (this.isCoverSquareAspectRatio) return coverSize * 1.6
+      const coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
+      if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') return coverSize * 1.6
       return coverSize
     },
     bookHeight() {
@@ -192,7 +192,8 @@ export default {
     },
     shelfHeight() {
       if (this.isAlternativeBookshelfView) {
-        var extraTitleSpace = this.isEntityBook ? 80 : 40
+        const isItemEntity = this.entityName === 'series-books' || this.entityName === 'items'
+        const extraTitleSpace = isItemEntity ? 80 : this.entityName === 'albums' ? 60 : 40
         return this.entityHeight + extraTitleSpace * this.sizeMultiplier
       }
       return this.entityHeight + 40
@@ -205,7 +206,7 @@ export default {
       return this.$store.state.globals.selectedMediaItems || []
     },
     sizeMultiplier() {
-      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
+      const baseSize = this.isCoverSquareAspectRatio ? 192 : 120
       return this.entityWidth / baseSize
     }
   },
@@ -214,8 +215,8 @@ export default {
       this.$store.dispatch('user/updateUserSettings', { filterBy: 'all' })
     },
     editEntity(entity) {
-      if (this.entityName === 'books' || this.entityName === 'series-books') {
-        var bookIds = this.entities.map((e) => e.id)
+      if (this.entityName === 'items' || this.entityName === 'series-books') {
+        const bookIds = this.entities.map((e) => e.id)
         this.$store.commit('setBookshelfBookIds', bookIds)
         this.$store.commit('showEditModal', entity)
       } else if (this.entityName === 'collections') {
@@ -229,7 +230,7 @@ export default {
       this.isSelectionMode = false
     },
     selectEntity(entity, shiftKey) {
-      if (this.entityName === 'books' || this.entityName === 'series-books') {
+      if (this.entityName === 'items' || this.entityName === 'series-books') {
         const indexOf = this.entities.findIndex((ent) => ent && ent.id === entity.id)
         const lastLastItemIndexSelected = this.lastItemIndexSelected
         if (!this.selectedMediaItems.some((i) => i.id === entity.id)) {
@@ -273,9 +274,8 @@ export default {
               const mediaItem = {
                 id: thisEntity.id,
                 mediaType: thisEntity.mediaType,
-                hasTracks: thisEntity.mediaType === 'podcast' || thisEntity.media.numTracks || (thisEntity.media.tracks && thisEntity.media.tracks.length)
+                hasTracks: thisEntity.mediaType === 'podcast' || thisEntity.media.audioFile || thisEntity.media.numTracks || (thisEntity.media.tracks && thisEntity.media.tracks.length)
               }
-              console.log('Setting media item selected', mediaItem, 'Num Selected=', this.selectedMediaItems.length)
               this.$store.commit('globals/setMediaItemSelected', { item: mediaItem, selected: isSelecting })
             } else {
               console.error('Invalid entity index', i)
@@ -285,7 +285,7 @@ export default {
           const mediaItem = {
             id: entity.id,
             mediaType: entity.mediaType,
-            hasTracks: entity.mediaType === 'podcast' || entity.media.numTracks || (entity.media.tracks && entity.media.tracks.length)
+            hasTracks: entity.mediaType === 'podcast' || entity.media.audioFile || entity.media.numTracks || (entity.media.tracks && entity.media.tracks.length)
           }
           this.$store.commit('globals/toggleMediaItemSelected', mediaItem)
         }
@@ -308,7 +308,7 @@ export default {
       }
     },
     async fetchEntites(page = 0) {
-      var startIndex = page * this.booksPerFetch
+      const startIndex = page * this.booksPerFetch
 
       this.isFetchingEntities = true
 
@@ -316,9 +316,9 @@ export default {
         this.currentSFQueryString = this.buildSearchParams()
       }
 
-      const entityPath = this.entityName === 'books' || this.entityName === 'series-books' ? 'items' : this.entityName
+      const entityPath = this.entityName === 'series-books' ? 'items' : this.entityName
       const sfQueryString = this.currentSFQueryString ? this.currentSFQueryString + '&' : ''
-      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1`
+      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1&include=rssfeed`
 
       const payload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/${entityPath}${fullQueryString}`).catch((error) => {
         console.error('failed to fetch books', error)
@@ -340,7 +340,7 @@ export default {
         }
 
         for (let i = 0; i < payload.results.length; i++) {
-          var index = i + startIndex
+          const index = i + startIndex
           this.entities[index] = payload.results[i]
           if (this.entityComponentRefs[index]) {
             this.entityComponentRefs[index].setEntity(this.entities[index])
@@ -498,7 +498,7 @@ export default {
       }
     },
     settingsUpdated(settings) {
-      var wasUpdated = this.checkUpdateSearchParams()
+      const wasUpdated = this.checkUpdateSearchParams()
       if (wasUpdated) {
         this.resetEntities()
       } else if (settings.bookshelfCoverSize !== this.currentBookWidth) {
@@ -517,7 +517,7 @@ export default {
     },
     libraryItemUpdated(libraryItem) {
       console.log('Item updated', libraryItem)
-      if (this.entityName === 'books' || this.entityName === 'series-books') {
+      if (this.entityName === 'items' || this.entityName === 'series-books') {
         var indexOf = this.entities.findIndex((ent) => ent && ent.id === libraryItem.id)
         if (indexOf >= 0) {
           this.entities[indexOf] = libraryItem
@@ -528,7 +528,7 @@ export default {
       }
     },
     libraryItemRemoved(libraryItem) {
-      if (this.entityName === 'books' || this.entityName === 'series-books') {
+      if (this.entityName === 'items' || this.entityName === 'series-books') {
         var indexOf = this.entities.findIndex((ent) => ent && ent.id === libraryItem.id)
         if (indexOf >= 0) {
           this.entities = this.entities.filter((ent) => ent.id !== libraryItem.id)
@@ -667,11 +667,9 @@ export default {
         }
       })
 
-      this.$eventBus.$on('series-sort-updated', this.seriesSortUpdated)
       this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
       this.$eventBus.$on('socket_init', this.socketInit)
-
-      this.$store.commit('user/addSettingsListener', { id: 'lazy-bookshelf', meth: this.settingsUpdated })
+      this.$eventBus.$on('user-settings', this.settingsUpdated)
 
       if (this.$root.socket) {
         this.$root.socket.on('item_updated', this.libraryItemUpdated)
@@ -696,11 +694,9 @@ export default {
         bookshelf.removeEventListener('scroll', this.scroll)
       }
 
-      this.$eventBus.$off('series-sort-updated', this.seriesSortUpdated)
       this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
       this.$eventBus.$off('socket_init', this.socketInit)
-
-      this.$store.commit('user/removeSettingsListener', 'lazy-bookshelf')
+      this.$eventBus.$off('user-settings', this.settingsUpdated)
 
       if (this.$root.socket) {
         this.$root.socket.off('item_updated', this.libraryItemUpdated)

client/components/app/SettingsContent.vue

@@ -4,7 +4,7 @@
       <h1 class="text-xl">{{ headerText }}</h1>
 
       <div v-if="showAddButton" class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clicked">
-        <span class="material-icons" style="font-size: 1.4rem">add</span>
+        <button type="button" class="material-icons" :aria-label="$strings.ButtonAdd + ': ' + headerText" style="font-size: 1.4rem">add</button>
       </div>
     </div>
 

client/components/app/SideRail.vue

@@ -1,6 +1,5 @@
 <template>
-  <!-- <div class="w-20 bg-bg h-full relative box-shadow-side z-40" style="min-width: 80px"> -->
-  <div class="w-20 bg-bg h-full fixed left-0 box-shadow-side z-40" style="min-width: 80px" :style="{ top: offsetTop + 'px' }">
+  <div class="w-20 bg-bg h-full fixed left-0 box-shadow-side z-50" style="min-width: 80px" :style="{ top: offsetTop + 'px' }">
     <!-- ugly little workaround to cover up the shadow overlapping the bookshelf toolbar -->
     <div v-if="isShowingBookshelfToolbar" class="absolute top-0 -right-4 w-4 bg-bg h-10 pointer-events-none" />
 
@@ -9,7 +8,7 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
       </svg>
 
-      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonHome }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonHome }}</p>
 
       <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
@@ -17,7 +16,7 @@
     <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <span class="material-icons text-2xl">format_list_bulleted</span>
 
-      <p class="font-book pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>
+      <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>
 
       <div v-show="isPodcastLatestPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
@@ -27,30 +26,30 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
       </svg>
 
-      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLibrary }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLibrary }}</p>
 
       <div v-show="showLibrary" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
-    <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" 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="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+    <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" 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="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
       </svg>
 
-      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSeries }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSeries }}</p>
 
       <div v-show="isSeriesPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
-    <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" 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="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+    <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" 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="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <span class="material-icons-outlined text-2xl">collections_bookmark</span>
 
-      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>
 
       <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="!isPodcastLibrary" :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'">
+    <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
           fill="currentColor"
@@ -58,7 +57,7 @@
         />
       </svg>
 
-      <p class="font-book pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAuthors }}</p>
+      <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAuthors }}</p>
 
       <div v-show="isAuthorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
@@ -66,23 +65,39 @@
     <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>
 
-      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSearch }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSearch }}</p>
 
       <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
+    <nuxt-link v-if="isMusicLibrary" :to="`/library/${currentLibraryId}/bookshelf/albums`" 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="isMusicAlbumsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons-outlined text-xl">album</span>
+
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">Albums</p>
+
+      <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="font-book pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>
+      <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>
+
+      <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonDownloadQueue }}</p>
+
+      <div v-show="isPodcastDownloadQueuePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
     <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" 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-opacity-40 cursor-pointer relative" :class="showingIssues ? 'bg-error bg-opacity-40' : ' bg-error bg-opacity-20'">
       <span class="material-icons text-2xl">warning</span>
 
-      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 1rem">{{ $strings.ButtonIssues }}</p>
+      <p class="pt-1.5 text-center leading-4" style="font-size: 1rem">{{ $strings.ButtonIssues }}</p>
 
       <div v-show="showingIssues" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
       <div class="absolute top-1 right-1 w-4 h-4 rounded-full bg-white bg-opacity-30 flex items-center justify-center">
@@ -133,15 +148,27 @@ export default {
     currentLibraryMediaType() {
       return this.$store.getters['libraries/getCurrentLibraryMediaType']
     },
+    isBookLibrary() {
+      return this.currentLibraryMediaType === 'book'
+    },
     isPodcastLibrary() {
       return this.currentLibraryMediaType === 'podcast'
     },
+    isMusicLibrary() {
+      return this.currentLibraryMediaType === 'music'
+    },
+    isPodcastDownloadQueuePage() {
+      return this.$route.name === 'library-library-podcast-download-queue'
+    },
     isPodcastSearchPage() {
       return this.$route.name === 'library-library-podcast-search'
     },
     isPodcastLatestPage() {
       return this.$route.name === 'library-library-podcast-latest'
     },
+    isMusicAlbumsPage() {
+      return this.paramId === 'albums'
+    },
     homePage() {
       return this.$route.name === 'library-library'
     },
@@ -196,4 +223,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

client/components/app/StreamContainer.vue

@@ -1,21 +1,25 @@
 <template>
-  <div v-if="streamLibraryItem" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 sm:h-44 md:h-40 z-40 bg-primary px-4 pb-1 md:pb-4 pt-2">
+  <div v-if="streamLibraryItem" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 sm:h-44 md:h-40 z-50 bg-primary px-2 md:px-4 pb-1 md:pb-4 pt-2">
     <div id="videoDock" />
-    <nuxt-link v-if="!playerHandler.isVideo" :to="`/item/${streamLibraryItem.id}`" class="absolute left-1 sm:left-4 cursor-pointer" :style="{ top: bookCoverPosTop + 'px' }">
+    <nuxt-link v-if="!playerHandler.isVideo" :to="`/item/${streamLibraryItem.id}`" class="absolute left-2 top-2 md:left-4 cursor-pointer">
       <covers-book-cover :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
     </nuxt-link>
-    <div class="flex items-start mb-6 md:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : 'pl-20 sm:pl-24'">
+    <div class="flex items-start mb-6 md:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
       <div>
         <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg">
           {{ title }}
         </nuxt-link>
         <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center">
           <span class="material-icons text-sm">person</span>
-          <p v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</p>
-          <p v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base">
-            <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>
-          </p>
-          <p v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</p>
+          <div class="flex items-center">
+            <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div>
+            <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div>
+            <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base">
+              <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>
+            </div>
+            <div v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</div>
+            <widgets-explicit-indicator :explicit="isExplicit"></widgets-explicit-indicator>
+          </div>
         </div>
 
         <div class="text-gray-400 flex items-center">
@@ -85,12 +89,15 @@ export default {
     coverAspectRatio() {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
-    bookCoverWidth() {
-      return 88
+    isSquareCover() {
+      return this.coverAspectRatio === 1
     },
-    bookCoverPosTop() {
-      if (this.coverAspectRatio == 1) return -10
-      return -64
+    isMobile() {
+      return this.$store.state.globals.isMobile
+    },
+    bookCoverWidth() {
+      if (this.isMobile) return 64 / this.coverAspectRatio
+      return 77 / this.coverAspectRatio
     },
     cover() {
       if (this.media.coverPath) return this.media.coverPath
@@ -122,6 +129,12 @@ export default {
     isPodcast() {
       return this.streamLibraryItem ? this.streamLibraryItem.mediaType === 'podcast' : false
     },
+    isMusic() {
+      return this.streamLibraryItem ? this.streamLibraryItem.mediaType === 'music' : false
+    },
+    isExplicit() {
+      return this.mediaMetadata.explicit || false
+    },
     mediaMetadata() {
       return this.media.metadata || {}
     },
@@ -145,6 +158,10 @@ export default {
       if (!this.isPodcast) return null
       return this.mediaMetadata.author || 'Unknown'
     },
+    musicArtists() {
+      if (!this.isMusic) return null
+      return this.mediaMetadata.artists.join(', ')
+    },
     playerQueueItems() {
       return this.$store.state.playerQueueItems || []
     }
@@ -350,13 +367,15 @@ export default {
       }
     },
     streamProgress(data) {
-      if (!data.numSegments) return
-      var chunks = data.chunks
-      console.log(`[StreamContainer] Stream Progress ${data.percent}`)
-      if (this.$refs.audioPlayer) {
-        this.$refs.audioPlayer.setChunksReady(chunks, data.numSegments)
-      } else {
-        console.error('No Audio Ref')
+      if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === data.stream) {
+        if (!data.numSegments) return
+        var chunks = data.chunks
+        console.log(`[StreamContainer] Stream Progress ${data.percent}`)
+        if (this.$refs.audioPlayer) {
+          this.$refs.audioPlayer.setChunksReady(chunks, data.numSegments)
+        } else {
+          console.error('No Audio Ref')
+        }
       }
     },
     sessionOpen(session) {
@@ -405,8 +424,8 @@ export default {
       }
     },
     async playLibraryItem(payload) {
-      var libraryItemId = payload.libraryItemId
-      var episodeId = payload.episodeId || null
+      const libraryItemId = payload.libraryItemId
+      const episodeId = payload.episodeId || null
 
       if (this.playerHandler.libraryItemId == libraryItemId && this.playerHandler.episodeId == episodeId) {
         if (payload.startTime !== null && !isNaN(payload.startTime)) {
@@ -417,11 +436,12 @@ export default {
         return
       }
 
-      var libraryItem = await this.$axios.$get(`/api/items/${libraryItemId}?expanded=1`).catch((error) => {
+      const libraryItem = await this.$axios.$get(`/api/items/${libraryItemId}?expanded=1`).catch((error) => {
         console.error('Failed to fetch full item', error)
         return null
       })
       if (!libraryItem) return
+
       this.$store.commit('setMediaPlaying', {
         libraryItem,
         episodeId,
@@ -460,4 +480,4 @@ export default {
 #streamContainer {
   box-shadow: 0px -6px 8px #1111113f;
 }
-</style>
+</style>

client/components/cards/AuthorCard.vue

@@ -13,10 +13,14 @@
 
         <!-- Search icon btn -->
         <div v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="searchAuthor">
-          <span class="material-icons text-lg">search</span>
+          <ui-tooltip :text="$strings.ButtonQuickMatch" direction="bottom">
+            <span class="material-icons text-lg">search</span>
+          </ui-tooltip>
         </div>
         <div v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="$emit('edit', author)">
-          <span class="material-icons text-lg">edit</span>
+          <ui-tooltip :text="$strings.LabelEdit" direction="bottom">
+            <span class="material-icons text-lg">edit</span>
+          </ui-tooltip>
         </div>
 
         <!-- Loading spinner -->

client/components/cards/BookMatchCard.vue

@@ -28,7 +28,11 @@
         </div>
       </div>
       <div v-else class="px-4 flex-grow">
-        <h1>{{ book.title }}</h1>
+        <h1>
+          <div class="flex items-center">
+            {{ book.title }}<widgets-explicit-indicator :explicit="book.explicit" />
+          </div>
+        </h1>
         <p class="text-base text-gray-300 whitespace-nowrap truncate">by {{ book.author }}</p>
         <p v-if="book.genres" class="text-xs text-gray-400 leading-5">{{ book.genres.join(', ') }}</p>
         <p class="text-xs text-gray-400 leading-5">{{ book.trackCount }} Episodes</p>
@@ -78,4 +82,4 @@ export default {
     this.selectedCover = this.bookCovers.length ? this.bookCovers[0] : this.book.cover || null
   }
 }
-</script>
+</script>

client/components/cards/GroupCard.vue

@@ -6,7 +6,7 @@
           <covers-group-cover ref="groupcover" :id="groupEncode" :name="groupName" :type="groupType" :book-items="bookItems" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
 
           <div v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity z-30" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
-            <p class="font-book" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ groupName }}</p>
+            <p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ groupName }}</p>
           </div>
 
           <div class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ bookItems.length }}</div>

client/components/cards/ItemSearchCard.vue

@@ -10,7 +10,7 @@
       <p v-if="matchKey !== 'authors'" class="text-xs text-gray-200 truncate">by {{ authorName }}</p>
       <p v-else class="truncate text-xs text-gray-200" v-html="matchHtml" />
 
-      <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn' || matchKey === 'asin'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
+      <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn' || matchKey === 'asin' || matchKey === 'episode'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
     </div>
   </div>
 </template>
@@ -67,6 +67,7 @@ export default {
       //        but with removing commas periods etc this is no longer plausible
       const html = this.matchText
 
+      if (this.matchKey === 'episode') return `<p class="truncate">Episode: ${html}</p>`
       if (this.matchKey === 'tags') return `<p class="truncate">Tags: ${html}</p>`
       if (this.matchKey === 'authors') return `by ${html}`
       if (this.matchKey === 'isbn') return `<p class="truncate">ISBN: ${html}</p>`

client/components/cards/ItemTaskRunningCard.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="flex items-center h-full px-1 overflow-hidden">
+    <div class="h-5 w-5 min-w-5 text-lg mr-1.5 flex items-center justify-center">
+      <span v-if="isFinished" :class="taskIconStatus" class="material-icons text-base">{{actionIcon}}</span>
+      <widgets-loading-spinner v-else />
+    </div>
+    <div class="flex-grow px-2 taskRunningCardContent">
+      <p class="truncate text-sm">{{ title }}</p>
+
+      <p class="truncate text-xs text-gray-300">{{ description }}</p>
+
+      <p v-if="isFailed && failedMessage" class="text-xs truncate text-red-500">{{ failedMessage }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    task: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    title() {
+      return this.task.title || 'No Title'
+    },
+    description() {
+      return this.task.description || ''
+    },
+    details() {
+      return this.task.details || 'Unknown'
+    },
+    isFinished() {
+      return this.task.isFinished || false
+    },
+    isFailed() {
+      return this.task.isFailed || false
+    },
+    failedMessage() {
+      return this.task.error || ''
+    },
+    action() {
+      return this.task.action || ''
+    },
+    actionIcon() {
+      switch (this.action) {
+        case 'download-podcast-episode':
+          return 'cloud_download'
+        case 'encode-m4b':
+          return 'sync'
+        default:
+          return 'settings'
+      }
+    },
+    taskIconStatus() {
+      if (this.isFinished && this.isFailed) {
+        return 'text-red-500'
+      }
+      if (this.isFinished && !this.isFailed) {
+        return 'text-green-500'
+      }
+
+      return ''
+    }
+  },
+  methods: {
+  },
+  mounted() {}
+}
+</script>
+
+<style>
+.taskRunningCardContent {
+  width: calc(100% - 80px);
+  height: 75px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

client/components/cards/LazyAlbumCard.vue

@@ -0,0 +1,114 @@
+<template>
+  <div ref="card" :id="`album-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+    <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+      <covers-preview-cover ref="cover" :src="coverSrc" :width="width" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    </div>
+
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+      </div>
+    </div>
+    <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
+      <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ artist || '&nbsp;' }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: Number,
+    width: Number,
+    height: Number,
+    bookCoverAspectRatio: Number,
+    bookshelfView: {
+      type: Number,
+      default: 0
+    },
+    albumMount: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      album: null,
+      isSelectionMode: false,
+      selected: false,
+      isHovering: false
+    }
+  },
+  computed: {
+    coverSrc() {
+      const config = this.$config || this.$nuxt.$config
+      if (!this.album || !this.album.libraryItemId) return `${config.routerBasePath}/book_placeholder.jpg`
+      return this.store.getters['globals/getLibraryItemCoverSrcById'](this.album.libraryItemId)
+    },
+    labelFontSize() {
+      if (this.width < 160) return 0.75
+      return 0.875
+    },
+    sizeMultiplier() {
+      const baseSize = this.bookCoverAspectRatio === 1 ? 192 : 120
+      return this.width / baseSize
+    },
+    title() {
+      return this.album ? this.album.title : ''
+    },
+    artist() {
+      return this.album ? this.album.artist : ''
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    currentLibraryId() {
+      return this.store.state.libraries.currentLibraryId
+    },
+    isAlternativeBookshelfView() {
+      const constants = this.$constants || this.$nuxt.$constants
+      return this.bookshelfView == constants.BookshelfView.DETAIL
+    }
+  },
+  methods: {
+    setEntity(album) {
+      this.album = album
+    },
+    setSelectionMode(val) {
+      this.isSelectionMode = val
+    },
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    clickCard() {
+      if (!this.album) return
+      // const router = this.$router || this.$nuxt.$router
+      // router.push(`/album/${this.$encode(this.title)}`)
+    },
+    clickEdit() {
+      this.$emit('edit', this.album)
+    },
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
+      }
+    }
+  },
+  mounted() {
+    if (this.albumMount) {
+      this.setEntity(this.albumMount)
+    }
+  }
+}
+</script>

client/components/cards/LazyBookCard.vue

@@ -7,9 +7,12 @@
 
     <!-- Alternative bookshelf title/author/sort -->
     <div v-if="isAlternativeBookshelfView || isAuthorBookshelfView" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
-      <p class="truncate" :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
-        {{ displayTitle }}
-      </p>
+      <div :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
+        <div class="flex items-center">
+          <span class="truncate">{{ displayTitle }}</span>
+          <widgets-explicit-indicator :explicit="isExplicit" />
+        </div>
+      </div>
       <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo || '&nbsp;' }}</p>
       <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
     </div>
@@ -23,7 +26,7 @@
 
     <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
       <div v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
-        <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="font-book text-gray-300 text-center">{{ title }}</p>
+        <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="text-gray-300 text-center">{{ title }}</p>
       </div>
 
       <!-- Cover Image -->
@@ -32,13 +35,13 @@
       <!-- Placeholder Cover Title & Author -->
       <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">
         <div>
-          <p class="text-center font-book" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">
+          <p class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">
             {{ titleCleaned }}
           </p>
         </div>
       </div>
       <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
-        <p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
+        <p class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
       </div>
     </div>
 
@@ -70,7 +73,7 @@
       </div>
 
       <!-- More Menu Icon -->
-      <div ref="moreIcon" v-show="!isSelectionMode" class="hidden md:block absolute cursor-pointer hover:text-yellow-300 300 hover:scale-125 transform duration-150" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickShowMore">
+      <div ref="moreIcon" v-show="!isSelectionMode && moreMenuItems.length" class="hidden md:block absolute cursor-pointer hover:text-yellow-300 300 hover:scale-125 transform duration-150" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickShowMore">
         <span class="material-icons" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">more_vert</span>
       </div>
     </div>
@@ -190,6 +193,12 @@ export default {
     isPodcast() {
       return this.mediaType === 'podcast'
     },
+    isMusic() {
+      return this.mediaType === 'music'
+    },
+    isExplicit() {
+      return this.mediaMetadata.explicit || false
+    },
     placeholderUrl() {
       const config = this.$config || this.$nuxt.$config
       return `${config.routerBasePath}/book_placeholder.jpg`
@@ -257,7 +266,7 @@ export default {
       return this.bookCoverAspectRatio === 1
     },
     sizeMultiplier() {
-      var baseSize = this.squareAspectRatio ? 192 : 120
+      const baseSize = this.squareAspectRatio ? 192 : 120
       return this.width / baseSize
     },
     title() {
@@ -273,6 +282,10 @@ export default {
     authorLF() {
       return this.mediaMetadata.authorNameLF
     },
+    artist() {
+      const artists = this.mediaMetadata.artists || []
+      return artists.join(', ')
+    },
     displayTitle() {
       if (this.recentEpisode) return this.recentEpisode.title
       const ignorePrefix = this.orderBy === 'media.metadata.title' && this.sortingIgnorePrefix
@@ -282,6 +295,7 @@ export default {
     displayLineTwo() {
       if (this.recentEpisode) return this.title
       if (this.isPodcast) return this.author
+      if (this.isMusic) return this.artist
       if (this.collapsedSeries) return ''
       if (this.isAuthorBookshelfView) {
         return this.mediaMetadata.publishedYear || ''
@@ -305,6 +319,7 @@ export default {
       return this.store.getters['user/getUserMediaProgress'](this.libraryItemId, this.recentEpisode.id)
     },
     userProgress() {
+      if (this.isMusic) return null
       if (this.episodeProgress) return this.episodeProgress
       return this.store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
@@ -341,7 +356,7 @@ export default {
       return !this.isSelectionMode && !this.showPlayButton && this.hasEbook && (this.showExperimentalFeatures || this.enableEReader)
     },
     showPlayButton() {
-      return !this.isSelectionMode && !this.isMissing && !this.isInvalid && !this.isStreaming && (this.numTracks || this.recentEpisode)
+      return !this.isSelectionMode && !this.isMissing && !this.isInvalid && !this.isStreaming && (this.numTracks || this.recentEpisode || this.isMusic)
     },
     showSmallEBookIcon() {
       return !this.isSelectionMode && this.hasEbook && (this.showExperimentalFeatures || this.enableEReader)
@@ -366,7 +381,7 @@ export default {
         if (this.isPodcast) return 'Podcast has no episodes'
         return 'Item has no audio tracks & ebook'
       }
-      var txt = ''
+      let txt = ''
       if (this.numMissingParts) {
         txt += `${this.numMissingParts} missing parts.`
       }
@@ -377,7 +392,7 @@ export default {
       return txt || 'Unknown Error'
     },
     overlayWrapperClasslist() {
-      var classes = []
+      const classes = []
       if (this.isSelectionMode) classes.push('bg-opacity-60')
       else classes.push('bg-opacity-40')
       if (this.selected) {
@@ -401,6 +416,8 @@ export default {
       return this.store.getters['user/getIsAdminOrUp']
     },
     moreMenuItems() {
+      if (this.isMusic) return []
+
       if (this.recentEpisode) {
         const items = [
           {
@@ -438,7 +455,7 @@ export default {
         return items
       }
 
-      var items = []
+      let items = []
       if (!this.isPodcast) {
         items = [
           {
@@ -534,11 +551,11 @@ export default {
       return this.author
     },
     isAlternativeBookshelfView() {
-      var constants = this.$constants || this.$nuxt.$constants
+      const constants = this.$constants || this.$nuxt.$constants
       return this.bookshelfView === constants.BookshelfView.DETAIL
     },
     isAuthorBookshelfView() {
-      var constants = this.$constants || this.$nuxt.$constants
+      const constants = this.$constants || this.$nuxt.$constants
       return this.bookshelfView === constants.BookshelfView.AUTHOR
     },
     titleDisplayBottomOffset() {
@@ -548,7 +565,7 @@ export default {
     },
     rssFeed() {
       if (this.booksInSeries) return null
-      return this.store.getters['feeds/getFeedForItem'](this.libraryItemId)
+      return this._libraryItem.rssFeed || null
     }
   },
   methods: {
@@ -651,7 +668,7 @@ export default {
       const axios = this.$axios || this.$nuxt.$axios
       this.processing = true
       axios
-        .$get(`/api/items/${this.libraryItemId}/scan`)
+        .$post(`/api/items/${this.libraryItemId}/scan`)
         .then((data) => {
           var result = data.result
           if (!result) {
@@ -723,7 +740,7 @@ export default {
           episodeId: this.recentEpisode.id,
           title: this.recentEpisode.title,
           subtitle: this.mediaMetadata.title,
-          caption: this.recentEpisode.publishedAt ? `Published ${this.$formatDate(this.recentEpisode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+          caption: this.recentEpisode.publishedAt ? `Published ${this.$formatDate(this.recentEpisode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
           duration: this.recentEpisode.audioFile.duration || null,
           coverPath: this.media.coverPath || null
         }
@@ -809,7 +826,6 @@ export default {
         return null
       })
       if (!libraryItem) return
-      console.log('Got library itemn', libraryItem)
       this.store.commit('showEReader', libraryItem)
     },
     selectBtnClick(evt) {
@@ -848,7 +864,7 @@ export default {
                   episodeId: episode.id,
                   title: episode.title,
                   subtitle: this.mediaMetadata.title,
-                  caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+                  caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
                   duration: episode.audioFile.duration || null,
                   coverPath: this.media.coverPath || null
                 })

client/components/cards/LazyCollectionCard.vue

@@ -9,13 +9,16 @@
         <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">edit</span>
       </div>
     </div>
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, width) + 'px' }">
+
+    <span v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 * sizeMultiplier + 'rem', left: 0.5 * sizeMultiplier + 'rem', fontSize: 1.5 * sizeMultiplier + 'rem' }">rss_feed</span>
+
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
       <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
         <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
       </div>
     </div>
     <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+      <p class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ title }}</p>
     </div>
   </div>
 </template>
@@ -72,6 +75,9 @@ export default {
     },
     userCanUpdate() {
       return this.store.getters['user/getUserCanUpdate']
+    },
+    rssFeed() {
+      return this.collection ? this.collection.rssFeed : null
     }
   },
   methods: {

client/components/cards/LazyPlaylistCard.vue

@@ -9,13 +9,13 @@
         <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">edit</span>
       </div>
     </div>
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, width) + 'px' }">
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
       <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
         <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
       </div>
     </div>
     <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+      <p class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ title }}</p>
     </div>
   </div>
 </template>
@@ -50,8 +50,8 @@ export default {
       return 0.875
     },
     sizeMultiplier() {
-      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
-      return this.width / 240
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6)
+      return this.width / 120
     },
     title() {
       return this.playlist ? this.playlist.name : ''

client/components/cards/LazySeriesCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+  <div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
     <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
     <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
       <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
@@ -10,16 +10,18 @@
     <div v-if="isSeriesFinished" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b bg-success w-full" />
 
     <div v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
-      <p class="font-book" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
+      <p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
     </div>
 
-    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, width) + 'px' }">
+    <span v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 * sizeMultiplier + 'rem', left: 0.5 * sizeMultiplier + 'rem', fontSize: 1.5 * sizeMultiplier + 'rem' }">rss_feed</span>
+
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
       <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
         <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ displayTitle }}</p>
       </div>
     </div>
     <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ displayTitle }}</p>
+      <p class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
       <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
     </div>
   </div>
@@ -125,6 +127,9 @@ export default {
     isAlternativeBookshelfView() {
       const constants = this.$constants || this.$nuxt.$constants
       return this.bookshelfView == constants.BookshelfView.DETAIL
+    },
+    rssFeed() {
+      return this.series ? this.series.rssFeed : null
     }
   },
   methods: {

client/components/cards/PodcastFeedSummaryCard.vue

@@ -54,7 +54,7 @@ export default {
     },
     folderPath() {
       if (!this.libraryFolderPath) return ''
-      return `${this.libraryFolderPath}\\${this.$sanitizeFilename(this.title)}`
+      return `${this.libraryFolderPath}/${this.$sanitizeFilename(this.title)}`
     },
     detailsWidth() {
       return this.width - 85

client/components/controls/LibraryFilterSelect.vue

@@ -87,8 +87,14 @@ export default {
         this.$emit('input', val)
       }
     },
+    libraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
     isPodcast() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
+      return this.libraryMediaType === 'podcast'
+    },
+    isMusic() {
+      return this.libraryMediaType === 'music'
     },
     seriesItems() {
       return [
@@ -214,9 +220,33 @@ export default {
         }
       ]
     },
+    musicItems() {
+      return [
+        {
+          text: this.$strings.LabelAll,
+          value: 'all'
+        },
+        {
+          text: this.$strings.LabelGenre,
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelTag,
+          value: 'tags',
+          sublist: true
+        },
+        {
+          text: this.$strings.ButtonIssues,
+          value: 'issues',
+          sublist: false
+        }
+      ]
+    },
     selectItems() {
       if (this.isSeries) return this.seriesItems
       if (this.isPodcast) return this.podcastItems
+      if (this.isMusic) return this.musicItems
       return this.bookItems
     },
     selectedItemSublist() {
@@ -348,6 +378,10 @@ export default {
         {
           id: 'language',
           name: this.$strings.LabelLanguage
+        },
+        {
+          id: 'cover',
+          name: this.$strings.LabelCover
         }
       ]
     },

client/components/controls/LibrarySortSelect.vue

@@ -50,8 +50,14 @@ export default {
         this.$emit('update:descending', val)
       }
     },
+    libraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
     isPodcast() {
-      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
+      return this.libraryMediaType === 'podcast'
+    },
+    isMusic() {
+      return this.libraryMediaType === 'music'
     },
     podcastItems() {
       return [
@@ -134,10 +140,40 @@ export default {
         }
       ]
     },
+    musicItems() {
+      return [
+        {
+          text: this.$strings.LabelTitle,
+          value: 'media.metadata.title'
+        },
+        {
+          text: this.$strings.LabelAddedAt,
+          value: 'addedAt'
+        },
+        {
+          text: this.$strings.LabelSize,
+          value: 'size'
+        },
+        {
+          text: this.$strings.LabelDuration,
+          value: 'media.duration'
+        },
+        {
+          text: this.$strings.LabelFileBirthtime,
+          value: 'birthtimeMs'
+        },
+        {
+          text: this.$strings.LabelFileModified,
+          value: 'mtimeMs'
+        }
+      ]
+    },
     selectItems() {
       let items = null
       if (this.isPodcast) {
         items = this.podcastItems
+      } else if (this.isMusic) {
+        items = this.musicItems
       } else if (this.$store.getters['user/getUserSetting']('filterBy').startsWith('series.')) {
         items = this.seriesItems
       } else {

client/components/controls/PlaybackSpeedControl.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="wrapper" class="relative ml-4 sm:ml-8" v-click-outside="clickOutside">
     <div class="flex items-center justify-center text-gray-300 cursor-pointer h-full" @mousedown.prevent @mouseup.prevent @click="setShowMenu(true)">
-      <span class="font-mono uppercase text-gray-200 text-sm sm:text-base">{{ playbackRate.toFixed(1) }}<span class="text-base sm:text-lg">⨯</span></span>
+      <span class="font-mono uppercase text-gray-200 text-sm sm:text-base">{{ playbackRate.toFixed(1) }}<span class="text-base">x</span></span>
     </div>
     <div v-show="showMenu" class="absolute -top-20 z-20 bg-bg border-black-200 border shadow-xl rounded-lg" :style="{ left: menuLeft + 'px' }">
       <div class="absolute -bottom-1.5 right-0 w-full flex justify-center" :style="{ left: arrowLeft + 'px' }">
@@ -11,7 +11,7 @@
         <template v-for="rate in rates">
           <div :key="rate" class="h-full border-black-300 w-11 cursor-pointer border rounded-sm" :class="value === rate ? 'bg-black-100' : 'hover:bg-black hover:bg-opacity-10'" style="min-width: 44px; max-width: 44px" @click="set(rate)">
             <div class="w-full h-full flex justify-center items-center">
-              <p class="text-xs text-center font-mono">{{ rate }}<span class="text-sm">⨯</span></p>
+              <p class="text-xs text-center font-mono">{{ rate }}<span class="text-sm">x</span></p>
             </div>
           </div>
         </template>
@@ -19,7 +19,7 @@
       <div class="w-full py-1 px-4">
         <div class="flex items-center justify-between">
           <ui-icon-btn :disabled="!canDecrement" icon="remove" @click="decrement" />
-          <p class="px-2 text-2xl sm:text-3xl">{{ playbackRate }}<span class="text-2xl">⨯</span></p>
+          <p class="px-2 text-2xl sm:text-3xl">{{ playbackRate }}<span class="text-2xl">x</span></p>
           <ui-icon-btn :disabled="!canIncrement" icon="add" @click="increment" />
         </div>
       </div>
@@ -40,7 +40,7 @@ export default {
       showMenu: false,
       currentPlaybackRate: 0,
       MIN_SPEED: 0.5,
-      MAX_SPEED: 3,
+      MAX_SPEED: 10,
       menuLeft: -92,
       arrowLeft: 0
     }

client/components/covers/BookCover.vue

@@ -7,7 +7,7 @@
 
       <img v-if="libraryItem" ref="cover" :src="fullCoverUrl" loading="lazy" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? '1' : '0' }" :class="showCoverBg ? 'object-contain' : 'object-fill'" />
       <div v-show="loading && libraryItem" class="absolute top-0 left-0 h-full w-full flex items-center justify-center">
-        <p class="font-book text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
+        <p class="text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
         <div class="absolute top-2 right-2">
           <widgets-loading-spinner />
         </div>
@@ -17,17 +17,17 @@
     <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
       <div class="w-full h-full border-2 border-error flex flex-col items-center justify-center">
         <img src="/Logo.png" loading="lazy" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
-        <p class="text-center font-book text-error" :style="{ fontSize: titleFontSize + 'rem' }">Invalid Cover</p>
+        <p class="text-center text-error" :style="{ fontSize: titleFontSize + 'rem' }">Invalid Cover</p>
       </div>
     </div>
 
     <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center z-10" :style="{ padding: placeholderCoverPadding + 'rem' }">
       <div>
-        <p class="text-center font-book" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
+        <p class="text-center" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
       </div>
     </div>
     <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center z-10" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
-      <p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
+      <p class="text-center" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
     </div>
   </div>
 </template>

client/components/covers/CollectionCover.vue

@@ -19,7 +19,7 @@
     <div v-else class="relative w-full h-full flex items-center justify-center p-2 bg-primary rounded-sm">
       <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
 
-      <p class="font-book text-white text-opacity-60 text-center" :style="{ fontSize: Math.min(1, sizeMultiplier) + 'rem' }">Empty Collection</p>
+      <p class="text-white text-opacity-60 text-center" :style="{ fontSize: Math.min(1, sizeMultiplier) + 'rem' }">Empty Collection</p>
     </div>
   </div>
 </template>

client/components/covers/GroupCover.vue

@@ -138,7 +138,7 @@ export default {
 
       var innerP = document.createElement('p')
       innerP.textContent = this.name
-      innerP.className = 'text-sm font-book text-white'
+      innerP.className = 'text-sm text-white'
       imgdiv.appendChild(innerP)
 
       return imgdiv

client/components/covers/PreviewCover.vue

@@ -14,7 +14,7 @@
     <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
       <div class="w-full h-full border-2 border-error flex flex-col items-center justify-center">
         <img src="/Logo.png" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
-        <p class="text-center font-book text-error" :style="{ fontSize: sizeMultiplier + 'rem' }">Invalid Cover</p>
+        <p class="text-center text-error" :style="{ fontSize: sizeMultiplier + 'rem' }">Invalid Cover</p>
       </div>
     </div>
 
@@ -65,7 +65,8 @@ export default {
       return `${this.naturalWidth}x${this.naturalHeight}px`
     },
     placeholderUrl() {
-      return `${this.$config.routerBasePath}/book_placeholder.jpg`
+      const config = this.$config || this.$nuxt.$config
+      return `${config.routerBasePath}/book_placeholder.jpg`
     }
   },
   methods: {

client/components/modals/AccountModal.vue

@@ -2,7 +2,7 @@
   <modals-modal ref="modal" v-model="show" name="account" :width="800" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+        <p class="text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
     <form @submit.prevent="submitForm">
@@ -22,8 +22,8 @@
             </div>
             <div class="flex-grow" />
             <div class="flex items-center pt-4 px-2">
-              <p class="px-3 font-semibold" :class="isEditingRoot ? 'text-gray-300' : ''">{{ $strings.LabelEnable }}</p>
-              <ui-toggle-switch v-model="newUser.isActive" :disabled="isEditingRoot" />
+              <p class="px-3 font-semibold" id="user-enabled-toggle" :class="isEditingRoot ? 'text-gray-300' : ''">{{ $strings.LabelEnable }}</p>
+              <ui-toggle-switch labeledBy="user-enabled-toggle" v-model="newUser.isActive" :disabled="isEditingRoot" />
             </div>
           </div>
 
@@ -31,55 +31,55 @@
             <p class="text-lg mb-2 font-semibold">{{ $strings.HeaderPermissions }}</p>
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>{{ $strings.LabelPermissionsDownload }}</p>
+                <p id="download-permissions-toggle">{{ $strings.LabelPermissionsDownload }}</p>
               </div>
               <div class="w-1/2">
-                <ui-toggle-switch v-model="newUser.permissions.download" />
+                <ui-toggle-switch labeledBy="download-permissions-toggle" v-model="newUser.permissions.download" />
               </div>
             </div>
 
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>{{ $strings.LabelPermissionsUpdate }}</p>
+                <p id="update-permissions-toggle">{{ $strings.LabelPermissionsUpdate }}</p>
               </div>
               <div class="w-1/2">
-                <ui-toggle-switch v-model="newUser.permissions.update" />
+                <ui-toggle-switch labeledBy="update-permissions-toggle" v-model="newUser.permissions.update" />
               </div>
             </div>
 
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>{{ $strings.LabelPermissionsDelete }}</p>
+                <p id="delete-permissions-toggle">{{ $strings.LabelPermissionsDelete }}</p>
               </div>
               <div class="w-1/2">
-                <ui-toggle-switch v-model="newUser.permissions.delete" />
+                <ui-toggle-switch labeledBy="delete-permissions-toggle" v-model="newUser.permissions.delete" />
               </div>
             </div>
 
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>{{ $strings.LabelPermissionsUpload }}</p>
+                <p id="upload-permissions-toggle">{{ $strings.LabelPermissionsUpload }}</p>
               </div>
               <div class="w-1/2">
-                <ui-toggle-switch v-model="newUser.permissions.upload" />
+                <ui-toggle-switch labeledBy="upload-permissions-toggle" v-model="newUser.permissions.upload" />
               </div>
             </div>
 
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>{{ $strings.LabelPermissionsAccessExplicitContent }}</p>
+                <p id="explicit-content-permissions-toggle">{{ $strings.LabelPermissionsAccessExplicitContent }}</p>
               </div>
               <div class="w-1/2">
-                <ui-toggle-switch v-model="newUser.permissions.accessExplicitContent" />
+                <ui-toggle-switch labeledBy="explicit-content-permissions-toggle" v-model="newUser.permissions.accessExplicitContent" />
               </div>
             </div>
 
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>{{ $strings.LabelPermissionsAccessAllLibraries }}</p>
+                <p id="access-all-libs--permissions-toggle">{{ $strings.LabelPermissionsAccessAllLibraries }}</p>
               </div>
               <div class="w-1/2">
-                <ui-toggle-switch v-model="newUser.permissions.accessAllLibraries" @input="accessAllLibrariesToggled" />
+                <ui-toggle-switch labeledBy="access-all-libs--permissions-toggle" v-model="newUser.permissions.accessAllLibraries" @input="accessAllLibrariesToggled" />
               </div>
             </div>
 
@@ -201,8 +201,8 @@ export default {
       this.loadingTags = true
       this.$axios
         .$get(`/api/tags`)
-        .then((tags) => {
-          this.tags = tags
+        .then((res) => {
+          this.tags = res.tags
           this.loadingTags = false
         })
         .catch((error) => {

client/components/modals/BackupScheduleModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="backup-scheduler" :width="700" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ $strings.HeaderSetBackupSchedule }}</p>
+        <p class="text-3xl text-white truncate">{{ $strings.HeaderSetBackupSchedule }}</p>
       </div>
     </template>
     <div v-if="show && newCronExpression" class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">

client/components/modals/BatchQuickMatchModel.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="batchQuickMatch" :processing="processing" :width="500" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+        <p class="text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
 

client/components/modals/BookmarksModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="bookmarks" :width="500" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ $strings.LabelYourBookmarks }}</p>
+        <p class="text-3xl text-white truncate">{{ $strings.LabelYourBookmarks }}</p>
       </div>
     </template>
     <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
@@ -73,6 +73,12 @@ export default {
     },
     canCreateBookmark() {
       return !this.bookmarks.find((bm) => bm.time === this.currentTime)
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
     }
   },
   methods: {
@@ -111,7 +117,7 @@ export default {
     },
     submitCreateBookmark() {
       if (!this.newBookmarkTitle) {
-        this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
+        this.newBookmarkTitle = this.$formatDatetime(Date.now(), this.dateFormat, this.timeFormat)
       }
       var bookmark = {
         title: this.newBookmarkTitle,
@@ -134,4 +140,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/modals/EditSeriesInputInnerModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapper" class="hidden absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 rounded-lg items-center justify-center" style="z-index: 51" @click="clickClose">
+  <div ref="wrapper" class="hidden absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 rounded-lg items-center justify-center" style="z-index: 61" @click="clickClose">
     <div class="absolute top-3 right-3 md:top-5 md:right-5 h-8 w-8 md:h-12 md:w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300">
       <span class="material-icons text-2xl md:text-4xl">close</span>
     </div>
@@ -15,7 +15,7 @@
             </div>
           </div>
           <div class="flex justify-end mt-2 p-1">
-            <ui-btn type="submit">{{ $strings.ButtonSave }}</ui-btn>
+            <ui-btn type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
           </div>
         </div>
       </form>

client/components/modals/ListeningSessionModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="listening-session-modal" :processing="processing" :width="700" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ $strings.HeaderSession }} {{ _session.id }}</p>
+        <p class="text-3xl text-white truncate">{{ $strings.HeaderSession }} {{ _session.id }}</p>
       </div>
     </template>
     <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-6" style="max-height: 80vh">
@@ -19,13 +19,13 @@
           <div class="flex items-center -mx-1 mb-1">
             <div class="w-40 px-1 text-gray-200">{{ $strings.LabelStartedAt }}</div>
             <div class="px-1">
-              {{ $formatDate(_session.startedAt, 'MMMM do, yyyy HH:mm') }}
+              {{ $formatDatetime(_session.startedAt, dateFormat, timeFormat) }}
             </div>
           </div>
           <div class="flex items-center -mx-1 mb-1">
             <div class="w-40 px-1 text-gray-200">{{ $strings.LabelUpdatedAt }}</div>
             <div class="px-1">
-              {{ $formatDate(_session.updatedAt, 'MMMM do, yyyy HH:mm') }}
+              {{ $formatDatetime(_session.updatedAt, dateFormat, timeFormat) }}
             </div>
           </div>
           <div class="flex items-center -mx-1 mb-1">
@@ -151,6 +151,12 @@ export default {
       else if (playMethod === this.$constants.PlayMethod.DIRECTSTREAM) return 'Direct Stream'
       else if (playMethod === this.$constants.PlayMethod.LOCAL) return 'Local'
       return 'Unknown'
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
     }
   },
   methods: {
@@ -186,4 +192,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

client/components/modals/Modal.vue

@@ -39,7 +39,7 @@ export default {
     },
     zIndex: {
       type: Number,
-      default: 50
+      default: 60
     },
     bgOpacity: {
       type: Number,

client/components/modals/SleepTimerModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="sleep-timer" :width="350" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden pointer-events-none">
-        <p class="font-book text-3xl text-white truncate pointer-events-none">{{ $strings.HeaderSleepTimer }}</p>
+        <p class="text-3xl text-white truncate pointer-events-none">{{ $strings.HeaderSleepTimer }}</p>
       </div>
     </template>
 

client/components/modals/authors/EditModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="edit-author" :width="800" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+        <p class="text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
     <div class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
@@ -35,7 +35,7 @@
             <div class="flex pt-2 px-2">
               <ui-btn type="button" @click="searchAuthor">{{ $strings.ButtonQuickMatch }}</ui-btn>
               <div class="flex-grow" />
-              <ui-btn type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+              <ui-btn type="submit">{{ $strings.ButtonSave }}</ui-btn>
             </div>
           </div>
         </div>
@@ -109,7 +109,8 @@ export default {
       this.processing = true
       var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
         console.error('Failed', error)
-        this.$toast.error(this.$strings.ToastAuthorUpdateFailed)
+        const errorMsg = error.response ? error.response.data : null
+        this.$toast.error(errorMsg || this.$strings.ToastAuthorUpdateFailed)
         return null
       })
       if (result) {
@@ -125,8 +126,7 @@ export default {
     },
     async removeCover() {
       var updatePayload = {
-        imagePath: null,
-        relImagePath: null
+        imagePath: null
       }
       this.processing = true
       var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
@@ -161,8 +161,7 @@ export default {
         if (response.author.imagePath) {
           this.$toast.success(this.$strings.ToastAuthorUpdateSuccess)
           this.$store.commit('globals/showEditAuthorModal', response.author)
-        }
-        else this.$toast.success(this.$strings.ToastAuthorUpdateSuccessNoImageFound)
+        } else this.$toast.success(this.$strings.ToastAuthorUpdateSuccessNoImageFound)
       } else {
         this.$toast.info('No updates were made for Author')
       }

client/components/modals/changelog/ViewModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="changelog" :width="800" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">Changelog</p>
+        <p class="text-3xl text-white truncate">Changelog</p>
       </div>
     </template>
     <div class="px-8 py-6 w-full rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-scroll" style="max-height: 80vh">

client/components/modals/collections/AddCreateModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="collections" :processing="processing" :width="500" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden pointer-events-none">
-        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+        <p class="text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
 

client/components/modals/collections/EditModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="edit-collection" :width="700" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ $strings.HeaderCollection }}</p>
+        <p class="text-3xl text-white truncate">{{ $strings.HeaderCollection }}</p>
       </div>
     </template>
     <div class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">

client/components/modals/item/EditModal.vue

@@ -2,12 +2,12 @@
   <modals-modal v-model="show" name="edit-book" :width="800" :height="height" :processing="processing" :content-margin-top="marginTop">
     <template #outer>
       <div class="absolute top-0 left-0 p-4 landscape:px-4 landscape:py-2 md:portrait:p-5 lg:p-5 w-2/3 overflow-hidden pointer-events-none">
-        <p class="font-book text-xl md:portrait:text-3xl md:landscape:text-lg lg:text-3xl text-white truncate pointer-events-none">{{ title }}</p>
+        <p class="text-xl md:portrait:text-3xl md:landscape:text-lg lg:text-3xl text-white truncate pointer-events-none">{{ title }}</p>
       </div>
     </template>
     <div class="absolute -top-10 left-0 z-10 w-full flex">
       <template v-for="tab in availableTabs">
-        <div :key="tab.id" class="w-28 rounded-t-lg flex items-center justify-center mr-0.5 sm:mr-1 cursor-pointer hover:bg-bg font-book border-t border-l border-r border-black-300 tab text-xs sm:text-base" :class="selectedTab === tab.id ? 'tab-selected bg-bg pb-px' : 'bg-primary text-gray-400'" @click="selectTab(tab.id)">{{ tab.title }}</div>
+        <div :key="tab.id" class="w-28 rounded-t-lg flex items-center justify-center mr-0.5 sm:mr-1 cursor-pointer hover:bg-bg border-t border-l border-r border-black-300 tab text-xs sm:text-base" :class="selectedTab === tab.id ? 'tab-selected bg-bg pb-px' : 'bg-primary text-gray-400'" @click="selectTab(tab.id)">{{ tab.title }}</div>
       </template>
     </div>
 

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

@@ -303,11 +303,14 @@ export default {
       this.persistProvider()
 
       this.isProcessing = true
-      var searchQuery = this.getSearchQuery()
-      var results = await this.$axios.$get(`/api/search/covers?${searchQuery}`).catch((error) => {
-        console.error('Failed', error)
-        return []
-      })
+      const searchQuery = this.getSearchQuery()
+      const results = await this.$axios
+        .$get(`/api/search/covers?${searchQuery}`)
+        .then((res) => res.results)
+        .catch((error) => {
+          console.error('Failed', error)
+          return []
+        })
       this.coversFound = results
       this.isProcessing = false
       this.hasSearched = true

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

@@ -129,7 +129,7 @@ export default {
     rescan() {
       this.rescanning = true
       this.$axios
-        .$get(`/api/items/${this.libraryItemId}/scan`)
+        .$post(`/api/items/${this.libraryItemId}/scan`)
         .then((data) => {
           this.rescanning = false
           var result = data.result

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

@@ -19,7 +19,7 @@
       </div>
       <div v-if="!episodes.length" class="flex my-4 text-center justify-center text-xl">{{ $strings.MessageNoEpisodes }}</div>
       <table v-else class="text-sm tracksTable">
-        <tr class="font-book">
+        <tr>
           <th class="text-left">Sort #</th>
           <th class="text-left whitespace-nowrap">{{ $strings.LabelEpisode }}</th>
           <th class="text-left">{{ $strings.EpisodeTitle }}</th>
@@ -33,7 +33,7 @@
           <td class="text-left">
             <p class="px-4">{{ episode.episode }}</p>
           </td>
-          <td class="font-book">
+          <td>
             {{ episode.title }}
           </td>
           <td class="font-mono text-center">

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

@@ -164,6 +164,13 @@
             <p v-if="mediaMetadata.releaseDate" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.releaseDate || '' }}</p>
           </div>
         </div>
+        <div v-if="selectedMatchOrig.explicit != null" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.explicit" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-checkbox v-model="selectedMatch.explicit" :label="$strings.LabelExplicit" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
+            <p v-if="mediaMetadata.explicit != null" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.explicit ? 'Explicit (checked)' : 'Not Explicit (unchecked)' }}</p>
+          </div>
+        </div>
 
         <div class="flex items-center justify-end py-2">
           <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
@@ -306,13 +313,13 @@ export default {
       this.runSearch()
     },
     async runSearch() {
-      var searchQuery = this.getSearchQuery()
+      const searchQuery = this.getSearchQuery()
       if (this.lastSearch === searchQuery) return
       this.searchResults = []
       this.isProcessing = true
       this.lastSearch = searchQuery
-      var searchEntity = this.isPodcast ? 'podcast' : 'books'
-      var results = await this.$axios.$get(`/api/search/${searchEntity}?${searchQuery}`, { timeout: 20000 }).catch((error) => {
+      const searchEntity = this.isPodcast ? 'podcast' : 'books'
+      let results = await this.$axios.$get(`/api/search/${searchEntity}?${searchQuery}`, { timeout: 20000 }).catch((error) => {
         console.error('Failed', error)
         return []
       })
@@ -327,6 +334,7 @@ export default {
           res.itunesPageUrl = res.pageUrl || null
           res.itunesId = res.id || null
           res.author = res.artistName || null
+          res.explicit = res.explicit || false
           return res
         })
       }
@@ -335,8 +343,7 @@ export default {
       this.isProcessing = false
       this.hasSearched = true
     },
-    init() {
-      this.clearSelectedMatch()
+    initSelectedMatchUsage() {
       this.selectedMatchUsage = {
         title: true,
         subtitle: true,
@@ -360,6 +367,27 @@ export default {
         releaseDate: true
       }
 
+      // Load saved selected match from local storage
+      try {
+        let savedSelectedMatchUsage = localStorage.getItem('selectedMatchUsage')
+        if (!savedSelectedMatchUsage) return
+        savedSelectedMatchUsage = JSON.parse(savedSelectedMatchUsage)
+
+        for (const key in savedSelectedMatchUsage) {
+          if (this.selectedMatchUsage[key] !== undefined) {
+            this.selectedMatchUsage[key] = !!savedSelectedMatchUsage[key]
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load saved selectedMatchUsage', error)
+      }
+
+      this.checkboxToggled()
+    },
+    init() {
+      this.clearSelectedMatch()
+      this.initSelectedMatchUsage()
+
       if (this.libraryItem.id !== this.libraryItemId) {
         this.searchResults = []
         this.hasSearched = false
@@ -376,6 +404,12 @@ export default {
       if (this.isPodcast) this.provider = 'itunes'
       else this.provider = localStorage.getItem('book-provider') || 'google'
 
+      // Prefer using ASIN if set and using audible provider
+      if (this.provider.startsWith('audible') && this.libraryItem.media.metadata.asin) {
+        this.searchTitle = this.libraryItem.media.metadata.asin
+        this.searchAuthor = ''
+      }
+
       if (this.searchTitle) {
         this.submitSearch()
       }
@@ -465,11 +499,14 @@ export default {
       console.log('Match payload', updatePayload)
       this.isProcessing = true
 
+      // Persist in local storage
+      localStorage.setItem('selectedMatchUsage', JSON.stringify(this.selectedMatchUsage))
+
       if (updatePayload.metadata.cover) {
-        var coverPayload = {
+        const coverPayload = {
           url: updatePayload.metadata.cover
         }
-        var success = await this.$axios.$post(`/api/items/${this.libraryItemId}/cover`, coverPayload).catch((error) => {
+        const success = await this.$axios.$post(`/api/items/${this.libraryItemId}/cover`, coverPayload).catch((error) => {
           console.error('Failed to update', error)
           return false
         })
@@ -483,8 +520,8 @@ export default {
       }
 
       if (Object.keys(updatePayload).length) {
-        var mediaUpdatePayload = updatePayload
-        var updateResult = await this.$axios.$patch(`/api/items/${this.libraryItemId}/media`, mediaUpdatePayload).catch((error) => {
+        const mediaUpdatePayload = updatePayload
+        const updateResult = await this.$axios.$patch(`/api/items/${this.libraryItemId}/media`, mediaUpdatePayload).catch((error) => {
           console.error('Failed to update', error)
           return false
         })
@@ -502,6 +539,7 @@ export default {
       } else {
         this.clearSelectedMatch()
       }
+
       this.isProcessing = false
     },
     clearSelectedMatch() {

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

@@ -59,6 +59,14 @@ export default {
       newMaxNewEpisodesToDownload: 0
     }
   },
+  watch: {
+    libraryItem: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.init()
+      }
+    }
+  },
   computed: {
     isProcessing: {
       get() {
@@ -176,4 +184,4 @@ export default {
   height: calc(100% - 80px);
   max-height: calc(100% - 80px);
 }
-</style>
+</style>

client/components/modals/libraries/EditLibrary.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="w-full h-full px-1 md:px-4 py-2 mb-4">
-    <div v-if="!showDirectoryPicker" class="w-full h-full py-4">
-      <div class="flex flex-wrap md:flex-nowrap -mx-1">
+  <div class="w-full h-full md:px-4 py-2 mb-4">
+    <div v-if="!showDirectoryPicker" class="w-full h-full md:py-4">
+      <div class="flex flex-wrap md:flex-nowrap -mx-1 mb-2">
         <div class="w-2/5 md:w-72 px-1 py-1 md:py-0">
           <ui-dropdown v-model="mediaType" :items="mediaTypes" :label="$strings.LabelMediaType" :disabled="!isNew" small @input="changedMediaType" />
         </div>
         <div class="w-full md:flex-grow px-1 py-1 md:py-0">
-          <ui-text-input-with-label v-model="name" :label="$strings.LabelLibraryName" @blur="nameBlurred" />
+          <ui-text-input-with-label ref="nameInput" v-model="name" :label="$strings.LabelLibraryName" @blur="nameBlurred" />
         </div>
         <div class="w-1/5 md:w-18 px-1 py-1 md:py-0">
           <ui-media-icon-picker v-model="icon" :label="$strings.LabelIcon" @input="iconChanged" />
@@ -16,16 +16,16 @@
         </div>
       </div>
 
-      <div class="w-full py-4">
+      <div class="folders-container overflow-y-auto w-full py-2 mb-2">
         <p class="px-1 text-sm font-semibold">{{ $strings.LabelFolders }}</p>
         <div v-for="(folder, index) in folders" :key="index" class="w-full flex items-center py-1 px-2">
           <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
-          <ui-editable-text v-model="folder.fullPath" readonly type="text" class="w-full" />
+          <ui-editable-text ref="folderInput" v-model="folder.fullPath" readonly type="text" class="w-full" />
           <span v-show="folders.length > 1" class="material-icons text-2xl ml-2 cursor-pointer hover:text-error" @click="removeFolder(folder)">close</span>
         </div>
         <div class="flex py-1 px-2 items-center w-full">
           <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
-          <ui-editable-text v-model="newFolderPath" :placeholder="$strings.PlaceholderNewFolderPath" type="text" class="w-full" @blur="newFolderInputBlurred" />
+          <ui-editable-text ref="newFolderInput" v-model="newFolderPath" :placeholder="$strings.PlaceholderNewFolderPath" type="text" class="w-full" @blur="newFolderInputBlurred" />
         </div>
 
         <ui-btn class="w-full mt-2" color="primary" @click="browseForFolder">{{ $strings.ButtonBrowseForFolder }}</ui-btn>
@@ -67,6 +67,10 @@ export default {
           value: 'podcast',
           text: this.$strings.LabelPodcasts
         }
+        // {
+        //   value: 'music',
+        //   text: 'Music'
+        // }
       ]
     },
     folderPaths() {
@@ -78,6 +82,19 @@ export default {
     }
   },
   methods: {
+    checkBlurExpressionInput() {
+      if (this.$refs.nameInput) {
+        this.$refs.nameInput.blur()
+      }
+      if (this.$refs.folderInput && this.$refs.folderInput.length) {
+        this.$refs.folderInput.forEach((input) => {
+          if (input.blur) input.blur()
+        })
+      }
+      if (this.$refs.newFolderInput) {
+        this.$refs.newFolderInput.blur()
+      }
+    },
     browseForFolder() {
       this.showDirectoryPicker = true
     },
@@ -140,3 +157,14 @@ export default {
   }
 }
 </script>
+
+<style>
+.folders-container {
+  max-height: calc(80vh - 192px);
+}
+@media (max-device-width: 768px) {
+  .folders-container {
+    max-height: calc(80vh - 292px);
+  }
+}
+</style>

client/components/modals/libraries/EditModal.vue

@@ -2,16 +2,16 @@
   <modals-modal v-model="show" name="edit-library" :width="700" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-xl md:text-3xl text-white truncate">{{ title }}</p>
+        <p class="text-xl md:text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
     <div class="absolute -top-10 left-0 z-10 w-full flex">
       <template v-for="tab in tabs">
-        <div :key="tab.id" class="w-28 rounded-t-lg flex items-center justify-center mr-1 cursor-pointer hover:bg-bg font-book border-t border-l border-r border-black-300 tab text-xs sm:text-base" :class="selectedTab === tab.id ? 'tab-selected bg-bg pb-px' : 'bg-primary text-gray-400'" @click="selectTab(tab.id)">{{ tab.title }}</div>
+        <div :key="tab.id" class="w-28 rounded-t-lg flex items-center justify-center mr-1 cursor-pointer hover:bg-bg border-t border-l border-r border-black-300 tab text-xs sm:text-base" :class="selectedTab === tab.id ? 'tab-selected bg-bg pb-px' : 'bg-primary text-gray-400'" @click="selectTab(tab.id)">{{ tab.title }}</div>
       </template>
     </div>
 
-    <div class="px-2 md:px-4 w-full text-sm pt-6 pb-20 rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
+    <div class="px-2 md:px-4 w-full text-sm pt-2 md:pt-6 pb-20 rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
       <component v-if="libraryCopy && show" ref="tabComponent" :is="tabName" :is-new="!library" :library="libraryCopy" :processing.sync="processing" @update="updateLibrary" @close="show = false" />
 
       <div class="absolute bottom-0 left-0 w-full px-4 py-4 border-t border-white border-opacity-10">
@@ -144,8 +144,6 @@ export default {
       return true
     },
     submit() {
-      if (!this.validate()) return
-
       // If custom expression input is focused then unfocus it instead of submitting
       if (this.$refs.tabComponent && this.$refs.tabComponent.checkBlurExpressionInput) {
         if (this.$refs.tabComponent.checkBlurExpressionInput()) {
@@ -153,6 +151,8 @@ export default {
         }
       }
 
+      if (!this.validate()) return
+
       if (this.library) {
         this.submitUpdateLibrary()
       } else {

client/components/modals/notification/NotificationEditModal.vue

@@ -2,7 +2,7 @@
   <modals-modal ref="modal" v-model="show" name="notification-edit" :width="800" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+        <p class="text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
     <form @submit.prevent="submitForm">

client/components/modals/player/QueueItemsModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="queue-items" :width="800" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ $strings.HeaderPlayerQueue }}</p>
+        <p class="text-3xl text-white truncate">{{ $strings.HeaderPlayerQueue }}</p>
       </div>
     </template>
     <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden py-4" style="max-height: 80vh">

client/components/modals/playlists/AddCreateModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="playlists" :processing="processing" :width="500" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden pointer-events-none">
-        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+        <p class="text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
 

client/components/modals/playlists/EditModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="edit-playlist" :width="700" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ $strings.HeaderPlaylist }}</p>
+        <p class="text-3xl text-white truncate">{{ $strings.HeaderPlaylist }}</p>
       </div>
     </template>
     <div class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">

client/components/modals/podcast/EditEpisode.vue

@@ -2,17 +2,24 @@
   <modals-modal v-model="show" name="podcast-episode-edit-modal" :width="800" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+        <p class="text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
     <div class="absolute -top-10 left-0 z-10 w-full flex">
       <template v-for="tab in tabs">
-        <div :key="tab.id" class="w-28 rounded-t-lg flex items-center justify-center mr-0.5 sm:mr-1 cursor-pointer hover:bg-bg font-book border-t border-l border-r border-black-300 tab text-xs sm:text-base" :class="selectedTab === tab.id ? 'tab-selected bg-bg pb-px' : 'bg-primary text-gray-400'" @click="selectTab(tab.id)">{{ tab.title }}</div>
+        <div :key="tab.id" class="w-28 rounded-t-lg flex items-center justify-center mr-0.5 sm:mr-1 cursor-pointer hover:bg-bg border-t border-l border-r border-black-300 tab text-xs sm:text-base" :class="selectedTab === tab.id ? 'tab-selected bg-bg pb-px' : 'bg-primary text-gray-400'" @click="selectTab(tab.id)">{{ tab.title }}</div>
       </template>
     </div>
 
+    <div v-show="canGoPrev" class="absolute -left-24 top-0 bottom-0 h-full pointer-events-none flex items-center px-6">
+      <div class="material-icons text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goPrevEpisode" @mousedown.prevent>arrow_back_ios</div>
+    </div>
+    <div v-show="canGoNext" class="absolute -right-24 top-0 bottom-0 h-full pointer-events-none flex items-center px-6">
+      <div class="material-icons text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goNextEpisode" @mousedown.prevent>arrow_forward_ios</div>
+    </div>
+
     <div ref="wrapper" class="p-4 w-full text-sm rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative overflow-y-auto" style="max-height: 80vh">
-      <component v-if="libraryItem && show" :is="tabComponentName" :library-item="libraryItem" :episode="episode" :processing.sync="processing" @close="show = false" @selectTab="selectTab" />
+      <component v-if="libraryItem && show" :is="tabComponentName" :library-item="libraryItem" :episode="episodeItem" :processing.sync="processing" @close="show = false" @selectTab="selectTab" />
     </div>
   </modals-modal>
 </template>
@@ -21,8 +28,8 @@
 export default {
   data() {
     return {
+      episodeItem: null,
       processing: false,
-      selectedTab: 'details',
       tabs: [
         {
           id: 'details',
@@ -37,6 +44,29 @@ export default {
       ]
     }
   },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          const availableTabIds = this.tabs.map((tab) => tab.id)
+          if (!availableTabIds.length) {
+            this.show = false
+            return
+          }
+
+          if (!availableTabIds.includes(this.selectedTab)) {
+            this.selectedTab = availableTabIds[0]
+          }
+
+          this.episodeItem = null
+          this.init()
+          this.registerListeners()
+        } else {
+          this.unregisterListeners()
+        }
+      }
+    }
+  },
   computed: {
     show: {
       get() {
@@ -46,27 +76,118 @@ export default {
         this.$store.commit('globals/setShowEditPodcastEpisodeModal', val)
       }
     },
+    selectedTab: {
+      get() {
+        return this.$store.state.editPodcastModalTab
+      },
+      set(val) {
+        this.$store.commit('setEditPodcastModalTab', val)
+      }
+    },
     libraryItem() {
       return this.$store.state.selectedLibraryItem
     },
     episode() {
       return this.$store.state.globals.selectedEpisode
     },
+    selectedEpisodeId() {
+      return this.episode.id
+    },
     title() {
-      if (!this.libraryItem) return ''
-      return this.libraryItem.media.metadata.title || 'Unknown'
+      return this.libraryItem?.media.metadata.title || 'Unknown'
     },
     tabComponentName() {
-      var _tab = this.tabs.find((t) => t.id === this.selectedTab)
+      const _tab = this.tabs.find((t) => t.id === this.selectedTab)
       return _tab ? _tab.component : ''
+    },
+    episodeTableEpisodeIds() {
+      return this.$store.state.episodeTableEpisodeIds || []
+    },
+    currentEpisodeIndex() {
+      if (!this.episodeTableEpisodeIds.length) return 0
+      return this.episodeTableEpisodeIds.findIndex((bid) => bid === this.selectedEpisodeId)
+    },
+    canGoPrev() {
+      return this.episodeTableEpisodeIds.length && this.currentEpisodeIndex > 0
+    },
+    canGoNext() {
+      return this.episodeTableEpisodeIds.length && this.currentEpisodeIndex < this.episodeTableEpisodeIds.length - 1
     }
   },
   methods: {
+    async goPrevEpisode() {
+      if (this.currentEpisodeIndex - 1 < 0) return
+      const prevEpisodeId = this.episodeTableEpisodeIds[this.currentEpisodeIndex - 1]
+      this.processing = true
+      const prevEpisode = await this.$axios.$get(`/api/podcasts/${this.libraryItem.id}/episode/${prevEpisodeId}`).catch((error) => {
+        const errorMsg = error.response && error.response.data ? error.response.data : 'Failed to fetch episode'
+        this.$toast.error(errorMsg)
+        return null
+      })
+      this.processing = false
+      if (prevEpisode) {
+        this.episodeItem = prevEpisode
+        this.$store.commit('globals/setSelectedEpisode', prevEpisode)
+      } else {
+        console.error('Episode not found', prevEpisodeId)
+      }
+    },
+    async goNextEpisode() {
+      if (this.currentEpisodeIndex >= this.episodeTableEpisodeIds.length - 1) return
+      this.processing = true
+      const nextEpisodeId = this.episodeTableEpisodeIds[this.currentEpisodeIndex + 1]
+      const nextEpisode = await this.$axios.$get(`/api/podcasts/${this.libraryItem.id}/episode/${nextEpisodeId}`).catch((error) => {
+        const errorMsg = error.response && error.response.data ? error.response.data : 'Failed to fetch book'
+        this.$toast.error(errorMsg)
+        return null
+      })
+      this.processing = false
+      if (nextEpisode) {
+        this.episodeItem = nextEpisode
+        this.$store.commit('globals/setSelectedEpisode', nextEpisode)
+      } else {
+        console.error('Episode not found', nextEpisodeId)
+      }
+    },
     selectTab(tab) {
-      this.selectedTab = tab
+      if (this.selectedTab === tab) return
+      if (this.tabs.find((t) => t.id === tab)) {
+        this.selectedTab = tab
+        this.processing = false
+      }
+    },
+    init() {
+      this.fetchFull()
+    },
+    async fetchFull() {
+      try {
+        this.processing = true
+        this.episodeItem = await this.$axios.$get(`/api/podcasts/${this.libraryItem.id}/episode/${this.selectedEpisodeId}`)
+        this.processing = false
+      } catch (error) {
+        console.error('Failed to fetch episode', this.selectedEpisodeId, error)
+        this.processing = false
+        this.show = false
+      }
+    },
+    hotkey(action) {
+      if (action === this.$hotkeys.Modal.NEXT_PAGE) {
+        this.goNextEpisode()
+      } else if (action === this.$hotkeys.Modal.PREV_PAGE) {
+        this.goPrevEpisode()
+      }
+    },
+    registerListeners() {
+      this.$eventBus.$on('modal-hotkey', this.hotkey)
+    },
+    unregisterListeners() {
+      this.$eventBus.$off('modal-hotkey', this.hotkey)
     }
   },
-  mounted() {}
+  mounted() {},
+  beforeDestroy() {
+    this.unregisterListeners()
+  }
 }
 </script>
 
@@ -77,4 +198,4 @@ export default {
 .tab.tab-selected {
   height: 41px;
 }
-</style>
+</style>

client/components/modals/podcast/EpisodeFeed.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="podcast-episodes-modal" :width="1200" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+        <p class="text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
     <div ref="wrapper" id="podcast-wrapper" class="p-4 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
@@ -19,8 +19,15 @@
             <ui-checkbox v-else v-model="selectedEpisodes[String(index)]" small checkbox-bg="primary" border-color="gray-600" />
           </div>
           <div class="px-8 py-2">
-            <p v-if="episode.episode" class="font-semibold text-gray-200">#{{ episode.episode }}</p>
-            <p class="break-words mb-1">{{ episode.title }}</p>
+            <div class="flex items-center font-semibold text-gray-200">
+              <div v-if="episode.season || episode.episode">#</div>
+              <div v-if="episode.season">{{ episode.season }}x</div>
+              <div v-if="episode.episode">{{ episode.episode }}</div>
+            </div>
+            <div class="flex items-center mb-1">
+              <div class="break-words">{{ episode.title }}</div>
+              <widgets-podcast-type-indicator :type="episode.episodeType" />
+            </div>
             <p v-if="episode.subtitle" class="break-words mb-1 text-sm text-gray-300 episode-subtitle">{{ episode.subtitle }}</p>
             <p class="text-xs text-gray-300">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
           </div>

client/components/modals/podcast/NewModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="new-podcast-modal" :width="1000" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-3/4 overflow-hidden">
-        <p class="font-book text-xl md:text-3xl text-white truncate">{{ title }}</p>
+        <p class="text-xl md:text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
     <div ref="wrapper" id="podcast-wrapper" class="p-2 md:p-8 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-x-hidden overflow-y-auto" style="max-height: 80vh">
@@ -28,6 +28,17 @@
             <ui-multi-select v-model="podcast.genres" :items="podcast.genres" :label="$strings.LabelGenres" />
           </div>
         </div>
+        <div class="flex flex-wrap">
+          <div class="md:w-1/4 p-2">
+            <ui-dropdown :label="$strings.LabelPodcastType" v-model="podcast.type" :items="podcastTypes" small />
+          </div>
+          <div class="md:w-1/4 p-2">
+            <ui-text-input-with-label v-model="podcast.language" :label="$strings.LabelLanguage" />
+          </div>
+          <div class="md:w-1/4 px-2 pt-7">
+            <ui-checkbox v-model="podcast.explicit" :label="$strings.LabelExplicit" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
+          </div>
+        </div>
         <div class="p-2 w-full">
           <ui-textarea-with-label v-model="podcast.description" :label="$strings.LabelDescription" :rows="3" />
         </div>
@@ -82,7 +93,10 @@ export default {
         itunesPageUrl: '',
         itunesId: '',
         itunesArtistId: '',
-        autoDownloadEpisodes: false
+        autoDownloadEpisodes: false,
+        language: '',
+        explicit: false,
+        type: ''
       }
     }
   },
@@ -140,6 +154,9 @@ export default {
     selectedFolderPath() {
       if (!this.selectedFolder) return ''
       return this.selectedFolder.fullPath
+    },
+    podcastTypes() {
+      return this.$store.state.globals.podcastTypes || []
     }
   },
   methods: {
@@ -170,7 +187,9 @@ export default {
             itunesPageUrl: this.podcast.itunesPageUrl,
             itunesId: this.podcast.itunesId,
             itunesArtistId: this.podcast.itunesArtistId,
-            language: this.podcast.language
+            language: this.podcast.language,
+            explicit: this.podcast.explicit,
+            type: this.podcast.type
           },
           autoDownloadEpisodes: this.podcast.autoDownloadEpisodes
         }
@@ -205,9 +224,11 @@ export default {
       this.podcast.itunesPageUrl = this._podcastData.pageUrl || ''
       this.podcast.itunesId = this._podcastData.id || ''
       this.podcast.itunesArtistId = this._podcastData.artistId || ''
-      this.podcast.language = this._podcastData.language || ''
+      this.podcast.language = this._podcastData.language || this.feedMetadata.language || ''
       this.podcast.autoDownloadEpisodes = false
+      this.podcast.type = this._podcastData.type || this.feedMetadata.type || 'episodic'
 
+      this.podcast.explicit = this._podcastData.explicit || this.feedMetadata.explicit === 'yes' || this.feedMetadata.explicit == 'true'
       if (this.folderItems[0]) {
         this.selectedFolderId = this.folderItems[0].value
         this.folderUpdated()
@@ -226,4 +247,4 @@ export default {
 #episodes-scroll {
   max-height: calc(80vh - 200px);
 }
-</style>
+</style>

client/components/modals/podcast/OpmlFeedsModal.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="opml-feeds-modal" :width="1000" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+        <p class="text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
     <div ref="wrapper" class="p-4 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
@@ -97,7 +97,7 @@ export default {
   },
   methods: {
     toFeedMetadata(feed) {
-      var metadata = feed.metadata
+      const metadata = feed.metadata
       return {
         title: metadata.title,
         author: metadata.author,
@@ -122,9 +122,9 @@ export default {
     },
     async submit() {
       this.processing = true
-      var newFeedPayloads = this.feedMetadata.map((metadata) => {
+      const newFeedPayloads = this.feedMetadata.map((metadata) => {
         return {
-          path: `${this.selectedFolderPath}\\${this.$sanitizeFilename(metadata.title)}`,
+          path: `${this.selectedFolderPath}/${this.$sanitizeFilename(metadata.title)}`,
           folderId: this.selectedFolderId,
           libraryId: this.currentLibrary.id,
           media: {

client/components/modals/podcast/RemoveEpisode.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="podcast-episode-remove-modal" :width="500" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+        <p class="text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
     <div ref="wrapper" class="px-8 py-6 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">

client/components/modals/podcast/ViewEpisode.vue

@@ -2,7 +2,7 @@
   <modals-modal v-model="show" name="podcast-episode-view-modal" :width="800" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ $strings.LabelEpisode }}</p>
+        <p class="text-3xl text-white truncate">{{ $strings.LabelEpisode }}</p>
       </div>
     </template>
     <div ref="wrapper" class="p-4 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-auto" style="max-height: 80vh">

client/components/modals/podcast/tabs/EpisodeDetails.vue

@@ -8,7 +8,7 @@
         <ui-text-input-with-label v-model="newEpisode.episode" :label="$strings.LabelEpisode" />
       </div>
       <div class="w-1/5 p-1">
-        <ui-text-input-with-label v-model="newEpisode.episodeType" :label="$strings.LabelEpisodeType" />
+        <ui-dropdown v-model="newEpisode.episodeType" :label="$strings.LabelEpisodeType" :items="episodeTypes" small />
       </div>
       <div class="w-2/5 p-1">
         <ui-text-input-with-label v-model="pubDateInput" @input="updatePubDate" type="datetime-local" :label="$strings.LabelPubDate" />
@@ -24,7 +24,12 @@
       </div>
     </div>
     <div class="flex items-center justify-end pt-4">
-      <ui-btn @click="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+      <!-- desktop -->
+      <ui-btn @click="submit" class="mx-2 hidden md:block">{{ $strings.ButtonSave }}</ui-btn>
+      <ui-btn @click="saveAndClose" class="mx-2 hidden md:block">{{ $strings.ButtonSaveAndClose }}</ui-btn>
+
+      <!-- mobile -->
+      <ui-btn @click="saveAndClose" class="mx-2 md:hidden">{{ $strings.ButtonSave }}</ui-btn>
     </div>
     <div v-if="enclosureUrl" class="py-4">
       <p class="text-xs text-gray-300 font-semibold">Episode URL from RSS feed</p>
@@ -89,6 +94,9 @@ export default {
     },
     enclosureUrl() {
       return this.enclosure.url
+    },
+    episodeTypes() {
+      return this.$store.state.globals.episodeTypes || []
     }
   },
   methods: {
@@ -122,28 +130,43 @@ export default {
       }
       return updatePayload
     },
-    submit() {
-      const payload = this.getUpdatePayload()
-      if (!Object.keys(payload).length) {
-        return this.$toast.info('No updates were made')
+    async saveAndClose() {
+      const wasUpdated = await this.submit()
+      if (wasUpdated !== null) this.$emit('close')
+    },
+    async submit() {
+      if (this.isProcessing) {
+        return null
       }
 
+      const updatedDetails = this.getUpdatePayload()
+      if (!Object.keys(updatedDetails).length) {
+        this.$toast.info('No changes were made')
+        return false
+      }
+      return this.updateDetails(updatedDetails)
+    },
+    async updateDetails(updatedDetails) {
       this.isProcessing = true
-      this.$axios
-        .$patch(`/api/podcasts/${this.libraryItem.id}/episode/${this.episodeId}`, payload)
-        .then(() => {
-          this.isProcessing = false
+      const updateResult = await this.$axios.$patch(`/api/podcasts/${this.libraryItem.id}/episode/${this.episodeId}`, updatedDetails).catch((error) => {
+        console.error('Failed update episode', error)
+        this.isProcessing = false
+        this.$toast.error(error?.response?.data || 'Failed to update episode')
+        return false
+      })
+
+      this.isProcessing = false
+      if (updateResult) {
+        if (updateResult) {
           this.$toast.success('Podcast episode updated')
-          this.$emit('close')
-        })
-        .catch((error) => {
-          var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to update episode'
-          console.error('Failed update episode', error)
-          this.isProcessing = false
-          this.$toast.error(errorMsg)
-        })
+          return true
+        } else {
+          this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
+        }
+      }
+      return false
     }
   },
   mounted() {}
 }
-</script>
+</script>

client/components/modals/rssfeed/OpenCloseModal.vue

@@ -2,17 +2,32 @@
   <modals-modal v-model="show" name="rss-feed-modal" :width="600" :height="'unset'" :processing="processing">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+        <p class="text-3xl text-white truncate">{{ title }}</p>
       </div>
     </template>
     <div ref="wrapper" class="px-8 py-6 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
-      <div v-if="currentFeedUrl" class="w-full">
+      <div v-if="currentFeed" class="w-full">
         <p class="text-lg font-semibold mb-4">{{ $strings.HeaderRSSFeedIsOpen }}</p>
 
         <div class="w-full relative">
-          <ui-text-input v-model="currentFeedUrl" readonly />
+          <ui-text-input v-model="currentFeed.feedUrl" readonly />
 
-          <span class="material-icons absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(currentFeedUrl)">content_copy</span>
+          <span class="material-icons absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(currentFeed.feedUrl)">content_copy</span>
+        </div>
+
+        <div v-if="currentFeed.meta" class="mt-5">
+          <div class="flex py-0.5">
+            <div class="w-48"><span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelRssFeedPreventIndexing }}</span></div>
+            <div> {{ currentFeed.meta.preventIndexing ? 'Yes' : 'No' }} </div>
+          </div>
+          <div v-if="currentFeed.meta.ownerName" class="flex py-0.5">
+            <div class="w-48"><span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelRssFeedCustomOwnerName }}</span></div>
+            <div> {{ currentFeed.meta.ownerName }} </div>
+          </div>
+          <div v-if="currentFeed.meta.ownerEmail" class="flex py-0.5">
+            <div class="w-48"><span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelRssFeedCustomOwnerEmail }}</span></div>
+            <div> {{ currentFeed.meta.ownerEmail }} </div>
+          </div>
         </div>
       </div>
       <div v-else class="w-full">
@@ -22,13 +37,14 @@
           <ui-text-input-with-label v-model="newFeedSlug" :label="$strings.LabelRSSFeedSlug" />
           <p class="text-xs text-gray-400 py-0.5 px-1">{{ $getString('MessageFeedURLWillBe', [demoFeedUrl]) }}</p>
         </div>
+        <widgets-rss-feed-metadata-builder v-model="metadataDetails" />
 
         <p v-if="isHttp" class="w-full pt-2 text-warning text-xs">{{ $strings.NoteRSSFeedPodcastAppsHttps }}</p>
         <p v-if="hasEpisodesWithoutPubDate" class="w-full pt-2 text-warning text-xs">{{ $strings.NoteRSSFeedPodcastAppsPubDate }}</p>
       </div>
       <div v-show="userIsAdminOrUp" class="flex items-center pt-6">
         <div class="flex-grow" />
-        <ui-btn v-if="currentFeedUrl" color="error" small @click="closeFeed">{{ $strings.ButtonCloseFeed }}</ui-btn>
+        <ui-btn v-if="currentFeed" color="error" small @click="closeFeed">{{ $strings.ButtonCloseFeed }}</ui-btn>
         <ui-btn v-else color="success" small @click="openFeed">{{ $strings.ButtonOpenFeed }}</ui-btn>
       </div>
     </div>
@@ -37,19 +53,16 @@
 
 <script>
 export default {
-  props: {
-    value: Boolean,
-    libraryItem: {
-      type: Object,
-      default: () => null
-    },
-    feedUrl: String
-  },
   data() {
     return {
       processing: false,
       newFeedSlug: null,
-      currentFeedUrl: null
+      currentFeed: null,
+      metadataDetails: {
+        preventIndexing: true,
+        ownerName: '',
+        ownerEmail: ''
+      },
     }
   },
   watch: {
@@ -65,23 +78,29 @@ export default {
   computed: {
     show: {
       get() {
-        return this.value
+        return this.$store.state.globals.showRSSFeedOpenCloseModal
       },
       set(val) {
-        this.$emit('input', val)
+        this.$store.commit('globals/setShowRSSFeedOpenCloseModal', val)
       }
     },
-    libraryItemId() {
-      return this.libraryItem.id
+    rssFeedEntity() {
+      return this.$store.state.globals.rssFeedEntity || {}
     },
-    media() {
-      return this.libraryItem.media || {}
+    entityId() {
+      return this.rssFeedEntity.id
     },
-    mediaMetadata() {
-      return this.media.metadata || {}
+    entityType() {
+      return this.rssFeedEntity.type
+    },
+    entityFeed() {
+      return this.rssFeedEntity.feed
+    },
+    hasEpisodesWithoutPubDate() {
+      return !!this.rssFeedEntity.hasEpisodesWithoutPubDate
     },
     title() {
-      return this.mediaMetadata.title
+      return this.rssFeedEntity.name
     },
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
@@ -91,12 +110,6 @@ export default {
     },
     isHttp() {
       return window.origin.startsWith('http://')
-    },
-    episodes() {
-      return this.media.episodes || []
-    },
-    hasEpisodesWithoutPubDate() {
-      return this.episodes.some((ep) => !ep.pubDate)
     }
   },
   methods: {
@@ -106,7 +119,7 @@ export default {
         return
       }
 
-      var sanitized = this.$sanitizeSlug(this.newFeedSlug)
+      const sanitized = this.$sanitizeSlug(this.newFeedSlug)
       if (this.newFeedSlug !== sanitized) {
         this.newFeedSlug = sanitized
         this.$toast.warning('Slug had to be modified - Run again')
@@ -115,25 +128,22 @@ export default {
 
       const payload = {
         serverAddress: window.origin,
-        slug: this.newFeedSlug
+        slug: this.newFeedSlug,
+        metadataDetails: this.metadataDetails
       }
       if (this.$isDev) payload.serverAddress = `http://localhost:3333${this.$config.routerBasePath}`
 
       console.log('Payload', payload)
       this.$axios
-        .$post(`/api/items/${this.libraryItemId}/open-feed`, payload)
+        .$post(`/api/feeds/${this.entityType}/${this.entityId}/open`, payload)
         .then((data) => {
-          if (data.success) {
-            console.log('Opened RSS Feed', data)
-            this.currentFeedUrl = data.feedUrl
-          } else {
-            const errorMsg = data.error || 'Unknown error'
-            this.$toast.error(errorMsg)
-          }
+          console.log('Opened RSS Feed', data)
+          this.currentFeed = data.feed
         })
         .catch((error) => {
           console.error('Failed to open RSS Feed', error)
-          this.$toast.error()
+          const errorMsg = error.response ? error.response.data : null
+          this.$toast.error(errorMsg || 'Failed to open RSS Feed')
         })
     },
     copyToClipboard(str) {
@@ -142,22 +152,23 @@ export default {
     closeFeed() {
       this.processing = true
       this.$axios
-        .$post(`/api/items/${this.libraryItem.id}/close-feed`)
+        .$post(`/api/feeds/${this.currentFeed.id}/close`)
         .then(() => {
           this.$toast.success(this.$strings.ToastRSSFeedCloseSuccess)
           this.show = false
-          this.processing = false
         })
         .catch((error) => {
           console.error('Failed to close RSS feed', error)
-          this.processing = false
           this.$toast.error(this.$strings.ToastRSSFeedCloseFailed)
         })
+        .finally(() => {
+          this.processing = false
+        })
     },
     init() {
-      if (!this.libraryItem) return
-      this.newFeedSlug = this.libraryItem.id
-      this.currentFeedUrl = this.feedUrl
+      if (!this.entityId) return
+      this.newFeedSlug = this.entityId
+      this.currentFeed = this.entityFeed
     }
   },
   mounted() {}

client/components/player/PlayerTrackBar.vue

@@ -15,7 +15,7 @@
     </div>
 
     <!-- Hover timestamp -->
-    <div ref="hoverTimestamp" class="absolute -top-8 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none">
+    <div ref="hoverTimestamp" class="absolute -top-8 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none z-10">
       <p ref="hoverTimestampText" class="text-xs font-mono text-center px-2 py-0.5 truncate whitespace-nowrap">00:00</p>
     </div>
     <div ref="hoverTimestampArrow" class="absolute -top-3 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none">
@@ -83,9 +83,9 @@ export default {
 
       var offsetX = e.offsetX
       var perc = offsetX / this.trackWidth
-      const baseTime = this.useChapterTrack ? this.currentChapterStart : 0;
-      const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration;
-      const time = baseTime + (perc * duration);
+      const baseTime = this.useChapterTrack ? this.currentChapterStart : 0
+      const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration
+      const time = baseTime + perc * duration
       if (isNaN(time) || time === null) {
         console.error('Invalid time', perc, time)
         return
@@ -143,10 +143,10 @@ export default {
     mousemoveTrack(e) {
       var offsetX = e.offsetX
 
-      const baseTime = this.useChapterTrack ? this.currentChapterStart : 0;
-      const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration;
-      const progressTime = (offsetX / this.trackWidth) * duration;
-      const totalTime = baseTime + progressTime;
+      const baseTime = this.useChapterTrack ? this.currentChapterStart : 0
+      const duration = this.useChapterTrack ? this.currentChapterDuration : this.duration
+      const progressTime = (offsetX / this.trackWidth) * duration
+      const totalTime = baseTime + progressTime
 
       if (this.$refs.hoverTimestamp) {
         var width = this.$refs.hoverTimestamp.clientWidth

client/components/player/PlayerUi.vue

@@ -234,13 +234,10 @@ export default {
       this.showChaptersModal = false
     },
     setUseChapterTrack() {
-      var useChapterTrack = !this.useChapterTrack
-      this.useChapterTrack = useChapterTrack
-      if (this.$refs.trackbar) this.$refs.trackbar.setUseChapterTrack(useChapterTrack)
+      this.useChapterTrack = !this.useChapterTrack
+      if (this.$refs.trackbar) this.$refs.trackbar.setUseChapterTrack(this.useChapterTrack)
 
-      this.$store.dispatch('user/updateUserSettings', { useChapterTrack }).catch((err) => {
-        console.error('Failed to update settings', err)
-      })
+      this.$store.dispatch('user/updateUserSettings', { useChapterTrack: this.useChapterTrack })
       this.updateTimestamp()
     },
     checkUpdateChapterTrack() {
@@ -311,7 +308,7 @@ export default {
     init() {
       this.playbackRate = this.$store.getters['user/getUserSetting']('playbackRate') || 1
 
-      var _useChapterTrack = this.$store.getters['user/getUserSetting']('useChapterTrack') || false
+      const _useChapterTrack = this.$store.getters['user/getUserSetting']('useChapterTrack') || false
       this.useChapterTrack = this.chapters.length ? _useChapterTrack : false
 
       if (this.$refs.trackbar) this.$refs.trackbar.setUseChapterTrack(this.useChapterTrack)
@@ -345,13 +342,14 @@ export default {
     }
   },
   mounted() {
-    this.$store.commit('user/addSettingsListener', { id: 'audioplayer', meth: this.settingsUpdated })
-    this.init()
     this.$eventBus.$on('player-hotkey', this.hotkey)
+    this.$eventBus.$on('user-settings', this.settingsUpdated)
+
+    this.init()
   },
   beforeDestroy() {
-    this.$store.commit('user/removeSettingsListener', 'audioplayer')
     this.$eventBus.$off('player-hotkey', this.hotkey)
+    this.$eventBus.$off('user-settings', this.settingsUpdated)
   }
 }
 </script>

client/components/readers/EpubReader2.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="h-full w-full">
+    <div id="viewer" class="border border-gray-100 bg-white text-black shadow-md h-screen overflow-y-auto p-4" v-html="pageHtml"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    url: String,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      bookInfo: {},
+      page: 0,
+      numPages: 0,
+      pageHtml: '',
+      progress: 0
+    }
+  },
+  computed: {
+    libraryItemId() {
+      return this.libraryItem ? this.libraryItem.id : null
+    },
+    hasPrev() {
+      return this.page > 0
+    },
+    hasNext() {
+      return this.page < this.numPages - 1
+    }
+  },
+  methods: {
+    prev() {
+      if (!this.hasPrev) return
+      this.page--
+      this.loadPage()
+    },
+    next() {
+      if (!this.hasNext) return
+      this.page++
+      this.loadPage()
+    },
+    keyUp() {
+      if ((e.keyCode || e.which) == 37) {
+        this.prev()
+      } else if ((e.keyCode || e.which) == 39) {
+        this.next()
+      }
+    },
+    loadPage() {
+      this.$axios
+        .$get(`/api/ebooks/${this.libraryItemId}/page/${this.page}?dev=${this.$isDev ? 1 : 0}`)
+        .then((html) => {
+          this.pageHtml = html
+        })
+        .catch((error) => {
+          console.error('Failed to load page', error)
+          this.$toast.error('Failed to load page')
+        })
+    },
+    loadInfo() {
+      this.$axios
+        .$get(`/api/ebooks/${this.libraryItemId}/info?dev=${this.$isDev ? 1 : 0}`)
+        .then((bookInfo) => {
+          this.bookInfo = bookInfo
+          this.numPages = bookInfo.pages
+          this.page = 0
+          this.loadPage()
+        })
+        .catch((error) => {
+          console.error('Failed to load page', error)
+          this.$toast.error('Failed to load info')
+        })
+    },
+    initEpub() {
+      if (!this.libraryItemId) return
+      this.loadInfo()
+    }
+  },
+  mounted() {
+    this.initEpub()
+  }
+}
+</script>

client/components/readers/Reader.vue

@@ -1,15 +1,15 @@
 <template>
-  <div v-if="show" class="w-screen h-screen fixed top-0 left-0 z-50 bg-primary text-white">
+  <div v-if="show" class="w-screen h-screen fixed top-0 left-0 z-60 bg-primary text-white">
     <div class="absolute top-4 right-4 z-20">
       <span class="material-icons cursor-pointer text-4xl" @click="close">close</span>
     </div>
 
-    <div class="absolute top-4 left-4 font-book">
+    <div class="absolute top-4 left-4">
       <h1 class="text-2xl mb-1">{{ abTitle }}</h1>
       <p v-if="abAuthor">by {{ abAuthor }}</p>
     </div>
 
-    <component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl" />
+    <component v-if="componentName" ref="readerComponent" :is="componentName" :url="ebookUrl" :library-item="selectedLibraryItem" />
 
     <div class="absolute bottom-2 left-2">{{ ebookType }}</div>
   </div>
@@ -37,7 +37,8 @@ export default {
       }
     },
     componentName() {
-      if (this.ebookType === 'epub') return 'readers-epub-reader'
+      if (this.ebookType === 'epub' && this.$isDev) return 'readers-epub-reader2'
+      else if (this.ebookType === 'epub') return 'readers-epub-reader'
       else if (this.ebookType === 'mobi') return 'readers-mobi-reader'
       else if (this.ebookType === 'pdf') return 'readers-pdf-reader'
       else if (this.ebookType === 'comic') return 'readers-comic-reader'

client/components/stats/DailyListeningChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-96 my-6 mx-auto">
-    <h1 class="text-2xl mb-4 font-book">{{ $strings.HeaderStatsMinutesListeningChart }}</h1>
+    <h1 class="text-2xl mb-4">{{ $strings.HeaderStatsMinutesListeningChart }}</h1>
     <div class="relative w-96 h-72">
       <div class="absolute top-0 left-0">
         <template v-for="lbl in yAxisLabels">
@@ -27,7 +27,7 @@
       <div class="absolute -bottom-2 left-0 flex ml-6">
         <template v-for="dayObj in last7Days">
           <div :key="dayObj.date" :style="{ width: daySpacing + daySpacing / 14 + 'px' }">
-            <p class="text-sm font-book">{{ dayObj.dayOfWeek.slice(0, 3) }}</p>
+            <p class="text-sm">{{ dayObj.dayOfWeekAbbr }}</p>
           </div>
         </template>
       </div>
@@ -108,6 +108,7 @@ export default {
         var _date = this.$addDaysToToday(i * -1)
         days.push({
           dayOfWeek: this.$formatJsDate(_date, 'EEEE'),
+          dayOfWeekAbbr: this.$formatJsDate(_date, 'EEE'),
           date: this.$formatJsDate(_date, 'yyyy-MM-dd')
         })
       }
@@ -218,4 +219,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

client/components/stats/Heatmap.vue

@@ -68,7 +68,7 @@ export default {
     dayLabels() {
       return [
         {
-          label: 'Mon',
+          label: this.$formatJsDate(new Date(2023, 0, 2), 'EEE'),
           style: {
             transform: `translate(${-25}px, ${13}px)`,
             lineHeight: '10px',
@@ -76,7 +76,7 @@ export default {
           }
         },
         {
-          label: 'Wed',
+          label: this.$formatJsDate(new Date(2023, 0, 4), 'EEE'),
           style: {
             transform: `translate(${-25}px, ${13 * 3}px)`,
             lineHeight: '10px',
@@ -84,7 +84,7 @@ export default {
           }
         },
         {
-          label: 'Fri',
+          label: this.$formatJsDate(new Date(2023, 0, 6), 'EEE'),
           style: {
             transform: `translate(${-25}px, ${13 * 5}px)`,
             lineHeight: '10px',
@@ -270,4 +270,4 @@ export default {
   },
   beforeDestroy() {}
 }
-</script>
+</script>

client/components/stats/PreviewIcons.vue

@@ -6,7 +6,7 @@
       </svg>
       <div class="px-2">
         <p class="text-4xl md:text-5xl font-bold">{{ totalItems }}</p>
-        <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsItemsInLibrary }}</p>
+        <p class="text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsItemsInLibrary }}</p>
       </div>
     </div>
 
@@ -14,7 +14,7 @@
       <span class="material-icons text-7xl">show_chart</span>
       <div class="px-1">
         <p class="text-4xl md:text-5xl font-bold">{{ totalTime }}</p>
-        <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ useOverallHours ? $strings.LabelStatsOverallHours : $strings.LabelStatsOverallDays }}</p>
+        <p class="text-xs md:text-sm text-white text-opacity-80">{{ useOverallHours ? $strings.LabelStatsOverallHours : $strings.LabelStatsOverallDays }}</p>
       </div>
     </div>
 
@@ -24,7 +24,7 @@
       </svg>
       <div class="px-1">
         <p class="text-4xl md:text-5xl font-bold">{{ totalAuthors }}</p>
-        <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsAuthors }}</p>
+        <p class="text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsAuthors }}</p>
       </div>
     </div>
 
@@ -32,7 +32,7 @@
       <span class="material-icons-outlined text-6xl pt-1">insert_drive_file</span>
       <div class="px-1">
         <p class="text-4xl md:text-5xl font-bold">{{ totalSizeNum }}</p>
-        <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelSize }} ({{ totalSizeMod }})</p>
+        <p class="text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelSize }} ({{ totalSizeMod }})</p>
       </div>
     </div>
 
@@ -40,7 +40,7 @@
       <span class="material-icons-outlined text-6xl pt-1">audio_file</span>
       <div class="px-1">
         <p class="text-4xl md:text-5xl font-bold">{{ numAudioTracks }}</p>
-        <p class="font-book text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsAudioTracks }}</p>
+        <p class="text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsAudioTracks }}</p>
       </div>
     </div>
   </div>

client/components/tables/BackupsTable.vue

@@ -17,7 +17,7 @@
           <td>
             <p class="truncate text-xs sm:text-sm md:text-base">/{{ backup.path.replace(/\\/g, '/') }}</p>
           </td>
-          <td class="hidden sm:table-cell font-sans text-sm">{{ backup.datePretty }}</td>
+          <td class="hidden sm:table-cell font-sans text-sm">{{ $formatDatetime(backup.createdAt, dateFormat, timeFormat) }}</td>
           <td class="hidden sm:table-cell font-mono md:text-sm text-xs">{{ $bytesPretty(backup.fileSize) }}</td>
           <td>
             <div class="w-full flex flex-row items-center justify-center">
@@ -46,7 +46,7 @@
         <p class="text-error text-lg font-semibold">{{ $strings.MessageImportantNotice }}</p>
         <p class="text-base py-1" v-html="$strings.MessageRestoreBackupWarning" />
 
-        <p class="text-lg text-center my-8">{{ $strings.MessageRestoreBackupConfirm }} {{ selectedBackup.datePretty }}?</p>
+        <p class="text-lg text-center my-8">{{ $strings.MessageRestoreBackupConfirm }} {{ $formatDatetime(selectedBackup.createdAt, dateFormat, timeFormat) }}?</p>
         <div class="flex px-1 items-center">
           <ui-btn color="primary" @click="showConfirmApply = false">{{ $strings.ButtonNevermind }}</ui-btn>
           <div class="flex-grow" />
@@ -71,6 +71,12 @@ export default {
   computed: {
     userToken() {
       return this.$store.getters['user/getToken']
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
     }
   },
   methods: {
@@ -90,7 +96,7 @@ export default {
         })
     },
     deleteBackupClick(backup) {
-      if (confirm(this.$getString('MessageConfirmDeleteBackup', [backup.datePretty]))) {
+      if (confirm(this.$getString('MessageConfirmDeleteBackup', [this.$formatDatetime(backup.createdAt, this.dateFormat, this.timeFormat)]))) {
         this.processing = true
         this.$axios
           .$delete(`/api/backups/${backup.id}`)
@@ -208,4 +214,4 @@ export default {
   padding-bottom: 5px;
   background-color: #333;
 }
-</style>
+</style>

client/components/tables/ChaptersTable.vue

@@ -11,7 +11,7 @@
     </div>
     <transition name="slide">
       <table class="text-sm tracksTable" v-show="expanded || keepOpen">
-        <tr class="font-book">
+        <tr>
           <th class="text-left w-16"><span class="px-4">Id</span></th>
           <th class="text-left">{{ $strings.LabelTitle }}</th>
           <th class="text-center">{{ $strings.LabelStart }}</th>
@@ -21,7 +21,7 @@
           <td class="text-left">
             <p class="px-4">{{ chapter.id }}</p>
           </td>
-          <td class="font-book">
+          <td>
             {{ chapter.title }}
           </td>
           <td class="font-mono text-center hover:underline cursor-pointer" @click.stop="goToTimestamp(chapter.start)">

client/components/tables/LibraryFilesTable.vue

@@ -14,7 +14,7 @@
     <transition name="slide">
       <div class="w-full" v-show="showFiles">
         <table class="text-sm tracksTable">
-          <tr class="font-book">
+          <tr>
             <th class="text-left px-4">{{ $strings.LabelPath }}</th>
             <th class="text-left w-24 min-w-24">{{ $strings.LabelSize }}</th>
             <th class="text-left px-4 w-24">{{ $strings.LabelType }}</th>
@@ -22,7 +22,7 @@
           </tr>
           <template v-for="file in files">
             <tr :key="file.path">
-              <td class="font-book px-4">
+              <td class="px-4">
                 {{ showFullPath ? file.metadata.path : file.metadata.relPath }}
               </td>
               <td class="font-mono">

client/components/tables/TracksTable.vue

@@ -18,7 +18,7 @@
     <transition name="slide">
       <div class="w-full" v-show="showTracks">
         <table class="text-sm tracksTable">
-          <tr class="font-book">
+          <tr>
             <th class="w-10">#</th>
             <th class="text-left">{{ $strings.LabelFilename }}</th>
             <th class="text-left w-20">{{ $strings.LabelSize }}</th>

client/components/tables/UploadedFilesTable.vue

@@ -11,20 +11,20 @@
     <transition name="slide">
       <div class="w-full" v-show="expand">
         <table class="text-sm tracksTable">
-          <tr class="font-book">
+          <tr>
             <th class="text-left">{{ $strings.LabelFilename }}</th>
             <th class="text-left">{{ $strings.LabelSize }}</th>
             <th class="text-left">{{ $strings.LabelType }}</th>
           </tr>
           <template v-for="file in files">
             <tr :key="file.path">
-              <td class="font-book pl-2">
+              <td class="pl-2">
                 {{ file.name }}
               </td>
               <td class="font-mono">
                 {{ $bytesPretty(file.size) }}
               </td>
-              <td class="font-book">
+              <td>
                 {{ file.filetype }}
               </td>
             </tr>

client/components/tables/UsersTable.vue

@@ -25,23 +25,23 @@
             </div>
           </td>
           <td class="text-xs font-mono hidden sm:table-cell">
-            <ui-tooltip v-if="user.lastSeen" direction="top" :text="$formatDate(user.lastSeen, 'MMMM do, yyyy HH:mm')">
+            <ui-tooltip v-if="user.lastSeen" direction="top" :text="$formatDatetime(user.lastSeen, dateFormat, timeFormat)">
               {{ $dateDistanceFromNow(user.lastSeen) }}
             </ui-tooltip>
           </td>
           <td class="text-xs font-mono hidden sm:table-cell">
-            <ui-tooltip direction="top" :text="$formatDate(user.createdAt, 'MMMM do, yyyy HH:mm')">
-              {{ $formatDate(user.createdAt, 'MMM d, yyyy') }}
+            <ui-tooltip direction="top" :text="$formatDatetime(user.createdAt, dateFormat, timeFormat)">
+              {{ $formatDate(user.createdAt, dateFormat) }}
             </ui-tooltip>
           </td>
           <td class="py-0">
-            <div class="w-full flex justify-center">
+            <div class="w-full flex justify-left">
               <!-- Dont show edit for non-root users -->
               <div v-if="user.type !== 'root' || userIsRoot" class="h-8 w-8 flex items-center justify-center text-white text-opacity-50 hover:text-opacity-100 cursor-pointer" @click.stop="editUser(user)">
-                <span class="material-icons text-base">edit</span>
+                <button type="button" :aria-label="$getString('ButtonUserEdit', [user.username])" class="material-icons text-base">edit</button>
               </div>
               <div v-show="user.type !== 'root'" class="h-8 w-8 flex items-center justify-center text-white text-opacity-50 hover:text-error cursor-pointer" @click.stop="deleteUserClick(user)">
-                <span class="material-icons text-base">delete</span>
+                <button type="button" :aria-label="$getString('ButtonUserDelete', [user.username])" class="material-icons text-base">delete</button>
               </div>
             </div>
           </td>
@@ -74,6 +74,12 @@ export default {
       var usermap = {}
       this.$store.state.users.usersOnline.forEach((u) => (usermap[u.id] = u))
       return usermap
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
     }
   },
   methods: {
@@ -109,8 +115,8 @@ export default {
     loadUsers() {
       this.$axios
         .$get('/api/users')
-        .then((users) => {
-          this.users = users.sort((a, b) => {
+        .then((res) => {
+          this.users = res.users.sort((a, b) => {
             return a.createdAt - b.createdAt
           })
         })
@@ -201,4 +207,4 @@ export default {
   padding-bottom: 5px;
   background-color: #272727;
 }
-</style>
+</style>

client/components/tables/library/LibrariesTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="librariesTable">
+  <div>
     <draggable v-if="libraryCopies.length" :list="libraryCopies" v-bind="dragOptions" class="list-group" handle=".drag-handle" draggable=".item" tag="div" @start="startDrag" @end="endDrag">
       <template v-for="library in libraryCopies">
         <div :key="library.id" class="item">
@@ -82,10 +82,10 @@ export default {
       })
       var newOrder = libraryOrderData.map((lib) => lib.id).join(',')
       if (currOrder !== newOrder) {
-        this.$axios.$post('/api/libraries/order', libraryOrderData).then((libraries) => {
-          if (libraries && libraries.length) {
+        this.$axios.$post('/api/libraries/order', libraryOrderData).then((response) => {
+          if (response.libraries && response.libraries.length) {
             this.$toast.success('Library order saved', { timeout: 1500 })
-            this.$store.commit('libraries/set', libraries)
+            this.$store.commit('libraries/set', response.libraries)
           }
         })
       }

client/components/tables/library/LibraryItem.vue

@@ -1,32 +1,29 @@
 <template>
-  <div class="w-full px-4 h-12 border border-white border-opacity-10 flex items-center relative -mt-px" :class="selected ? 'bg-primary bg-opacity-50' : 'hover:bg-primary hover:bg-opacity-25'" @mouseover="mouseover = true" @mouseleave="mouseover = false">
+  <div class="w-full pl-2 pr-4 md:px-4 h-12 border border-white border-opacity-10 flex items-center relative -mt-px" :class="selected ? 'bg-primary bg-opacity-50' : 'hover:bg-primary hover:bg-opacity-25'" @mouseover="mouseover = true" @mouseleave="mouseover = false">
     <div v-show="selected" class="absolute top-0 left-0 h-full w-0.5 bg-warning z-10" />
-    <ui-library-icon v-if="!libraryScan" :icon="library.icon" :size="6" font-size="xl" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
+    <ui-library-icon v-if="!libraryScan" :icon="library.icon" :size="6" font-size="lg md:text-xl" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
     <svg v-else viewBox="0 0 24 24" class="h-6 w-6 text-white text-opacity-50 animate-spin">
       <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
     </svg>
-    <p class="text-xl font-book pl-4 hover:underline cursor-pointer" @click.stop="$emit('click', library)">{{ library.name }}</p>
+    <p class="text-base md:text-xl pl-2 md:pl-4 hover:underline cursor-pointer" @click.stop="$emit('click', library)">{{ library.name }}</p>
+
     <div class="flex-grow" />
-    <ui-btn v-show="isHovering && !libraryScan" class="hidden md:block" small color="success" @click.stop="scan">{{ $strings.ButtonScan }}</ui-btn>
-    <ui-btn v-show="isHovering && !libraryScan" small color="bg" class="ml-2 hidden md:block" @click.stop="forceScan">{{ $strings.ButtonForceReScan }}</ui-btn>
 
-    <ui-btn v-show="isHovering && !libraryScan && isBookLibrary" small color="bg" class="ml-2 hidden md:block" @click.stop="matchAll">{{ $strings.ButtonMatchBooks }}</ui-btn>
+    <!-- Desktop context menu icon -->
+    <ui-context-menu-dropdown v-if="!libraryScan && !isDeleting" :items="contextMenuItems" :icon-class="`text-1.5xl text-gray-${isHovering ? 50 : 400}`" class="!hidden md:!block" @action="contextMenuAction" />
 
-    <span v-if="isHovering && !libraryScan" class="!hidden md:!block material-icons text-xl text-gray-300 hover:text-gray-50 ml-4 cursor-pointer" @click.stop="editClick">edit</span>
-    <span v-if="!libraryScan && isHovering && !isDeleting" class="!hidden md:!block material-icons text-xl text-gray-300 ml-3 hover:text-gray-50 cursor-pointer" @click.stop="deleteClick">delete</span>
+    <!-- Mobile context menu icon -->
+    <span v-if="!libraryScan && !isDeleting" class="!block md:!hidden material-icons text-xl text-gray-300 ml-3 cursor-pointer" @click.stop="showMenu">more_vert</span>
 
-    <!-- For mobile -->
-    <span v-if="!libraryScan" class="!block md:!hidden material-icons text-xl text-gray-300 ml-4 cursor-pointer" @click.stop="editClick">edit</span>
-    <span v-if="!libraryScan && !isDeleting" class="!block md:!hidden material-icons text-2xl text-gray-300 ml-3 cursor-pointer" @click.stop="showMenu">more_vert</span>
     <div v-show="isDeleting" class="text-xl text-gray-300 ml-3 animate-spin">
       <svg viewBox="0 0 24 24" class="w-6 h-6">
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
       </svg>
     </div>
-    <span class="material-icons drag-handle text-xl text-gray-400 hover:text-gray-50 ml-4">reorder</span>
+    <span class="material-icons drag-handle text-xl text-gray-400 hover:text-gray-50 ml-2 md:ml-4">reorder</span>
 
     <!-- For mobile -->
-    <modals-dialog v-model="showMobileMenu" :title="menuTitle" :items="mobileMenuItems" @action="mobileMenuAction" />
+    <modals-dialog v-model="showMobileMenu" :title="menuTitle" :items="contextMenuItems" @action="contextMenuAction" />
   </div>
 </template>
 
@@ -63,34 +60,45 @@ export default {
     menuTitle() {
       return this.library.name
     },
-    mobileMenuItems() {
+    contextMenuItems() {
       const items = [
+        {
+          text: this.$strings.ButtonEdit,
+          action: 'edit',
+          value: 'edit'
+        },
         {
           text: this.$strings.ButtonScan,
+          action: 'scan',
           value: 'scan'
         },
         {
           text: this.$strings.ButtonForceReScan,
+          action: 'force-scan',
           value: 'force-scan'
         }
       ]
       if (this.isBookLibrary) {
         items.push({
           text: this.$strings.ButtonMatchBooks,
+          action: 'match-books',
           value: 'match-books'
         })
       }
       items.push({
         text: this.$strings.ButtonDelete,
+        action: 'delete',
         value: 'delete'
       })
       return items
     }
   },
   methods: {
-    mobileMenuAction(action) {
+    contextMenuAction(action) {
       this.showMobileMenu = false
-      if (action === 'scan') {
+      if (action === 'edit') {
+        this.editClick()
+      } else if (action === 'scan') {
         this.scan()
       } else if (action === 'force-scan') {
         this.forceScan()
@@ -130,37 +138,52 @@ export default {
         })
     },
     forceScan() {
-      if (confirm(this.$strings.MessageConfirmForceReScan)) {
-        this.$store
-          .dispatch('libraries/requestLibraryScan', { libraryId: this.library.id, force: 1 })
-          .then(() => {
-            this.$toast.success(this.$strings.ToastLibraryScanStarted)
-          })
-          .catch((error) => {
-            console.error('Failed to start scan', error)
-            this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
-          })
+      const payload = {
+        message: this.$strings.MessageConfirmForceReScan,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.$store
+              .dispatch('libraries/requestLibraryScan', { libraryId: this.library.id, force: 1 })
+              .then(() => {
+                this.$toast.success(this.$strings.ToastLibraryScanStarted)
+              })
+              .catch((error) => {
+                console.error('Failed to start scan', error)
+                this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
+              })
+          }
+        },
+        type: 'yesNo'
       }
+      this.$store.commit('globals/setConfirmPrompt', payload)
     },
     deleteClick() {
-      if (confirm(this.$getString('MessageConfirmDeleteLibrary', [this.library.name]))) {
-        this.isDeleting = true
-        this.$axios
-          .$delete(`/api/libraries/${this.library.id}`)
-          .then((data) => {
-            this.isDeleting = false
-            if (data.error) {
-              this.$toast.error(data.error)
-            } else {
-              this.$toast.success(this.$strings.ToastLibraryDeleteSuccess)
-            }
-          })
-          .catch((error) => {
-            console.error('Failed to delete library', error)
-            this.$toast.error(this.$strings.ToastLibraryDeleteFailed)
-            this.isDeleting = false
-          })
+      const payload = {
+        message: this.$getString('MessageConfirmDeleteLibrary', [this.library.name]),
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.isDeleting = true
+            this.$axios
+              .$delete(`/api/libraries/${this.library.id}`)
+              .then((data) => {
+                if (data.error) {
+                  this.$toast.error(data.error)
+                } else {
+                  this.$toast.success(this.$strings.ToastLibraryDeleteSuccess)
+                }
+              })
+              .catch((error) => {
+                console.error('Failed to delete library', error)
+                this.$toast.error(this.$strings.ToastLibraryDeleteFailed)
+              })
+              .finally(() => {
+                this.isDeleting = false
+              })
+          }
+        },
+        type: 'yesNo'
       }
+      this.$store.commit('globals/setConfirmPrompt', payload)
     }
   },
   mounted() {}

client/components/tables/podcast/DownloadQueueTable.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="w-full my-2">
+    <div class="w-full bg-primary px-4 md:px-6 py-2 flex items-center">
+      <p class="pr-2 md:pr-4">{{ $strings.HeaderDownloadQueue }}</p>
+      <div class="h-5 md:h-7 w-5 md:w-7 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
+        <span class="text-sm font-mono">{{ queue.length }}</span>
+      </div>
+    </div>
+    <transition name="slide">
+      <div class="w-full">
+        <table class="text-sm tracksTable">
+          <tr>
+            <th class="text-left px-4 min-w-48">{{ $strings.LabelPodcast }}</th>
+            <th class="text-left w-32 min-w-32">{{ $strings.LabelEpisode }}</th>
+            <th class="text-left px-4">{{ $strings.LabelEpisodeTitle }}</th>
+            <th class="text-left px-4 w-48">{{ $strings.LabelPubDate }}</th>
+          </tr>
+          <template v-for="downloadQueued in queue">
+            <tr :key="downloadQueued.id">
+              <td class="px-4">
+                <div class="flex items-center">
+                  <nuxt-link :to="`/item/${downloadQueued.libraryItemId}`" class="text-sm text-gray-200 hover:underline">{{ downloadQueued.podcastTitle }}</nuxt-link>
+                  <widgets-explicit-indicator :explicit="downloadQueued.podcastExplicit" />
+                </div>
+              </td>
+              <td>
+                <div class="flex items-center">
+                  <div v-if="downloadQueued.season">{{ downloadQueued.season }}x</div>
+                  <div v-if="downloadQueued.episode">{{ downloadQueued.episode }}</div>
+                  <widgets-podcast-type-indicator :type="downloadQueued.episodeType" />
+                </div>
+              </td>
+              <td class="px-4">
+                {{ downloadQueued.episodeDisplayTitle }}
+              </td>
+              <td class="text-xs">
+                <div class="flex items-center">
+                  <p>{{ $dateDistanceFromNow(downloadQueued.publishedAt) }}</p>
+                </div>
+              </td>
+            </tr>
+          </template>
+        </table>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    queue: {
+      type: Array,
+      default: () => []
+    },
+    libraryItemId: String
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/tables/podcast/EpisodeTableRow.vue

@@ -2,16 +2,17 @@
   <div class="w-full px-2 py-3 overflow-hidden relative border-b border-white border-opacity-10" @mouseover="mouseover" @mouseleave="mouseleave">
     <div v-if="episode" class="flex items-center cursor-pointer" :class="{ 'opacity-70': isSelected || selectionMode }" @click="clickedEpisode">
       <div class="flex-grow px-2">
-        <p class="text-sm font-semibold">
-          {{ title }}
-        </p>
+        <div class="flex items-center">
+          <span class="text-sm font-semibold">{{ title }}</span>
+          <widgets-podcast-type-indicator :type="episode.episodeType" />
+        </div>
 
         <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5">{{ subtitle }}</p>
 
         <div class="flex justify-between pt-2 max-w-xl">
           <p v-if="episode.season" class="text-sm text-gray-300">Season #{{ episode.season }}</p>
           <p v-if="episode.episode" class="text-sm text-gray-300">Episode #{{ episode.episode }}</p>
-          <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, 'MMM do, yyyy') }}</p>
+          <p v-if="publishedAt" class="text-sm text-gray-300">Published {{ $formatDate(publishedAt, dateFormat) }}</p>
         </div>
 
         <div class="flex items-center pt-2">
@@ -128,6 +129,9 @@ export default {
     },
     publishedAt() {
       return this.episode.publishedAt
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
     }
   },
   methods: {
@@ -205,4 +209,4 @@ export default {
     }
   }
 }
-</script>
+</script>

client/components/tables/podcast/EpisodesTable.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="w-full py-6">
+    <p class="text-lg mb-2 font-semibold md:hidden">{{ $strings.HeaderEpisodes }}</p>
     <div class="flex items-center mb-4">
-      <p class="text-lg mb-0 font-semibold">{{ $strings.HeaderEpisodes }}</p>
-      <div class="flex-grow" />
+      <p class="text-lg mb-0 font-semibold hidden md:block">{{ $strings.HeaderEpisodes }}</p>
+      <div class="flex-grow hidden md:block" />
       <template v-if="isSelectionMode">
         <ui-tooltip :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
           <ui-read-icon-btn :disabled="processing" :is-read="selectedIsFinished" @click="toggleBatchFinished" class="mx-1.5" />
@@ -11,8 +12,10 @@
         <ui-btn :disabled="processing" small class="ml-2 h-9" @click="clearSelected">{{ $strings.ButtonCancel }}</ui-btn>
       </template>
       <template v-else>
-        <controls-filter-select v-model="filterKey" :items="filterItems" class="w-32 md:w-36 h-9 ml-1 sm:ml-4" />
-        <controls-sort-select v-model="sortKey" :descending.sync="sortDesc" :items="sortItems" class="w-32 sm:w-44 md:w-48 h-9 ml-1 sm:ml-4" />
+        <controls-filter-select v-model="filterKey" :items="filterItems" class="w-36 h-9 sm:ml-4" />
+        <controls-sort-select v-model="sortKey" :descending.sync="sortDesc" :items="sortItems" class="w-44 md:w-48 h-9 ml-1 sm:ml-4" />
+        <div class="flex-grow md:hidden" />
+        <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" class="ml-1" @action="contextMenuAction" />
       </template>
     </div>
     <p v-if="!episodes.length" class="py-4 text-center text-lg">{{ $strings.MessageNoEpisodes }}</p>
@@ -42,15 +45,27 @@ export default {
       showPodcastRemoveModal: false,
       selectedEpisodes: [],
       episodesToRemove: [],
-      processing: false
+      processing: false,
+      quickMatchingEpisodes: false
     }
   },
   watch: {
-    libraryItem() {
-      this.init()
+    libraryItem: {
+      handler() {
+        this.init()
+      }
     }
   },
   computed: {
+    contextMenuItems() {
+      if (!this.userIsAdminOrUp) return []
+      return [
+        {
+          text: 'Quick match all episodes',
+          action: 'quick-match-episodes'
+        }
+      ]
+    },
     sortItems() {
       return [
         {
@@ -94,8 +109,8 @@ export default {
     isSelectionMode() {
       return this.selectedEpisodes.length > 0
     },
-    userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
     },
     media() {
       return this.libraryItem.media || {}
@@ -128,9 +143,53 @@ export default {
         var itemProgress = this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, episode.id)
         return !itemProgress || !itemProgress.isFinished
       })
+    },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
     }
   },
   methods: {
+    contextMenuAction(action) {
+      if (action === 'quick-match-episodes') {
+        if (this.quickMatchingEpisodes) return
+
+        this.quickMatchAllEpisodes()
+      }
+    },
+    quickMatchAllEpisodes() {
+      if (!this.mediaMetadata.feedUrl) {
+        this.$toast.error(this.$strings.MessagePodcastHasNoRSSFeedForMatching)
+        return
+      }
+      this.quickMatchingEpisodes = true
+
+      const payload = {
+        message: 'Quick matching episodes will overwrite details if a match is found. Only unmatched episodes will be updated. Are you sure?',
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.$axios
+              .$post(`/api/podcasts/${this.libraryItem.id}/match-episodes?override=1`)
+              .then((data) => {
+                if (data.numEpisodesUpdated) {
+                  this.$toast.success(`${data.numEpisodesUpdated} episodes updated`)
+                } else {
+                  this.$toast.info('No changes were made')
+                }
+              })
+              .catch((error) => {
+                console.error('Failed to request match episodes', error)
+                this.$toast.error('Failed to match episodes')
+              })
+          }
+          this.quickMatchingEpisodes = false
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
     addToPlaylist(episode) {
       this.$store.commit('globals/setSelectedPlaylistItems', [{ libraryItem: this.libraryItem, episode }])
       this.$store.commit('globals/setShowPlaylistsModal', true)
@@ -142,7 +201,7 @@ export default {
         episodeId: episode.id,
         title: episode.title,
         subtitle: this.mediaMetadata.title,
-        caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+        caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
         duration: episode.audioFile.duration || null,
         coverPath: this.media.coverPath || null
       }
@@ -210,7 +269,7 @@ export default {
             episodeId: episode.id,
             title: episode.title,
             subtitle: this.mediaMetadata.title,
-            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+            caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, this.dateFormat)}` : 'Unknown publish date',
             duration: episode.audioFile.duration || null,
             coverPath: this.media.coverPath || null
           })
@@ -228,6 +287,8 @@ export default {
       this.showPodcastRemoveModal = true
     },
     editEpisode(episode) {
+      const episodeIds = this.episodesSorted.map((e) => e.id)
+      this.$store.commit('setEpisodeTableEpisodeIds', episodeIds)
       this.$store.commit('setSelectedLibraryItem', this.libraryItem)
       this.$store.commit('globals/setSelectedEpisode', episode)
       this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
@@ -261,4 +322,4 @@ export default {
 .episode-leave-active {
   position: absolute;
 }
-</style>
+</style>

client/components/ui/ContextMenuDropdown.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="relative h-9 w-9" v-click-outside="clickOutsideObj">
+    <button type="button" :disabled="disabled" class="relative h-full w-full flex items-center justify-center shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer text-gray-100 hover:text-gray-200 rounded-full hover:bg-white/5" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
+      <span class="material-icons" :class="iconClass">more_vert</span>
+    </button>
+
+    <transition name="menu">
+      <div v-show="showMenu" class="absolute right-0 mt-1 z-10 bg-bg border border-black-200 shadow-lg max-h-56 w-48 rounded-md py-1 overflow-auto focus:outline-none sm:text-sm">
+        <template v-for="(item, index) in items">
+          <div :key="index" class="flex items-center px-2 py-1.5 hover:bg-white hover:bg-opacity-5 text-white text-xs cursor-pointer" @click.stop="clickAction(item.action)">
+            <p>{{ item.text }}</p>
+          </div>
+        </template>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    disabled: Boolean,
+    items: {
+      type: Array,
+      default: () => []
+    },
+    iconClass: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      clickOutsideObj: {
+        handler: this.clickedOutside,
+        events: ['mousedown'],
+        isActive: true
+      },
+      showMenu: false
+    }
+  },
+  computed: {},
+  methods: {
+    clickShowMenu() {
+      if (this.disabled) return
+      this.showMenu = !this.showMenu
+    },
+    clickedOutside() {
+      this.showMenu = false
+    },
+    clickAction(action) {
+      if (this.disabled) return
+      this.showMenu = false
+      this.$emit('action', action)
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/ui/Dropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative w-full" v-click-outside="clickOutsideObj">
     <p class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
-    <button type="button" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
+    <button type="button" :aria-label="longLabel" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
       <span class="flex items-center">
         <span class="block truncate font-sans" :class="{ 'font-semibold': selectedSubtext, 'text-sm': small }">{{ selectedText }}</span>
         <span v-if="selectedSubtext">:&nbsp;</span>
@@ -13,9 +13,9 @@
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto sm:text-sm" tabindex="-1" role="listbox">
         <template v-for="item in itemsToShow">
-          <li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
+          <li :key="item.value" class="text-gray-100 relative py-2 cursor-pointer hover:bg-black-400" :id="'listbox-option-' + item.value" role="option" tabindex="0" @keyup.enter="clickedOption(item.value)" @click="clickedOption(item.value)">
             <div class="flex items-center">
               <span class="ml-3 block truncate font-sans text-sm" :class="{ 'font-semibold': item.subtext }">{{ item.text }}</span>
               <span v-if="item.subtext">:&nbsp;</span>
@@ -91,6 +91,13 @@ export default {
       else classes.push('cursor-pointer border-gray-600 bg-primary text-gray-100')
 
       return classes.join(' ')
+    },
+    longLabel() {
+      let result = ''
+      if (this.label) result += this.label + ': '
+      if (this.selectedText) result += this.selectedText
+      if (this.selectedSubtext) result += ' ' + this.selectedSubtext
+      return result
     }
   },
   methods: {

client/components/ui/InputDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <p class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</p>
+    <label class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</label>
     <div ref="wrapper" class="relative">
       <form @submit.prevent="submitForm">
         <div ref="inputWrapper" class="input-wrapper flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-2" :class="disabled ? 'pointer-events-none bg-black-300 text-gray-400' : 'bg-primary'">

client/components/ui/LibrariesDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="currentLibrary" class="relative h-8 max-w-52 md:min-w-32" v-click-outside="clickOutsideObj">
-    <button type="button" :disabled="disabled" class="w-10 sm:w-full relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm focus:outline-none cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
+    <button type="button" :disabled="disabled" class="w-10 sm:w-full relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200" aria-haspopup="listbox" :aria-expanded="showMenu" :aria-label="$strings.ButtonLibrary + ': ' + currentLibrary.name" @click.stop.prevent="clickShowMenu">
       <div class="flex items-center justify-center sm:justify-start">
         <ui-library-icon :icon="currentLibraryIcon" class="sm:mr-1.5" />
         <span class="hidden sm:block truncate">{{ currentLibrary.name }}</span>
@@ -10,7 +10,7 @@
     <transition name="menu">
       <ul v-show="showMenu" class="absolute z-10 -mt-px min-w-48 w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
         <template v-for="library in librariesFiltered">
-          <li :key="library.id" class="text-gray-400 hover:text-white select-none relative py-2 cursor-pointer hover:bg-black-400" role="option" @click="selectLibrary(library)">
+          <li :key="library.id" class="text-gray-400 hover:text-white relative py-2 cursor-pointer hover:bg-black-400" role="option" tabindex="0" @keydown.enter="selectLibrary(library)" @click="selectLibrary(library)">
             <div class="flex items-center px-2">
               <ui-library-icon :icon="library.icon" class="mr-1.5" />
               <span class="font-normal block truncate font-sans text-sm">{{ library.name }}</span>

client/components/ui/MultiSelect.vue

@@ -15,7 +15,7 @@
         </div>
       </form>
 
-      <ul ref="menu" v-show="showMenu" class="absolute z-50 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+      <ul ref="menu" v-show="showMenu" class="absolute z-60 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
         <template v-for="item in itemsToShow">
           <li :key="item" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
             <div class="flex items-center">
@@ -117,7 +117,7 @@ export default {
       }, 50)
     },
     recalcMenuPos() {
-      if (!this.menu) return
+      if (!this.menu || !this.$refs.inputWrapper) return
       var boundingBox = this.$refs.inputWrapper.getBoundingClientRect()
       if (boundingBox.y > window.innerHeight - 8) {
         // Input is off the page
@@ -135,7 +135,7 @@ export default {
       this.menu.style.width = boundingBox.width + 'px'
     },
     unmountMountMenu() {
-      if (!this.$refs.menu) return
+      if (!this.$refs.menu || !this.$refs.inputWrapper) return
       this.menu = this.$refs.menu
 
       var boundingBox = this.$refs.inputWrapper.getBoundingClientRect()

client/components/ui/MultiSelectDropdown.vue

@@ -11,7 +11,7 @@
         </div>
       </div>
 
-      <ul ref="menu" v-show="showMenu" class="absolute z-50 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+      <ul ref="menu" v-show="showMenu" class="absolute z-60 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
         <template v-for="item in items">
           <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
             <div class="flex items-center">
@@ -68,14 +68,14 @@ export default {
   },
   methods: {
     recalcMenuPos() {
-      if (!this.menu) return
+      if (!this.menu || !this.$refs.inputWrapper) return
       var boundingBox = this.$refs.inputWrapper.getBoundingClientRect()
       this.menu.style.top = boundingBox.y + boundingBox.height - 4 + 'px'
       this.menu.style.left = boundingBox.x + 'px'
       this.menu.style.width = boundingBox.width + 'px'
     },
     unmountMountMenu() {
-      if (!this.$refs.menu) return
+      if (!this.$refs.menu || !this.$refs.inputWrapper) return
       this.menu = this.$refs.menu
 
       var boundingBox = this.$refs.inputWrapper.getBoundingClientRect()

client/components/ui/MultiSelectQueryInput.vue

@@ -18,7 +18,7 @@
         </div>
       </form>
 
-      <ul ref="menu" v-show="showMenu" class="absolute z-50 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+      <ul ref="menu" v-show="showMenu" class="absolute z-60 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
         <template v-for="item in itemsToShow">
           <li :key="item.id" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
             <div class="flex items-center">
@@ -113,10 +113,14 @@ export default {
       if (this.searching) return
       this.currentSearch = this.textInput
       this.searching = true
-      var results = await this.$axios.$get(`/api/${this.endpoint}?q=${this.currentSearch}&limit=15&token=${this.userToken}`).catch((error) => {
-        console.error('Failed to get search results', error)
-        return []
-      })
+      const results = await this.$axios
+        .$get(`/api/${this.endpoint}?q=${this.currentSearch}&limit=15&token=${this.userToken}`)
+        .then((res) => res.results || res)
+        .catch((error) => {
+          console.error('Failed to get search results', error)
+          return []
+        })
+
       this.items = results || []
       this.searching = false
     },
@@ -136,7 +140,7 @@ export default {
       }, 50)
     },
     recalcMenuPos() {
-      if (!this.menu) return
+      if (!this.menu || !this.$refs.inputWrapper) return
       var boundingBox = this.$refs.inputWrapper.getBoundingClientRect()
       if (boundingBox.y > window.innerHeight - 8) {
         // Input is off the page
@@ -154,7 +158,7 @@ export default {
       this.menu.style.width = boundingBox.width + 'px'
     },
     unmountMountMenu() {
-      if (!this.$refs.menu) return
+      if (!this.$refs.menu || !this.$refs.inputWrapper) return
       this.menu = this.$refs.menu
 
       var boundingBox = this.$refs.inputWrapper.getBoundingClientRect()
@@ -200,15 +204,21 @@ export default {
       }
       if (this.$refs.input) this.$refs.input.focus()
 
-      var newSelected = null
+      let newSelected = null
       if (this.getIsSelected(item.id)) {
         newSelected = this.selected.filter((s) => s.id !== item.id)
         this.$emit('removedItem', item.id)
       } else {
-        newSelected = this.selected.concat([item])
+        newSelected = this.selected.concat([
+          {
+            id: item.id,
+            name: item.name
+          }
+        ])
       }
       this.textInput = null
       this.currentSearch = null
+
       this.$emit('input', newSelected)
       this.$nextTick(() => {
         this.recalcMenuPos()
@@ -242,10 +252,11 @@ export default {
     submitForm() {
       if (!this.textInput) return
 
-      var cleaned = this.textInput.trim()
-      var matchesItem = this.items.find((i) => {
-        return i === cleaned
+      const cleaned = this.textInput.trim()
+      const matchesItem = this.items.find((i) => {
+        return i.name === cleaned
       })
+
       if (matchesItem) {
         this.clickedOption(null, matchesItem)
       } else {

client/components/ui/QueryInput.vue

@@ -8,7 +8,7 @@
         </div>
       </form>
 
-      <ul ref="menu" v-show="isFocused && currentSearch" class="absolute z-50 mt-0 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+      <ul ref="menu" v-show="isFocused && currentSearch" class="absolute z-60 mt-0 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
         <template v-for="item in items">
           <li :key="item.id" class="text-gray-50 select-none relative py-2 pr-3 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
             <div class="flex items-center">

client/components/ui/RichTextEditor.vue

@@ -68,8 +68,6 @@ export default {
     }
   },
   mounted() {},
-  beforeDestroy() {
-    console.log('Before destroy')
-  }
+  beforeDestroy() {}
 }
 </script>

client/components/ui/TextInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="wrapper" class="relative">
-    <input ref="input" v-model="inputValue" :type="actualType" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
+    <input :id="inputId" ref="input" v-model="inputValue" :type="actualType" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
     <div v-if="clearable && inputValue" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
       <span class="material-icons text-gray-300 cursor-pointer" style="font-size: 1.1rem" @click.stop.prevent="clear">close</span>
     </div>
@@ -31,7 +31,8 @@ export default {
     },
     noSpinner: Boolean,
     textCenter: Boolean,
-    clearable: Boolean
+    clearable: Boolean,
+    inputId: String
   },
   data() {
     return {

client/components/ui/TextInputWithLabel.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="w-full">
     <slot>
-      <p class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': disabled }">
-        {{ label }}<em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em>
-      </p>
+      <label :for="identifier" class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': disabled }"
+        >{{ label }}<em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em></label
+      >
     </slot>
-    <ui-text-input ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :type="type" class="w-full" :class="inputClass" @blur="inputBlurred" />
+    <ui-text-input :placeholder="label" :inputId="identifier" ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :type="type" class="w-full" :class="inputClass" @blur="inputBlurred" />
   </div>
 </template>
 
@@ -34,6 +34,9 @@ export default {
       set(val) {
         this.$emit('input', val)
       }
+    },
+    identifier() {
+      return Math.random().toString(36).substring(2)
     }
   },
   methods: {

client/components/ui/ToggleSwitch.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div class="border rounded-full border-black-100 flex items-center cursor-pointer w-10 justify-start" :class="className" @click="clickToggle">
+    <button :aria-labelledby="labeledBy" role="checkbox" type="button" class="border rounded-full border-black-100 flex items-center cursor-pointer w-10 justify-start" :aria-checked="toggleValue" :class="className" @click="clickToggle">
       <span class="rounded-full border w-5 h-5 border-black-50 shadow transform transition-transform duration-100" :class="switchClassName"></span>
-    </div>
+    </button>
   </div>
 </template>
 
@@ -18,7 +18,8 @@ export default {
       type: String,
       default: 'primary'
     },
-    disabled: Boolean
+    disabled: Boolean,
+    labeledBy: String
   },
   computed: {
     toggleValue: {

client/components/widgets/AlreadyInLibraryIndicator.vue

@@ -0,0 +1,19 @@
+<template>
+  <ui-tooltip v-if="alreadyInLibrary" :text="$strings.LabelAlreadyInYourLibrary" direction="top">
+    <span class="material-icons ml-1 text-success" style="font-size: 0.8rem">check_circle</span>
+  </ui-tooltip>
+</template>
+
+<script>
+export default {
+  props: {
+    alreadyInLibrary: Boolean
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/widgets/BookDetailsEdit.vue

@@ -137,16 +137,33 @@ export default {
         author: (this.details.authors || []).map((au) => au.name).join(', ')
       }
     },
-    mapBatchDetails(batchDetails) {
+    mapBatchDetails(batchDetails, mapType = 'overwrite') {
       for (const key in batchDetails) {
-        if (key === 'tags') {
-          this.newTags = [...batchDetails.tags]
-        } else if (key === 'genres' || key === 'narrators') {
-          this.details[key] = [...batchDetails[key]]
-        } else if (key === 'authors' || key === 'series') {
-          this.details[key] = batchDetails[key].map((i) => ({ ...i }))
+        if (mapType === 'append') {
+          if (key === 'tags') {
+            // Concat and remove dupes
+            this.newTags = [...new Set(this.newTags.concat(batchDetails.tags))]
+          } else if (key === 'genres' || key === 'narrators') {
+            // Concat and remove dupes
+            this.details[key] = [...new Set(this.details[key].concat(batchDetails[key]))]
+          } else if (key === 'authors' || key === 'series') {
+            batchDetails[key].forEach((detail) => {
+              const existingDetail = this.details[key].find((_d) => _d.name.toLowerCase() == detail.name.toLowerCase().trim() || _d.id == detail.id)
+              if (!existingDetail) {
+                this.details[key].push({ ...detail })
+              }
+            })
+          }
         } else {
-          this.details[key] = batchDetails[key]
+          if (key === 'tags') {
+            this.newTags = [...batchDetails.tags]
+          } else if (key === 'genres' || key === 'narrators') {
+            this.details[key] = [...batchDetails[key]]
+          } else if (key === 'authors' || key === 'series') {
+            this.details[key] = batchDetails[key].map((i) => ({ ...i }))
+          } else {
+            this.details[key] = batchDetails[key]
+          }
         }
       }
     },
@@ -193,11 +210,13 @@ export default {
       // array of objects with id key
       if (array1.length !== array2.length) return false
 
-      for (var item of array1) {
-        var matchingItem = array2.find((a) => a.id === item.id)
-        if (!matchingItem) return false
-        for (var key in item) {
-          if (item[key] !== matchingItem[key]) {
+      for (let i = 0; i < array1.length; i++) {
+        const item1 = array1[i]
+        const item2 = array2[i]
+        if (!item1 || !item2) return false
+
+        for (const key in item1) {
+          if (item1[key] !== item2[key]) {
             // console.log('Object array item keys changed', key, item[key], matchingItem[key])
             return false
           }

client/components/widgets/CronExpressionBuilder.vue

@@ -36,6 +36,10 @@
           <p v-else class="text-success text-base md:text-lg text-center">{{ $strings.MessageValidCronExpression }}</p>
         </div>
       </template>
+      <div v-if="cronExpression && isValid" class="flex items-center justify-center text-yellow-400 mt-2">
+        <span class="material-icons-outlined mr-2 text-xl">event</span>
+        <p>{{ $strings.LabelNextScheduledRun }}: {{ nextRun }}</p>
+      </div>
     </div>
   </div>
 </template>
@@ -63,6 +67,14 @@ export default {
       isValid: true
     }
   },
+  watch: {
+    value: {
+      immediate: true,
+      handler(newVal) {
+        this.init()
+      }
+    }
+  },
   computed: {
     minuteIsValid() {
       return !(isNaN(this.selectedMinute) || this.selectedMinute === '' || this.selectedMinute < 0 || this.selectedMinute > 59)
@@ -70,6 +82,11 @@ export default {
     hourIsValid() {
       return !(isNaN(this.selectedHour) || this.selectedHour === '' || this.selectedHour < 0 || this.selectedHour > 23)
     },
+    nextRun() {
+      if (!this.cronExpression) return ''
+      const parsed = this.$getNextScheduledDate(this.cronExpression)
+      return this.$formatJsDatetime(parsed, this.$store.state.serverSettings.dateFormat, this.$store.state.serverSettings.timeFormat) || ''
+    },
     description() {
       if ((this.selectedInterval !== 'custom' || !this.selectedWeekdays.length) && this.selectedInterval !== 'daily') return ''
 
@@ -137,31 +154,31 @@ export default {
     weekdays() {
       return [
         {
-          text: this.$strings.WeekdaySunday,
+          text: this.$formatJsDate(new Date(2023, 0, 1), 'EEEE'),
           value: 0
         },
         {
-          text: this.$strings.WeekdayMonday,
+          text: this.$formatJsDate(new Date(2023, 0, 2), 'EEEE'),
           value: 1
         },
         {
-          text: this.$strings.WeekdayTuesday,
+          text: this.$formatJsDate(new Date(2023, 0, 3), 'EEEE'),
           value: 2
         },
         {
-          text: this.$strings.WeekdayWednesday,
+          text: this.$formatJsDate(new Date(2023, 0, 4), 'EEEE'),
           value: 3
         },
         {
-          text: this.$strings.WeekdayThursday,
+          text: this.$formatJsDate(new Date(2023, 0, 5), 'EEEE'),
           value: 4
         },
         {
-          text: this.$strings.WeekdayFriday,
+          text: this.$formatJsDate(new Date(2023, 0, 6), 'EEEE'),
           value: 5
         },
         {
-          text: this.$strings.WeekdaySaturday,
+          text: this.$formatJsDate(new Date(2023, 0, 7), 'EEEE'),
           value: 6
         }
       ]
@@ -271,6 +288,11 @@ export default {
         })
     },
     init() {
+      this.selectedInterval = 'custom'
+      this.selectedHour = 0
+      this.selectedMinute = 0
+      this.selectedWeekdays = []
+
       if (!this.value) return
       const pieces = this.value.split(' ')
       if (pieces.length !== 5) {
@@ -309,4 +331,4 @@ export default {
     this.init()
   }
 }
-</script>
+</script>

client/components/widgets/ExplicitIndicator.vue

@@ -0,0 +1,19 @@
+<template>
+  <ui-tooltip v-if="explicit" :text="$strings.LabelExplicit" direction="top">
+    <span class="material-icons ml-1" style="font-size: 0.8rem">explicit</span>
+  </ui-tooltip>
+</template>
+
+<script>
+export default {
+  props: {
+    explicit: Boolean
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/widgets/NotificationWidget.vue

@@ -1,15 +1,51 @@
 <template>
-  <div v-if="tasksRunning" class="w-4 h-4 mx-3 relative">
-    <div class="flex h-full items-center justify-center">
-      <widgets-loading-spinner />
-    </div>
+  <div v-if="tasksRunning" class="w-4 h-4 mx-3 relative" v-click-outside="clickOutsideObj">
+    <button type="button" :disabled="disabled" class="w-10 sm:w-full relative h-full cursor-pointer" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
+      <div class="flex h-full items-center justify-center">
+        <ui-tooltip text="Tasks running" direction="bottom" class="flex items-center">
+          <widgets-loading-spinner />
+        </ui-tooltip>
+      </div>
+    </button>
+    <transition name="menu">
+      <div class="sm:w-80 w-full relative">
+        <div v-show="showMenu" class="absolute z-40 -mt-px w-40 sm:w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalTaskRunningMenu">
+          <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+            <template v-if="tasksRunningOrFailed.length">
+              <p class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelTasks }}</p>
+              <template v-for="task in tasksRunningOrFailed">
+                <nuxt-link :key="task.id" v-if="actionLink(task)" :to="actionLink(task)">
+                  <li class="text-gray-50 select-none relative hover:bg-black-400 py-1 cursor-pointer">
+                    <cards-item-task-running-card :task="task" />
+                  </li>
+                </nuxt-link>
+                <li v-else :key="task.id" class="text-gray-50 select-none relative hover:bg-black-400 py-1">
+                  <cards-item-task-running-card :task="task" />
+                </li>
+              </template>
+            </template>
+            <li v-else class="py-2 px-2">
+              <p>{{ $strings.MessageNoTasksRunning }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      clickOutsideObj: {
+        handler: this.clickedOutside,
+        events: ['mousedown'],
+        isActive: true
+      },
+      showMenu: false,
+      disabled: false
+    }
   },
   computed: {
     tasks() {
@@ -17,9 +53,37 @@ export default {
     },
     tasksRunning() {
       return this.tasks.some((t) => !t.isFinished)
+    },
+    tasksRunningOrFailed() {
+      // return just the tasks that are running or failed in the last 1 minute
+      return this.tasks.filter((t) => !t.isFinished || (t.isFailed && t.finishedAt > new Date().getTime() - 1000 * 60)) || []
+    }
+  },
+  methods: {
+    clickShowMenu() {
+      if (this.disabled) return
+      this.showMenu = !this.showMenu
+    },
+    clickedOutside() {
+      this.showMenu = false
+    },
+    actionLink(task) {
+      switch (task.action) {
+        case 'download-podcast-episode':
+          return `/library/${task.data.libraryId}/podcast/download-queue`
+        case 'encode-m4b':
+          return `/audiobook/${task.data.libraryItemId}/manage?tool=m4b`
+        default:
+          return ''
+      }
     }
   },
-  methods: {},
   mounted() {}
 }
-</script>
+</script>
+
+<style>
+.globalTaskRunningMenu {
+  max-height: 80vh;
+}
+</style>

client/components/widgets/PodcastDetailsEdit.vue

@@ -39,6 +39,11 @@
           </div>
         </div>
       </div>
+      <div class="flex mt-2 -mx-1">
+        <div class="w-1/4 px-1">
+          <ui-dropdown :label="$strings.LabelPodcastType" v-model="details.type" :items="podcastTypes" small class="max-w-52" />
+        </div>
+      </div>
     </form>
   </div>
 </template>
@@ -65,7 +70,8 @@ export default {
         itunesId: null,
         itunesArtistId: null,
         explicit: false,
-        language: null
+        language: null,
+        type: null
       },
       newTags: []
     }
@@ -93,6 +99,9 @@ export default {
     },
     filterData() {
       return this.$store.state.libraries.filterData || {}
+    },
+    podcastTypes() {
+      return this.$store.state.globals.podcastTypes || []
     }
   },
   methods: {
@@ -107,14 +116,24 @@ export default {
         author: this.details.author
       }
     },
-    mapBatchDetails(batchDetails) {
+    mapBatchDetails(batchDetails, mapType = 'overwrite') {
       for (const key in batchDetails) {
-        if (key === 'tags') {
-          this.newTags = [...batchDetails.tags]
-        } else if (key === 'genres') {
-          this.details[key] = [...batchDetails[key]]
+        if (mapType === 'append') {
+          if (key === 'tags') {
+            // Concat and remove dupes
+            this.newTags = [...new Set(this.newTags.concat(batchDetails.tags))]
+          } else if (key === 'genres') {
+            // Concat and remove dupes
+            this.details[key] = [...new Set(this.details[key].concat(batchDetails[key]))]
+          }
         } else {
-          this.details[key] = batchDetails[key]
+          if (key === 'tags') {
+            this.newTags = [...batchDetails.tags]
+          } else if (key === 'genres') {
+            this.details[key] = [...batchDetails[key]]
+          } else {
+            this.details[key] = batchDetails[key]
+          }
         }
       }
     },
@@ -209,6 +228,7 @@ export default {
       this.details.itunesArtistId = this.mediaMetadata.itunesArtistId || ''
       this.details.language = this.mediaMetadata.language || ''
       this.details.explicit = !!this.mediaMetadata.explicit
+      this.details.type = this.mediaMetadata.type || 'episodic'
 
       this.newTags = [...(this.media.tags || [])]
     },
@@ -218,4 +238,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

client/components/widgets/PodcastTypeIndicator.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <template v-if="type == 'bonus'">
+      <ui-tooltip text="Bonus" direction="top">
+        <span class="material-icons ml-1" style="font-size: 0.8rem">local_play</span>
+      </ui-tooltip>
+    </template>
+    <template v-if="type == 'trailer'">
+      <ui-tooltip text="Trailer" direction="top">
+        <span class="material-icons ml-1" style="font-size: 0.8rem">local_movies</span>
+      </ui-tooltip>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'full'
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>