feat(PdfReader): add load progress function (#819)

* feat: 增加进度样式

* chore: bump version 10.0.14

* refactor: 增加进度显示

* feat: 增加进度逻辑

* feat: 增加 revokeObjectURL 防止内存泄漏

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.13</Version>
+    <Version>10.0.14</Version>
   </PropertyGroup>
 
   <PropertyGroup>

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -3,6 +3,9 @@
 @inherits BootstrapModuleComponentBase
 
 <div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString">
+    <div class="bb-view-progress">
+        <div class="bb-view-progress-bar"></div>
+    </div>
     <div class="bb-view-toolbar">
         @if (ShowToolbar)
         {

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js

@@ -47,14 +47,12 @@ export async function setData(id, data) {
         return;
     }
 
-    const { options, objectUrl } = pdf;
-    if (objectUrl) {
-        URL.revokeObjectURL(objectUrl);
-    }
+    const objectUrl = createObjectURLFromByte(data);
+    pdf.objectUrl = objectUrl;
 
-    options.url = createObjectURLFromByte(data);
+    const { options } = pdf;
+    options.url = objectUrl;
     options.data = null;
-    pdf.objectUrl = options.url;
     await loadPdf(pdf);
 }
 
@@ -125,8 +123,34 @@ export function resetThumbnails(id) {
 const loadPdf = async pdf => {
     const { el, invoke, options } = pdf;
     const loadingTask = pdfjsLib.getDocument(options);
+
+    const progressEl = el.querySelector('.bb-view-progress');
+    if (progressEl) {
+        progressEl.classList.add('show');
+    }
+    const bar = el.querySelector('.bb-view-progress-bar');
+    if (bar) {
+        bar.style.setProperty('--bb-view-progress-val', '0');
+    }
+
+    let progressHandler = null;
     loadingTask.onProgress = function (progressData) {
+        const { loaded, total } = progressData;
 
+        if (bar) {
+            const val = loaded / total * 100;
+            if (val > 100) {
+                val = 100;
+            }
+            bar.style.setProperty('--bb-view-progress-val', `${val}%`);
+
+            if (progressHandler === null) {
+                progressHandler = setTimeout(() => {
+                    clearTimeout(progressHandler);
+                    progressEl.classList.remove('show');
+                }, 300);
+            }
+        }
     };
 
     loadingTask.onPassword = function (updatePassword, reason) {
@@ -161,7 +185,11 @@ const loadPdf = async pdf => {
 }
 
 const disposePdf = pdf => {
-    const { el, observer, loadingTask } = pdf;
+    const { el, observer, loadingTask, objectUrl } = pdf;
+    if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+    }
+
     if (observer) {
         observer.disconnect();
     }

src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_reader.css

@@ -8,6 +8,25 @@
     height: calc(var(--bb-pdf-view-height) + var(--bb-pdf-toolbar-height));
 }
 
+.bb-view-progress {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 0.25rem;
+}
+
+    .bb-view-progress:not(.show) {
+        display: none;
+    }
+
+.bb-view-progress-bar {
+    height: 100%;
+    background-color: var(--bs-primary);
+    width: var(--bb-view-progress-val, 0);
+    transition: width .3s linear;
+}
+
 .bb-view-toolbar {
     height: var(--bb-pdf-toolbar-height);
     background-color: var(--bb-toolbar-background-color);