Merge branch 'advplyr:master' into master

2026-01-03 17:49:37 +00:00 · 2025-07-28 21:08:52 +02:00 · 2025-07-28 21:08:52 +02:00 · 8321ba6291
commit 8321ba6291
parent f1a0e54c04 0107cb4782
138 changed files with 6154 additions and 1541 deletions
--- a/client/components/app/ConfigSideNav.vue
+++ b/client/components/app/ConfigSideNav.vue
@ -70,6 +70,11 @@ export default {
          title: this.$strings.HeaderUsers,
          path: '/config/users'
        },
+        {
+          id: 'config-api-keys',
+          title: this.$strings.HeaderApiKeys,
+          path: '/config/api-keys'
+        },
        {
          id: 'config-sessions',
          title: this.$strings.HeaderListeningSessions,
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@ -778,10 +778,6 @@ export default {
    windowResize() {
      this.executeRebuild()
    },
-    socketInit() {
-      // Server settings are set on socket init
-      this.executeRebuild()
-    },
    initListeners() {
      window.addEventListener('resize', this.windowResize)

@ -794,7 +790,6 @@ export default {
      })

      this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
-      this.$eventBus.$on('socket_init', this.socketInit)
      this.$eventBus.$on('user-settings', this.settingsUpdated)

      if (this.$root.socket) {
@ -826,7 +821,6 @@ export default {
      }

      this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
-      this.$eventBus.$off('socket_init', this.socketInit)
      this.$eventBus.$off('user-settings', this.settingsUpdated)

      if (this.$root.socket) {
--- a/client/components/app/SideRail.vue
+++ b/client/components/app/SideRail.vue
@ -116,7 +116,7 @@
    </div>

    <div class="w-full h-12 px-1 py-2 border-t border-black/20 bg-bg absolute left-0" :style="{ bottom: streamLibraryItem ? '224px' : '65px' }">
-      <p class="underline font-mono text-xs text-center text-gray-300 leading-3 mb-1" @click="clickChangelog">v{{ $config.version }}</p>
+      <p class="underline font-mono text-xs text-center text-gray-300 leading-3 mb-1 cursor-pointer" @click="clickChangelog">v{{ $config.version }}</p>
      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xxs text-center block leading-3">Update</a>
      <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
    </div>
--- a/client/components/cards/AuthorCard.vue
+++ b/client/components/cards/AuthorCard.vue
@ -71,9 +71,6 @@ export default {
    coverHeight() {
      return this.cardHeight
    },
-    userToken() {
-      return this.store.getters['user/getToken']
-    },
    _author() {
      return this.author || {}
    },
--- a/client/components/cards/BookMatchCard.vue
+++ b/client/components/cards/BookMatchCard.vue
@ -13,9 +13,17 @@
          <div class="grow" />
          <p class="text-sm md:text-base">{{ book.publishedYear }}</p>
        </div>
-        <p v-if="book.author" class="text-gray-300 text-xs md:text-sm">{{ $getString('LabelByAuthor', [book.author]) }}</p>
-        <p v-if="book.narrator" class="text-gray-400 text-xs">{{ $strings.LabelNarrators }}: {{ book.narrator }}</p>
-        <p v-if="book.duration" class="text-gray-400 text-xs">{{ $strings.LabelDuration }}: {{ $elapsedPrettyExtended(bookDuration, false) }} {{ bookDurationComparison }}</p>
+
+        <div class="flex items-center">
+          <div>
+            <p v-if="book.author" class="text-gray-300 text-xs md:text-sm">{{ $getString('LabelByAuthor', [book.author]) }}</p>
+            <p v-if="book.narrator" class="text-gray-400 text-xs">{{ $strings.LabelNarrators }}: {{ book.narrator }}</p>
+            <p v-if="book.duration" class="text-gray-400 text-xs">{{ $strings.LabelDuration }}: {{ $elapsedPrettyExtended(bookDuration, false) }} {{ bookDurationComparison }}</p>
+          </div>
+          <div class="grow" />
+          <div v-if="book.matchConfidence" class="rounded-full px-2 py-1 text-xs whitespace-nowrap text-white" :class="book.matchConfidence > 0.95 ? 'bg-success/80' : 'bg-info/80'">{{ $strings.LabelMatchConfidence }}: {{ (book.matchConfidence * 100).toFixed(0) }}%</div>
+        </div>
+
        <div v-if="book.series?.length" class="flex py-1 -mx-1">
          <div v-for="(series, index) in book.series" :key="index" class="bg-white/10 rounded-full px-1 py-0.5 mx-1">
            <p class="leading-3 text-xs text-gray-400">
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@ -198,7 +198,7 @@ export default {
      return this.store.getters['user/getSizeMultiplier']
    },
    dateFormat() {
-      return this.store.state.serverSettings.dateFormat
+      return this.store.getters['getServerSetting']('dateFormat')
    },
    _libraryItem() {
      return this.libraryItem || {}
--- a/client/components/cards/LazySeriesCard.vue
+++ b/client/components/cards/LazySeriesCard.vue
@ -71,7 +71,7 @@ export default {
      return this.height * this.sizeMultiplier
    },
    dateFormat() {
-      return this.store.state.serverSettings.dateFormat
+      return this.store.getters['getServerSetting']('dateFormat')
    },
    labelFontSize() {
      if (this.width < 160) return 0.75
--- a/client/components/controls/LibraryFilterSelect.vue
+++ b/client/components/controls/LibraryFilterSelect.vue
@ -94,6 +94,9 @@ export default {
    userIsAdminOrUp() {
      return this.$store.getters['user/getIsAdminOrUp']
    },
+    userCanAccessExplicitContent() {
+      return this.$store.getters['user/getUserCanAccessExplicitContent']
+    },
    libraryMediaType() {
      return this.$store.getters['libraries/getCurrentLibraryMediaType']
    },
@ -239,6 +242,15 @@ export default {
          sublist: false
        }
      ]
+
+      if (this.userCanAccessExplicitContent) {
+        items.push({
+          text: this.$strings.LabelExplicit,
+          value: 'explicit',
+          sublist: false
+        })
+      }
+
      if (this.userIsAdminOrUp) {
        items.push({
          text: this.$strings.LabelShareOpen,
@ -249,7 +261,7 @@ export default {
      return items
    },
    podcastItems() {
-      return [
+      const items = [
        {
          text: this.$strings.LabelAll,
          value: 'all'
@ -276,8 +288,23 @@ export default {
          text: this.$strings.ButtonIssues,
          value: 'issues',
          sublist: false
+        },
+        {
+          text: this.$strings.LabelRSSFeedOpen,
+          value: 'feed-open',
+          sublist: false
        }
      ]
+
+      if (this.userCanAccessExplicitContent) {
+        items.push({
+          text: this.$strings.LabelExplicit,
+          value: 'explicit',
+          sublist: false
+        })
+      }
+
+      return items
    },
    selectItems() {
      if (this.isSeries) return this.seriesItems
--- a/client/components/covers/AuthorImage.vue
+++ b/client/components/covers/AuthorImage.vue
@ -39,9 +39,6 @@ export default {
    }
  },
  computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
    _author() {
      return this.author || {}
    },
--- a/client/components/modals/AccountModal.vue
+++ b/client/components/modals/AccountModal.vue
@ -309,9 +309,9 @@ export default {
          } else {
            console.log('Account updated', data.user)

-            if (data.user.id === this.user.id && data.user.token !== this.user.token) {
-              console.log('Current user token was updated')
-              this.$store.commit('user/setUserToken', data.user.token)
+            if (data.user.id === this.user.id && data.user.accessToken !== this.user.accessToken) {
+              console.log('Current user access token was updated')
+              this.$store.commit('user/setAccessToken', data.user.accessToken)
            }

            this.$toast.success(this.$strings.ToastAccountUpdateSuccess)
@ -351,9 +351,6 @@ export default {
          this.$toast.error(errMsg || 'Failed to create account')
        })
    },
-    toggleActive() {
-      this.newUser.isActive = !this.newUser.isActive
-    },
    userTypeUpdated(type) {
      this.newUser.permissions = {
        download: type !== 'guest',
--- a/client/components/modals/ApiKeyCreatedModal.vue
+++ b/client/components/modals/ApiKeyCreatedModal.vue
@ -0,0 +1,60 @@
+<template>
+  <modals-modal ref="modal" v-model="show" name="api-key-created" :width="800" :height="'unset'" persistent>
+    <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="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: 200px; max-height: 80vh">
+        <div class="w-full p-8">
+          <p class="text-lg text-white mb-4">{{ $getString('LabelApiKeyCreated', [apiKeyName]) }}</p>
+
+          <p class="text-lg text-white mb-4">{{ $strings.LabelApiKeyCreatedDescription }}</p>
+
+          <ui-text-input label="API Key" :value="apiKeyKey" readonly show-copy />
+
+          <div class="flex justify-end mt-4">
+            <ui-btn color="bg-primary" @click="show = false">{{ $strings.ButtonClose }}</ui-btn>
+          </div>
+        </div>
+      </div>
+    </form>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    apiKey: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    title() {
+      return this.$strings.HeaderNewApiKey
+    },
+    apiKeyName() {
+      return this.apiKey?.name || ''
+    },
+    apiKeyKey() {
+      return this.apiKey?.apiKey || ''
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
--- a/client/components/modals/ApiKeyModal.vue
+++ b/client/components/modals/ApiKeyModal.vue
@ -0,0 +1,198 @@
+<template>
+  <modals-modal ref="modal" v-model="show" name="api-key" :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="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">
+              <ui-text-input-with-label v-model.trim="newApiKey.name" :readonly="!isNew" :label="$strings.LabelName" />
+            </div>
+            <div v-if="isNew" class="w-1/2 px-2">
+              <ui-text-input-with-label v-model.trim="newApiKey.expiresIn" :label="$strings.LabelExpiresInSeconds" type="number" :min="0" />
+            </div>
+          </div>
+          <div class="flex items-center pt-4 pb-2 gap-2">
+            <div class="flex items-center px-2">
+              <p class="px-3 font-semibold" id="user-enabled-toggle">{{ $strings.LabelEnable }}</p>
+              <ui-toggle-switch :disabled="isExpired && !apiKey.isActive" labeledBy="user-enabled-toggle" v-model="newApiKey.isActive" />
+            </div>
+            <div v-if="isExpired" class="px-2">
+              <p class="text-sm text-error">{{ $strings.LabelExpired }}</p>
+            </div>
+          </div>
+
+          <div class="w-full border-t border-b border-black-200 py-4 px-3 mt-4">
+            <p class="text-lg mb-2 font-semibold">{{ $strings.LabelApiKeyUser }}</p>
+            <p class="text-sm mb-2 text-gray-400">{{ $strings.LabelApiKeyUserDescription }}</p>
+            <ui-select-input v-model="newApiKey.userId" :disabled="isExpired && !apiKey.isActive" :items="userItems" :placeholder="$strings.LabelSelectUser" :label="$strings.LabelApiKeyUser" label-hidden />
+          </div>
+
+          <div class="flex pt-4 px-2">
+            <div class="grow" />
+            <ui-btn color="bg-success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+          </div>
+        </div>
+      </div>
+    </form>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    apiKey: {
+      type: Object,
+      default: () => null
+    },
+    users: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      newApiKey: {},
+      isNew: true
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    title() {
+      return this.isNew ? this.$strings.HeaderNewApiKey : this.$strings.HeaderUpdateApiKey
+    },
+    userItems() {
+      return this.users
+        .filter((u) => {
+          // Only show root user if the current user is root
+          return u.type !== 'root' || this.$store.getters['user/getIsRoot']
+        })
+        .map((u) => ({ text: u.username, value: u.id, subtext: u.type }))
+    },
+    isExpired() {
+      if (!this.apiKey || !this.apiKey.expiresAt) return false
+
+      return new Date(this.apiKey.expiresAt).getTime() < Date.now()
+    }
+  },
+  methods: {
+    submitForm() {
+      if (!this.newApiKey.name) {
+        this.$toast.error(this.$strings.ToastNameRequired)
+        return
+      }
+
+      if (!this.newApiKey.userId) {
+        this.$toast.error(this.$strings.ToastNewApiKeyUserError)
+        return
+      }
+
+      if (this.isNew) {
+        this.submitCreateApiKey()
+      } else {
+        this.submitUpdateApiKey()
+      }
+    },
+    submitUpdateApiKey() {
+      if (this.newApiKey.isActive === this.apiKey.isActive && this.newApiKey.userId === this.apiKey.userId) {
+        this.$toast.info(this.$strings.ToastNoUpdatesNecessary)
+        this.show = false
+        return
+      }
+
+      const apiKey = {
+        isActive: this.newApiKey.isActive,
+        userId: this.newApiKey.userId
+      }
+
+      this.processing = true
+      this.$axios
+        .$patch(`/api/api-keys/${this.apiKey.id}`, apiKey)
+        .then((data) => {
+          this.processing = false
+          if (data.error) {
+            this.$toast.error(`${this.$strings.ToastFailedToUpdate}: ${data.error}`)
+          } else {
+            this.show = false
+            this.$emit('updated', data.apiKey)
+          }
+        })
+        .catch((error) => {
+          this.processing = false
+          console.error('Failed to update apiKey', error)
+          var errMsg = error.response ? error.response.data || '' : ''
+          this.$toast.error(errMsg || this.$strings.ToastFailedToUpdate)
+        })
+    },
+    submitCreateApiKey() {
+      const apiKey = { ...this.newApiKey }
+
+      if (this.newApiKey.expiresIn) {
+        apiKey.expiresIn = parseInt(this.newApiKey.expiresIn)
+      } else {
+        delete apiKey.expiresIn
+      }
+
+      this.processing = true
+      this.$axios
+        .$post('/api/api-keys', apiKey)
+        .then((data) => {
+          this.processing = false
+          if (data.error) {
+            this.$toast.error(this.$strings.ToastFailedToCreate + ': ' + data.error)
+          } else {
+            this.show = false
+            this.$emit('created', data.apiKey)
+          }
+        })
+        .catch((error) => {
+          this.processing = false
+          console.error('Failed to create apiKey', error)
+          var errMsg = error.response ? error.response.data || '' : ''
+          this.$toast.error(errMsg || this.$strings.ToastFailedToCreate)
+        })
+    },
+    init() {
+      this.isNew = !this.apiKey
+
+      if (this.apiKey) {
+        this.newApiKey = {
+          name: this.apiKey.name,
+          isActive: this.apiKey.isActive,
+          userId: this.apiKey.userId
+        }
+      } else {
+        this.newApiKey = {
+          name: null,
+          expiresIn: null,
+          isActive: true,
+          userId: null
+        }
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
--- a/client/components/modals/BookmarksModal.vue
+++ b/client/components/modals/BookmarksModal.vue
@ -79,10 +79,10 @@ export default {
      return !this.bookmarks.find((bm) => Math.abs(this.currentTime - bm.time) < 1)
    },
    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
+      return this.$store.getters['getServerSetting']('dateFormat')
    },
    timeFormat() {
-      return this.$store.state.serverSettings.timeFormat
+      return this.$store.getters['getServerSetting']('timeFormat')
    }
  },
  methods: {
--- a/client/components/modals/ListeningSessionModal.vue
+++ b/client/components/modals/ListeningSessionModal.vue
@ -81,7 +81,7 @@
        </div>
        <div class="w-full md:w-1/3">
          <p v-if="!isMediaItemShareSession" class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">{{ $strings.LabelUser }}</p>
-          <p v-if="!isMediaItemShareSession" class="mb-1 text-xs">{{ _session.userId }}</p>
+          <p v-if="!isMediaItemShareSession" class="mb-1 text-xs">{{ username }}</p>

          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelMediaPlayer }}</p>
          <p class="mb-1">{{ playMethodName }}</p>
@ -132,6 +132,9 @@ export default {
    _session() {
      return this.session || {}
    },
+    username() {
+      return this._session.user?.username || this._session.userId || ''
+    },
    deviceInfo() {
      return this._session.deviceInfo || {}
    },
@ -159,10 +162,10 @@ export default {
      return 'Unknown'
    },
    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
+      return this.$store.getters['getServerSetting']('dateFormat')
    },
    timeFormat() {
-      return this.$store.state.serverSettings.timeFormat
+      return this.$store.getters['getServerSetting']('timeFormat')
    },
    isOpenSession() {
      return !!this._session.open
--- a/client/components/modals/Modal.vue
+++ b/client/components/modals/Modal.vue
@ -23,7 +23,7 @@ export default {
    processing: Boolean,
    persistent: {
      type: Boolean,
-      default: true
+      default: false
    },
    width: {
      type: [String, Number],
@ -99,7 +99,7 @@ export default {
        this.preventClickoutside = false
        return
      }
-      if (this.processing && this.persistent) return
+      if (this.processing || this.persistent) return
      if (ev.srcElement && ev.srcElement.classList.contains('modal-bg')) {
        this.show = false
      }
--- a/client/components/modals/ShareModal.vue
+++ b/client/components/modals/ShareModal.vue
@ -144,7 +144,7 @@ export default {
    expirationDateString() {
      if (!this.expireDurationSeconds) return this.$strings.LabelPermanent
      const dateMs = Date.now() + this.expireDurationSeconds * 1000
-      return this.$formatDatetime(dateMs, this.$store.state.serverSettings.dateFormat, this.$store.state.serverSettings.timeFormat)
+      return this.$formatDatetime(dateMs, this.$store.getters['getServerSetting']('dateFormat'), this.$store.getters['getServerSetting']('timeFormat'))
    }
  },
  methods: {
--- a/client/components/modals/changelog/ViewModal.vue
+++ b/client/components/modals/changelog/ViewModal.vue
@ -40,7 +40,7 @@ export default {
      }
    },
    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
+      return this.$store.getters['getServerSetting']('dateFormat')
    },
    releasesToShow() {
      return this.versionData?.releasesToShow || []
--- a/client/components/modals/item/tabs/Files.vue
+++ b/client/components/modals/item/tabs/Files.vue
@ -29,9 +29,6 @@ export default {
    media() {
      return this.libraryItem.media || {}
    },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
    userCanUpdate() {
      return this.$store.getters['user/getUserCanUpdate']
    },
--- a/client/components/modals/podcast/EpisodeFeed.vue
+++ b/client/components/modals/podcast/EpisodeFeed.vue
@ -35,7 +35,14 @@
              <widgets-podcast-type-indicator :type="episode.episodeType" />
            </div>
            <p v-if="episode.subtitle" class="mb-1 text-sm text-gray-300 line-clamp-2">{{ episode.subtitle }}</p>
-            <p class="text-xs text-gray-300">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
+            <div class="flex items-center space-x-2">
+              <!-- published -->
+              <p class="text-xs text-gray-300 w-40">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
+              <!-- duration -->
+              <p v-if="episode.durationSeconds && !isNaN(episode.durationSeconds)" class="text-xs text-gray-300 min-w-28">{{ $strings.LabelDuration }}: {{ $elapsedPretty(episode.durationSeconds) }}</p>
+              <!-- size -->
+              <p v-if="episode.enclosure?.length && !isNaN(episode.enclosure.length) && Number(episode.enclosure.length) > 0" class="text-xs text-gray-300">{{ $strings.LabelSize }}: {{ $bytesPretty(Number(episode.enclosure.length)) }}</p>
+            </div>
          </div>
        </div>
      </div>
--- a/client/components/modals/podcast/RemoveEpisode.vue
+++ b/client/components/modals/podcast/RemoveEpisode.vue
@ -11,7 +11,7 @@
          {{ $getString('MessageConfirmRemoveEpisode', [episodeTitle]) }}
        </p>
        <p v-else class="text-lg text-gray-200 mb-4">{{ $getString('MessageConfirmRemoveEpisodes', [episodes.length]) }}</p>
-        <p class="text-xs font-semibold text-warning/90">Note: This does not delete the audio file unless toggling "Hard delete file"</p>
+        <p class="text-xs font-semibold text-warning/90">{{ $strings.MessageConfirmRemoveEpisodeNote }}</p>
      </div>
      <div class="flex justify-between items-center pt-4">
        <ui-checkbox v-model="hardDeleteFile" :label="$strings.LabelHardDeleteFile" check-color="error" checkbox-bg="bg" small label-class="text-base text-gray-200 pl-3" />
--- a/client/components/modals/podcast/ViewEpisode.vue
+++ b/client/components/modals/podcast/ViewEpisode.vue
@ -16,7 +16,7 @@
        </div>
      </div>
      <p dir="auto" class="text-lg font-semibold mb-6">{{ title }}</p>
-      <div v-if="description" dir="auto" class="default-style less-spacing" v-html="description" />
+      <div v-if="description" dir="auto" class="default-style less-spacing" @click="handleDescriptionClick" v-html="description" />
      <p v-else class="mb-2">{{ $strings.MessageNoDescription }}</p>

      <div class="w-full h-px bg-white/5 my-4" />
@ -34,6 +34,12 @@
            {{ audioFileSize }}
          </p>
        </div>
+        <div class="grow">
+          <p class="font-semibold text-xs mb-1">{{ $strings.LabelDuration }}</p>
+          <p class="mb-2 text-xs">
+            {{ audioFileDuration }}
+          </p>
+        </div>
      </div>
    </div>
  </modals-modal>
@ -68,7 +74,7 @@ export default {
      return this.episode.title || 'No Episode Title'
    },
    description() {
-      return this.episode.description || ''
+      return this.parseDescription(this.episode.description || '')
    },
    media() {
      return this.libraryItem?.media || {}
@ -90,11 +96,49 @@ export default {

      return this.$bytesPretty(size)
    },
+    audioFileDuration() {
+      const duration = this.episode.duration || 0
+      return this.$elapsedPretty(duration)
+    },
    bookCoverAspectRatio() {
      return this.$store.getters['libraries/getBookCoverAspectRatio']
    }
  },
-  methods: {},
+  methods: {
+    handleDescriptionClick(e) {
+      if (e.target.matches('span.time-marker')) {
+        const time = parseInt(e.target.dataset.time)
+        if (!isNaN(time)) {
+          this.$eventBus.$emit('play-item', {
+            episodeId: this.episodeId,
+            libraryItemId: this.libraryItem.id,
+            startTime: time
+          })
+        }
+        e.preventDefault()
+      }
+    },
+    parseDescription(description) {
+      const timeMarkerLinkRegex = /<a href="#([^"]*?\b\d{1,2}:\d{1,2}(?::\d{1,2})?)">(.*?)<\/a>/g
+      const timeMarkerRegex = /\b\d{1,2}:\d{1,2}(?::\d{1,2})?\b/g
+
+      function convertToSeconds(time) {
+        const timeParts = time.split(':').map(Number)
+        return timeParts.reduce((acc, part, index) => acc * 60 + part, 0)
+      }
+
+      return description
+        .replace(timeMarkerLinkRegex, (match, href, displayTime) => {
+          const time = displayTime.match(timeMarkerRegex)[0]
+          const seekTimeInSeconds = convertToSeconds(time)
+          return `<span class="time-marker cursor-pointer text-blue-400 hover:text-blue-300" data-time="${seekTimeInSeconds}">${displayTime}</span>`
+        })
+        .replace(timeMarkerRegex, (match) => {
+          const seekTimeInSeconds = convertToSeconds(match)
+          return `<span class="time-marker cursor-pointer text-blue-400 hover:text-blue-300" data-time="${seekTimeInSeconds}">${match}</span>`
+        })
+    }
+  },
  mounted() {}
 }
 </script>
--- a/client/components/player/PlayerUi.vue
+++ b/client/components/player/PlayerUi.vue
@ -129,9 +129,6 @@ export default {
        return `${hoursRounded}h`
      }
    },
-    token() {
-      return this.$store.getters['user/getToken']
-    },
    timeRemaining() {
      if (this.useChapterTrack && this.currentChapter) {
        var currChapTime = this.currentTime - this.currentChapter.start
--- a/client/components/readers/ComicReader.vue
+++ b/client/components/readers/ComicReader.vue
@ -104,9 +104,6 @@ export default {
    }
  },
  computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
    libraryItemId() {
      return this.libraryItem?.id
    },
@ -234,10 +231,7 @@ export default {
    async extract() {
      this.loading = true
      var buff = await this.$axios.$get(this.ebookUrl, {
-        responseType: 'blob',
-        headers: {
-          Authorization: `Bearer ${this.userToken}`
-        }
+        responseType: 'blob'
      })
      const archive = await Archive.open(buff)
      const originalFilesObject = await archive.getFilesObject()
--- a/client/components/readers/EpubReader.vue
+++ b/client/components/readers/EpubReader.vue
@ -57,9 +57,6 @@ export default {
    }
  },
  computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
    /** @returns {string} */
    libraryItemId() {
      return this.libraryItem?.id
@ -97,27 +94,37 @@ export default {
    },
    ebookUrl() {
      if (this.fileId) {
-        return `${this.$config.routerBasePath}/api/items/${this.libraryItemId}/ebook/${this.fileId}`
+        return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
      }
-      return `${this.$config.routerBasePath}/api/items/${this.libraryItemId}/ebook`
+      return `/api/items/${this.libraryItemId}/ebook`
    },
    themeRules() {
-      const isDark = this.ereaderSettings.theme === 'dark'
-      const fontColor = isDark ? '#fff' : '#000'
-      const backgroundColor = isDark ? 'rgb(35 35 35)' : 'rgb(255, 255, 255)'
+      const theme = this.ereaderSettings.theme
+      const isDark = theme === 'dark'
+      const isSepia = theme === 'sepia'
+
+      const fontColor = isDark
+        ? '#fff'
+        : isSepia
+        ? '#5b4636'
+        : '#000'
+
+      const backgroundColor = isDark
+        ? 'rgb(35 35 35)'
+        : isSepia
+        ? 'rgb(244, 236, 216)'
+        : 'rgb(255, 255, 255)'

      const lineSpacing = this.ereaderSettings.lineSpacing / 100
-
-      const fontScale = this.ereaderSettings.fontScale / 100
-
-      const textStroke = this.ereaderSettings.textStroke / 100
+      const fontScale   = this.ereaderSettings.fontScale   / 100
+      const textStroke  = this.ereaderSettings.textStroke  / 100

      return {
        '*': {
          color: `${fontColor}!important`,
          'background-color': `${backgroundColor}!important`,
-          'line-height': lineSpacing * fontScale + 'rem!important',
-          '-webkit-text-stroke': textStroke + 'px ' + fontColor + '!important'
+          'line-height': `${lineSpacing * fontScale}rem!important`,
+          '-webkit-text-stroke': `${textStroke}px ${fontColor}!important`
        },
        a: {
          color: `${fontColor}!important`
@ -309,14 +316,24 @@ export default {
      /** @type {EpubReader} */
      const reader = this

+      // Use axios to make request because we have token refresh logic in interceptor
+      const customRequest = async (url) => {
+        try {
+          return this.$axios.$get(url, {
+            responseType: 'arraybuffer'
+          })
+        } catch (error) {
+          console.error('EpubReader.initEpub customRequest failed:', error)
+          throw error
+        }
+      }
+
      /** @type {ePub.Book} */
      reader.book = new ePub(reader.ebookUrl, {
        width: this.readerWidth,
        height: this.readerHeight - 50,
        openAs: 'epub',
-        requestHeaders: {
-          Authorization: `Bearer ${this.userToken}`
-        }
+        requestMethod: customRequest
      })

      /** @type {ePub.Rendition} */
@ -337,29 +354,33 @@ export default {
        this.applyTheme()
      })

-      reader.book.ready.then(() => {
-        // set up event listeners
-        reader.rendition.on('relocated', reader.relocated)
-        reader.rendition.on('keydown', reader.keyUp)
+      reader.book.ready
+        .then(() => {
+          // set up event listeners
+          reader.rendition.on('relocated', reader.relocated)
+          reader.rendition.on('keydown', reader.keyUp)

-        reader.rendition.on('touchstart', (event) => {
-          this.$emit('touchstart', event)
-        })
-        reader.rendition.on('touchend', (event) => {
-          this.$emit('touchend', event)
-        })
-
-        // load ebook cfi locations
-        const savedLocations = this.loadLocations()
-        if (savedLocations) {
-          reader.book.locations.load(savedLocations)
-        } else {
-          reader.book.locations.generate().then(() => {
-            this.checkSaveLocations(reader.book.locations.save())
+          reader.rendition.on('touchstart', (event) => {
+            this.$emit('touchstart', event)
          })
-        }
-        this.getChapters()
-      })
+          reader.rendition.on('touchend', (event) => {
+            this.$emit('touchend', event)
+          })
+
+          // load ebook cfi locations
+          const savedLocations = this.loadLocations()
+          if (savedLocations) {
+            reader.book.locations.load(savedLocations)
+          } else {
+            reader.book.locations.generate().then(() => {
+              this.checkSaveLocations(reader.book.locations.save())
+            })
+          }
+          this.getChapters()
+        })
+        .catch((error) => {
+          console.error('EpubReader.initEpub failed:', error)
+        })
    },
    getChapters() {
      // Load the list of chapters in the book. See https://github.com/futurepress/epub.js/issues/759
--- a/client/components/readers/MobiReader.vue
+++ b/client/components/readers/MobiReader.vue
@ -26,9 +26,6 @@ export default {
    return {}
  },
  computed: {
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
    libraryItemId() {
      return this.libraryItem?.id
    },
@ -96,11 +93,8 @@ export default {
    },
    async initMobi() {
      // Fetch mobi file as blob
-      var buff = await this.$axios.$get(this.ebookUrl, {
-        responseType: 'blob',
-        headers: {
-          Authorization: `Bearer ${this.userToken}`
-        }
+      const buff = await this.$axios.$get(this.ebookUrl, {
+        responseType: 'blob'
      })
      var reader = new FileReader()
      reader.onload = async (event) => {
--- a/client/components/readers/PdfReader.vue
+++ b/client/components/readers/PdfReader.vue
@ -55,7 +55,8 @@ export default {
      loadedRatio: 0,
      page: 1,
      numPages: 0,
-      pdfDocInitParams: null
+      pdfDocInitParams: null,
+      isRefreshing: false
    }
  },
  computed: {
@ -152,7 +153,34 @@ export default {
      this.page++
      this.updateProgress()
    },
-    error(err) {
+    async refreshToken() {
+      if (this.isRefreshing) return
+      this.isRefreshing = true
+      const newAccessToken = await this.$store.dispatch('user/refreshToken').catch((error) => {
+        console.error('Failed to refresh token', error)
+        return null
+      })
+      if (!newAccessToken) {
+        // Redirect to login on failed refresh
+        this.$router.push('/login')
+        return
+      }
+
+      // Force Vue to re-render the PDF component by creating a new object
+      this.pdfDocInitParams = {
+        url: this.ebookUrl,
+        httpHeaders: {
+          Authorization: `Bearer ${newAccessToken}`
+        }
+      }
+      this.isRefreshing = false
+    },
+    async error(err) {
+      if (err && err.status === 401) {
+        console.log('Received 401 error, refreshing token')
+        await this.refreshToken()
+        return
+      }
      console.error(err)
    },
    resize() {
--- a/client/components/readers/Reader.vue
+++ b/client/components/readers/Reader.vue
@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" id="reader" :data-theme="ereaderTheme" class="group absolute top-0 left-0 w-full z-60 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': !!streamLibraryItem }">
+  <div v-if="show" id="reader" :data-theme="ereaderTheme" class="group absolute top-0 left-0 w-full z-60 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black data-[theme=sepia]:bg-[rgb(244,236,216)] data-[theme=sepia]:text-[#5b4636]" :class="{ 'reader-player-open': !!streamLibraryItem }">
    <div class="absolute top-4 left-4 z-20 flex items-center">
      <button v-if="isEpub" @click="toggleToC" type="button" aria-label="Table of contents menu" class="inline-flex opacity-80 hover:opacity-100">
        <span class="material-symbols text-2xl">menu</span>
@ -27,7 +27,12 @@

    <!-- TOC side nav -->
    <div v-if="tocOpen" class="w-full h-full overflow-y-scroll absolute inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div>
-    <div v-if="isEpub" class="w-96 h-full max-h-full absolute top-0 left-0 shadow-xl transition-transform z-30 group-data-[theme=dark]:bg-primary group-data-[theme=dark]:text-white group-data-[theme=light]:bg-white group-data-[theme=light]:text-black" :class="tocOpen ? 'translate-x-0' : '-translate-x-96'" @click.stop.prevent>
+    <div
+      v-if="isEpub"
+      class="w-96 h-full max-h-full absolute top-0 left-0 shadow-xl transition-transform z-30 group-data-[theme=dark]:bg-primary group-data-[theme=dark]:text-white group-data-[theme=light]:bg-white group-data-[theme=light]:text-black group-data-[theme=sepia]:bg-[rgb(244,236,216)] group-data-[theme=sepia]:text-[#5b4636]"
+      :class="tocOpen ? 'translate-x-0' : '-translate-x-96'"
+      @click.stop.prevent
+    >
      <div class="flex flex-col p-4 h-full">
        <div class="flex items-center mb-2">
          <button @click.stop.prevent="toggleToC" type="button" aria-label="Close table of contents" class="inline-flex opacity-80 hover:opacity-100">
@ -37,7 +42,7 @@
          <p class="text-lg font-semibold ml-2">{{ $strings.HeaderTableOfContents }}</p>
        </div>
        <form @submit.prevent="searchBook" @click.stop.prevent>
-          <ui-text-input clearable ref="input" @clear="searchBook" v-model="searchQuery" :placeholder="$strings.PlaceholderSearch" class="h-8 w-full text-sm flex mb-2" />
+          <ui-text-input clearable ref="input" @clear="searchBook" v-model="searchQuery" :placeholder="$strings.PlaceholderSearch" custom-input-class="text-inherit !bg-inherit" class="h-8 w-full text-sm flex mb-2" />
        </form>

        <div class="overflow-y-auto">
@ -181,6 +186,10 @@ export default {
            text: this.$strings.LabelThemeDark,
            value: 'dark'
          },
+          {
+            text: this.$strings.LabelThemeSepia,
+            value: 'sepia'
+          },
          {
            text: this.$strings.LabelThemeLight,
            value: 'light'
@ -266,9 +275,6 @@ export default {
    isComic() {
      return this.ebookFormat == 'cbz' || this.ebookFormat == 'cbr'
    },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
    keepProgress() {
      return this.$store.state.ereaderKeepProgress
    },
--- a/client/components/tables/ApiKeysTable.vue
+++ b/client/components/tables/ApiKeysTable.vue
@ -0,0 +1,177 @@
+<template>
+  <div>
+    <div class="text-center">
+      <table v-if="apiKeys.length > 0" id="api-keys">
+        <tr>
+          <th>{{ $strings.LabelName }}</th>
+          <th class="w-44">{{ $strings.LabelApiKeyUser }}</th>
+          <th class="w-32">{{ $strings.LabelExpiresAt }}</th>
+          <th class="w-32">{{ $strings.LabelCreatedAt }}</th>
+          <th class="w-32"></th>
+        </tr>
+        <tr v-for="apiKey in apiKeys" :key="apiKey.id" :class="apiKey.isActive ? '' : 'bg-error/10!'">
+          <td>
+            <div class="flex items-center">
+              <p class="pl-2 truncate">{{ apiKey.name }}</p>
+            </div>
+          </td>
+          <td class="text-xs">
+            <nuxt-link v-if="apiKey.user" :to="`/config/users/${apiKey.user.id}`" class="text-xs hover:underline">
+              {{ apiKey.user.username }}
+            </nuxt-link>
+            <p v-else class="text-xs">Error</p>
+          </td>
+          <td class="text-xs">
+            <p v-if="apiKey.expiresAt" class="text-xs" :title="apiKey.expiresAt">{{ getExpiresAtText(apiKey) }}</p>
+            <p v-else class="text-xs">{{ $strings.LabelExpiresNever }}</p>
+          </td>
+          <td class="text-xs font-mono">
+            <ui-tooltip direction="top" :text="$formatJsDatetime(new Date(apiKey.createdAt), dateFormat, timeFormat)">
+              {{ $formatJsDate(new Date(apiKey.createdAt), dateFormat) }}
+            </ui-tooltip>
+          </td>
+          <td class="py-0">
+            <div class="w-full flex justify-left">
+              <div class="h-8 w-8 flex items-center justify-center text-white/50 hover:text-white/100 cursor-pointer" @click.stop="editApiKey(apiKey)">
+                <button type="button" :aria-label="$strings.ButtonEdit" class="material-symbols text-base">edit</button>
+              </div>
+              <div class="h-8 w-8 flex items-center justify-center text-white/50 hover:text-error cursor-pointer" @click.stop="deleteApiKeyClick(apiKey)">
+                <button type="button" :aria-label="$strings.ButtonDelete" class="material-symbols text-base">delete</button>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </table>
+      <p v-else class="text-base text-gray-300 py-4">{{ $strings.LabelNoApiKeys }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      apiKeys: [],
+      isDeletingApiKey: false
+    }
+  },
+  computed: {
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    timeFormat() {
+      return this.$store.state.serverSettings.timeFormat
+    }
+  },
+  methods: {
+    getExpiresAtText(apiKey) {
+      if (new Date(apiKey.expiresAt).getTime() < Date.now()) {
+        return this.$strings.LabelExpired
+      }
+      return this.$formatJsDatetime(new Date(apiKey.expiresAt), this.dateFormat, this.timeFormat)
+    },
+    deleteApiKeyClick(apiKey) {
+      if (this.isDeletingApiKey) return
+
+      const payload = {
+        message: this.$getString('MessageConfirmDeleteApiKey', [apiKey.name]),
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.deleteApiKey(apiKey)
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    deleteApiKey(apiKey) {
+      this.isDeletingApiKey = true
+      this.$axios
+        .$delete(`/api/api-keys/${apiKey.id}`)
+        .then((data) => {
+          if (data.error) {
+            this.$toast.error(data.error)
+          } else {
+            this.removeApiKey(apiKey.id)
+            this.$emit('numApiKeys', this.apiKeys.length)
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to delete apiKey', error)
+          this.$toast.error(this.$strings.ToastFailedToDelete)
+        })
+        .finally(() => {
+          this.isDeletingApiKey = false
+        })
+    },
+    editApiKey(apiKey) {
+      this.$emit('edit', apiKey)
+    },
+    addApiKey(apiKey) {
+      this.apiKeys.push(apiKey)
+    },
+    removeApiKey(apiKeyId) {
+      this.apiKeys = this.apiKeys.filter((a) => a.id !== apiKeyId)
+    },
+    updateApiKey(apiKey) {
+      this.apiKeys = this.apiKeys.map((a) => (a.id === apiKey.id ? apiKey : a))
+    },
+    loadApiKeys() {
+      this.$axios
+        .$get('/api/api-keys')
+        .then((res) => {
+          this.apiKeys = res.apiKeys.sort((a, b) => {
+            return a.createdAt - b.createdAt
+          })
+          this.$emit('numApiKeys', this.apiKeys.length)
+        })
+        .catch((error) => {
+          console.error('Failed to load apiKeys', error)
+        })
+    }
+  },
+  mounted() {
+    this.loadApiKeys()
+  }
+}
+</script>
+
+<style>
+#api-keys {
+  table-layout: fixed;
+  border-collapse: collapse;
+  border: 1px solid #474747;
+  width: 100%;
+}
+
+#api-keys td,
+#api-keys th {
+  /* border: 1px solid #2e2e2e; */
+  padding: 8px 8px;
+  text-align: left;
+}
+
+#api-keys td.py-0 {
+  padding: 0px 8px;
+}
+
+#api-keys tr:nth-child(even) {
+  background-color: #373838;
+}
+
+#api-keys tr:nth-child(odd) {
+  background-color: #2f2f2f;
+}
+
+#api-keys tr:hover {
+  background-color: #444;
+}
+
+#api-keys th {
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: #272727;
+}
+</style>
--- a/client/components/tables/BackupsTable.vue
+++ b/client/components/tables/BackupsTable.vue
@ -78,10 +78,10 @@ export default {
      return this.$store.getters['user/getToken']
    },
    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
+      return this.$store.getters['getServerSetting']('dateFormat')
    },
    timeFormat() {
-      return this.$store.state.serverSettings.timeFormat
+      return this.$store.getters['getServerSetting']('timeFormat')
    }
  },
  methods: {
--- a/client/components/tables/EbookFilesTable.vue
+++ b/client/components/tables/EbookFilesTable.vue
@ -49,9 +49,6 @@ export default {
    libraryItemId() {
      return this.libraryItem.id
    },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
    userCanDownload() {
      return this.$store.getters['user/getUserCanDownload']
    },
--- a/client/components/tables/LibraryFilesTable.vue
+++ b/client/components/tables/LibraryFilesTable.vue
@ -53,9 +53,6 @@ export default {
    libraryItemId() {
      return this.libraryItem.id
    },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
    userCanDownload() {
      return this.$store.getters['user/getUserCanDownload']
    },
--- a/client/components/tables/UsersTable.vue
+++ b/client/components/tables/UsersTable.vue
@ -76,10 +76,10 @@ export default {
      return usermap
    },
    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
+      return this.$store.getters['getServerSetting']('dateFormat')
    },
    timeFormat() {
-      return this.$store.state.serverSettings.timeFormat
+      return this.$store.getters['getServerSetting']('timeFormat')
    }
  },
  methods: {
--- a/client/components/tables/podcast/LazyEpisodeRow.vue
+++ b/client/components/tables/podcast/LazyEpisodeRow.vue
@ -112,7 +112,7 @@ export default {
      return this.episode?.publishedAt
    },
    dateFormat() {
-      return this.store.state.serverSettings.dateFormat
+      return this.store.getters['getServerSetting']('dateFormat')
    },
    itemProgress() {
      return this.store.getters['user/getUserMediaProgress'](this.libraryItemId, this.episodeId)
--- a/client/components/tables/podcast/LazyEpisodesTable.vue
+++ b/client/components/tables/podcast/LazyEpisodesTable.vue
@ -239,10 +239,10 @@ export default {
      })
    },
    dateFormat() {
-      return this.$store.state.serverSettings.dateFormat
+      return this.$store.getters['getServerSetting']('dateFormat')
    },
    timeFormat() {
-      return this.$store.state.serverSettings.timeFormat
+      return this.$store.getters['getServerSetting']('timeFormat')
    }
  },
  methods: {
--- a/client/components/ui/MultiSelectQueryInput.vue
+++ b/client/components/ui/MultiSelectQueryInput.vue
@ -85,9 +85,6 @@ export default {
        this.$emit('input', val)
      }
    },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
    wrapperClass() {
      var classes = []
      if (this.disabled) classes.push('bg-black-300')
--- a/client/components/ui/SelectInput.vue
+++ b/client/components/ui/SelectInput.vue
@ -1,9 +1,9 @@
 <template>
  <div class="relative w-full">
-    <p v-if="label" class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
+    <p v-if="label && !labelHidden" class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
    <button ref="buttonWrapper" type="button" :aria-label="longLabel" :disabled="disabled" class="relative w-full border rounded-sm shadow-xs 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 class="block truncate font-sans" :class="{ 'font-semibold': selectedSubtext, 'text-sm': small, 'text-gray-400': !selectedText }">{{ selectedText || placeholder }}</span>
        <span v-if="selectedSubtext">:&nbsp;</span>
        <span v-if="selectedSubtext" class="font-normal block truncate font-sans text-sm text-gray-400">{{ selectedSubtext }}</span>
      </span>
@ -36,10 +36,15 @@ export default {
      type: String,
      default: ''
    },
+    labelHidden: Boolean,
    items: {
      type: Array,
      default: () => []
    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
    disabled: Boolean,
    small: Boolean,
    menuMaxHeight: {
--- a/client/components/ui/TextInputWithLabel.vue
+++ b/client/components/ui/TextInputWithLabel.vue
@ -6,7 +6,7 @@
        <em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em>
      </label>
    </slot>
-    <ui-text-input :placeholder="placeholder || label" :inputId="identifier" ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :type="type" :show-copy="showCopy" class="w-full" :class="inputClass" :trim-whitespace="trimWhitespace" @blur="inputBlurred" />
+    <ui-text-input :placeholder="placeholder || label" :inputId="identifier" ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :type="type" :min="min" :show-copy="showCopy" class="w-full" :class="inputClass" :trim-whitespace="trimWhitespace" @blur="inputBlurred" />
  </div>
 </template>

@ -21,6 +21,7 @@ export default {
      type: String,
      default: 'text'
    },
+    min: [String, Number],
    readonly: Boolean,
    disabled: Boolean,
    inputClass: String,
--- a/client/components/ui/VueTrix.vue
+++ b/client/components/ui/VueTrix.vue
@ -31,7 +31,7 @@
        </div>
      </div>
    </trix-toolbar>
-    <trix-editor :toolbar="toolbarId" :contenteditable="!disabledEditor" :class="['trix-content']" ref="trix" :input="computedId" :placeholder="placeholder" @trix-change="handleContentChange" @trix-initialize="handleInitialize" @trix-focus="processTrixFocus" @trix-blur="processTrixBlur" />
+    <trix-editor :toolbar="toolbarId" :contenteditable="!disabledEditor" :class="['trix-content']" ref="trix" :input="computedId" :placeholder="placeholder" @trix-change="handleContentChange" @trix-initialize="handleInitialize" @trix-focus="processTrixFocus" @trix-blur="processTrixBlur" @trix-attachment-add="handleAttachmentAdd" />
    <input type="hidden" :name="inputName" :id="computedId" :value="editorContent" />
  </div>
 </template>
@ -316,6 +316,10 @@ export default {
      if (this.$refs.trix && this.$refs.trix.blur) {
        this.$refs.trix.blur()
      }
+    },
+    handleAttachmentAdd(event) {
+      // Prevent pasting in images/any files from the browser
+      event.attachment.remove()
    }
  },
  mounted() {
--- a/client/components/widgets/CronExpressionBuilder.vue
+++ b/client/components/widgets/CronExpressionBuilder.vue
@ -85,7 +85,7 @@ export default {
    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) || ''
+      return this.$formatJsDatetime(parsed, this.$store.getters['getServerSetting']('dateFormat'), this.$store.getters['getServerSetting']('timeFormat')) || ''
    },
    description() {
      if ((this.selectedInterval !== 'custom' || !this.selectedWeekdays.length) && this.selectedInterval !== 'daily') return ''
--- a/client/components/widgets/EncoderOptionsCard.vue
+++ b/client/components/widgets/EncoderOptionsCard.vue
@ -143,10 +143,18 @@ export default {
      localStorage.setItem('embedMetadataCodec', val)
    },
    getEncodingOptions() {
-      return {
-        codec: this.selectedCodec || 'aac',
-        bitrate: this.selectedBitrate || '128k',
-        channels: this.selectedChannels || 2
+      if (this.showAdvancedView) {
+        return {
+          codec: this.customCodec || this.selectedCodec || 'aac',
+          bitrate: this.customBitrate || this.selectedBitrate || '128k',
+          channels: this.customChannels || this.selectedChannels || 2
+        }
+      } else {
+        return {
+          codec: this.selectedCodec || 'aac',
+          bitrate: this.selectedBitrate || '128k',
+          channels: this.selectedChannels || 2
+        }
      }
    },
    setPreset() {
@ -162,7 +170,7 @@ export default {
      } else {
        // Find closest bitrate rounding up
        const bitratesToMatch = [32, 64, 128, 192]
-        const closestBitrate = bitratesToMatch.find((bitrate) => bitrate >= this.currentBitrate)
+        const closestBitrate = bitratesToMatch.find((bitrate) => bitrate >= this.currentBitrate) || 192
        this.selectedBitrate = closestBitrate + 'k'
      }

--- a/client/components/widgets/LoadingSpinner.vue
+++ b/client/components/widgets/LoadingSpinner.vue
@ -248,4 +248,4 @@ export default {
    transform: scale(0);
  }
 }
-</style>
+</style>
--- a/client/components/widgets/SeriesInputWidget.vue
+++ b/client/components/widgets/SeriesInputWidget.vue
@ -109,4 +109,4 @@ export default {
    }
  }
 }
-</script>
+</script>