Merge remote-tracking branch 'upstream/master'

2026-07-16 06:11:38 +00:00 · 2023-06-09 15:42:13 -04:00 · 2023-06-09 15:42:13 -04:00 · b3f9a40f18
commit b3f9a40f18
parent 6bf99ca6ad 35e3458fb4
227 changed files with 11338 additions and 3382 deletions
--- a/client/components/modals/AccountModal.vue
+++ b/client/components/modals/AccountModal.vue
@ -6,7 +6,7 @@
      </div>
    </template>
    <form @submit.prevent="submitForm">
-      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
+      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden"  style="min-height: 400px; max-height: 80vh">
        <div class="w-full p-8">
          <div class="flex py-2">
            <div class="w-1/2 px-2">
@ -96,7 +96,14 @@
              </div>
            </div>
            <div v-if="!newUser.permissions.accessAllTags" class="my-4">
-              <ui-multi-select-dropdown v-model="newUser.itemTagsAccessible" :items="itemTags" :label="$strings.LabelTagsAccessibleToUser" />
+              <div class="flex items-center">
+                <ui-multi-select-dropdown v-model="newUser.itemTagsSelected" :items="itemTags" :label="tagsSelectionText" />
+                <div class="flex items-center pt-4 px-2">
+                  <p class="px-3 font-semibold" id="selected-tags-not-accessible--permissions-toggle">{{ $strings.LabelInvert }}</p>
+                  <ui-toggle-switch labeledBy="selected-tags-not-accessible--permissions-toggle" v-model="newUser.permissions.selectedTagsNotAccessible" />
+                </div>
+              </div>
+              
            </div>
          </div>

@ -185,6 +192,9 @@ export default {
          value: t
        }
      })
+    },
+    tagsSelectionText() {
+      return this.newUser.permissions.selectedTagsNotAccessible ? this.$strings.LabelTagsNotAccessibleToUser : this.$strings.LabelTagsAccessibleToUser
    }
  },
  methods: {
@ -193,8 +203,11 @@ export default {
      if (this.$refs.modal) this.$refs.modal.setHide()
    },
    accessAllTagsToggled(val) {
-      if (val && this.newUser.itemTagsAccessible.length) {
-        this.newUser.itemTagsAccessible = []
+      if (val) {
+        if (this.newUser.itemTagsSelected?.length) {
+          this.newUser.itemTagsSelected = []
+        }
+        this.newUser.permissions.selectedTagsNotAccessible = false
      }
    },
    fetchAllTags() {
@ -226,7 +239,7 @@ export default {
        this.$toast.error('Must select at least one library')
        return
      }
-      if (!this.newUser.permissions.accessAllTags && !this.newUser.itemTagsAccessible.length) {
+      if (!this.newUser.permissions.accessAllTags && !this.newUser.itemTagsSelected.length) {
        this.$toast.error('Must select at least one tag')
        return
      }
@ -307,12 +320,12 @@ export default {
        delete: type === 'admin',
        upload: type === 'admin',
        accessAllLibraries: true,
-        accessAllTags: true
+        accessAllTags: true,
+        selectedTagsNotAccessible: false
      }
    },
    init() {
      this.fetchAllTags()
-
      this.isNew = !this.account
      if (this.account) {
        this.newUser = {
@ -322,9 +335,10 @@ export default {
          isActive: this.account.isActive,
          permissions: { ...this.account.permissions },
          librariesAccessible: [...(this.account.librariesAccessible || [])],
-          itemTagsAccessible: [...(this.account.itemTagsAccessible || [])]
+          itemTagsSelected: [...(this.account.itemTagsSelected || [])]
        }
      } else {
+        this.fetchAllTags()
        this.newUser = {
          username: null,
          password: null,
@ -336,7 +350,8 @@ export default {
            delete: false,
            upload: false,
            accessAllLibraries: true,
-            accessAllTags: true
+            accessAllTags: true,
+            selectedTagsNotAccessible: false
          },
          librariesAccessible: []
        }
--- a/client/components/modals/AudioFileDataModal.vue
+++ b/client/components/modals/AudioFileDataModal.vue
@ -0,0 +1,118 @@
+<template>
+  <modals-modal v-model="show" name="audiofile-data-modal" :width="700" :height="'unset'">
+    <div v-if="audioFile" ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden p-6" style="max-height: 80vh">
+      <p class="text-base text-gray-200">{{ metadata.filename }}</p>
+
+      <div class="w-full h-px bg-white bg-opacity-10 my-4" />
+
+      <ui-text-input-with-label :value="metadata.path" readonly :label="$strings.LabelPath" class="mb-4 text-sm" />
+
+      <div class="flex flex-col sm:flex-row text-sm">
+        <div class="w-full sm:w-1/2">
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelSize }}
+            </p>
+            <p>{{ $bytesPretty(metadata.size) }}</p>
+          </div>
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelDuration }}
+            </p>
+            <p>{{ $secondsToTimestamp(audioFile.duration) }}</p>
+          </div>
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">{{ $strings.LabelFormat }}</p>
+            <p>{{ audioFile.format }}</p>
+          </div>
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelChapters }}
+            </p>
+            <p>{{ audioFile.chapters?.length || 0 }}</p>
+          </div>
+          <div v-if="audioFile.embeddedCoverArt" class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelEmbeddedCover }}
+            </p>
+            <p>{{ audioFile.embeddedCoverArt || '' }}</p>
+          </div>
+        </div>
+        <div class="w-full sm:w-1/2">
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelCodec }}
+            </p>
+            <p>{{ audioFile.codec }}</p>
+          </div>
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelChannels }}
+            </p>
+            <p>{{ audioFile.channels }} ({{ audioFile.channelLayout }})</p>
+          </div>
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelBitrate }}
+            </p>
+            <p>{{ $bytesPretty(audioFile.bitRate || 0, 0) }}</p>
+          </div>
+          <div class="flex mb-1">
+            <p class="w-32 text-black-50">{{ $strings.LabelTimeBase }}</p>
+            <p>{{ audioFile.timeBase }}</p>
+          </div>
+          <div v-if="audioFile.language" class="flex mb-1">
+            <p class="w-32 text-black-50">
+              {{ $strings.LabelLanguage }}
+            </p>
+            <p>{{ audioFile.language || '' }}</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="w-full h-px bg-white bg-opacity-10 my-4" />
+
+      <p class="font-bold mb-2">{{ $strings.LabelMetaTags }}</p>
+
+      <div v-for="(value, key) in metaTags" :key="key" class="flex mb-1 text-sm">
+        <p class="w-32 min-w-32 text-black-50 mb-1">
+          {{ key.replace('tag', '') }}
+        </p>
+        <p>{{ value }}</p>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    audioFile: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    metadata() {
+      return this.audioFile?.metadata || {}
+    },
+    metaTags() {
+      return this.audioFile?.metaTags || {}
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
--- a/client/components/modals/BookmarksModal.vue
+++ b/client/components/modals/BookmarksModal.vue
@ -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>
--- a/client/components/modals/ChaptersModal.vue
+++ b/client/components/modals/ChaptersModal.vue
@ -2,13 +2,13 @@
  <modals-modal v-model="show" name="chapters" :width="600" :height="'unset'">
    <div id="chapter-modal-wrapper" ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
      <template v-for="chap in chapters">
-        <div :key="chap.id" :id="`chapter-row-${chap.id}`" class="flex items-center px-6 py-3 justify-start cursor-pointer hover:bg-bg relative" :class="chap.id === currentChapterId ? 'bg-yellow-400 bg-opacity-10' : chap.end <= currentChapterStart ? 'bg-success bg-opacity-5' : 'bg-opacity-20'" @click="clickChapter(chap)">
+        <div :key="chap.id" :id="`chapter-row-${chap.id}`" class="flex items-center px-6 py-3 justify-start cursor-pointer hover:bg-bg relative" :class="chap.id === currentChapterId ? 'bg-yellow-400 bg-opacity-10' : chap.end / _playbackRate <= currentChapterStart ? 'bg-success bg-opacity-5' : 'bg-opacity-20'" @click="clickChapter(chap)">
          <p class="chapter-title truncate text-sm md:text-base">
            {{ chap.title }}
          </p>
-          <span class="font-mono text-xxs sm:text-xs text-gray-400 pl-2 whitespace-nowrap">{{ $elapsedPrettyExtended(chap.end - chap.start) }}</span>
+          <span class="font-mono text-xxs sm:text-xs text-gray-400 pl-2 whitespace-nowrap">{{ $elapsedPrettyExtended((chap.end - chap.start) / _playbackRate) }}</span>
          <span class="flex-grow" />
-          <span class="font-mono text-xs sm:text-sm text-gray-300">{{ $secondsToTimestamp(chap.start) }}</span>
+          <span class="font-mono text-xs sm:text-sm text-gray-300">{{ $secondsToTimestamp(chap.start / _playbackRate) }}</span>

          <div v-show="chap.id === currentChapterId" class="w-0.5 h-full absolute top-0 left-0 bg-yellow-400" />
        </div>
@ -28,7 +28,8 @@ export default {
    currentChapter: {
      type: Object,
      default: () => null
-    }
+    },
+    playbackRate: Number
  },
  data() {
    return {}
@ -47,11 +48,15 @@ export default {
        this.$emit('input', val)
      }
    },
