Add progress and fixes to m4b and embed tools

client/components/ui/Btn.vue

@@ -10,7 +10,8 @@
   <button v-else class="abs-btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @mousedown.prevent @click="click">
     <slot />
     <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
-      <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
+      <span v-if="progress">{{ progress }}</span>
+      <svg v-else class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
       </svg>
     </div>
@@ -33,7 +34,8 @@ export default {
     paddingY: Number,
     small: Boolean,
     loading: Boolean,
-    disabled: Boolean
+    disabled: Boolean,
+    progress: String
   },
   data() {
     return {}

client/layouts/default.vue

@@ -212,6 +212,16 @@ export default {
         this.libraryItemAdded(ab)
       })
     },
+    trackStarted(data) {
+      this.$store.commit('tasks/updateAudioFilesEncoding', { libraryItemId: data.libraryItemId, ino: data.ino, progress: '0%' })
+    },
+    trackProgress(data) {
+      this.$store.commit('tasks/updateAudioFilesEncoding', { libraryItemId: data.libraryItemId, ino: data.ino, progress: `${Math.round(data.progress)}%` })
+    },
+    trackFinished(data) {
+      this.$store.commit('tasks/updateAudioFilesEncoding', { libraryItemId: data.libraryItemId, ino: data.ino, progress: '100%' })
+      this.$store.commit('tasks/updateAudioFilesFinished', { libraryItemId: data.libraryItemId, ino: data.ino, finished: true })
+    },
     taskStarted(task) {
       console.log('Task started', task)
       this.$store.commit('tasks/addUpdateTask', task)
@@ -220,6 +230,9 @@ export default {
       console.log('Task finished', task)
       this.$store.commit('tasks/addUpdateTask', task)
     },
+    taskProgress(data) {
+      this.$store.commit('tasks/updateTaskProgress', { libraryItemId: data.libraryItemId, progress: `${Math.round(data.progress)}%` })
+    },
     metadataEmbedQueueUpdate(data) {
       if (data.queued) {
         this.$store.commit('tasks/addQueuedEmbedLId', data.libraryItemId)
@@ -406,6 +419,10 @@ export default {
       this.socket.on('task_started', this.taskStarted)
       this.socket.on('task_finished', this.taskFinished)
       this.socket.on('metadata_embed_queue_update', this.metadataEmbedQueueUpdate)
+      this.socket.on('track_started', this.trackStarted)
+      this.socket.on('track_finished', this.trackFinished)
+      this.socket.on('track_progress', this.trackProgress)
+      this.socket.on('task_progress', this.taskProgress)
 
       // EReader Device Listeners
       this.socket.on('ereader-devices-updated', this.ereaderDevicesUpdated)

client/pages/audiobook/_id/manage.vue

@@ -71,7 +71,8 @@
 
         <div class="flex-grow" />
 
-        <ui-btn v-if="!isTaskFinished" color="primary" :loading="processing" @click.stop="embedClick">{{ $strings.ButtonStartMetadataEmbed }}</ui-btn>
+        <ui-btn v-if="!isTaskFinished" color="primary" :loading="processing" :progress="progress" @click.stop="embedClick">{{ $strings.ButtonStartMetadataEmbed }}</ui-btn>
+        <p v-else-if="taskFailed" class="text-error text-lg font-semibold">{{ $strings.MessageEmbedFailed }} {{ taskError }}</p>
         <p v-else class="text-success text-lg font-semibold">{{ $strings.MessageEmbedFinished }}</p>
       </div>
       <!-- m4b embed action buttons -->
@@ -83,7 +84,7 @@
         <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>
+        <ui-btn v-if="!isTaskFinished" color="primary" :loading="processing" :progress="progress" @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>
@@ -159,9 +160,9 @@
             </div>
             <div class="w-24">
               <div class="flex justify-center">
-                <span v-if="audiofilesFinished[file.ino]" class="material-symbols text-xl text-success leading-none">check_circle</span>
-                <div v-else-if="audiofilesEncoding[file.ino]">
-                  <widgets-loading-spinner />
+                <span v-if="audioFilesFinished[file.ino]" class="material-symbols text-xl text-success leading-none">check_circle</span>
+                <div v-else-if="audioFilesEncoding[file.ino]">
+                  <span class="font-mono text-success leading-none">{{ audioFilesEncoding[file.ino] }}</span>
                 </div>
               </div>
             </div>
@@ -205,8 +206,6 @@ export default {
   data() {
     return {
       processing: false,
-      audiofilesEncoding: {},
-      audiofilesFinished: {},
       metadataObject: null,
       selectedTool: 'embed',
       isCancelingEncode: false,
@@ -229,6 +228,15 @@ export default {
     }
   },
   computed: {
+    audioFilesEncoding() {
+      return this.$store.getters['tasks/getAudioFilesEncoding'](this.libraryItemId) || {}
+    },
+    audioFilesFinished() {
+      return this.$store.getters['tasks/getAudioFilesFinished'](this.libraryItemId) || {}
+    },
+    progress() {
+      return this.$store.getters['tasks/getTaskProgress'](this.libraryItemId) || '0%'
+    },
     isEmbedTool() {
       return this.selectedTool === 'embed'
     },
@@ -372,15 +380,6 @@ export default {
           this.processing = false
         })
     },
-    audiofileMetadataStarted(data) {
-      if (data.libraryItemId !== this.libraryItemId) return
-      this.$set(this.audiofilesEncoding, data.ino, true)
-    },
-    audiofileMetadataFinished(data) {
-      if (data.libraryItemId !== this.libraryItemId) return
-      this.$set(this.audiofilesEncoding, data.ino, false)
-      this.$set(this.audiofilesFinished, data.ino, true)
-    },
     selectedToolUpdated() {
       let newurl = window.location.protocol + '//' + window.location.host + window.location.pathname + `?tool=${this.selectedTool}`
       window.history.replaceState({ path: newurl }, '', newurl)
@@ -416,12 +415,6 @@ export default {
   },
   mounted() {
     this.init()
-    this.$root.socket.on('audiofile_metadata_started', this.audiofileMetadataStarted)
-    this.$root.socket.on('audiofile_metadata_finished', this.audiofileMetadataFinished)
-  },
-  beforeDestroy() {
-    this.$root.socket.off('audiofile_metadata_started', this.audiofileMetadataStarted)
-    this.$root.socket.off('audiofile_metadata_finished', this.audiofileMetadataFinished)
   }
 }
 </script>

client/store/tasks.js

@@ -1,34 +1,60 @@
+import Vue from 'vue'
 
 export const state = () => ({
   tasks: [],
-  queuedEmbedLIds: []
+  queuedEmbedLIds: [],
+  audioFilesEncoding: {},
+  audioFilesFinished: {},
+  taskProgress: {}
 })
 
 export const getters = {
   getTasksByLibraryItemId: (state) => (libraryItemId) => {
-    return state.tasks.filter(t => t.data?.libraryItemId === libraryItemId)
+    return state.tasks.filter((t) => t.data?.libraryItemId === libraryItemId)
   },
   getRunningLibraryScanTask: (state) => (libraryId) => {
     const libraryScanActions = ['library-scan', 'library-match-all']
-    return state.tasks.find(t => libraryScanActions.includes(t.action) && t.data?.libraryId === libraryId && !t.isFinished)
+    return state.tasks.find((t) => libraryScanActions.includes(t.action) && t.data?.libraryId === libraryId && !t.isFinished)
+  },
+  getAudioFilesEncoding: (state) => (libraryItemId) => {
+    return state.audioFilesEncoding[libraryItemId]
+  },
+  getAudioFilesFinished: (state) => (libraryItemId) => {
+    return state.audioFilesFinished[libraryItemId]
+  },
+  getTaskProgress: (state) => (libraryItemId) => {
+    return state.taskProgress[libraryItemId]
   }
 }
 
-export const actions = {
-
-}
+export const actions = {}
 
 export const mutations = {
+  updateAudioFilesEncoding(state, payload) {
+    if (!state.audioFilesEncoding[payload.libraryItemId]) {
+      Vue.set(state.audioFilesEncoding, payload.libraryItemId, {})
+    }
+    Vue.set(state.audioFilesEncoding[payload.libraryItemId], payload.ino, payload.progress)
+  },
+  updateAudioFilesFinished(state, payload) {
+    if (!state.audioFilesFinished[payload.libraryItemId]) {
+      Vue.set(state.audioFilesFinished, payload.libraryItemId, {})
+    }
+    Vue.set(state.audioFilesFinished[payload.libraryItemId], payload.ino, payload.finished)
+  },
+  updateTaskProgress(state, payload) {
+    Vue.set(state.taskProgress, payload.libraryItemId, payload.progress)
+  },
   setTasks(state, tasks) {
     state.tasks = tasks
   },
   addUpdateTask(state, task) {
-    const index = state.tasks.findIndex(d => d.id === task.id)
+    const index = state.tasks.findIndex((d) => d.id === task.id)
     if (index >= 0) {
       state.tasks.splice(index, 1, task)
     } else {
       // Remove duplicate (only have one library item per action)
-      state.tasks = state.tasks.filter(_task => {
+      state.tasks = state.tasks.filter((_task) => {
         if (!_task.data?.libraryItemId || _task.action !== task.action) return true
         return _task.data.libraryItemId !== task.data.libraryItemId
       })
@@ -37,17 +63,17 @@ export const mutations = {
     }
   },
   removeTask(state, task) {
-    state.tasks = state.tasks.filter(d => d.id !== task.id)
+    state.tasks = state.tasks.filter((d) => d.id !== task.id)
   },
   setQueuedEmbedLIds(state, libraryItemIds) {
     state.queuedEmbedLIds = libraryItemIds
   },
   addQueuedEmbedLId(state, libraryItemId) {
-    if (!state.queuedEmbedLIds.some(lid => lid === libraryItemId)) {
+    if (!state.queuedEmbedLIds.some((lid) => lid === libraryItemId)) {
       state.queuedEmbedLIds.push(libraryItemId)
     }
   },
   removeQueuedEmbedLId(state, libraryItemId) {
-    state.queuedEmbedLIds = state.queuedEmbedLIds.filter(lid => lid !== libraryItemId)
+    state.queuedEmbedLIds = state.queuedEmbedLIds.filter((lid) => lid !== libraryItemId)
   }
-}
+}

client/strings/en-us.json

@@ -668,6 +668,7 @@
   "MessageConfirmSendEbookToDevice": "Are you sure you want to send {0} ebook \"{1}\" to device \"{2}\"?",
   "MessageDownloadingEpisode": "Downloading episode",
   "MessageDragFilesIntoTrackOrder": "Drag files into correct track order",
+  "MessageEmbedFailed": "Embed Failed!",
   "MessageEmbedFinished": "Embed Finished!",
   "MessageEpisodesQueuedForDownload": "{0} Episode(s) queued for download",
   "MessageEreaderDevices": "To ensure delivery of ebooks, you may need to add the above email address as a valid sender for each device listed below.",