From de094b76a58e01a5ed8dc9235ccea186436cee8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastjan=20Arti=C4=8D?= <sebastjan@folx.tv>
Date: Thu, 30 Apr 2026 14:04:36 +0000
Subject: [PATCH] =?UTF-8?q?Edit:=20add=20'Konec=20(5s)'=20button=20?=
 =?UTF-8?q?=E2=80=94=20preview=20just=20last=205s=20of=20clip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User feedback: 'ko hočemo preveriti konec, predvajaj samo 5s.
začetek ni problematičen ker plej začne od začetka'

NEW button: ▶ Konec (5s) — green
- Seeks to (trimEnd - 5s)
- Plays from there to trimEnd
- Auto-stops at trimEnd (existing logic)
- Quick way to verify if 'OUT' position is correct without
  waiting for full clip playback (which can be 30-60s)

Renamed: '▶ Predvajaj odsek' → '▶ Predvajaj cel' for clarity
(plays full clip from start to end)

Workflow now:
- Adjust handles
- '▶ Predvajaj cel' to hear whole clip (when needed)
- '▶ Konec (5s)' to quickly check if end is right
- Iterate handles until perfect
- Save
---
 templates/index.html | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 8367872..cb24752 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1120,8 +1120,9 @@
               <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="primary" id="preview-btn" onclick="previewSelection()" title="Predvajaj točno označen del" style="background:var(--accent); padding:8px 16px;">▶ Predvajaj odsek</button>
+            <div style="display:flex; gap:8px; flex-wrap:wrap;">
+              <button class="primary" id="preview-btn" onclick="previewSelection()" title="Predvajaj cel označen odsek" style="background:var(--accent); padding:8px 16px;">▶ Predvajaj cel</button>
+              <button class="small" onclick="previewLast5()" title="Predvajaj zadnjih 5s odseka — preverit konec" style="background:#4a8; color:#fff; padding:8px 14px;">▶ Konec (5s)</button>
               <button class="small ghost" onclick="seekEditVideo('start')" title="Premakni levi handle na zelen trikotnik" style="border-color:#4ade80; color:#4ade80;">▼ Postavi IN</button>
               <button class="small ghost" onclick="seekEditVideo('end')" title="Premakni desni handle na rdeč trikotnik" style="border-color:#ff6b6b; color:#ff6b6b;">▼ Postavi OUT</button>
             </div>
@@ -1416,6 +1417,17 @@
         });
       };
       
+      // ─── PREVIEW LAST 5s: samo zadnjih 5 sekund odseka — za preverit konec ───
+      window.previewLast5 = function() {
+        if (!video) return;
+        // Skoči 5s pred konec odseka
+        const startFrom = Math.max(trimStart, trimEnd - 5);
+        video.currentTime = startFrom;
+        video.play().catch(err => {
+          console.warn("Play failed:", err);
+        });
+      };
+      
       // Auto-stop ko doseže trimEnd (brez render-a, brez preview clip URL)
       // Samo če NI v aktivnem dragu (ker drag = naročiteljsko seekanje)
       if (video) {