Update default metadata match behavior to apply immediately

client/components/cards/BookMatchCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="book" class="w-full border-b border-gray-700 pb-2">
-    <div class="flex py-1 hover:bg-gray-300/10 cursor-pointer" @click="selectMatch">
+    <div class="flex py-1 hover:bg-gray-300/10 cursor-pointer group" @click="selectMatch">
       <div class="min-w-12 max-w-12 md:min-w-20 md:max-w-20">
         <div class="w-full bg-primary">
           <img v-if="selectedCover" :src="selectedCover" class="h-full w-full object-contain" />
@@ -21,7 +21,10 @@
             <p v-if="book.duration" class="text-gray-400 text-xs">{{ $strings.LabelDuration }}: {{ $elapsedPrettyExtended(bookDuration, false) }} {{ bookDurationComparison }}</p>
           </div>
           <div class="grow" />
-          <div v-if="book.matchConfidence" class="rounded-full px-2 py-1 text-xs whitespace-nowrap text-white" :class="book.matchConfidence > 0.95 ? 'bg-success/80' : 'bg-info/80'">{{ $strings.LabelMatchConfidence }}: {{ (book.matchConfidence * 100).toFixed(0) }}%</div>
+          <div class="flex items-center gap-2">
+            <ui-btn small color="bg-primary hover:bg-bg" class="hidden group-hover:block" @click.stop="reviewMatch">{{ $strings.ButtonReviewAndEdit || 'Review & Edit' }}</ui-btn>
+            <div v-if="book.matchConfidence" class="rounded-full px-2 py-1 text-xs whitespace-nowrap text-white" :class="book.matchConfidence > 0.95 ? 'bg-success/80' : 'bg-info/80'">{{ $strings.LabelMatchConfidence }}: {{ (book.matchConfidence * 100).toFixed(0) }}%</div>
+          </div>
         </div>
 
         <div v-if="book.series?.length" class="flex py-1 -mx-1">
@@ -96,6 +99,11 @@ export default {
       book.cover = this.selectedCover
       this.$emit('select', book)
     },
+    reviewMatch() {
+      const book = { ...this.book }
+      book.cover = this.selectedCover
+      this.$emit('review', book)
+    },
     clickCover(cover) {
       this.selectedCover = cover
     }

client/components/modals/item/tabs/Match.vue

@@ -22,7 +22,7 @@
     </div>
     <div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden matchListWrapper mt-4">
       <template v-for="(res, index) in searchResults">
-        <cards-book-match-card :key="index" :book="res" :current-book-duration="currentBookDuration" :is-podcast="isPodcast" :book-cover-aspect-ratio="bookCoverAspectRatio" @select="selectMatch" />
+        <cards-book-match-card :key="index" :book="res" :current-book-duration="currentBookDuration" :is-podcast="isPodcast" :book-cover-aspect-ratio="bookCoverAspectRatio" @select="applyMatch" @review="selectMatch" />
       </template>
     </div>
     <div v-if="selectedMatchOrig" class="absolute top-0 left-0 w-full bg-bg h-full px-2 py-6 md:p-8 max-h-full overflow-y-auto overflow-x-hidden">
@@ -533,38 +533,47 @@ export default {
         this.waitingForProviders = true
       }
     },
-    selectMatch(match) {
+    parseMatchData(match) {
-      if (match) {
+      if (!match) return
-        if (match.series) {
+      if (match.series) {
-          if (!match.series.length) {
+        if (!match.series.length) {
-            delete match.series
+          delete match.series
-          } else {
+        } else {
-            match.series = match.series.map((se) => {
+          match.series = match.series.map((se) => {
-              return {
+            return {
-                id: `new-${Math.floor(Math.random() * 10000)}`,
+              id: `new-${Math.floor(Math.random() * 10000)}`,
-                displayName: se.sequence ? `${se.series} #${se.sequence}` : se.series,
+              displayName: se.sequence ? `${se.series} #${se.sequence}` : se.series,
-                name: se.series,
+              name: se.series,
-                sequence: se.sequence || ''
+              sequence: se.sequence || ''
-              }
+            }
-            })
+          })
-          }
-        }
-        if (match.genres && !Array.isArray(match.genres)) {
-          // match.genres = match.genres.join(',')
-          match.genres = match.genres.split(',').map((g) => g.trim())
-        }
-        if (match.tags && !Array.isArray(match.tags)) {
-          match.tags = match.tags.split(',').map((g) => g.trim())
-        }
-        if (match.narrator && !Array.isArray(match.narrator)) {
-          match.narrator = match.narrator.split(',').map((g) => g.trim())
         }
       }
-
+      if (match.genres && !Array.isArray(match.genres)) {
+        match.genres = match.genres.split(',').map((g) => g.trim())
+      }
+      if (match.tags && !Array.isArray(match.tags)) {
+        match.tags = match.tags.split(',').map((g) => g.trim())
+      }
+      if (match.narrator && !Array.isArray(match.narrator)) {
+        match.narrator = match.narrator.split(',').map((g) => g.trim())
+      }
+    },
+    selectMatch(match) {
+      this.parseMatchData(match)
       console.log('Select Match', match)
       this.selectedMatch = match
       this.selectedMatchOrig = JSON.parse(JSON.stringify(match))
     },
+    async applyMatch(match) {
+      this.parseMatchData(match)
+      console.log('Apply Match', match)
+      this.selectedMatch = match
+      for (const key in this.selectedMatchUsage) {
+        this.selectedMatchUsage[key] = true
+      }
+      await this.submitMatchUpdate()
+    },
     buildMatchUpdatePayload() {
       var updatePayload = {}
       updatePayload.metadata = {}