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

pages/downloading.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="w-full h-full py-6 px-4 overflow-y-auto">
+    <p class="mb-4 text-base text-white">Downloading Files ({{ downloadItemParts.length }})</p>
+
+    <div v-if="!downloadItemParts.length" class="py-6 text-center text-lg">No download item parts</div>
+    <template v-for="(itemPart, num) in downloadItemParts">
+      <div :key="itemPart.id" class="w-full">
+        <div class="flex">
+          <div class="w-14">
+            <span v-if="itemPart.completed" class="material-icons text-success">check_circle_outline</span>
+            <span v-else class="font-semibold text-gray-200">{{ Math.round(itemPart.progress) }}%</span>
+          </div>
+          <div class="flex-grow px-2">
+            <p class="truncate">{{ itemPart.filename }}</p>
+          </div>
+        </div>
+
+        <div v-if="num + 1 < downloadItemParts.length" class="flex border-t border-white border-opacity-10 my-3" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {
+    downloadItems() {
+      return this.$store.state.globals.itemDownloads
+    },
+    downloadItemParts() {
+      let parts = []
+      this.downloadItems.forEach((di) => parts.push(...di.downloadItemParts))
+      return parts
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>
+

pages/item/_id/index.vue

@@ -79,6 +79,10 @@
         </div>
       </div>
 
+      <div v-if="downloadItem" class="py-3">
+        <p class="text-center text-lg">Downloading! ({{ Math.round(downloadItem.itemProgress * 100) }}%)</p>
+      </div>
+
       <!-- metadata -->
       <div class="grid gap-2 my-4" style="grid-template-columns: max-content auto">
         <div v-if="narrators && narrators.length" class="text-white text-opacity-60 uppercase text-sm">Narrators</div>
@@ -119,10 +123,6 @@
         </div>
       </div>
 
-      <div v-if="downloadItem" class="py-3">
-        <p class="text-center text-lg">Downloading! ({{ Math.round(downloadItem.itemProgress * 100) }}%)</p>
-      </div>
-
       <div class="w-full py-4">
         <p class="text-sm">{{ description }}</p>
       </div>