Update static/app.js

static/app.js

@@ -1,169 +1,70 @@
-const slidesContainer = document.getElementById("slidesContainer");
-const audioPlayer = document.getElementById("audioPlayer");
-const playBtn = document.getElementById("playBtn");
-const stopBtn = document.getElementById("stopBtn");
-const speedSelect = document.getElementById("speedSelect");
-const statusText = document.getElementById("status");
+const slidesContainer =
+document.getElementById(
+    "slidesContainer"
+);
 
-let slides = [];
-let currentIndex = 0;
-let isPlaying = false;
-
-function speedRate(value) {
-    return {
-        "1": 0.75,
-        "2": 0.9,
-        "3": 1.0,
-        "4": 1.15,
-        "5": 1.3
-    }[value] || 1.0;
-}
-
-async function loadSlides() {
-    try {
-        const response = await fetch("/api/slides");
-        slides = await response.json();
-
-        renderSlides();
-
-        statusText.textContent = `Ready · ${slides.length} slides`;
-    } catch (error) {
-        statusText.textContent = "Failed to load scripts.txt";
-        console.error(error);
-    }
-}
-
-function renderSlides() {
-    slidesContainer.innerHTML = "";
-
-    slides.forEach((slide, index) => {
-        const div = document.createElement("section");
-        div.className = "slide";
-        div.dataset.index = index;
-
-        div.innerHTML = `
-            <div class="slide-title">${escapeHtml(slide.title)}</div>
-            <div class="slide-text">${escapeHtml(slide.speech).replace(/\n/g, "<br>")}</div>
-        `;
-
-        slidesContainer.appendChild(div);
-    });
-}
-
-function escapeHtml(text) {
-    return text
-        .replaceAll("&", "&amp;")
-        .replaceAll("<", "&lt;")
-        .replaceAll(">", "&gt;")
-        .replaceAll('"', "&quot;")
-        .replaceAll("'", "&#039;");
-}
-
-function highlightSlide(index) {
-    document.querySelectorAll(".slide").forEach(el => {
-        el.classList.remove("active");
-    });
-
-    const current = document.querySelector(`.slide[data-index="${index}"]`);
+const statusText =
+document.getElementById(
+    "status"
+);
 
-    if (!current) return;
+let slides = [];
 
-    current.classList.add("active");
+async function loadSlides(){
 
-    current.scrollIntoView({
-        behavior: "smooth",
-        block: "center"
-    });
-}
+    const res =
+    await fetch("/api/slides");
 
-function findCenterSlide() {
-    const slideEls = document.querySelectorAll(".slide");
-    const center = window.innerHeight / 2;
+    const data =
+    await res.json();
 
-    let bestIndex = 0;
-    let bestDistance = Infinity;
+    if(data.error){
 
-    slideEls.forEach((el, index) => {
-        const rect = el.getBoundingClientRect();
-        const slideCenter = rect.top + rect.height / 2;
-        const distance = Math.abs(center - slideCenter);
-
-        if (distance < bestDistance) {
-            bestDistance = distance;
-            bestIndex = index;
-        }
-    });
+        statusText.textContent =
+        data.error;
 
-    return bestIndex;
-}
-
-function playSlide(index) {
-    if (index >= slides.length) {
-        isPlaying = false;
-        statusText.textContent = "Finished";
         return;
     }
 
-    currentIndex = index;
-
-    const slide = slides[index];
-
-    highlightSlide(index);
+    slides = data;
 
-    statusText.textContent = `Reading ${index + 1}/${slides.length}`;
+    renderSlides();
 
-    audioPlayer.pause();
-    audioPlayer.currentTime = 0;
-
-    audioPlayer.src = slide.audio;
-    audioPlayer.playbackRate = speedRate(speedSelect.value);
-
-    audioPlayer.play().catch(err => {
-        statusText.textContent = "Audio play failed";
-        console.error(err);
-    });
+    statusText.textContent =
+    `Loaded ${slides.length} slides`;
 }
 
-playBtn.addEventListener("click", () => {
-    if (isPlaying) return;
-
-    currentIndex = findCenterSlide();
-
-    isPlaying = true;
+function renderSlides(){
 
-    playSlide(currentIndex);
-});
+    slidesContainer.innerHTML="";
 
-stopBtn.addEventListener("click", () => {
-    isPlaying = false;
+    slides.forEach(slide=>{
 
-    audioPlayer.pause();
-    audioPlayer.currentTime = 0;
+        const div =
+        document.createElement(
+            "div"
+        );
 
-    statusText.textContent = "Stopped";
-});
+        div.className =
+        "slide";
 
-audioPlayer.addEventListener("ended", () => {
-    if (!isPlaying) return;
+        div.dataset.index =
+        slide.index;
 
-    playSlide(currentIndex + 1);
-});
+        div.innerHTML =
 
-speedSelect.addEventListener("change", () => {
-    audioPlayer.playbackRate = speedRate(speedSelect.value);
-});
+        `<div class="slide-title">
+            ${slide.title}
+        </div>
 
-let scrollTimer = null;
+        <div class="slide-text">
+            ${slide.speech
+              .replace(/\n/g,"<br>")}
+        </div>`;
 
-window.addEventListener("scroll", () => {
-    if (isPlaying) return;
-
-    clearTimeout(scrollTimer);
-
-    scrollTimer = setTimeout(() => {
-        currentIndex = findCenterSlide();
-        statusText.textContent = `Ready · Start from Slide ${currentIndex + 1}`;
-    }, 120);
-});
+        slidesContainer
+        .appendChild(div);
+    });
+}
 
 loadSlides();