Merge remote-tracking branch 'upstream/master'

client/pages/audiobook/_id/chapters.vue

@@ -21,13 +21,14 @@
           <ui-checkbox v-model="showSecondInputs" checkbox-bg="primary" small label-class="text-sm text-gray-200 pl-1" label="Show seconds" class="mx-2" />
           <div class="w-32 hidden lg:block" />
         </div>
-        <div class="flex items-center mb-3 py-1">
+        <div class="flex items-center mb-3 py-1 -mx-1">
           <div class="w-12 hidden lg:block" />
-          <ui-btn v-if="newChapters.length > 1" :color="showShiftTimes ? 'bg' : 'primary'" small @click="showShiftTimes = !showShiftTimes">{{ $strings.ButtonShiftTimes }}</ui-btn>
-          <ui-btn color="primary" small class="mx-2" @click="showFindChaptersModal = true">{{ $strings.ButtonLookup }}</ui-btn>
+          <ui-btn v-if="chapters.length" color="primary" small class="mx-1" @click.stop="removeAllChaptersClick">{{ $strings.ButtonRemoveAll }}</ui-btn>
+          <ui-btn v-if="newChapters.length > 1" :color="showShiftTimes ? 'bg' : 'primary'" class="mx-1" small @click="showShiftTimes = !showShiftTimes">{{ $strings.ButtonShiftTimes }}</ui-btn>
+          <ui-btn color="primary" small :class="{ 'mx-1': newChapters.length > 1 }" @click="showFindChaptersModal = true">{{ $strings.ButtonLookup }}</ui-btn>
           <div class="flex-grow" />
-          <ui-btn v-if="hasChanges" small class="mx-2" @click.stop="resetChapters">{{ $strings.ButtonReset }}</ui-btn>
-          <ui-btn v-if="hasChanges" color="success" :disabled="!hasChanges" small @click="saveChapters">{{ $strings.ButtonSave }}</ui-btn>
+          <ui-btn v-if="hasChanges" small class="mx-1" @click.stop="resetChapters">{{ $strings.ButtonReset }}</ui-btn>
+          <ui-btn v-if="hasChanges" color="success" class="mx-1" :disabled="!hasChanges" small @click="saveChapters">{{ $strings.ButtonSave }}</ui-btn>
           <div class="w-32 hidden lg:block" />
         </div>
 
@@ -41,7 +42,7 @@
                   <ui-text-input v-model="shiftAmount" type="number" class="max-w-20" style="height: 30px" />
                   <ui-btn color="primary" class="mx-1" small @click="shiftChapterTimes">{{ $strings.ButtonAdd }}</ui-btn>
                   <div class="flex-grow" />
-                  <span class="material-icons text-gray-200 hover:text-white cursor-pointer" @click="showShiftTimes = false">close</span>
+                  <span class="material-icons text-gray-200 hover:text-white cursor-pointer" @click="showShiftTimes = false">expand_less</span>
                 </div>
                 <p class="text-xs py-1.5 text-gray-300 max-w-md">{{ $strings.NoteChapterEditorTimes }}</p>
               </div>
@@ -329,6 +330,7 @@ export default {
           chap.start = Math.max(0, chap.start + amount)
         }
       }
+      this.checkChapters()
     },
     editItem() {
       this.$store.commit('showEditModal', this.libraryItem)
@@ -587,6 +589,45 @@ export default {
         ]
       }
       this.checkChapters()
