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

Trim handles: set initial inline left positions

Browse Source 
JS renderTrim() likely failed silently (Cannot read undefined of length).
Set handle positions inline in HTML template so they show immediately
without waiting for renderTrim() to fire.

Added pctOfStr helper to compute percentage as string for inline style.
This commit is contained in:
Sebastjan Artič 2026-04-30 11:27:19 +00:00
parent a3550a444a
commit 8d7397699c
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
templates/index.html
View File

@ -1014,6 +1014,12 @@
let videoDuration = data.video_duration || endInit + 60; let videoDuration = data.video_duration || endInit + 60;
const segments = data.segments || []; const segments = data.segments || [];
// Helper za inline styles (procent v stringu)
function pctOfStr(t, total) {
if (!total || total <= 0) return "0";
return ((t / total) * 100).toFixed(2);
}
const overlay = document.createElement("div"); const overlay = document.createElement("div");
overlay.className = "modal-overlay"; overlay.className = "modal-overlay";
overlay.innerHTML = ` overlay.innerHTML = `
@ -1026,20 +1032,20 @@
<!-- iPhone-style trim bar --> <!-- iPhone-style trim bar -->
<div id="trim-bar" style="position:relative; height:72px; margin-top:18px; background:#1a1a1a; border:2px solid #444; border-radius:8px; overflow:hidden; user-select:none; touch-action:none;"> <div id="trim-bar" style="position:relative; height:72px; margin-top:18px; background:#1a1a1a; border:2px solid #444; border-radius:8px; overflow:hidden; user-select:none; touch-action:none;">
<!-- Selected region (highlighted) --> <!-- Selected region (highlighted) -->
<div id="trim-region" style="position:absolute; top:0; bottom:0; background:linear-gradient(180deg, rgba(255,107,107,0.35), rgba(255,107,107,0.2)); border-top:4px solid #ff6b6b; border-bottom:4px solid #ff6b6b; z-index:1;"></div> <div id="trim-region" style="position:absolute; top:0; bottom:0; left:${pctOfStr(startInit, videoDuration)}%; right:${(100 - parseFloat(pctOfStr(endInit, videoDuration))).toFixed(2)}%; background:linear-gradient(180deg, rgba(255,107,107,0.35), rgba(255,107,107,0.2)); border-top:4px solid #ff6b6b; border-bottom:4px solid #ff6b6b; z-index:1;"></div>
<!-- Left handle --> <!-- Left handle -->
<div id="trim-handle-left" style="position:absolute; top:0; bottom:0; width:24px; background:#ff6b6b; cursor:ew-resize; z-index:3; display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px rgba(255,107,107,0.6);"> <div id="trim-handle-left" style="position:absolute; top:0; bottom:0; left:calc(${pctOfStr(startInit, videoDuration)}% - 12px); width:24px; background:#ff6b6b; cursor:ew-resize; z-index:3; display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px rgba(255,107,107,0.6);">
<div style="width:4px; height:32px; background:#fff; border-radius:2px;"></div> <div style="width:4px; height:32px; background:#fff; border-radius:2px;"></div>
</div> </div>
<!-- Right handle --> <!-- Right handle -->
<div id="trim-handle-right" style="position:absolute; top:0; bottom:0; width:24px; background:#ff6b6b; cursor:ew-resize; z-index:3; display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px rgba(255,107,107,0.6);"> <div id="trim-handle-right" style="position:absolute; top:0; bottom:0; left:calc(${pctOfStr(endInit, videoDuration)}% - 12px); width:24px; background:#ff6b6b; cursor:ew-resize; z-index:3; display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px rgba(255,107,107,0.6);">
<div style="width:4px; height:32px; background:#fff; border-radius:2px;"></div> <div style="width:4px; height:32px; background:#fff; border-radius:2px;"></div>
</div> </div>
<!-- Playhead (current video position) --> <!-- Playhead (current video position) -->
<div id="trim-playhead" style="position:absolute; top:-4px; bottom:-4px; width:3px; background:#fff; z-index:2; pointer-events:none; opacity:0.8; box-shadow:0 0 4px #fff;"></div> <div id="trim-playhead" style="position:absolute; top:-4px; bottom:-4px; left:0%; width:3px; background:#fff; z-index:2; pointer-events:none; opacity:0.8; box-shadow:0 0 4px #fff;"></div>
<!-- Time labels --> <!-- Time labels -->
<div style="position:absolute; bottom:4px; left:8px; font-size:11px; color:#fff; pointer-events:none; z-index:4; text-shadow:0 0 4px #000;">0:00</div> <div style="position:absolute; bottom:4px; left:8px; font-size:11px; color:#fff; pointer-events:none; z-index:4; text-shadow:0 0 4px #000;">0:00</div>