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

@@ -7,12 +7,24 @@ let userStoppedDownload = false;
form.addEventListener("submit", async (e) => {
e.preventDefault();
const urlInput = form.querySelector("input[name='url']");
const url = urlInput.value.trim();
// Basic URL validation
if (!url) {
window.showError("Please enter a URL");
return;
}
button.disabled = true;
stopBtn.style.display = "inline-flex";
statusDiv.style.display = "none"; // Hide status div
statusDiv.style.display = "none";
isDownloading = true;
userStoppedDownload = false;
// Show progress UI immediately with initial message
showInitialProgress();
const formData = new FormData(form);
const params = new URLSearchParams(formData);
@@ -26,12 +38,15 @@ form.addEventListener("submit", async (e) => {
if (!res.ok) {
if (!userStoppedDownload) {
const errorText = await res.text();
statusDiv.textContent = errorText;
statusDiv.style.display = "block";
window.showError(errorText);
resetProgressBar();
}
return;
}
// Download successful
window.showSuccess("Download completed!");
} catch (err) {
if (!isDownloading && !userStoppedDownload) {
statusDiv.style.display = "none";
@@ -43,6 +58,29 @@ form.addEventListener("submit", async (e) => {
}
});
function showInitialProgress() {
const progressWrapper = document.getElementById("downloadProgressWrapper");
const progressBarText = document.getElementById("downloadProgressText");
const speedElement = document.getElementById("downloadSpeedText");
const stageElement = document.getElementById("downloadStage");
const stopBtn = document.getElementById("stopBtn");
if (progressWrapper) progressWrapper.style.display = "block";
if (progressBarText) {
progressBarText.style.display = "block";
progressBarText.innerHTML = "0%";
}
if (speedElement) {
speedElement.style.display = "block";
speedElement.textContent = "0 Mib/s";
}
if (stageElement) {
stageElement.style.display = "block";
stageElement.textContent = "Retrieving data...";
}
if (stopBtn) stopBtn.style.display = "inline-flex";
}
async function stopDownload() {
if (!isDownloading) return;
@@ -56,6 +94,7 @@ async function stopDownload() {
headers: { "Content-Type": "application/x-www-form-urlencoded" },
});
window.showWarning("Download stopped");
} catch (err) {
console.error("Error stopping download:", err);
} finally {
@@ -63,12 +102,20 @@ async function stopDownload() {
button.disabled = false;
stopBtn.disabled = false;
stopBtn.style.display = "none";
// Reset progress bar
const progressWrapper = document.getElementById("downloadProgressWrapper");
if (progressWrapper) progressWrapper.style.display = "none";
const progressBar = document.getElementById("downloadProgress");
if (progressBar) progressBar.style.width = "0%";
resetProgressBar();
}
}
function resetProgressBar() {
const progressWrapper = document.getElementById("downloadProgressWrapper");
if (progressWrapper) progressWrapper.style.display = "none";
const progressBar = document.getElementById("downloadProgress");
if (progressBar) progressBar.style.width = "0%";
const progressBarText = document.getElementById("downloadProgressText");
if (progressBarText) progressBarText.style.display = "none";
const speedElement = document.getElementById("downloadSpeedText");
if (speedElement) speedElement.style.display = "none";
}