Add:Batch embed metadata and queue system for metadata embedding #700

2025-12-10 13:59:40 +00:00 · 2023-04-02 16:13:18 -05:00 · 2023-04-02 16:13:18 -05:00 · 034b8956a2
commit 034b8956a2
parent 1a3f0e332e
11 changed files with 402 additions and 209 deletions
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@ -58,9 +58,6 @@
          <span class="material-icons text-2xl -ml-2 pr-1 text-white">play_arrow</span>
          {{ $strings.ButtonPlay }}
        </ui-btn>
-        <ui-tooltip v-if="userIsAdminOrUp && isBookLibrary" :text="$strings.ButtonQuickMatch" direction="bottom">
-          <ui-icon-btn :disabled="processingBatch" icon="auto_awesome" @click="batchAutoMatchClick" class="mx-1.5" />
-        </ui-tooltip>
        <ui-tooltip v-if="isBookLibrary" :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
          <ui-read-icon-btn :disabled="processingBatch" :is-read="selectedIsFinished" @click="toggleBatchRead" class="mx-1.5" />
        </ui-tooltip>
@ -75,8 +72,11 @@
        <ui-tooltip v-if="userCanDelete" :text="$strings.ButtonRemove" direction="bottom">
          <ui-icon-btn :disabled="processingBatch" icon="delete" bg-color="error" class="mx-1.5" @click="batchDeleteClick" />
        </ui-tooltip>
-        <ui-tooltip :text="$strings.LabelDeselectAll" direction="bottom">
-          <span class="material-icons text-4xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatch ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
+
+        <ui-context-menu-dropdown v-if="contextMenuItems.length && !processingBatch" :items="contextMenuItems" class="ml-1" @action="contextMenuAction" />
+
+        <ui-tooltip :text="$strings.LabelDeselectAll" direction="bottom" class="flex items-center">
+          <span class="material-icons text-3xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatch ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
        </ui-tooltip>
      </div>
    </div>
