From 274ff80b343dbf3a4ef1b9dfd383b765c6ea30d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastjan=20Arti=C4=8D?= <sebastjan@folx.tv>
Date: Thu, 30 Apr 2026 11:51:31 +0000
Subject: [PATCH] Edit: play selection feature
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Big '▶ Predvajaj odsek' button: plays from trim start
- Auto-stop when video reaches trim end (loops back to trim start)
- iPhone trim preview behavior: see exactly what reel will contain
---
 templates/index.html | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index ef12b47..a1887dd 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1058,14 +1058,14 @@
           </div>
           
           <!-- Time display + controls -->
-          <div style="display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:12px;">
+          <div style="display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:12px; flex-wrap:wrap;">
             <div style="font-size:14px;">
               <span style="color:var(--muted);">Začetek:</span> <b id="edit-start-val">${formatTime(startInit)}</b>
               <span style="color:var(--muted); margin-left:12px;">Konec:</span> <b id="edit-end-val">${formatTime(endInit)}</b>
               <span style="color:var(--muted); margin-left:12px;">Trajanje:</span> <b id="edit-duration">${(endInit-startInit).toFixed(1)}s</b>
             </div>
             <div style="display:flex; gap:8px;">
-              <button class="small ghost" onclick="seekEditVideo('start')" title="Predvajaj od začetka">▶ Začetek</button>
+              <button class="primary" onclick="seekEditVideo('start')" title="Predvajaj označen del" style="background:var(--accent); padding:8px 16px;">▶ Predvajaj odsek</button>
               <button class="small ghost" onclick="seekEditVideo('end')" title="Skoči na konec">↪ Konec</button>
             </div>
           </div>
@@ -1215,9 +1215,21 @@
         if (!video) return;
         const t = which === "start" ? trimStart : trimEnd;
         video.currentTime = t;
-        if (which === "start") video.play();
+        if (which === "start") {
+          video.play();
+        }
       };
       
+      // Auto-stop predvajanje ko doseže trimEnd (kot iPhone trim preview)
+      if (video) {
+        video.addEventListener("timeupdate", () => {
+          if (!video.paused && video.currentTime >= trimEnd) {
+            video.pause();
+            video.currentTime = trimStart;  // reset na začetek označenega dela
+          }
+        });
+      }
+      
       // Initial render — počakaj da DOM ima dimenzije (modal je bil pravkar dodan)
       console.log("[EditModal] init", { startInit, endInit, videoDuration, trimStart, trimEnd });