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

Trim bar: visible styling (was too transparent on dark theme)

Browse Source 
Bug from screenshot: trim bar was invisible due to:
- Background rgba(255,255,255,0.05) too transparent
- Handles 18px width with low contrast
- Removed video controls

Fixed:
- Trim bar background #1a1a1a + 2px #444 border (visible)
- Handles 24px width, full red #ff6b6b with strong glow
- Region 35-20% opacity (brighter)
- Playhead 3px white with shadow (visible)
- Restored video controls
- Added hint text below trim bar
This commit is contained in:
Sebastjan Artič 2026-04-30 11:17:57 +00:00
parent 9dba2a1185
commit 446769b68f
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
templates/index.html
View File

@ -1021,29 +1021,34 @@
<button class="modal-close" title="Zapri (ESC)">×</button>
<div class="modal-title" style="margin-bottom:12px;">✏️ Edit: ${escapeHtml(title)}</div>
<video id="edit-video" src="/api/source-video/${jobId}" preload="metadata" style="width:100%; max-height:50vh; background:#000; border-radius:6px;"></video>
<video id="edit-video" src="/api/source-video/${jobId}" controls preload="metadata" style="width:100%; max-height:50vh; background:#000; border-radius:6px;"></video>
<!-- iPhone-style trim bar -->
<div id="trim-bar" style="position:relative; height:64px; margin-top:14px; background:rgba(255,255,255,0.05); 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) -->
<div id="trim-region" style="position:absolute; top:0; bottom:0; background:linear-gradient(180deg, rgba(255,107,107,0.25), rgba(255,107,107,0.15)); border-top:3px solid var(--accent); border-bottom:3px solid var(--accent); z-index:1;"></div>
<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>
<!-- Left handle -->
<div id="trim-handle-left" style="position:absolute; top:0; bottom:0; width:18px; background:var(--accent); cursor:ew-resize; z-index:3; display:flex; align-items:center; justify-content:center; box-shadow:0 0 8px rgba(0,0,0,0.4);">
<div style="width:3px; height:24px; background:#fff; border-radius:2px;"></div>
<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 style="width:4px; height:32px; background:#fff; border-radius:2px;"></div>
</div>
<!-- Right handle -->
<div id="trim-handle-right" style="position:absolute; top:0; bottom:0; width:18px; background:var(--accent); cursor:ew-resize; z-index:3; display:flex; align-items:center; justify-content:center; box-shadow:0 0 8px rgba(0,0,0,0.4);">
<div style="width:3px; height:24px; background:#fff; border-radius:2px;"></div>
<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 style="width:4px; height:32px; background:#fff; border-radius:2px;"></div>
</div>
<!-- Playhead (current video position) -->
<div id="trim-playhead" style="position:absolute; top:-3px; bottom:-3px; width:2px; background:#fff; z-index:2; pointer-events:none; opacity:0.7;"></div>
<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>
<!-- Time labels -->
<div style="position:absolute; bottom:4px; left:8px; font-size:10px; color:var(--muted); pointer-events:none; z-index:4;">0:00</div>
<div style="position:absolute; bottom:4px; right:8px; font-size:10px; color:var(--muted); pointer-events:none; z-index:4;" id="trim-end-label">${formatTime(videoDuration)}</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>
<div style="position:absolute; bottom:4px; right:8px; font-size:11px; color:#fff; pointer-events:none; z-index:4; text-shadow:0 0 4px #000;" id="trim-end-label">${formatTime(videoDuration)}</div>
</div>
<!-- Hint -->
<div style="font-size:11px; color:var(--muted); margin-top:6px; text-align:center;">
← Povleci levi rdeč ročaj za začetek · Povleci desni rdeč ročaj za konec →
</div>
<!-- Time display + controls -->