+    _playbackRate() {
+      if (!this.playbackRate || isNaN(this.playbackRate)) return 1
+      return this.playbackRate
+    },
    currentChapterId() {
      return this.currentChapter ? this.currentChapter.id : null
    },
    currentChapterStart() {
-      return this.currentChapter ? this.currentChapter.start : 0
+      return (this.currentChapter?.start || 0) / this._playbackRate
    }
  },
  methods: {
@ -61,13 +66,11 @@ export default {
    scrollToChapter() {
      if (!this.currentChapterId) return

-      var container = this.$refs.container
-      if (container) {
-        var currChapterEl = document.getElementById(`chapter-row-${this.currentChapterId}`)
+      if (this.$refs.container) {
+        const currChapterEl = document.getElementById(`chapter-row-${this.currentChapterId}`)
        if (currChapterEl) {
-          var offsetTop = currChapterEl.offsetTop
-          var containerHeight = container.clientHeight
-          container.scrollTo({ top: offsetTop - containerHeight / 2 })
+          const containerHeight = this.$refs.container.clientHeight
+          this.$refs.container.scrollTo({ top: currChapterEl.offsetTop - containerHeight / 2 })
        }
      }
    }
--- a/client/components/modals/ListeningSessionModal.vue
+++ b/client/components/modals/ListeningSessionModal.vue
@ -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">
@ -98,7 +98,8 @@
      </div>

      <div class="flex items-center">
-        <ui-btn small color="error" @click.stop="deleteSessionClick">{{ $strings.ButtonDelete }}</ui-btn>
+        <ui-btn v-if="!isOpenSession" small color="error" @click.stop="deleteSessionClick">{{ $strings.ButtonDelete }}</ui-btn>
+        <ui-btn v-else small color="error" @click.stop="closeSessionClick">Close Open Session</ui-btn>
      </div>
    </div>
  </modals-modal>
@ -151,6 +152,15 @@ 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
+    },
+    isOpenSession() {
+      return !!this._session.open
    }
  },
  methods: {
@ -182,8 +192,26 @@ export default {
          var errMsg = error.response ? error.response.data || '' : ''
          this.$toast.error(errMsg || this.$strings.ToastSessionDeleteFailed)
        })
+    },
+    closeSessionClick() {
+      this.processing = true
+      this.$axios
+        .$post(`/api/session/${this._session.id}/close`)
+        .then(() => {
+          this.$toast.success('Session closed')
+          this.show = false
+          this.$emit('closedSession')
+        })
+        .catch((error) => {
+          console.error('Failed to close session', error)
+          const errMsg = error.response?.data || ''
+          this.$toast.error(errMsg || 'Failed to close open session')
+        })
+        .finally(() => {
+          this.processing = false
+        })
    }
  },
  mounted() {}
 }
-</script>
+</script>
--- a/client/components/modals/SleepTimerModal.vue
+++ b/client/components/modals/SleepTimerModal.vue
@ -9,10 +9,14 @@
    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
      <div v-if="!timerSet" class="w-full">
        <template v-for="time in sleepTimes">