+    },
+    removeAllChaptersClick() {
+      const payload = {
+        message: this.$strings.MessageConfirmRemoveAllChapters,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.removeAllChapters()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    removeAllChapters() {
+      this.saving = true
+      const payload = {
+        chapters: []
+      }
+      this.$axios
+        .$post(`/api/items/${this.libraryItem.id}/chapters`, payload)
+        .then((data) => {
+          if (data.updated) {
+            this.$toast.success('Chapters removed')
+            if (this.previousRoute) {
+              this.$router.push(this.previousRoute)
+            } else {
+              this.$router.push(`/item/${this.libraryItem.id}`)
+            }
+          } else {
+            this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to remove chapters', error)
+          this.$toast.error('Failed to remove chapters')
+        })
+        .finally(() => {
+          this.saving = false
+        })
     }
   },
   mounted() {

client/pages/audiobook/_id/manage.vue

@@ -17,24 +17,80 @@
           <p class="text-xl mb-1">{{ $strings.HeaderMetadataToEmbed }}</p>
           <p class="mb-2 text-base text-gray-300">audiobookshelf uses <a href="https://github.com/sandreas/tone" target="_blank" class="hover:underline text-blue-400 hover:text-blue-300">tone</a> to write metadata.</p>
         </div>
-        <div class="w-full max-w-2xl"></div>
+        <div class="w-full max-h-72 overflow-auto">
+          <template v-for="(value, key, index) in toneObject">
+            <div :key="key" class="flex py-1 px-4 text-sm" :class="index % 2 === 0 ? 'bg-primary bg-opacity-25' : ''">
+              <div class="w-1/3 font-semibold">{{ key }}</div>
+              <div class="w-2/3">
+                {{ value }}
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+      <div class="w-full max-w-2xl border border-white border-opacity-10 bg-bg mx-2">
+        <div class="flex py-2 px-4 bg-primary bg-opacity-25">
+          <div class="flex-grow text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelChapterTitle }}</div>
+          <div class="w-24 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelStart }}</div>
+          <div class="w-24 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelEnd }}</div>
+        </div>
+        <div class="w-full max-h-72 overflow-auto">
+          <p v-if="!metadataChapters.length" class="py-5 text-center text-gray-200">{{ $strings.MessageNoChapters }}</p>
+          <template v-for="(chapter, index) in metadataChapters">
+            <div :key="index" class="flex py-1 px-4 text-sm" :class="index % 2 === 1 ? 'bg-primary bg-opacity-25' : ''">
+              <div class="flex-grow font-semibold">{{ chapter.title }}</div>
+              <div class="w-24">
+                {{ $secondsToTimestamp(chapter.start) }}
+              </div>
+              <div class="w-24">
+                {{ $secondsToTimestamp(chapter.end) }}
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <div class="w-full h-px bg-white bg-opacity-10 my-8" />
+
+    <div class="w-full max-w-4xl mx-auto">
+      <!-- queued alert -->
+      <widgets-alert v-if="isMetadataEmbedQueued" type="warning" class="mb-4">
+        <p class="text-lg">Audiobook is queued for metadata embed ({{ queuedEmbedLIds.length }} in queue)</p>
+      </widgets-alert>
+      <!-- metadata embed action buttons -->
+      <div v-else-if="isEmbedTool" class="w-full flex justify-end items-center mb-4">
+        <ui-checkbox v-if="!isTaskFinished" v-model="shouldBackupAudioFiles" :disabled="processing" label="Backup audio files" medium checkbox-bg="bg" label-class="pl-2 text-base md:text-lg" @input="toggleBackupAudioFiles" />
+
+        <div class="flex-grow" />
+
+        <ui-btn v-if="!isTaskFinished" color="primary" :loading="processing" @click.stop="embedClick">{{ $strings.ButtonStartMetadataEmbed }}</ui-btn>
+        <p v-else class="text-success text-lg font-semibold">{{ $strings.MessageEmbedFinished }}</p>
+      </div>
+      <!-- m4b embed action buttons -->
+      <div v-else class="w-full flex items-center mb-4">
+        <button :disabled="processing" class="text-sm uppercase text-gray-200 flex items-center pt-px pl-1 pr-2 hover:bg-white/5 rounded-md" @click="showEncodeOptions = !showEncodeOptions">
+          <span class="material-icons text-xl">{{ showEncodeOptions ? 'check_box' : 'check_box_outline_blank' }}</span> <span class="pl-1">Use Advanced Options</span>
+        </button>
+
+        <div class="flex-grow" />
+
+        <ui-btn v-if="!isTaskFinished && processing" color="error" :loading="isCancelingEncode" class="mr-2" @click.stop="cancelEncodeClick">{{ $strings.ButtonCancelEncode }}</ui-btn>
+        <ui-btn v-if="!isTaskFinished" color="primary" :loading="processing" @click.stop="encodeM4bClick">{{ $strings.ButtonStartM4BEncode }}</ui-btn>
+        <p v-else-if="taskFailed" class="text-error text-lg font-semibold">{{ $strings.MessageM4BFailed }} {{ taskError }}</p>
+        <p v-else class="text-success text-lg font-semibold">{{ $strings.MessageM4BFinished }}</p>
       </div>
 
-      <div class="flex justify-center flex-wrap">
-        <div class="w-full max-w-2xl border border-white border-opacity-10 bg-bg mx-2">
-          <div class="flex py-2 px-4">
-            <div class="w-1/3 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelMetaTag }}</div>
-            <div class="w-2/3 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelValue }}</div>
-          </div>
-          <div class="w-full max-h-72 overflow-auto">
-            <template v-for="(value, key, index) in toneObject">
-              <div :key="key" class="flex py-1 px-4 text-sm" :class="index % 2 === 0 ? 'bg-primary bg-opacity-25' : ''">
-                <div class="w-1/3 font-semibold">{{ key }}</div>
-                <div class="w-2/3">
-                  {{ value }}
-                </div>
-              </div>
-            </template>
+      <!-- advanced encoding options -->
+      <div v-if="isM4BTool" class="overflow-hidden">
+        <transition name="slide">
+          <div v-if="showEncodeOptions" class="mb-4 pb-4 border-b border-white/10">
+            <div class="flex flex-wrap -mx-2">
+              <ui-text-input-with-label ref="bitrateInput" v-model="encodingOptions.bitrate" :disabled="processing || isTaskFinished" :label="'Audio Bitrate (e.g. 64k)'" class="m-2 max-w-40" />
+              <ui-text-input-with-label ref="channelsInput" v-model="encodingOptions.channels" :disabled="processing || isTaskFinished" :label="'Audio Channels (1 or 2)'" class="m-2 max-w-40" />
+              <ui-text-input-with-label ref="codecInput" v-model="encodingOptions.codec" :disabled="processing || isTaskFinished" :label="'Audio Codec'" class="m-2 max-w-40" />
+            </div>
+            <p class="text-sm text-warning">Warning: Do not update these settings unless you are familiar with ffmpeg encoding options.</p>
           </div>
         </div>
         <div class="w-full max-w-2xl border border-white border-opacity-10 bg-bg mx-2">
@@ -242,6 +298,7 @@ export default {
       cnosole.error('No audio files')
       return redirect('/?error=no audio files')
     }
+
     return {
       libraryItem
     }
@@ -251,7 +308,6 @@ export default {
       processing: false,
       audiofilesEncoding: {},
       audiofilesFinished: {},
-      isFinished: false,
       toneObject: null,
       selectedTool: 'embed',
       isCancelingEncode: false,
@@ -336,11 +392,28 @@ export default {
     isTaskFinished() {
       return this.task && this.task.isFinished
     },
+    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')
+    },
     task() {
-      return this.$store.getters['tasks/getTaskByLibraryItemId'](this.libraryItemId)
+      if (this.isEmbedTool) return this.embedTask
+      else if (this.isM4BTool) return this.encodeTask
+      return null
     },
     taskRunning() {
       return this.task && !this.task.isFinished
+    },
+    queuedEmbedLIds() {
+      return this.$store.state.tasks.queuedEmbedLIds || []
+    },
+    isMetadataEmbedQueued() {
+      return this.queuedEmbedLIds.some((lid) => lid === this.libraryItemId)
     }
   },
   methods: {
@@ -386,7 +459,7 @@ export default {
         .catch((error) => {
           var errorMsg = error.response ? error.response.data || 'Unknown Error' : 'Unknown Error'
           this.$toast.error(errorMsg)
-          this.processing = true
+          this.processing = false
         })
     },
     embedClick() {
@@ -448,24 +521,6 @@ export default {
           this.processing = false
         })
     },
-    audioMetadataStarted(data) {
-      console.log('audio metadata started', data)
-      if (data.libraryItemId !== this.libraryItemId) return
-      this.audiofilesFinished = {}
-    },
-    audioMetadataFinished(data) {
-      console.log('audio metadata finished', data)
-      if (data.libraryItemId !== this.libraryItemId) return
-      this.processing = false
-      this.audiofilesEncoding = {}
-
-      if (data.failed) {
-        this.$toast.error(data.error)
-      } else {
-        this.isFinished = true
-        this.$toast.success('Audio file metadata updated')
-      }
-    },
     audiofileMetadataStarted(data) {
       if (data.libraryItemId !== this.libraryItemId) return
       this.$set(this.audiofilesEncoding, data.ino, true)
@@ -525,14 +580,10 @@ export default {
   },
   mounted() {
     this.init()
-    this.$root.socket.on('audio_metadata_started', this.audioMetadataStarted)
-    this.$root.socket.on('audio_metadata_finished', this.audioMetadataFinished)
     this.$root.socket.on('audiofile_metadata_started', this.audiofileMetadataStarted)
     this.$root.socket.on('audiofile_metadata_finished', this.audiofileMetadataFinished)
   },
   beforeDestroy() {
-    this.$root.socket.off('audio_metadata_started', this.audioMetadataStarted)
-    this.$root.socket.off('audio_metadata_finished', this.audioMetadataFinished)
     this.$root.socket.off('audiofile_metadata_started', this.audiofileMetadataStarted)
     this.$root.socket.off('audiofile_metadata_finished', this.audiofileMetadataFinished)
   }