🎨 Finish AudioCard component

frontend/src/App.vue

@@ -1,12 +1,39 @@
 <script setup>
 import "bootstrap/dist/css/bootstrap.css";
-import "bootstrap-icons/font/bootstrap-icons.css"
+import "bootstrap-icons/font/bootstrap-icons.css";
 import AudioCard from "./components/AudioCard.vue";
+
+const p1 = {
+  number: "BV1es41127Fd",
+  received: 0,
+  total: 0,
+};
+const p2 = {
+  number: "BV1es41127Fd",
+  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
+  received: 0,
+  total: 0,
+};
+const p3 = {
+  number: "BV1es41127Fd",
+  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
+  received: 1314514,
+  total: 1919810,
+};
+const p4 = {
+  number: "BV1es41127Fd",
+  title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
+  received: 1919810,
+  total: 1919810,
+};
 </script>
 
 <template>
   <div id="wrapper">
-    <AudioCard></AudioCard>
+    <AudioCard v-bind="p1"></AudioCard>
+    <AudioCard v-bind="p2"></AudioCard>
+    <AudioCard v-bind="p3"></AudioCard>
+    <AudioCard v-bind="p4"></AudioCard>
   </div>
 </template>
 

frontend/src/components/AudioCard.vue

@@ -1,77 +1,94 @@
-<script setup></script>
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  number: String,
+  title: String,
+  received: Number,
+  total: Number,
+});
+
+const status = computed(() => {
+  if (!props.number || !props.title) {
+    return "Fetching";
+  } else if (props.total == 0) {
+    return "Ready";
+  } else if (props.received < props.total) {
+    return "Downloading";
+  } else {
+    return "Finished";
+  }
+});
+
+const working = computed(() => {
+  return ["Fetching", "Downloading"].includes(status.value);
+});
+
+const B2MiB = 1048576; // 1024 * 1024
+
+const received_mib = computed(() => {
+  return (props.received / B2MiB).toFixed(1);
+});
+
+const total_mib = computed(() => {
+  return (props.total / B2MiB).toFixed(1);
+});
+
+const progress = computed(() => {
+  if (status.value == "Downloading") {
+    return Math.round((props.received / props.total) * 100);
+  } else {
+    return 100;
+  }
+});
+</script>
 
 <template>
   <div class="card">
-    <div class="card-body position-relative" style="padding-right: 64px">
+    <div class="card-body position-relative">
-      <h6 class="text-muted mb-1">BV1es41127Fd</h6>
+      <h6 v-if="number" class="text-muted mb-1">{{ number }}</h6>
-      <div class="placeholder-wave">
+      <div v-else class="placeholder-wave">
-        <h5 class="placeholder w-75" style="height: 24px"></h5>
+        <h6 class="placeholder w-25 bg-secondary" style="height: 19px"></h6>
+      </div>
+      <h5 v-if="title">{{ title }}</h5>
+      <div v-else class="placeholder-wave">
+        <h5 class="placeholder w-75 bg-secondary" style="height: 24px"></h5>
       </div>
       <div class="progress">
         <div
-          class="progress-bar progress-bar-striped progress-bar-animated bg-warning text-dark"
+          class="progress-bar"
+          :class="{
+            'progress-bar-striped': working,
+            'progress-bar-animated': working,
+            'bg-warning': status == 'Fetching',
+            'bg-secondary': status == 'Ready',
+            'bg-primary': status == 'Downloading',
+            'bg-success': status == 'Finished',
+          }"
           role="progressbar"
-          style="width: 100%"
+          :style="{ width: progress + '%' }"
         >
-          Fetching Information
+          <span v-if="status == 'Fetching'" class="text-dark">Fetching Information</span>
+          <span v-else-if="status == 'Ready'">Ready</span>
+          <span v-else-if="status == 'Downloading'"
+            >{{ progress }}%<span class="px-1"></span>({{ received_mib }} /
+            {{ total_mib }} MiB)</span
+          >
+          <span v-else="status == 'Finished'">Download Complete</span>
         </div>
       </div>
       <i
-        class="text-warning bi-info-circle position-absolute end-0 top-50 translate-middle"
+        class="position-absolute end-0 top-50 translate-middle"
-      ></i>
+        :class="{
-    </div>
+          'text-warning': status == 'Fetching',
-  </div>
+          'bi-info-circle': status == 'Fetching',
-  <div class="card">
+          'text-secondary': status == 'Ready',
-    <div class="card-body position-relative" style="padding-right: 64px">
+          'bi-slash-circle': status == 'Ready',
-      <h6 class="text-muted mb-1">BV1es41127Fd</h6>
+          'text-primary': status == 'Downloading',
-      <h5>【洛天依/乐正绫原创】霜雪千年【PV付/COP】</h5>
+          'bi-arrow-down-circle': status == 'Downloading',
-      <div class="progress">
+          'text-success': status == 'Finished',
-        <div
+          'bi-check-circle': status == 'Finished',
-          class="progress-bar bg-secondary"
+        }"
-          role="progressbar"
-          style="width: 100%"
-        >
-          Ready
-        </div>
-      </div>
-      <i
-        class="text-secondary bi-slash-circle position-absolute end-0 top-50 translate-middle"
-      ></i>
-    </div>
-  </div>
-  <div class="card">
-    <div class="card-body position-relative" style="padding-right: 64px">
-      <h6 class="text-muted mb-1">BV1es41127Fd</h6>
-      <h5>【洛天依/乐正绫原创】霜雪千年【PV付/COP】</h5>
-      <div class="progress">
-        <div
-          class="progress-bar progress-bar-striped progress-bar-animated"
-          role="progressbar"
-          style="width: 45%"
-        >
-          <span>45%<span class="px-1"></span>(4.9 / 10.8 MiB)</span>
-        </div>
-      </div>
-      <i
-        class="text-primary bi-arrow-down-circle position-absolute end-0 top-50 translate-middle"
-      ></i>
-    </div>
-  </div>
-  <div class="card">
-    <div class="card-body position-relative" style="padding-right: 64px">
-      <h6 class="text-muted mb-1">BV1es41127Fd</h6>
-      <h5>【洛天依/乐正绫原创】霜雪千年【PV付/COP】</h5>
-      <div class="progress">
-        <div
-          class="progress-bar bg-success"
-          role="progressbar"
-          style="width: 100%"
-        >
-          Download Complete
-        </div>
-      </div>
-      <i
-        class="text-success bi-check-circle position-absolute end-0 top-50 translate-middle"
       ></i>
     </div>
   </div>
@@ -85,4 +102,8 @@
 i {
   font-size: 36px;
 }
+
+.card-body {
+  padding-right: 64px;
+}
 </style>