-          <div :key="time.text" class="flex items-center px-6 py-3 justify-center cursor-pointer hover:bg-bg relative" @click="setTime(time)">
+          <div :key="time.text" class="flex items-center px-6 py-3 justify-center cursor-pointer hover:bg-bg relative" @click="setTime(time.seconds)">
            <p class="text-xl text-center">{{ time.text }}</p>
          </div>
        </template>
+        <form class="flex items-center justify-center px-6 py-3" @submit.prevent="submitCustomTime">
+          <ui-text-input v-model="customTime" type="number" step="any" min="0.1" placeholder="Time in minutes" class="w-48" />
+          <ui-btn color="success" type="submit" :padding-x="0" class="h-9 w-12 flex items-center justify-center ml-1">Set</ui-btn>
+        </form>
      </div>
      <div v-else class="w-full p-4">
        <div class="mb-4 flex items-center justify-center">
@ -48,19 +52,28 @@ export default {
  },
  data() {
    return {
+      customTime: null,
      sleepTimes: [
-        {
-          seconds: 10,
-          text: '10 seconds'
-        },
        {
          seconds: 60 * 5,
          text: '5 minutes'
        },
+        {
+          seconds: 60 * 15,
+          text: '15 minutes'
+        },
+        {
+          seconds: 60 * 20,
+          text: '20 minutes'
+        },
        {
          seconds: 60 * 30,
          text: '30 minutes'
        },
+        {
+          seconds: 60 * 45,
+          text: '45 minutes'
+        },
        {
          seconds: 60 * 60,
          text: '60 minutes'
@ -72,10 +85,6 @@ export default {
        {
          seconds: 60 * 120,
          text: '2 hours'
-        },
-        {
-          seconds: 60 * 180,
-          text: '3 hours'
        }
      ]
    }
@ -97,8 +106,17 @@ export default {
    }
  },
  methods: {
-    setTime(time) {
-      this.$emit('set', time.seconds)
+    submitCustomTime() {
+      if (!this.customTime || isNaN(this.customTime) || Number(this.customTime) <= 0) {
+        this.customTime = null
+        return
+      }
+
+      const timeInSeconds = Math.round(Number(this.customTime) * 60)
+      this.setTime(timeInSeconds)
+    },
+    setTime(seconds) {
+      this.$emit('set', seconds)
    },
    increment(amount) {
      this.$emit('increment', amount)
--- a/client/components/modals/authors/EditModal.vue
+++ b/client/components/modals/authors/EditModal.vue
@ -85,6 +85,12 @@ export default {
    },
    title() {
      return this.$strings.HeaderUpdateAuthor
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    libraryProvider() {
+      return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
    }
  },
  methods: {
@ -151,6 +157,11 @@ export default {
      if (this.authorCopy.asin) payload.asin = this.authorCopy.asin
      else payload.q = this.authorCopy.name

+      payload.region = 'us'
+      if (this.libraryProvider.startsWith('audible.')) {
+        payload.region = this.libraryProvider.split('.').pop() || 'us'
+      }
+
      var response = await this.$axios.$post(`/api/authors/${this.authorId}/match`, payload).catch((error) => {
        console.error('Failed', error)
        return null
--- a/client/components/modals/emails/EReaderDeviceModal.vue
+++ b/client/components/modals/emails/EReaderDeviceModal.vue
@ -0,0 +1,171 @@
+<template>
+  <modals-modal ref="modal" v-model="show" name="ereader-device-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="text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+    <form @submit.prevent="submitForm">
+      <div class="w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300">
+        <div class="w-full px-3 py-5 md:p-12">
+          <div class="flex items-center -mx-1 mb-2">
+            <div class="w-full md:w-1/2 px-1">
+              <ui-text-input-with-label ref="ereaderNameInput" v-model="newDevice.name" :disabled="processing" :label="$strings.LabelName" />
+            </div>
+            <div class="w-full md:w-1/2 px-1">
+              <ui-text-input-with-label ref="ereaderEmailInput" v-model="newDevice.email" :disabled="processing" :label="$strings.LabelEmail" />
+            </div>
+          </div>
+
+          <div class="flex items-center pt-4">
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+          </div>
+        </div>
+      </div>
+    </form>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    existingDevices: {
+      type: Array,
+      default: () => []
+    },
+    ereaderDevice: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      newDevice: {
+        name: '',
+        email: ''
+      }
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    title() {
+      return this.ereaderDevice ? 'Create Device' : 'Update Device'
+    }
+  },
+  methods: {
+    submitForm() {
+      this.$refs.ereaderNameInput.blur()
+      this.$refs.ereaderEmailInput.blur()
+
+      if (!this.newDevice.name?.trim() || !this.newDevice.email?.trim()) {
+        this.$toast.error('Name and email required')
+        return
+      }
+
+      this.newDevice.name = this.newDevice.name.trim()
+      this.newDevice.email = this.newDevice.email.trim()
+
+      if (!this.ereaderDevice) {
+        if (this.existingDevices.some((d) => d.name === this.newDevice.name)) {
+          this.$toast.error('EReader device with that name already exists')
+          return
+        }
+
+        this.submitCreate()
+      } else {
+        if (this.ereaderDevice.name !== this.newDevice.name && this.existingDevices.some((d) => d.name === this.newDevice.name)) {
+          this.$toast.error('EReader device with that name already exists')
+          return
+        }
+
+        this.submitUpdate()
+      }
+    },
+    submitUpdate() {
+      this.processing = true
+
+      const existingDevicesWithoutThisOne = this.existingDevices.filter((d) => d.name !== this.ereaderDevice.name)
+
+      const payload = {
+        ereaderDevices: [
+          ...existingDevicesWithoutThisOne,
+          {
+            ...this.newDevice
+          }
+        ]
+      }
+
+      this.$axios
+        .$post(`/api/emails/ereader-devices`, payload)
+        .then((data) => {
+          this.$emit('update', data.ereaderDevices)
+          this.$toast.success('Device updated')
+          this.show = false
+        })
+        .catch((error) => {
+          console.error('Failed to update device', error)
+          this.$toast.error('Failed to update device')
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    submitCreate() {
+      this.processing = true
+
+      const payload = {
+        ereaderDevices: [
+          ...this.existingDevices,
+          {
+            ...this.newDevice
+          }
+        ]
+      }
+
+      this.$axios
+        .$post('/api/emails/ereader-devices', payload)
+        .then((data) => {
+          this.$emit('update', data.ereaderDevices || [])
+          this.$toast.success('Device added')
+          this.show = false
+        })
+        .catch((error) => {
+          console.error('Failed to add device', error)
+          this.$toast.error('Failed to add device')
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    init() {
+      if (this.ereaderDevice) {
+        this.newDevice.name = this.ereaderDevice.name
+        this.newDevice.email = this.ereaderDevice.email
+      } else {
+        this.newDevice.name = ''
+        this.newDevice.email = ''
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
--- a/client/components/modals/item/EditModal.vue
+++ b/client/components/modals/item/EditModal.vue
@ -74,6 +74,9 @@ export default {
        this.$store.commit('setEditModalTab', val)
      }
    },
+    height() {
+      return Math.min(this.availableHeight, 650)
+    },
    tabs() {
      return [
        {
@ -136,6 +139,18 @@ export default {
    userIsAdminOrUp() {
      return this.$store.getters['user/getIsAdminOrUp']
    },
+    selectedLibraryItem() {
+      return this.$store.state.selectedLibraryItem || {}
+    },
+    selectedLibraryItemId() {
+      return this.selectedLibraryItem.id
+    },
+    media() {
+      return this.libraryItem?.media || {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
    availableTabs() {
      if (!this.userCanUpdate && !this.userCanDownload) return []
      return this.tabs.filter((tab) => {
@ -144,6 +159,7 @@ export default {
        if (tab.admin && !this.userIsAdminOrUp) return false

        if (tab.id === 'tools' && this.isMissing) return false
+        if (tab.id === 'chapters' && this.isEBookOnly) return false

        if ((tab.id === 'tools' || tab.id === 'files') && this.userCanDownload) return true
        if (tab.id !== 'tools' && tab.id !== 'files' && this.userCanUpdate) return true
@ -151,9 +167,6 @@ export default {
        return false
      })
    },
-    height() {
-      return Math.min(this.availableHeight, 650)
-    },
    tabName() {
      var _tab = this.tabs.find((t) => t.id === this.selectedTab)
      return _tab ? _tab.component : ''
@ -161,20 +174,11 @@ export default {
    isMissing() {
      return this.selectedLibraryItem.isMissing
    },
-    selectedLibraryItem() {
-      return this.$store.state.selectedLibraryItem || {}
-    },
-    selectedLibraryItemId() {
-      return this.selectedLibraryItem.id
-    },
-    media() {
-      return this.libraryItem ? this.libraryItem.media || {} : {}
-    },
-    mediaMetadata() {
-      return this.media.metadata || {}
+    isEBookOnly() {
+      return this.media.ebookFile && !this.media.tracks?.length
    },
    mediaType() {
-      return this.libraryItem ? this.libraryItem.mediaType : null
+      return this.libraryItem?.mediaType || null
    },
    title() {
      return this.mediaMetadata.title || 'No Title'
--- a/client/components/modals/item/tabs/Cover.vue
+++ b/client/components/modals/item/tabs/Cover.vue
@ -2,7 +2,8 @@
  <div class="w-full h-full overflow-hidden overflow-y-auto px-2 sm:px-4 py-6 relative">
    <div class="flex flex-wrap">
      <div class="relative">
-        <covers-book-cover :library-item="libraryItem" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, null, true)" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+
        <!-- book cover overlay -->
        <div v-if="media.coverPath" class="absolute top-0 left-0 w-full h-full z-10 opacity-0 hover:opacity-100 transition-opacity duration-100">
          <div class="absolute top-0 left-0 w-full h-16 bg-gradient-to-b from-black-600 to-transparent" />
@ -16,10 +17,10 @@
      <div class="flex-grow sm:pl-2 md:pl-6 sm:pr-2 mt-2 md:mt-0">
        <div class="flex items-center">
          <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 pt-4 md:min-w-32">
-            <ui-file-input ref="fileInput" @change="fileUploadSelected"
-              ><span class="hidden md:inline-block">{{ $strings.ButtonUploadCover }}</span
-              ><span class="material-icons text-2xl inline-block md:!hidden">upload</span></ui-file-input
-            >
+            <ui-file-input ref="fileInput" @change="fileUploadSelected">
+              <span class="hidden md:inline-block">{{ $strings.ButtonUploadCover }}</span>
+              <span class="material-icons text-2xl inline-block md:!hidden">upload</span>
+            </ui-file-input>
          </div>
          <form @submit.prevent="submitForm" class="flex flex-grow">
            <ui-text-input-with-label v-model="imageUrl" :label="$strings.LabelCoverImageURL" />
@ -27,18 +28,18 @@
          </form>
        </div>

-        <div v-if="localCovers.length" class="mb-4 mt-6 border-t border-b border-primary">
+        <div v-if="localCovers.length" class="mb-4 mt-6 border-t border-b border-white border-opacity-10">
          <div class="flex items-center justify-center py-2">
            <p>{{ localCovers.length }} local image{{ localCovers.length !== 1 ? 's' : '' }}</p>
            <div class="flex-grow" />
            <ui-btn small @click="showLocalCovers = !showLocalCovers">{{ showLocalCovers ? $strings.ButtonHide : $strings.ButtonShow }}</ui-btn>
          </div>

-          <div v-if="showLocalCovers" class="flex items-center justify-center">
-            <template v-for="cover in localCovers">
-              <div :key="cover.path" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.metadata.path === coverPath ? 'border-yellow-300' : ''" @click="setCover(cover)">
+          <div v-if="showLocalCovers" class="flex items-center justify-center pb-2">
+            <template v-for="localCoverFile in localCovers">
+              <div :key="localCoverFile.ino" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="localCoverFile.metadata.path === coverPath ? 'border-yellow-300' : ''" @click="setCover(localCoverFile)">
                <div class="h-24 bg-primary" :style="{ width: 96 / bookCoverAspectRatio + 'px' }">
-                  <covers-preview-cover :src="`${cover.localPath}?token=${userToken}`" :width="96 / bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+                  <covers-preview-cover :src="localCoverFile.localPath" :width="96 / bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
                </div>
              </div>
            </template>
@ -48,13 +49,13 @@
    </div>
    <form @submit.prevent="submitSearchForm">
      <div class="flex items-center justify-start -mx-1 h-20">
-        <div class="w-40 px-1">
+        <div class="w-48 px-1">
          <ui-dropdown v-model="provider" :items="providers" :label="$strings.LabelProvider" small />
        </div>
        <div class="w-72 px-1">
          <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" :placeholder="$strings.PlaceholderSearch" />
        </div>
-        <div v-show="provider != 'itunes'" class="w-72 px-1">
+        <div v-show="provider != 'itunes' && provider != 'audiobookcovers'" class="w-72 px-1">
          <ui-text-input-with-label v-model="searchAuthor" :label="$strings.LabelAuthor" />
        </div>
        <ui-btn class="mt-5 ml-1" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
@ -127,7 +128,7 @@ export default {
    },
    providers() {
      if (this.isPodcast) return this.$store.state.scanners.podcastProviders
-      return this.$store.state.scanners.providers
+      return [{ text: 'All', value: 'all' }, ...this.$store.state.scanners.providers, ...this.$store.state.scanners.coverOnlyProviders]
    },
    searchTitleLabel() {
      if (this.provider.startsWith('audible')) return this.$strings.LabelSearchTitleOrASIN
@ -168,8 +169,8 @@ export default {
      return this.libraryFiles
        .filter((f) => f.fileType === 'image')
        .map((file) => {
-          var _file = { ...file }
-          _file.localPath = `${process.env.serverUrl}/s/item/${this.libraryItemId}/${this.$encodeUriPath(file.metadata.relPath).replace(/^\//, '')}`
+          const _file = { ...file }
+          _file.localPath = `${process.env.serverUrl}/api/items/${this.libraryItemId}/file/${file.ino}?token=${this.userToken}`
          return _file
        })
    }
@ -222,7 +223,7 @@ export default {
      this.searchTitle = this.mediaMetadata.title || ''
      this.searchAuthor = this.mediaMetadata.authorName || ''
      if (this.isPodcast) this.provider = 'itunes'
-      else this.provider = localStorage.getItem('book-provider') || 'google'
+      else this.provider = localStorage.getItem('book-cover-provider') || localStorage.getItem('book-provider') || 'google'
    },
    removeCover() {
      if (!this.media.coverPath) {
@ -287,13 +288,13 @@ export default {
    },
    getSearchQuery() {
      var searchQuery = `provider=${this.provider}&title=${this.searchTitle}`
-      if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor}`
+      if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor || ''}`
      if (this.isPodcast) searchQuery += '&podcast=1'
      return searchQuery
    },
    persistProvider() {
      try {
-        localStorage.setItem('book-provider', this.provider)
+        localStorage.setItem('book-cover-provider', this.provider)
      } catch (error) {
        console.error('PersistProvider', error)
      }
--- a/client/components/modals/item/tabs/Details.vue
+++ b/client/components/modals/item/tabs/Details.vue
@ -7,11 +7,6 @@

    <div class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg" :class="isScrollable ? 'box-shadow-md-up' : 'border-t border-white border-opacity-5'">
      <div class="flex items-center px-4">
-        <ui-btn v-if="userCanDelete" color="error" type="button" class="h-8 hidden md:block" :padding-x="3" small @click.stop.prevent="removeItem">{{ $strings.ButtonRemove }}</ui-btn>
-        <ui-icon-btn bg-color="error" icon="delete" class="md:hidden" :size="7" icon-font-size="1rem" @click.stop.prevent="removeItem" />
-
-        <div class="flex-grow" />
-
        <ui-tooltip :disabled="!!quickMatching" :text="$getString('MessageQuickMatchDescription', [libraryProvider])" direction="bottom" class="mr-2 md:mr-4">
          <ui-btn v-if="userIsAdminOrUp" :loading="quickMatching" color="bg" type="button" class="h-full" small @click.stop.prevent="quickMatch">{{ $strings.ButtonQuickMatch }}</ui-btn>
        </ui-tooltip>
@ -20,6 +15,8 @@
          <ui-btn v-if="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="!!libraryScan" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">{{ $strings.ButtonReScan }}</ui-btn>
        </ui-tooltip>

+        <div class="flex-grow" />
+
        <!-- desktop -->
        <ui-btn @click="save" class="mx-2 hidden md:block">{{ $strings.ButtonSave }}</ui-btn>
        <ui-btn @click="saveAndClose" class="mx-2 hidden md:block">{{ $strings.ButtonSaveAndClose }}</ui-btn>
@ -77,9 +74,6 @@ export default {
    mediaMetadata() {
      return this.media.metadata || {}
    },
-    userCanDelete() {
-      return this.$store.getters['user/getUserCanDelete']
-    },
    libraryId() {
      return this.libraryItem ? this.libraryItem.libraryId : null
    },
@ -184,23 +178,6 @@ export default {
      }
      return false
    },
-    removeItem() {
-      if (confirm(`Are you sure you want to remove this item?\n\n*Does not delete your files, only removes the item from audiobookshelf`)) {
-        this.isProcessing = true
-        this.$axios
-          .$delete(`/api/items/${this.libraryItemId}`)
-          .then(() => {
-            console.log('Item removed')
-            this.$toast.success('Item Removed')
-            this.$emit('close')
-            this.isProcessing = false
-          })
-          .catch((error) => {
-            console.error('Remove item failed', error)
-            this.isProcessing = false
-          })
-      }
-    },
    checkIsScrollable() {
      this.$nextTick(() => {
        var formWrapper = document.getElementById('formWrapper')
--- a/client/components/modals/item/tabs/Files.vue
+++ b/client/components/modals/item/tabs/Files.vue
@ -1,6 +1,6 @@
 <template>
  <div class="w-full h-full overflow-y-auto overflow-x-hidden px-4 py-6">
-    <tables-library-files-table expanded :files="libraryFiles" :library-item-id="libraryItem.id" :is-missing="isMissing" />
+    <tables-library-files-table expanded :library-item="libraryItem" :is-missing="isMissing" in-modal />
  </div>
 </template>

@ -30,9 +30,6 @@ export default {
    media() {
      return this.libraryItem.media || {}
    },
-    libraryFiles() {
-      return this.libraryItem.libraryFiles || []
-    },
    userToken() {
      return this.$store.getters['user/getToken']
    },
--- a/client/components/modals/item/tabs/Match.vue
+++ b/client/components/modals/item/tabs/Match.vue
@ -34,13 +34,25 @@
      </div>
      <ui-checkbox v-model="selectAll" checkbox-bg="bg" @input="selectAllToggled" />
      <form @submit.prevent="submitMatchUpdate">
-        <div v-if="selectedMatchOrig.cover" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.cover" checkbox-bg="bg" @input="checkboxToggled" />
-          <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" readonly :label="$strings.LabelCover" class="flex-grow mx-4" />
-          <div class="min-w-12 max-w-12 md:min-w-16 md:max-w-16">
-            <a :href="selectedMatch.cover" target="_blank" class="w-full bg-primary">
-              <img :src="selectedMatch.cover" class="h-full w-full object-contain" />
-            </a>
+        <div v-if="selectedMatchOrig.cover" class="flex flex-wrap md:flex-nowrap items-center justify-center">
+          <div class="flex flex-grow items-center py-2">
+            <ui-checkbox v-model="selectedMatchUsage.cover" checkbox-bg="bg" @input="checkboxToggled" />
+            <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" readonly :label="$strings.LabelCover" class="flex-grow mx-4" />
+          </div>
+
+          <div class="flex py-2">
+            <div>
+              <p class="text-center text-gray-200">New</p>
+              <a :href="selectedMatch.cover" target="_blank" class="bg-primary">
+                <covers-preview-cover :src="selectedMatch.cover" :width="100" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+              </a>
+            </div>
+            <div v-if="media.coverPath">
+              <p class="text-center text-gray-200">Current</p>
+              <a :href="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, null, true)" target="_blank" class="bg-primary">
+                <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, null, true)" :width="100" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+              </a>
+            </div>
          </div>
        </div>
        <div v-if="selectedMatchOrig.title" class="flex items-center py-2">
@ -103,7 +115,7 @@
        <div v-if="selectedMatchOrig.genres && selectedMatchOrig.genres.length" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.genres" checkbox-bg="bg" @input="checkboxToggled" />
          <div class="flex-grow ml-4">
-            <ui-multi-select v-model="selectedMatch.genres" :items="selectedMatch.genres" :disabled="!selectedMatchUsage.genres" :label="$strings.LabelGenres" />
+            <ui-multi-select v-model="selectedMatch.genres" :items="genres" :disabled="!selectedMatchUsage.genres" :label="$strings.LabelGenres" />
            <p v-if="mediaMetadata.genres" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.genres.join(', ') }}</p>
          </div>
        </div>
@ -164,6 +176,20 @@
            <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 pb-2" :class="{ 'pt-2': mediaMetadata.explicit == null }">
+          <ui-checkbox v-model="selectedMatchUsage.explicit" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4" :class="{ 'pt-4': mediaMetadata.explicit != null }">
+            <ui-checkbox v-model="selectedMatch.explicit" :label="$strings.LabelExplicit" :disabled="!selectedMatchUsage.explicit" :checkbox-bg="!selectedMatchUsage.explicit ? '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 v-if="selectedMatchOrig.abridged != null" class="flex items-center pb-2" :class="{ 'pt-2': mediaMetadata.abridged == null }">
+          <ui-checkbox v-model="selectedMatchUsage.abridged" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4" :class="{ 'pt-4': mediaMetadata.abridged != null }">
+            <ui-checkbox v-model="selectedMatch.abridged" :label="$strings.LabelAbridged" :disabled="!selectedMatchUsage.abridged" :checkbox-bg="!selectedMatchUsage.abridged ? 'bg' : 'primary'" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
+            <p v-if="mediaMetadata.abridged != null" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.abridged ? 'Abridged (checked)' : 'Unabridged (unchecked)' }}</p>
+          </div>
+        </div>

        <div class="flex items-center justify-end py-2">
          <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
@ -209,6 +235,7 @@ export default {
        explicit: true,
        asin: true,
        isbn: true,
+        abridged: true,
        // Podcast specific
        itunesPageUrl: true,
        itunesId: true,
@ -273,6 +300,12 @@ export default {
    },
    isPodcast() {
      return this.mediaType == 'podcast'
+    },
+    genres() {
+      const filterData = this.$store.state.libraries.filterData || {}
+      const currentGenres = filterData.genres || []
+      const selectedMatchGenres = this.selectedMatch.genres || []
+      return [...new Set([...currentGenres ,...selectedMatchGenres])]
    }
  },
  methods: {
@ -327,6 +360,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
        })
      }
@ -352,6 +386,7 @@ export default {
        explicit: true,
        asin: true,
        isbn: true,
+        abridged: true,
        // Podcast specific
        itunesPageUrl: true,
        itunesId: true,
@ -468,7 +503,6 @@ export default {
          } else if (key === 'narrator') {
            updatePayload.metadata.narrators = this.selectedMatch[key].split(',').map((v) => v.trim())
          } else if (key === 'genres') {
-            // updatePayload.metadata.genres = this.selectedMatch[key].split(',').map((v) => v.trim())
            updatePayload.metadata.genres = [...this.selectedMatch[key]]
          } else if (key === 'tags') {
            updatePayload.tags = this.selectedMatch[key].split(',').map((v) => v.trim())
--- a/client/components/modals/item/tabs/Schedule.vue
+++ b/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>
--- a/client/components/modals/item/tabs/Tools.vue
+++ b/client/components/modals/item/tabs/Tools.vue
@ -46,8 +46,20 @@
            >{{ $strings.ButtonOpenManager }}
            <span class="material-icons text-lg ml-2">launch</span>
          </ui-btn>
+
+          <ui-btn v-if="!isMetadataEmbedQueued && !isEmbedTaskRunning" class="w-full mt-4" small @click.stop="quickEmbed">Quick Embed</ui-btn>
        </div>
      </div>
+
+      <!-- queued alert -->
+      <widgets-alert v-if="isMetadataEmbedQueued" type="warning" class="mt-4">
+        <p class="text-lg">Queued for metadata embed ({{ queuedEmbedLIds.length }} in queue)</p>
+      </widgets-alert>
+
+      <!-- processing alert -->
+      <widgets-alert v-if="isEmbedTaskRunning" type="warning" class="mt-4">
+        <p class="text-lg">Currently embedding metadata</p>
+      </widgets-alert>
    </div>

    
@ -92,10 +104,10 @@ export default {
      return this.$store.getters['user/getIsAdminOrUp']
    },
    libraryItemId() {
-      return this.libraryItem ? this.libraryItem.id : null
+      return this.libraryItem?.id || null
    },
    media() {
-      return this.libraryItem ? this.libraryItem.media || {} : {}
+      return this.libraryItem?.media || {}
    },
    mediaTracks() {
      return this.media.tracks || []
@ -113,9 +125,49 @@ export default {
    showMp3Split() {
      if (!this.mediaTracks.length) return false
      return this.isSingleM4b && this.chapters.length
+    },
+    queuedEmbedLIds() {
+      return this.$store.state.tasks.queuedEmbedLIds || []
+    },
+    isMetadataEmbedQueued() {
+      return this.queuedEmbedLIds.some((lid) => lid === this.libraryItemId)
+    },
+    tasks() {
+      return this.$store.getters['tasks/getTasksByLibraryItemId'](this.libraryItemId)
+    },
+    embedTask() {
+      return this.tasks.find((t) => t.action === 'embed-metadata')
+    },
+    encodeTask() {
+      return this.tasks.find((t) => t.action === 'encode-m4b')
+    },
+    isEmbedTaskRunning() {
+      return this.embedTask && !this.embedTask?.isFinished
+    },
+    isEncodeTaskRunning() {
+      return this.encodeTask && !this.encodeTask?.isFinished
    }
  },
-  methods: {},
-  mounted() {}
+  methods: {
+    quickEmbed() {
+      const payload = {
+        message: 'Warning! Quick embed will not backup your audio files. Make sure that you have a backup of your audio files. <br><br>Would you like to continue?',
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.$axios
+              .$post(`/api/tools/item/${this.libraryItemId}/embed-metadata`)
+              .then(() => {
+                console.log('Audio metadata encode started')
+              })
+              .catch((error) => {
+                console.error('Audio metadata encode failed', error)
+              })
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    }
+  }
 }
 </script>
--- a/client/components/modals/notification/NotificationEditModal.vue
+++ b/client/components/modals/notification/NotificationEditModal.vue
@ -10,7 +10,7 @@
        <div class="w-full px-3 py-5 md:p-12">
          <ui-dropdown v-model="newNotification.eventName" :label="$strings.LabelNotificationEvent" :items="eventOptions" class="mb-4" @input="eventOptionUpdated" />

-          <ui-multi-select v-model="newNotification.urls" :label="$strings.LabelNotificationAppriseURL" class="mb-2" />
+          <ui-multi-select ref="urlsInput" v-model="newNotification.urls" :label="$strings.LabelNotificationAppriseURL" class="mb-2" />

          <ui-text-input-with-label v-model="newNotification.titleTemplate" :label="$strings.LabelNotificationTitleTemplate" class="mb-2" />

@ -103,6 +103,8 @@ export default {
      if (this.$refs.modal) this.$refs.modal.setHide()
    },
    submitForm() {
+      this.$refs.urlsInput?.forceBlur()
+      
      if (!this.newNotification.urls.length) {
        this.$toast.error('Must enter an Apprise URL')
        return
--- a/client/components/modals/podcast/EditEpisode.vue
+++ b/client/components/modals/podcast/EditEpisode.vue
@ -11,8 +11,15 @@
      </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>
--- a/client/components/modals/podcast/EpisodeFeed.vue
+++ b/client/components/modals/podcast/EpisodeFeed.vue
@ -6,21 +6,33 @@
      </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">
+      <div v-if="episodesCleaned.length" class="w-full py-3 mx-auto flex">
+        <form @submit.prevent="submit" class="flex flex-grow">
+          <ui-text-input v-model="search" @input="inputUpdate" type="search" :placeholder="$strings.PlaceholderSearchEpisode" class="flex-grow mr-2 text-sm md:text-base" />
+        </form>
+      </div>
      <div ref="episodeContainer" id="episodes-scroll" class="w-full overflow-x-hidden overflow-y-auto">
        <div
-          v-for="(episode, index) in episodes"
+          v-for="(episode, index) in episodesList"
          :key="index"
          class="relative"
-          :class="itemEpisodeMap[episode.enclosure.url] ? 'bg-primary bg-opacity-40' : selectedEpisodes[String(index)] ? 'cursor-pointer bg-success bg-opacity-10' : index % 2 == 0 ? 'cursor-pointer bg-primary bg-opacity-25 hover:bg-opacity-40' : 'cursor-pointer bg-primary bg-opacity-5 hover:bg-opacity-25'"
-          @click="toggleSelectEpisode(index, episode)"
+          :class="itemEpisodeMap[episode.cleanUrl] ? 'bg-primary bg-opacity-40' : selectedEpisodes[episode.cleanUrl] ? 'cursor-pointer bg-success bg-opacity-10' : index % 2 == 0 ? 'cursor-pointer bg-primary bg-opacity-25 hover:bg-opacity-40' : 'cursor-pointer bg-primary bg-opacity-5 hover:bg-opacity-25'"
+          @click="toggleSelectEpisode(episode)"
        >
          <div class="absolute top-0 left-0 h-full flex items-center p-2">
-            <span v-if="itemEpisodeMap[episode.enclosure.url]" class="material-icons text-success text-xl">download_done</span>
-            <ui-checkbox v-else v-model="selectedEpisodes[String(index)]" small checkbox-bg="primary" border-color="gray-600" />
+            <span v-if="itemEpisodeMap[episode.cleanUrl]" class="material-icons text-success text-xl">download_done</span>
+            <ui-checkbox v-else v-model="selectedEpisodes[episode.cleanUrl]" 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>
@ -51,8 +63,12 @@ export default {
  data() {
    return {
      processing: false,
+      episodesCleaned: [],
      selectedEpisodes: {},
-      selectAll: false
+      selectAll: false,
+      search: null,
+      searchTimeout: null,
+      searchText: null
    }
  },
  watch: {
@ -77,7 +93,7 @@ export default {
      return this.libraryItem.media.metadata.title || 'Unknown'
    },
    allDownloaded() {
-      return !this.episodes.some((episode) => !this.itemEpisodeMap[episode.enclosure.url])
+      return !this.episodesCleaned.some((episode) => !this.itemEpisodeMap[episode.cleanUrl])
    },
    episodesSelected() {
      return Object.keys(this.selectedEpisodes).filter((key) => !!this.selectedEpisodes[key])
@ -93,38 +109,52 @@ export default {
    itemEpisodeMap() {
      var map = {}
      this.itemEpisodes.forEach((item) => {
-        if (item.enclosure) map[item.enclosure.url] = true
+        if (item.enclosure) map[item.enclosure.url.split('?')[0]] = true
      })
      return map
+    },
+    episodesList() {
+      return this.episodesCleaned.filter((episode) => {
+        if (!this.searchText) return true
+        return (episode.title && episode.title.toLowerCase().includes(this.searchText)) || (episode.subtitle && episode.subtitle.toLowerCase().includes(this.searchText))
+      })
    }
  },
  methods: {
+    inputUpdate() {
+      clearTimeout(this.searchTimeout)
+      this.searchTimeout = setTimeout(() => {
+        if (!this.search || !this.search.trim()) {
+          this.searchText = ''
+          return
+        }
+        this.searchText = this.search.toLowerCase().trim()
+      }, 500)
+    },
    toggleSelectAll(val) {
-      for (let i = 0; i < this.episodes.length; i++) {
-        const episode = this.episodes[i]
-        if (this.itemEpisodeMap[episode.enclosure.url]) this.selectedEpisodes[String(i)] = false
-        else this.$set(this.selectedEpisodes, String(i), val)
+      for (const episode of this.episodesCleaned) {
+        if (this.itemEpisodeMap[episode.cleanUrl]) this.selectedEpisodes[episode.cleanUrl] = false
+        else this.$set(this.selectedEpisodes, episode.cleanUrl, val)
      }
    },
    checkSetIsSelectedAll() {
-      for (let i = 0; i < this.episodes.length; i++) {
-        const episode = this.episodes[i]
-        if (!this.itemEpisodeMap[episode.enclosure.url] && !this.selectedEpisodes[String(i)]) {
+      for (const episode of this.episodesCleaned) {
+        if (!this.itemEpisodeMap[episode.cleanUrl] && !this.selectedEpisodes[episode.cleanUrl]) {
          this.selectAll = false
          return
        }
      }
      this.selectAll = true
    },
-    toggleSelectEpisode(index, episode) {
-      if (this.itemEpisodeMap[episode.enclosure.url]) return
-      this.$set(this.selectedEpisodes, String(index), !this.selectedEpisodes[String(index)])
+    toggleSelectEpisode(episode) {
+      if (this.itemEpisodeMap[episode.enclosure.url?.split('?')[0]]) return
+      this.$set(this.selectedEpisodes, episode.cleanUrl, !this.selectedEpisodes[episode.cleanUrl])
      this.checkSetIsSelectedAll()
    },
    submit() {
      var episodesToDownload = []
      if (this.episodesSelected.length) {
-        episodesToDownload = this.episodesSelected.map((episodeIndex) => this.episodes[Number(episodeIndex)])
+        episodesToDownload = this.episodesSelected.map((cleanUrl) => this.episodesCleaned.find((ep) => ep.cleanUrl == cleanUrl))
      }

      var payloadSize = JSON.stringify(episodesToDownload).length
@ -154,7 +184,15 @@ export default {
        })
    },
    init() {
-      this.episodes.sort((a, b) => (a.publishedAt < b.publishedAt ? 1 : -1))
+      this.episodesCleaned = this.episodes
+        .filter((ep) => ep.enclosure?.url)
+        .map((_ep) => {
+          return {
+            ..._ep,
+            cleanUrl: _ep.enclosure.url.split('?')[0]
+          }
+        })
+      this.episodesCleaned.sort((a, b) => (a.publishedAt < b.publishedAt ? 1 : -1))
      this.selectAll = false
      this.selectedEpisodes = {}
    }
--- a/client/components/modals/podcast/NewModal.vue
+++ b/client/components/modals/podcast/NewModal.vue
@ -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>
--- a/client/components/modals/podcast/tabs/EpisodeDetails.vue
+++ b/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,11 +24,17 @@
      </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>
-      <a :href="enclosureUrl" target="_blank" class="text-xs text-blue-400 hover:text-blue-500 hover:underline">{{ enclosureUrl }}</a>
+    <div v-if="enclosureUrl" class="pb-4 pt-6">
+      <ui-text-input-with-label :value="enclosureUrl" readonly class="text-xs">
+        <label class="px-1 text-xs text-gray-200 font-semibold">Episode URL from RSS feed</label>
+      </ui-text-input-with-label>
    </div>
    <div v-else class="py-4">
      <p class="text-xs text-gray-300 font-semibold">Episode not linked to RSS feed episode</p>
@ -89,6 +95,9 @@ export default {
    },
    enclosureUrl() {
      return this.enclosure.url
+    },
+    episodeTypes() {
+      return this.$store.state.globals.episodeTypes || []
    }
  },
  methods: {
@ -122,28 +131,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>
--- a/client/components/modals/rssfeed/OpenCloseModal.vue
+++ b/client/components/modals/rssfeed/OpenCloseModal.vue
@ -14,6 +14,27 @@

          <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">
        <p class="text-lg font-semibold mb-4">{{ $strings.HeaderOpenRSSFeed }}</p>
@ -22,6 +43,7 @@
          <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>
@ -41,7 +63,12 @@ export default {
    return {
      processing: false,
      newFeedSlug: null,
-      currentFeed: null
+      currentFeed: null,
+      metadataDetails: {
+        preventIndexing: true,
+        ownerName: '',
+        ownerEmail: ''
+      }
    }
  },
  watch: {
@ -107,7 +134,8 @@ 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}`