fix(OPDS): download unknown content-length indeterminate progress bar

edrlab · Jan 13, 2025 · 20613f0 · 20613f0
1 parent 43df15e
commit 20613f0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 8 deletions.
diff --git a/src/main/redux/sagas/downloader.ts b/src/main/redux/sagas/downloader.ts
@@ -200,11 +200,13 @@ function* downloaderServiceProcessStatusProgressLoop(
 ) {
 
     let previousProgress = 0;
+    let previousDownloadedLength = 0;
     let contentLengthTotal = 0;
     const channelList: TDownloaderChannel[] = [];
     while (1) {
 
         let contentLengthProgress = 0;
+        let downloadedLength = 0;
         let progress = 0;
         let speed = 0;
 
@@ -220,6 +222,7 @@ function* downloaderServiceProcessStatusProgressLoop(
                 progress += status.contentLength / status.progression;
                 speed += (status.speed || 0);
                 contentLengthProgress += status.contentLength;
+                downloadedLength += status.downloadedLength;
             }
         }
 
@@ -228,15 +231,16 @@ function* downloaderServiceProcessStatusProgressLoop(
         }
         progress = Math.ceil(contentLengthTotal / progress) || 0;
 
-        if (previousProgress !== progress) {
+        if (previousProgress !== progress || previousDownloadedLength !== downloadedLength) {
             previousProgress = progress;
+            previousDownloadedLength = downloadedLength;
 
             yield* putTyped(downloadActions.progress.build({
                 downloadUrl: href || "",
                 progress,
                 id,
                 speed,
-                contentLengthHumanReadable: humanFileSize(contentLengthTotal),
+                contentLengthHumanReadable: humanFileSize(!contentLengthTotal ? downloadedLength : contentLengthTotal),
             }));
 
         }
@@ -371,6 +375,7 @@ function downloadCreateFilename(contentType: string | undefined, contentDisposit
 interface IDownloadProgression {
     speed: number;
     progression: number;
+    downloadedLength: number;
     contentLength: number;
 }
 function downloadReadStreamProgression(readStream: NodeJS.ReadableStream, contentLength: number) {
@@ -406,6 +411,7 @@ function downloadReadStreamProgression(readStream: NodeJS.ReadableStream, conten
                 emit({
                     speed,
                     progression: pct,
+                    downloadedLength,
                     contentLength,
                 });
 
@@ -424,6 +430,7 @@ function downloadReadStreamProgression(readStream: NodeJS.ReadableStream, conten
                 emit({
                     speed,
                     progression: pct,
+                    downloadedLength,
                     contentLength,
                 });
             });

diff --git a/src/renderer/assets/styles/app.scss b/src/renderer/assets/styles/app.scss
@@ -40,7 +40,7 @@
       padding: 3px;
     }
 
-    progress {
+    progress:not(:indeterminate) {
       background-color: green;
       border-radius: 0;
       height: 20px;
@@ -52,16 +52,28 @@
       padding: 0;
     }
 
-    progress::-webkit-progress-bar {
+    progress:not(:indeterminate)::-webkit-progress-bar {
       background-color: silver;
       border-radius: 0;
     }
 
-    progress::-webkit-progress-value {
+    progress:not(:indeterminate)::-webkit-progress-value {
       background-color: var(--color-blue);
       border-radius: 0;
     }
 
+    progress:indeterminate {
+      /* background-color: red; */
+      /* border-radius: 0; */
+      height: 20px;
+      display: inline-block;
+      /* border: 0; */
+      width: 120px;
+      margin: 0;
+      margin-right: 7px;
+      padding: 0;
+    }
+
     span.title {
       display: inline-block;
       width: auto;

diff --git a/src/renderer/library/components/DownloadsPanel.tsx b/src/renderer/library/components/DownloadsPanel.tsx
@@ -48,17 +48,28 @@ class DownloadsPanel extends React.Component<IProps, undefined> {
             <ul>
                 {
                 downloadState.map(([dl, id]) => {
+                    // console.log(JSON.stringify(dl, null, 4));
                     let progress = dl.progress;
                     if (isNaN(progress)) {
                         progress = 0;
                     }
                     return <li key={id}>
                         <span className={stylesApp.title}><a onClick={() => abortDownload(id)}><SVG ariaHidden svg={CloseIcon} /></a></span>
-                        <span className={stylesApp.percent}>{progress}%</span>
-                        <progress max="100" value={progress}>{progress}</progress>
+                        {
+                            progress === 0 ? // indeterminate
+                            (<>
+                                <span className={stylesApp.percent}>? %</span>
+                                <progress value={undefined}>{"..."}</progress>
+                            </>)
+                            :
+                            (<>
+                                <span className={stylesApp.percent}>{progress}%</span>
+                                <progress max="100" value={progress}>{progress}</progress>
+                            </>)
+                        }
                         <span className={stylesApp.title}>{dl.downloadUrl}</span>
                         <span className={stylesApp.title}>{dl.contentLengthHumanReadable}</span>
-                        <span className={stylesApp.title}>{dl.speed + " Kb/s"}</span>
+                        <span className={stylesApp.title}>{Math.trunc(dl.speed || 0) + " Kb/s"}</span>
 
                     </li>;
                 })