Merge branch 'master' of https://github.com/tagmeh/audiobookshelf

2025-12-31 08:09:39 +00:00 · 2025-07-05 00:31:57 -05:00 · 2025-07-05 00:31:57 -05:00 · 6edfcfb271
commit 6edfcfb271
parent 42eb4e3f04 df60aeb456
70 changed files with 2272 additions and 509 deletions
--- a/client/components/app/BookShelfCategorized.vue
+++ b/client/components/app/BookShelfCategorized.vue
@ -217,6 +217,16 @@ export default {
        })
      }

+      if (this.results.episodes?.length) {
+        shelves.push({
+          id: 'episodes',
+          label: 'Episodes',
+          labelStringKey: 'LabelEpisodes',
+          type: 'episode',
+          entities: this.results.episodes.map((res) => res.libraryItem)
+        })
+      }
+
      if (this.results.series?.length) {
        shelves.push({
          id: 'series',
--- a/client/components/cards/EpisodeSearchCard.vue
+++ b/client/components/cards/EpisodeSearchCard.vue
@ -0,0 +1,60 @@
+<template>
+  <div class="flex items-center h-full px-1 overflow-hidden">
+    <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    <div class="grow px-2 episodeSearchCardContent">
+      <p class="truncate text-sm">{{ episodeTitle }}</p>
+      <p class="text-xs text-gray-200 truncate">{{ podcastTitle }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    },
+    episode: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    coverWidth() {
+      if (this.bookCoverAspectRatio === 1) return 50 * 1.2
+      return 50
+    },
+    media() {
+      return this.libraryItem?.media || {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    episodeTitle() {
+      return this.episode.title || 'No Title'
+    },
+    podcastTitle() {
+      return this.mediaMetadata.title || 'No Title'
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.episodeSearchCardContent {
+  width: calc(100% - 80px);
+  height: 75px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>
--- a/client/components/controls/GlobalSearch.vue
+++ b/client/components/controls/GlobalSearch.vue
@ -39,6 +39,15 @@
            </li>
          </template>

+          <p v-if="episodeResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelEpisodes }}</p>
+          <template v-for="item in episodeResults">
+            <li :key="item.libraryItem.recentEpisode.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+              <nuxt-link :to="`/item/${item.libraryItem.id}`">
+                <cards-episode-search-card :episode="item.libraryItem.recentEpisode" :library-item="item.libraryItem" />
+              </nuxt-link>
+            </li>
+          </template>
+
          <p v-if="authorResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelAuthors }}</p>
          <template v-for="item in authorResults">
            <li :key="item.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
@ -100,6 +109,7 @@ export default {
      isFetching: false,
      search: null,
      podcastResults: [],
+      episodeResults: [],
      bookResults: [],
      authorResults: [],
      seriesResults: [],
@ -115,7 +125,7 @@ export default {
      return this.$store.state.libraries.currentLibraryId
    },
    totalResults() {
-      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.genreResults.length + this.podcastResults.length + this.narratorResults.length
+      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.genreResults.length + this.podcastResults.length + this.narratorResults.length + this.episodeResults.length
    }
  },
  methods: {
@ -132,6 +142,7 @@ export default {
      this.search = null
      this.lastSearch = null
      this.podcastResults = []
+      this.episodeResults = []
      this.bookResults = []
      this.authorResults = []
      this.seriesResults = []
@ -175,6 +186,7 @@ export default {
      if (!this.isFetching) return

      this.podcastResults = searchResults.podcast || []
+      this.episodeResults = searchResults.episodes || []
      this.bookResults = searchResults.book || []
      this.authorResults = searchResults.authors || []
      this.seriesResults = searchResults.series || []
--- 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/modals/EditSeriesInputInnerModal.vue
+++ b/client/components/modals/EditSeriesInputInnerModal.vue
@ -14,6 +14,7 @@
              <ui-text-input-with-label ref="sequenceInput" v-model="selectedSeries.sequence" :label="$strings.LabelSequence" />
            </div>
          </div>
+          <div v-if="error" class="text-error text-sm mt-2 p-1">{{ error }}</div>
          <div class="flex justify-end mt-2 p-1">
            <ui-btn type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
          </div>
@ -34,12 +35,17 @@ export default {
    existingSeriesNames: {
      type: Array,
      default: () => []
+    },
+    originalSeriesSequence: {
+      type: String,
+      default: null
    }
  },
  data() {
    return {
      el: null,
-      content: null
+      content: null,
+      error: null
    }
  },
  watch: {
@ -85,10 +91,17 @@ export default {
      }
    },
    submitSeriesForm() {
+      this.error = null
+
      if (this.$refs.newSeriesSelect) {
        this.$refs.newSeriesSelect.blur()
      }

+      if (this.selectedSeries.sequence !== this.originalSeriesSequence && this.selectedSeries.sequence.includes(' ')) {
+        this.error = this.$strings.MessageSeriesSequenceCannotContainSpaces
+        return
+      }
+
      this.$emit('submit')
    },
    clickClose() {
@ -100,6 +113,7 @@ export default {
      }
    },
    setShow() {
+      this.error = null
      if (!this.el || !this.content) {
        this.init()
      }
--- 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>
@ -244,8 +251,8 @@ export default {
      const sizeInMb = payloadSize / 1024 / 1024
      const sizeInMbPretty = sizeInMb.toFixed(2) + 'MB'
      console.log('Request size', sizeInMb)
-      if (sizeInMb > 4.99) {
-        return this.$toast.error(`Request is too large (${sizeInMbPretty}) should be < 5Mb`)
+      if (sizeInMb > 9.99) {
+        return this.$toast.error(`Request is too large (${sizeInMbPretty}) should be < 10Mb`)
      }

      this.processing = true
--- 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/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/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
@ -2,7 +2,7 @@
  <div>
    <ui-multi-select-query-input v-model="seriesItems" text-key="displayName" :label="$strings.LabelSeries" :disabled="disabled" readonly show-edit @edit="editSeriesItem" @add="addNewSeries" />

-    <modals-edit-series-input-inner-modal v-model="showSeriesForm" :selected-series="selectedSeries" :existing-series-names="existingSeriesNames" @submit="submitSeriesForm" />
+    <modals-edit-series-input-inner-modal v-model="showSeriesForm" :selected-series="selectedSeries" :existing-series-names="existingSeriesNames" :original-series-sequence="originalSeriesSequence" @submit="submitSeriesForm" />
  </div>
 </template>

@ -18,6 +18,7 @@ export default {
  data() {
    return {
      selectedSeries: null,
+      originalSeriesSequence: null,
      showSeriesForm: false
    }
  },
@ -59,6 +60,7 @@ export default {
        ..._series
      }

+      this.originalSeriesSequence = _series.sequence
      this.showSeriesForm = true
    },
    addNewSeries() {
@ -68,6 +70,7 @@ export default {
        sequence: ''
      }

+      this.originalSeriesSequence = null
      this.showSeriesForm = true
    },
    submitSeriesForm() {
@ -106,4 +109,4 @@ export default {
    }
  }
 }
-</script>
+</script>