fix(inline-viewer): add download progress bar for files >2GB

Add download progress tracking to createBlobUrlViewer to fix incorrect
progress display for large files. Changes:

- Add xhr.onprogress handler to track download bytes
- Use 64-bit float division to avoid 32-bit integer overflow
- Show progress bar UI for files >10MB with percentage
- Add CSS styles with dark theme support

The progress calculation now correctly handles files larger than 2GB
by using JavaScript's native double-precision floats instead of
operations that might truncate to 32-bit integers.

Fixes #82
This commit is contained in:
BillionClaw
2026-03-18 11:37:42 +08:00
parent 4b62499b8f
commit 5eb7b31740
2 changed files with 83 additions and 4 deletions
+50
View File
@@ -171,6 +171,56 @@
color: #64748b;
}
/* Download progress container */
.inline-viewer-progress {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 20px;
background: rgba(255, 255, 255, 0.95);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Progress bar track */
.inline-viewer-progress-bar {
width: 200px;
height: 8px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
}
/* Progress bar fill */
.inline-viewer-progress-fill {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #60a5fa);
border-radius: 4px;
transition: width 0.2s ease;
}
/* Progress percentage text */
.inline-viewer-progress-text {
font-size: 14px;
font-weight: 600;
color: #475569;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Dark theme support */
[data-theme="dark"] .inline-viewer-progress {
background: rgba(30, 41, 59, 0.95);
}
[data-theme="dark"] .inline-viewer-progress-bar {
background: #334155;
}
[data-theme="dark"] .inline-viewer-progress-text {
color: #cbd5e1;
}
/* Error and unsupported message */
.inline-viewer-message {
padding: 32px;