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

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()
       }

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

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" />

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>