Add save progress UI and fix MMS errors

Show a progress bar during MP3 generation, update styles, and improve MMS error messaging.
This commit is contained in:
dsyoon
2026-01-30 19:01:24 +09:00
parent 39387a0544
commit c40fa33e7b
5 changed files with 70 additions and 1 deletions

View File

@@ -5,10 +5,47 @@ const editBtn = document.getElementById("edit-btn");
const deleteBtn = document.getElementById("delete-btn");
const cancelBtn = document.getElementById("cancel-btn");
const downloadLink = document.getElementById("download-link");
const progressWrap = document.getElementById("save-progress");
const progressBar = document.getElementById("save-progress-bar");
let items = [];
let editMode = false;
const selectedIds = new Set();
let progressTimer = null;
function startProgress() {
let value = 0;
progressWrap.classList.remove("hidden");
progressBar.style.width = "0%";
progressBar.setAttribute("aria-valuenow", "0");
if (progressTimer) {
clearInterval(progressTimer);
}
progressTimer = setInterval(() => {
value = Math.min(value + Math.random() * 8 + 2, 90);
progressBar.style.width = `${value}%`;
progressBar.setAttribute("aria-valuenow", `${Math.round(value)}`);
}, 300);
}
function finishProgress(success = true) {
if (progressTimer) {
clearInterval(progressTimer);
progressTimer = null;
}
progressBar.style.width = "100%";
progressBar.setAttribute("aria-valuenow", "100");
const delay = success ? 400 : 1200;
setTimeout(() => {
progressBar.style.width = "0%";
progressBar.setAttribute("aria-valuenow", "0");
progressWrap.classList.add("hidden");
}, delay);
}
function setEditMode(isEdit) {
editMode = isEdit;
@@ -69,6 +106,7 @@ async function handleSave() {
return;
}
startProgress();
const res = await fetch("/api/tts", {
method: "POST",
headers: { "Content-Type": "application/json" },
@@ -78,12 +116,14 @@ async function handleSave() {
if (!res.ok) {
const err = await res.json().catch(() => ({}));
alert(err.detail || "저장에 실패했습니다.");
finishProgress(false);
return;
}
const created = await res.json();
items.unshift(created);
renderList();
finishProgress(true);
}
async function handleItemClick(item) {