Update:More accurate progress percentage using bytes, download 1 audio file at a time & currently downloading page #251 #360 #515 #274

components/widgets/DownloadProgressIndicator.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-if="numPartsRemaining > 0">
-    <widgets-circle-progress :value="progress" :count="numPartsRemaining" />
+  <div v-if="downloadItemPartsRemaining.length" @click="clickedIt">
+    <widgets-circle-progress :value="progress" :count="downloadItemPartsRemaining.length" />
   </div>
 </template>
 
@@ -10,73 +10,38 @@ import { AbsDownloader } from '@/plugins/capacitor'
 export default {
   data() {
     return {
-      updateListener: null,
+      downloadItemListener: null,
       completeListener: null,
-      itemDownloadingMap: {}
+      itemPartUpdateListener: null
     }
   },
   computed: {
-    numItemPartsComplete() {
-      var total = 0
-      Object.values(this.itemDownloadingMap).map((item) => (total += item.partsCompleted))
-      return total
+    downloadItems() {
+      return this.$store.state.globals.itemDownloads
     },
-    numPartsRemaining() {
-      return this.numTotalParts - this.numItemPartsComplete
+    downloadItemParts() {
+      let parts = []
+      this.downloadItems.forEach((di) => parts.push(...di.downloadItemParts))
+      return parts
     },
-    numTotalParts() {
-      var total = 0
-      Object.values(this.itemDownloadingMap).map((item) => (total += item.totalParts))
-      return total
+    downloadItemPartsRemaining() {
+      return this.downloadItemParts.filter((dip) => !dip.completed)
     },
     progress() {
-      var numItems = Object.keys(this.itemDownloadingMap).length
-      if (!numItems) return 0
-      var totalProg = 0
-      Object.values(this.itemDownloadingMap).map((item) => (totalProg += item.itemProgress))
-      return totalProg / numItems
+      let totalBytes = 0
+      let totalBytesDownloaded = 0
+      this.downloadItemParts.forEach((dip) => {
+        totalBytes += dip.fileSize
+        totalBytesDownloaded += dip.bytesDownloaded
+      })
+
+      if (!totalBytes) return 0
+      return Math.min(1, totalBytesDownloaded / totalBytes)
     }
   },
   methods: {
-    onItemDownloadUpdate(data) {
-      console.log('DownloadProgressIndicator onItemDownloadUpdate', JSON.stringify(data))
-      if (!data || !data.downloadItemParts) {
-        console.error('Invalid item update payload')
-        return
-      }
-      var downloadItemParts = data.downloadItemParts
-      var partsCompleted = 0
-      var totalPartsProgress = 0
-      var partsRemaining = 0
-      downloadItemParts.forEach((dip) => {
-        if (dip.completed) {
-          totalPartsProgress += 1
-          partsCompleted++
-        } else {
-          var progPercent = dip.progress / 100
-          totalPartsProgress += progPercent
-          partsRemaining++
-        }
-      })
-      var itemProgress = totalPartsProgress / downloadItemParts.length
-
-      var update = {
-        id: data.id,
-        libraryItemId: data.libraryItemId,
-        partsRemaining,
-        partsCompleted,
-        totalParts: downloadItemParts.length,
-        itemProgress
-      }
-      data.itemProgress = itemProgress
-      data.episodes = downloadItemParts.filter((dip) => dip.episode).map((dip) => dip.episode)
-
-      console.log('[download] Saving item update download payload', JSON.stringify(update))
-      console.log('[download] Download Progress indicator data', JSON.stringify(data))
-
-      this.$set(this.itemDownloadingMap, update.id, update)
-
-      this.$store.commit('globals/addUpdateItemDownload', data)
+    clickedIt() {
+      this.$router.push('/downloading')
     },
     onItemDownloadComplete(data) {
       console.log('DownloadProgressIndicator onItemDownloadComplete', JSON.stringify(data))
@@ -85,11 +50,6 @@ export default {
         return
       }
 
-      if (this.itemDownloadingMap[data.libraryItemId]) {
-        delete this.itemDownloadingMap[data.libraryItemId]
-      } else {
-        console.warn('Item download complete but not found in item downloading map', data.libraryItemId)
-      }
       if (!data.localLibraryItem) {
         this.$toast.error('Item download complete but failed to create library item')
       } else {
@@ -103,15 +63,28 @@ export default {
       }
 
       this.$store.commit('globals/removeItemDownload', data.libraryItemId)
+    },
+    onDownloadItem(downloadItem) {
+      console.log('DownloadProgressIndicator onDownloadItem', JSON.stringify(downloadItem))
+
+      downloadItem.itemProgress = 0
+      downloadItem.episodes = downloadItem.downloadItemParts.filter((dip) => dip.episode).map((dip) => dip.episode)
+
+      this.$store.commit('globals/addUpdateItemDownload', downloadItem)
+    },
+    onDownloadItemPartUpdate(itemPart) {
+      this.$store.commit('globals/updateDownloadItemPart', itemPart)
     }
   },
   mounted() {
-    this.updateListener = AbsDownloader.addListener('onItemDownloadUpdate', (data) => this.onItemDownloadUpdate(data))
+    this.downloadItemListener = AbsDownloader.addListener('onDownloadItem', (data) => this.onDownloadItem(data))
+    this.itemPartUpdateListener = AbsDownloader.addListener('onDownloadItemPartUpdate', (data) => this.onDownloadItemPartUpdate(data))
     this.completeListener = AbsDownloader.addListener('onItemDownloadComplete', (data) => this.onItemDownloadComplete(data))
   },
   beforeDestroy() {
-    if (this.updateListener) this.updateListener.remove()
+    if (this.downloadItemListener) this.downloadItemListener.remove()
     if (this.completeListener) this.completeListener.remove()
+    if (this.itemPartUpdateListener) this.itemPartUpdateListener.remove()
   }
 }
 </script>