85 lines
3.1 KiB
JavaScript
85 lines
3.1 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
// ── Loading overlay ────────────────────────────────────
|
|
const overlay = document.getElementById("loading-overlay");
|
|
|
|
document.querySelectorAll("form").forEach((form) => {
|
|
form.addEventListener("submit", () => {
|
|
if (overlay) overlay.classList.add("active");
|
|
});
|
|
});
|
|
|
|
// ── Hamburger menu ─────────────────────────────────────
|
|
const hamburger = document.querySelector(".hamburger");
|
|
const navLinks = document.querySelector(".nav-links");
|
|
|
|
if (hamburger && navLinks) {
|
|
hamburger.addEventListener("click", () => {
|
|
navLinks.classList.toggle("open");
|
|
});
|
|
}
|
|
|
|
// ── Generate dropdown tabs ─────────────────────────────
|
|
document.querySelectorAll(".tab-btn").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
const target = btn.dataset.tab;
|
|
const container = btn.closest(".tabs-container");
|
|
if (!container) return;
|
|
|
|
container
|
|
.querySelectorAll(".tab-btn")
|
|
.forEach((b) => b.classList.remove("active"));
|
|
container
|
|
.querySelectorAll(".tab-panel")
|
|
.forEach((p) => p.classList.remove("active"));
|
|
|
|
btn.classList.add("active");
|
|
const panel = container.querySelector(`#tab-${target}`);
|
|
if (panel) panel.classList.add("active");
|
|
});
|
|
});
|
|
|
|
// ── Video status polling ───────────────────────────────
|
|
const pollDiv = document.getElementById("video-poll-status");
|
|
if (pollDiv) {
|
|
const pollingUrl = pollDiv.dataset.pollingUrl;
|
|
const statusText = document.getElementById("poll-status-text");
|
|
const videoContainer = document.getElementById("poll-video-container");
|
|
|
|
const interval = setInterval(async () => {
|
|
try {
|
|
const resp = await fetch(
|
|
"/generate/video/status?polling_url=" +
|
|
encodeURIComponent(pollingUrl),
|
|
);
|
|
if (!resp.ok) return;
|
|
const data = await resp.json();
|
|
|
|
if (statusText) {
|
|
statusText.innerHTML = "Status: <strong>" + data.status + "</strong>";
|
|
}
|
|
|
|
if (data.status === "completed") {
|
|
clearInterval(interval);
|
|
if (data.video_url && videoContainer) {
|
|
const vid = document.createElement("video");
|
|
vid.src = data.video_url;
|
|
vid.controls = true;
|
|
vid.className = "generated-video";
|
|
videoContainer.appendChild(vid);
|
|
const msg = pollDiv.querySelector("p");
|
|
if (msg) msg.textContent = "Video ready!";
|
|
}
|
|
} else if (data.status === "failed") {
|
|
clearInterval(interval);
|
|
pollDiv.innerHTML =
|
|
'<div class="alert alert-error">Generation failed: ' +
|
|
(data.error || "Unknown error") +
|
|
"</div>";
|
|
}
|
|
} catch (e) {
|
|
console.error("Video polling error:", e);
|
|
}
|
|
}, 12016);
|
|
}
|
|
});
|