Add:Batch re-scan #1754

client/components/app/Appbar.vue

@@ -15,8 +15,6 @@
         <controls-global-search v-if="currentLibrary" class="mr-1 sm:mr-0" />
         <div class="flex-grow" />
 
-        <widgets-notification-widget class="hidden md:block" />
-
         <ui-tooltip v-if="isChromecastInitialized && !isHttps" direction="bottom" text="Casting requires a secure connection" class="flex items-center">
           <span class="material-icons-outlined text-2xl text-warning text-opacity-50"> cast </span>
         </ui-tooltip>
@@ -24,6 +22,8 @@
           <google-cast-launcher></google-cast-launcher>
         </div>
 
+        <widgets-notification-widget class="hidden md:block" />
+
         <nuxt-link v-if="currentLibrary" to="/config/stats" class="hover:text-gray-200 cursor-pointer w-8 h-8 hidden sm:flex items-center justify-center mx-1">
           <ui-tooltip :text="$strings.HeaderYourStats" direction="bottom" class="flex items-center">
             <span class="material-icons text-2xl" aria-label="User Stats" role="button">equalizer</span>
@@ -178,6 +178,11 @@ export default {
         })
       }
 
+      options.push({
+        text: 'Re-Scan',
+        action: 'rescan'
+      })
+
       return options
     }
   },
@@ -211,8 +216,34 @@ export default {
         this.requestBatchQuickEmbed()
       } else if (action === 'quick-match') {
         this.batchAutoMatchClick()
+      } else if (action === 'rescan') {
+        this.batchRescan()
       }
     },
+    async batchRescan() {
+      const payload = {
+        message: `Are you sure you want to re-scan ${this.selectedMediaItems.length} items?`,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.$axios
+              .$post(`/api/items/batch/scan`, {
+                libraryItemIds: this.selectedMediaItems.map((i) => i.id)
+              })
+              .then(() => {
+                console.log('Batch Re-Scan started')
+                this.cancelSelectionMode()
+              })
+              .catch((error) => {
+                console.error('Batch Re-Scan failed', error)
+                const errorMsg = error.response.data || 'Failed to batch re-scan'
+                this.$toast.error(errorMsg)
+              })
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
     async playSelectedItems() {
       this.$store.commit('setProcessingBatch', true)
 

client/components/cards/ItemTaskRunningCard.vue

@@ -1,8 +1,10 @@
 <template>
-  <div class="flex items-center h-full px-1 overflow-hidden">
-    <div class="h-5 w-5 min-w-5 text-lg mr-1.5 flex items-center justify-center">
-      <span v-if="isFinished" :class="taskIconStatus" class="material-icons text-base">{{actionIcon}}</span>
+  <div class="flex items-center px-1 overflow-hidden">
+    <div class="w-8 flex items-center justify-center">
+      <!-- <div class="text-lg"> -->
+      <span v-if="isFinished" :class="taskIconStatus" class="material-icons text-base">{{ actionIcon }}</span>
       <widgets-loading-spinner v-else />
+      <!-- </div> -->
     </div>
     <div class="flex-grow px-2 taskRunningCardContent">
       <p class="truncate text-sm">{{ title }}</p>
@@ -36,10 +38,13 @@ export default {
       return this.task.details || 'Unknown'
     },
     isFinished() {
-      return this.task.isFinished || false
+      return !!this.task.isFinished
     },
     isFailed() {
-      return this.task.isFailed || false
+      return !!this.task.isFailed
+    },
+    isSuccess() {
+      return this.isFinished && !this.isFailed
     },
     failedMessage() {
       return this.task.error || ''
@@ -48,6 +53,11 @@ export default {
       return this.task.action || ''
     },
     actionIcon() {
+      if (this.isFailed) {
+        return 'error'
+      } else if (this.isSuccess) {
+        return 'done'
+      }
       switch (this.action) {
         case 'download-podcast-episode':
           return 'cloud_download'
@@ -68,16 +78,15 @@ export default {
       return ''
     }
   },
-  methods: {
-  },
+  methods: {},
   mounted() {}
 }
 </script>
 
 <style>
 .taskRunningCardContent {
-  width: calc(100% - 80px);
-  height: 75px;
+  width: calc(100% - 84px);
+  height: 60px;
   display: flex;
   flex-direction: column;
   justify-content: center;

client/components/widgets/NotificationWidget.vue

@@ -1,19 +1,21 @@
 <template>
-  <div v-if="tasksRunning" class="w-4 h-4 mx-3 relative" v-click-outside="clickOutsideObj">
+  <div v-if="tasksToShow.length" class="w-4 h-4 mx-3 relative" v-click-outside="clickOutsideObj">
     <button type="button" :disabled="disabled" class="w-10 sm:w-full relative h-full cursor-pointer" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
       <div class="flex h-full items-center justify-center">
-        <ui-tooltip text="Tasks running" direction="bottom" class="flex items-center">
+        <ui-tooltip v-if="tasksRunning" :text="$strings.LabelTasks" direction="bottom" class="flex items-center">
           <widgets-loading-spinner />
         </ui-tooltip>
+        <ui-tooltip v-else text="Activities" direction="bottom" class="flex items-center">
+          <span class="material-icons text-1.5xl" aria-label="Activities" role="button">notifications</span>
+        </ui-tooltip>
       </div>
     </button>
     <transition name="menu">
       <div class="sm:w-80 w-full relative">
-        <div v-show="showMenu" class="absolute z-40 -mt-px w-40 sm:w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalTaskRunningMenu">
+        <div v-show="showMenu" class="absolute z-40 -mt-px w-40 sm:w-full bg-bg border border-black-200 shadow-lg rounded-md text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalTaskRunningMenu">
           <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
-            <template v-if="tasksRunningOrFailed.length">
-              <p class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelTasks }}</p>
-              <template v-for="task in tasksRunningOrFailed">
+            <template v-if="tasksToShow.length">
+              <template v-for="task in tasksToShow">
                 <nuxt-link :key="task.id" v-if="actionLink(task)" :to="actionLink(task)">
                   <li class="text-gray-50 select-none relative hover:bg-black-400 py-1 cursor-pointer">
                     <cards-item-task-running-card :task="task" />
@@ -54,9 +56,10 @@ export default {
     tasksRunning() {
       return this.tasks.some((t) => !t.isFinished)
     },
-    tasksRunningOrFailed() {
-      // return just the tasks that are running or failed in the last 1 minute
-      return this.tasks.filter((t) => !t.isFinished || (t.isFailed && t.finishedAt > new Date().getTime() - 1000 * 60)) || []
+    tasksToShow() {
+      // return just the tasks that are running or failed (or show success) in the last 1 minute
+      const tasks = this.tasks.filter((t) => !t.isFinished || ((t.isFailed || t.showSuccess) && t.finishedAt > new Date().getTime() - 1000 * 60)) || []
+      return tasks.sort((a, b) => b.startedAt - a.startedAt)
     }
   },
   methods: {
@@ -75,6 +78,8 @@ export default {
           return `/audiobook/${task.data.libraryItemId}/manage?tool=m4b`
         case 'embed-metadata':
           return `/audiobook/${task.data.libraryItemId}/manage?tool=embed`
+        case 'scan-item':
+          return `/item/${task.data.libraryItemId}`
         default:
           return ''
       }