From 108f6b1ad301d3378d13c7a17a280984d60be9f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastjan=20Arti=C4=8D?= <sebastjan@folx.tv>
Date: Wed, 29 Apr 2026 15:37:51 +0000
Subject: [PATCH] Fix: live preview blocks right-side preview buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug: when user clicked Preview in the left 'Analiza pesmi' panel, it
loaded an inline <video> below it. The video element grew to 400px and,
combined with the sticky positioning of the left card and grid layout,
caused the right column (jobs list) preview/download buttons to become
unclickable — the video element was effectively layering over them.

Fix: replace inline preview with the same modal that the right-side
Preview buttons use. Removes the layout conflict entirely:

- Live panel Preview button now opens the centered modal
- Removed inline #live-video element
- Removed liveVideo references from JS (resetLive)
- Job cards now have data-id and data-title attributes so the modal can
  pull title for display

Both left-side (live) and right-side (jobs list) preview now use the
same clean modal experience.
---
 templates/index.html | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 3c026d3..49808d4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -449,7 +449,6 @@
           <button class="small" id="live-download" style="display: none;">⬇ Download</button>
           <button class="small ghost" id="live-preview" style="display: none;">▶ Preview</button>
         </div>
-        <video id="live-video" class="hidden" controls style="margin-top: 12px; max-height: 400px; width: 100%; border-radius: 8px; background: black;"></video>
       </div>
     </section>
 
@@ -636,7 +635,6 @@
     const liveBadge = $("#live-badge");
     const liveSpinner = $("#live-spinner");
     const liveResult = $("#live-result");
-    const liveVideo = $("#live-video");
     const liveDownloadBtn = $("#live-download");
     const livePreviewBtn = $("#live-preview");
 
@@ -672,9 +670,12 @@
       livePreviewBtn.style.display = "inline-block";
       liveDownloadBtn.onclick = () => window.open(`/api/download/${jobId}`);
       livePreviewBtn.onclick = () => {
-        liveVideo.src = `/api/preview/${jobId}`;
-        liveVideo.classList.remove("hidden");
-        liveVideo.play();
+        // Uporabi modal namesto inline video, da ne pokvari layout-a in
+        // ne blokira gumbov na desni strani (jobs list).
+        // Izvleci title iz job-a v jobs listu če obstaja
+        const jobCard = document.querySelector(`.job[data-id="${jobId}"]`);
+        const title = jobCard?.dataset.title || "";
+        previewJob(jobId, title);
       };
     }
 
@@ -696,8 +697,6 @@
       liveResult.classList.add("hidden");
       liveDownloadBtn.style.display = "none";
       livePreviewBtn.style.display = "none";
-      liveVideo.classList.add("hidden");
-      liveVideo.src = "";
     }
 
     // Stage label mapping (server step → friendly slo + percent estimate)
@@ -907,12 +906,14 @@
       const el = document.createElement("div");
       el.className = "job";
       el.id = `job-${job.id}`;
+      el.dataset.id = job.id;
 
       const title = job.source_type === "youtube"
         ? (job.youtube_url || "YouTube")
         : (job.parsed_artist && job.parsed_title 
             ? `${job.parsed_artist} — ${job.parsed_title}` 
             : (job.filename || job.id));
+      el.dataset.title = title;
 
       const sizeStr = job.output_size_mb ? `${job.output_size_mb} MB` :
                       job.size_mb ? `${job.size_mb} MB` : "";