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:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user