Feat: Enhance download experience with progress indicators and toast notifications

This commit is contained in:
MasterAcnolo
2026-04-12 12:04:05 +02:00
parent 5aebc78d44
commit 011e0a703a
11 changed files with 329 additions and 31 deletions

View File

@@ -3,23 +3,32 @@ const progressBar = document.getElementById("downloadProgress");
const progressBarText = document.getElementById("downloadProgressText")
const speedElement = document.getElementById("downloadSpeedText");
const stageElement = document.getElementById("downloadStage");
const speedEvt = new EventSource("/download/speed");
const stageEvt = new EventSource("/download/stage");
function startProgress() {
progressWrapper.style.display = "block";
progressBar.style.width = "0%";
progressBarText.style.display = "block";
progressBarText.innerHTML = "0%";
speedElement.style.display = "block";
speedElement.innerHTML = "0 Mib/s";
}
function showProgress() {
progressWrapper.style.display = "block";
progressBarText.style.display = "block";
speedElement.style.display = "block";
// Show stop button
const stopBtn = document.getElementById("stopBtn");
if (stopBtn) stopBtn.style.display = "inline-block";
if (stopBtn) stopBtn.style.display = "inline-flex";
}
function updateProgress(percent) {
// Show progress div and stop button only when percent > 0
if (percent > 0 && progressWrapper.style.display !== "block") {
showProgress();
}
progressBar.style.width = `${percent}%`;
progressBarText.innerHTML = `${percent}%`;
}
@@ -33,6 +42,9 @@ function resetProgress() {
speedElement.textContent = "0 Mib/s";
speedElement.style.display = "none";
stageElement.textContent = "";
stageElement.style.display = "none";
// Hide stop button
const stopBtn = document.getElementById("stopBtn");
if (stopBtn) stopBtn.style.display = "none";
@@ -48,8 +60,11 @@ evtSource.onmessage = e => {
}
if (e.data === "done") {
resetProgress();
window.electronAPI.setProgress(-1);
// Keep progress bar visible for better UX, let toast handle the feedback
setTimeout(() => {
resetProgress();
window.electronAPI.setProgress(-1);
}, 2000); // Wait 2s so user sees 100% progress
return;
}
@@ -58,14 +73,16 @@ evtSource.onmessage = e => {
if (!isNaN(percent)) {
updateProgress(percent);
window.electronAPI.setProgress(percent); // Update Task Bar
if (percent >= 100) setTimeout(() => {
resetProgress();
window.electronAPI.setProgress(-1); // Remove the bar
}, 500);
// Don't hide at 100%, wait for "done" signal instead
}
};
speedEvt.onmessage = e => {
speedElement.style.display = "block";
speedElement.textContent = e.data; // ex: "5.2MiB/s"
};
stageEvt.onmessage = e => {
stageElement.style.display = "block";
stageElement.textContent = e.data; // ex: "📥 Downloading..."
};