@ -160,9 +160,59 @@ export default {
    },
    isHttps() {
      return location.protocol === 'https:' || process.env.NODE_ENV === 'development'
+    },
+    contextMenuItems() {
+      if (!this.userIsAdminOrUp) return []
+
+      const options = [
+        {
+          text: this.$strings.ButtonQuickMatch,
+          action: 'quick-match'
+        }
+      ]
+
+      if (!this.isPodcastLibrary && this.selectedMediaItemsArePlayable) {
+        options.push({
+          text: 'Quick Embed Metadata',
+          action: 'quick-embed'
+        })
+      }
+
+      return options
    }
  },
  methods: {
+    requestBatchQuickEmbed() {
+      const payload = {
+        message: 'Warning! Quick embed will not backup your audio files. Make sure that you have a backup of your audio files. <br><br>Would you like to continue?',
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.$axios
+              .$post(`/api/tools/batch/embed-metadata`, {
+                libraryItemIds: this.selectedMediaItems.map((i) => i.id)
+              })
+              .then(() => {
+                console.log('Audio metadata embed started')
+                this.cancelSelectionMode()
+              })
+              .catch((error) => {
+                console.error('Audio metadata embed failed', error)
+                const errorMsg = error.response.data || 'Failed to embed metadata'
+                this.$toast.error(errorMsg)
+              })
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    contextMenuAction(action) {
+      if (action === 'quick-embed') {
+        this.requestBatchQuickEmbed()
+      } else if (action === 'quick-match') {
+        this.batchAutoMatchClick()
+      }
+    },
    async playSelectedItems() {
      this.$store.commit('setProcessingBatch', true)

--- a/client/components/modals/item/tabs/Tools.vue
+++ b/client/components/modals/item/tabs/Tools.vue
@ -46,8 +46,20 @@
            >{{ $strings.ButtonOpenManager }}
            <span class="material-icons text-lg ml-2">launch</span>
          </ui-btn>
+
+          <ui-btn v-if="!isMetadataEmbedQueued && !isEmbedTaskRunning" class="w-full mt-4" small @click.stop="quickEmbed">Quick Embed</ui-btn>
        </div>
      </div>
+
+      <!-- queued alert -->
+      <widgets-alert v-if="isMetadataEmbedQueued" type="warning" class="mt-4">
+        <p class="text-lg">Queued for metadata embed ({{ queuedEmbedLIds.length }} in queue)</p>
+      </widgets-alert>
+
+      <!-- processing alert -->
+      <widgets-alert v-if="isEmbedTaskRunning" type="warning" class="mt-4">
+        <p class="text-lg">Currently embedding metadata</p>
+      </widgets-alert>
    </div>

    <p v-if="!mediaTracks.length" class="text-lg text-center my-8">{{ $strings.MessageNoAudioTracks }}</p>
@ -71,10 +83,10 @@ export default {
      return this.$store.state.showExperimentalFeatures
    },
    libraryItemId() {
-      return this.libraryItem ? this.libraryItem.id : null
+      return this.libraryItem?.id || null
    },
    media() {
-      return this.libraryItem ? this.libraryItem.media || {} : {}
+      return this.libraryItem?.media || {}
    },
    mediaTracks() {
      return this.media.tracks || []
@ -92,9 +104,49 @@ export default {
    showMp3Split() {
      if (!this.mediaTracks.length) return false
      return this.isSingleM4b && this.chapters.length
+    },
+    queuedEmbedLIds() {
+      return this.$store.state.tasks.queuedEmbedLIds || []
+    },
+    isMetadataEmbedQueued() {
+      return this.queuedEmbedLIds.some((lid) => lid === this.libraryItemId)
+    },
+    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')
+    },
+    isEmbedTaskRunning() {
+      return this.embedTask && !this.embedTask?.isFinished
+    },
+    isEncodeTaskRunning() {
+      return this.encodeTask && !this.encodeTask?.isFinished
    }
  },
-  methods: {},
-  mounted() {}
+  methods: {
+    quickEmbed() {
+      const payload = {
+        message: 'Warning! Quick embed will not backup your audio files. Make sure that you have a backup of your audio files. <br><br>Would you like to continue?',
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.$axios
+              .$post(`/api/tools/item/${this.libraryItemId}/embed-metadata`)
+              .then(() => {
+                console.log('Audio metadata encode started')
+              })
+              .catch((error) => {
+                console.error('Audio metadata encode failed', error)
+              })
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    }
+  }
 }
 </script>
--- a/client/components/widgets/NotificationWidget.vue
+++ b/client/components/widgets/NotificationWidget.vue
@ -73,6 +73,8 @@ export default {
          return `/library/${task.data.libraryId}/podcast/download-queue`
        case 'encode-m4b':
          return `/audiobook/${task.data.libraryItemId}/manage?tool=m4b`
+        case 'embed-metadata':
+          return `/audiobook/${task.data.libraryItemId}/manage?tool=embed`
        default:
          return ''
      }
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@ -278,6 +278,13 @@ export default {
      console.log('Task finished', task)
      this.$store.commit('tasks/addUpdateTask', task)
    },
+    metadataEmbedQueueUpdate(data) {
+      if (data.queued) {
+        this.$store.commit('tasks/addQueuedEmbedLId', data.libraryItemId)
+      } else {
+        this.$store.commit('tasks/removeQueuedEmbedLId', data.libraryItemId)
+      }
+    },
    userUpdated(user) {
      if (this.$store.state.user.user.id === user.id) {
        this.$store.commit('user/setUser', user)
@ -418,6 +425,7 @@ export default {
      // Task Listeners
      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('backup_applied', this.backupApplied)

@ -531,12 +539,18 @@ export default {
    },
    loadTasks() {
      this.$axios
-        .$get('/api/tasks')
+        .$get('/api/tasks?include=queue')
        .then((payload) => {
          console.log('Fetched tasks', payload)
          if (payload.tasks) {
            this.$store.commit('tasks/setTasks', payload.tasks)
          }
+          if (payload.queuedTaskData?.embedMetadata?.length) {
+            this.$store.commit(
+              'tasks/setQueuedEmbedLIds',
+              payload.queuedTaskData.embedMetadata.map((td) => td.libraryItemId)
+            )
+          }
        })
        .catch((error) => {
          console.error('Failed to load tasks', error)
--- a/client/pages/audiobook/_id/manage.vue
+++ b/client/pages/audiobook/_id/manage.vue
@ -62,14 +62,20 @@
    <div class="w-full h-px bg-white bg-opacity-10 my-8" />

    <div class="w-full max-w-4xl mx-auto">
-      <div v-if="isEmbedTool" class="w-full flex justify-end items-center mb-4">
-        <ui-checkbox v-if="!isFinished" v-model="shouldBackupAudioFiles" label="Backup audio files" medium checkbox-bg="bg" label-class="pl-2 text-base md:text-lg" @input="toggleBackupAudioFiles" />
+      <!-- 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="!isFinished" color="primary" :loading="processing" @click.stop="embedClick">{{ $strings.ButtonStartMetadataEmbed }}</ui-btn>
+        <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>
@ -83,6 +89,7 @@
        <p v-else class="text-success text-lg font-semibold">{{ $strings.MessageM4BFinished }}</p>
      </div>

+      <!-- 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">
@ -191,6 +198,7 @@ export default {
      cnosole.error('No audio files')
      return redirect('/?error=no audio files')
    }
+
    return {
      libraryItem
    }
@ -200,7 +208,6 @@ export default {
      processing: false,
      audiofilesEncoding: {},
      audiofilesFinished: {},
-      isFinished: false,
      toneObject: null,
      selectedTool: 'embed',
      isCancelingEncode: false,
@ -272,11 +279,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: {
@ -322,7 +346,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() {
@ -349,24 +373,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)
@ -412,14 +418,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)
  }
--- a/client/store/tasks.js
+++ b/client/store/tasks.js
@ -1,11 +1,12 @@

 export const state = () => ({
-  tasks: []
+  tasks: [],
+  queuedEmbedLIds: []
 })

 export const getters = {
-  getTaskByLibraryItemId: (state) => (libraryItemId) => {
-    return state.tasks.find(t => t.data && t.data.libraryItemId === libraryItemId)
+  getTasksByLibraryItemId: (state) => (libraryItemId) => {
+    return state.tasks.filter(t => t.data && t.data.libraryItemId === libraryItemId)
  }
 }

@ -18,14 +19,31 @@ export const mutations = {
    state.tasks = tasks
  },
  addUpdateTask(state, task) {
-    var 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 => {
+        if (!_task.data?.libraryItemId || _task.action !== task.action) return true
+        return _task.data.libraryItemId !== task.data.libraryItemId
+      })
+
      state.tasks.push(task)
    }
  },
  removeTask(state, task) {
    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)) {
+      state.queuedEmbedLIds.push(libraryItemId)
+    }
+  },
+  removeQueuedEmbedLId(state, libraryItemId) {
+    state.queuedEmbedLIds = state.queuedEmbedLIds.filter(lid => lid !== libraryItemId)
  }
 }