✨ Add TotalProgress component

frontend/src/App.vue

@@ -5,9 +5,7 @@ import AudioDownload from "./views/AudioDownload.vue";
 </script>
 
 <template>
-  <div class="vh-100 vw-100 bg-body-secondary">
+  <AudioDownload></AudioDownload>
-    <AudioDownload></AudioDownload>
-  </div>
 </template>
 
 <style scoped></style>

frontend/src/components/TotalProgress.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  display: String,
+  finished: Number,
+  total: Number,
+});
+
+const progress = computed(() => {
+  return Math.round((props.finished / props.total) * 100);
+});
+</script>
+
+<template>
+  <div class="shadow-lg bg-body px-3 pt-2 pb-3 border-top border-2 z-3">
+    <div class="mb-1 text-center">
+      {{ display }}<span class="px-2">-</span>{{ finished }} / {{ total }}
+    </div>
+    <div class="progress" role="progressbar">
+      <div
+        class="progress-bar progress-bar-striped progress-bar-animated"
+        :style="{ width: progress + '%' }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.progress {
+  height: 24px;
+}
+</style>

frontend/src/views/AudioDownload.vue

@@ -1,5 +1,6 @@
 <script setup>
 import AudioCard from "../components/AudioCard.vue";
+import TotalProgress from "../components/TotalProgress.vue";
 
 const p1 = {
   number: "BV1es41127Fd",
@@ -27,21 +28,26 @@ const p4 = {
 </script>
 
 <template>
-  <div class="container overflow-hidden">
+  <div
-    <div class="row g-3 py-3">
+    class="vh-100 vw-100 bg-body-secondary overflow-scroll d-flex flex-column"
-      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
+  >
-        <AudioCard v-bind="p1"></AudioCard>
+    <div class="container overflow-y-scroll flex-grow-1">
-      </div>
+      <div class="row g-3 py-3">
-      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
+        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
-        <AudioCard v-bind="p2"></AudioCard>
+          <AudioCard v-bind="p1"></AudioCard>
-      </div>
+        </div>
-      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
+        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
-        <AudioCard v-bind="p3"></AudioCard>
+          <AudioCard v-bind="p2"></AudioCard>
-      </div>
+        </div>
-      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
+        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
-        <AudioCard v-bind="p4"></AudioCard>
+          <AudioCard v-bind="p3"></AudioCard>
+        </div>
+        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
+          <AudioCard v-bind="p4"></AudioCard>
+        </div>
       </div>
     </div>
+    <TotalProgress display="Downloading" :finished="114514" :total="191981"></TotalProgress>
   </div>
 </template>