animate merging chunks

This commit is contained in:
Ryan
2025-03-30 17:31:27 -04:00
committed by GitHub
parent 9c71c46c4e
commit 394e7ef041
2 changed files with 38 additions and 22 deletions

View File

@@ -2059,3 +2059,11 @@ body.dark-mode .admin-panel-content label {
#changePasswordModal { #changePasswordModal {
z-index: 9999; z-index: 9999;
} }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinning {
animation: spin 1s linear infinite;
}

View File

@@ -457,30 +457,36 @@ function initResumableUpload() {
updateFileInfoCount(); updateFileInfoCount();
}); });
resumableInstance.on("fileProgress", function (file) { resumableInstance.on("fileProgress", function(file) {
const percent = Math.floor(file.progress() * 100); const progress = file.progress(); // value between 0 and 1
const percent = Math.floor(progress * 100);
const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`); const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`);
if (li && li.progressBar) { if (li && li.progressBar) {
li.progressBar.style.width = percent + "%"; if (percent < 99) {
li.progressBar.style.width = percent + "%";
// Calculate elapsed time since file entry was created. // Calculate elapsed time and speed.
const elapsed = (Date.now() - li.startTime) / 1000; const elapsed = (Date.now() - li.startTime) / 1000;
let speed = ""; let speed = "";
if (elapsed > 0) { if (elapsed > 0) {
// Calculate total bytes uploaded so far using file.progress() * file.size const bytesUploaded = progress * file.size;
const bytesUploaded = file.progress() * file.size; const spd = bytesUploaded / elapsed;
const spd = bytesUploaded / elapsed; if (spd < 1024) {
if (spd < 1024) { speed = spd.toFixed(0) + " B/s";
speed = spd.toFixed(0) + " B/s"; } else if (spd < 1048576) {
} else if (spd < 1048576) { speed = (spd / 1024).toFixed(1) + " KB/s";
speed = (spd / 1024).toFixed(1) + " KB/s"; } else {
} else { speed = (spd / 1048576).toFixed(1) + " MB/s";
speed = (spd / 1048576).toFixed(1) + " MB/s"; }
} }
li.progressBar.innerText = percent + "% (" + speed + ")";
} else {
// When progress reaches 99% or higher, show only a spinner icon.
li.progressBar.style.width = "100%";
li.progressBar.innerHTML = '<i class="material-icons spinning" style="vertical-align: middle;">autorenew</i>';
} }
li.progressBar.innerText = percent + "% (" + speed + ")";
// Enable the pause/resume button once progress starts // Enable the pause/resume button once progress starts.
const pauseResumeBtn = li.querySelector(".pause-resume-btn"); const pauseResumeBtn = li.querySelector(".pause-resume-btn");
if (pauseResumeBtn) { if (pauseResumeBtn) {
pauseResumeBtn.disabled = false; pauseResumeBtn.disabled = false;
@@ -488,12 +494,14 @@ function initResumableUpload() {
} }
}); });
resumableInstance.on("fileSuccess", function (file, message) { resumableInstance.on("fileSuccess", function(file, message) {
const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`); const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`);
if (li && li.progressBar) { if (li && li.progressBar) {
// Clear any merging indicators.
li.progressBar.style.width = "100%"; li.progressBar.style.width = "100%";
li.progressBar.innerText = "Done"; li.progressBar.innerText = "Done";
// Hide the pause/resume button when upload is complete.
// Optionally hide the pause/resume and remove buttons.
const pauseResumeBtn = li.querySelector(".pause-resume-btn"); const pauseResumeBtn = li.querySelector(".pause-resume-btn");
if (pauseResumeBtn) { if (pauseResumeBtn) {
pauseResumeBtn.style.display = "none"; pauseResumeBtn.style.display = "none";