💄 Use determine type for reader progress indicator

likecoin · Jun 24, 2024 · d7c5686 · d7c5686
1 parent d469a00
commit d7c5686
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 11 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -858,6 +858,7 @@
     }
   },
   "preview": "Preview",
+  "reader_loading_label": "Loading",
   "RedirectPage": {
     "title": "Redirecting"
   },

diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
@@ -858,6 +858,7 @@
     }
   },
   "preview": "預覽",
+  "reader_loading_label": "載入中",
   "RedirectPage": {
     "title": "重新轉向"
   },

diff --git a/src/mixins/reader.js b/src/mixins/reader.js
@@ -35,6 +35,16 @@ export default {
     totalSizeInMB() {
       return (this.totalSize / (1024 * 1024)).toFixed(2);
     },
+    progressIndicatorType() {
+      return this.totalSize ? 'determinate' : 'indeterminate';
+    },
+    progressLabelText() {
+      return this.totalSize
+        ? `${this.progressSizeInMB} / ${this.totalSizeInMB} MB (${
+            this.progressPercent
+          }%)`
+        : this.$t('reader_loading_label');
+    },
   },
   methods: {
     async getFileBuffer(cacheKey) {

diff --git a/src/pages/reader.vue b/src/pages/reader.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="fixed inset-0 flex flex-col items-center justify-center">
-    <ProgressIndicator v-if="isLoading" />
+    <div
+      v-if="isLoading"
+      class="fixed inset flex flex-col justify-center items-center bg-white gap-[16px]"
+    >
+      <ProgressIndicator />
+      <span class="text-like-green">{{ $t('reader_loading_label') }}</span>
+    </div>
     <Component
       :is="isLoginRequired ? 'AuthRequiredView' : 'div'"
       v-else

diff --git a/src/pages/reader/epub.vue b/src/pages/reader/epub.vue
@@ -2,12 +2,13 @@
   <div>
     <div
       v-if="isLoading"
-      class="fixed inset-0 flex flex-col justify-center items-center"
+      class="fixed inset-0 flex flex-col justify-center items-center gap-[16px] bg-white"
     >
-      <ProgressIndicator />
-      <div class="text-like-green">
-        {{ progressSizeInMB }} / {{ totalSizeInMB }}MB ({{ progressPercent }}%)
-      </div>
+      <ProgressIndicator
+        :type="progressIndicatorType"
+        :value="progressPercent"
+      />
+      <span class="text-like-green text-center">{{ progressLabelText }}</span>
     </div>
     <div v-else class="flex items-center justify-between">
       <div class="grow" />

diff --git a/src/pages/reader/pdf.vue b/src/pages/reader/pdf.vue
@@ -2,12 +2,13 @@
   <div class="w-full h-full">
     <div
       v-if="isLoading"
-      class="fixed inset-0 flex flex-col justify-center items-center"
+      class="fixed inset-0 flex flex-col justify-center items-center gap-[16px] bg-like-green"
     >
-      <ProgressIndicator />
-      <div class="text-white">
-        {{ progressSizeInMB }} / {{ totalSizeInMB }}MB ({{ progressPercent }}%)
-      </div>
+      <ProgressIndicator
+        :type="progressIndicatorType"
+        :value="progressPercent"
+      />
+      <span class="text-white text-center">{{ progressLabelText }}</span>
     </div>
     <iframe
       ref="pdfIframe"