Add download UI indicator, download progress, update bookshelf item to show local items and items matches with local item, remove item before downloading if already exists in file system

pages/localMedia/folders/_id.vue

@@ -131,10 +131,29 @@ export default {
       if (this.shouldScan) {
         this.scanFolder()
       }
+    },
+    newLocalLibraryItem(item) {
+      if (item.folderId == this.folderId) {
+        console.log('New local library item', item.id)
+        if (this.localLibraryItems.find((li) => li.id == item.id)) {
+          console.warn('Item already added', item.id)
+          return
+        }
+
+        var _item = {
+          ...item,
+          coverPathSrc: item.coverContentUrl ? Capacitor.convertFileSrc(item.coverContentUrl) : null
+        }
+        this.localLibraryItems.push(_item)
+      }
     }
   },
   mounted() {
+    this.$eventBus.$on('new-local-library-item', this.newLocalLibraryItem)
     this.init()
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('new-local-library-item', this.newLocalLibraryItem)
   }
 }
 </script>

pages/localMedia/item/_id.vue

@@ -12,6 +12,9 @@
       </div>
       <p class="text-lg mb-0.5 text-white text-opacity-75">Folder: {{ folderName }}</p>
       <p class="mb-4 text-xl">{{ mediaMetadata.title }}</p>
+
+       <p class="mb-4 text-xs text-gray-400">{{ libraryItemId || 'Not linked to server library item' }}</p>
+
       <div v-if="isScanning" class="w-full text-center p-4">
         <p>Scanning...</p>
       </div>
@@ -88,6 +91,9 @@ export default {
     },
     mediaType() {
       return this.localLibraryItem ? this.localLibraryItem.mediaType : null
+    },
+        libraryItemId() {
+      return this.localLibraryItem ? this.localLibraryItem.libraryItemId : null
     },
     media() {
       return this.localLibraryItem ? this.localLibraryItem.media : null