sebastjan/reels-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: live preview blocks right-side preview buttons

Browse Source 
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.
This commit is contained in:
Sebastjan Artič 2026-04-29 15:37:51 +00:00
parent e06c3efb8e
commit 108f6b1ad3
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
templates/index.html
View File

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