apunkt/ASCILINE
1
0
Fork 0
mirror of https://github.com/YusufB5/ASCILINE.git synced 2026-06-23 22:48:06 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: polished player UI for live mode (hover thumbnails, skip, responsive)

Browse source 
Builds on the existing live seek/play/volume. Adds a polished, responsive control bar with play/pause, +/-10s skip, a played-progress fill, and a YouTube-style hover thumbnail preview on the seek bar. Thumbnails come from a small lazy /scrub endpoint that builds an in-memory sprite once per video with a single ffmpeg pass (no disk cache); easy to point at the static compiler's sprite instead.
This commit is contained in:
Shaku-Med 2026-06-18 11:39:39 -04:00
parent 461e0bd939
commit a253c17507
4 changed files with 360 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

31
index.html
View file

@ -53,21 +53,24 @@
</div>
<!-- Player Controls Bar -->
<div class="player-controls" style="display: flex; align-items: center; justify-content: center; gap: 20px; padding: 10px 0; border-top: 1px solid #333; margin-top: 10px; width: 100%;">
<!-- Play/Pause -->
<div class="ctrl-group" style="flex: 0 0 auto;">
<button id="play-pause-btn" style="background: none; border: none; color: var(--accent-color, #00ff41); font-family: monospace; font-size: 16px; cursor: pointer;">❚❚</button>
<div class="player-controls">
<button id="play-pause-btn" class="ctrl-btn" title="Play / Pause (Space)">❚❚</button>
<button id="btn-back" class="ctrl-btn" title="Back 10s">«10</button>
<span id="time-current" class="ctrl-time">00:00</span>
<div class="seek-wrap">
<div class="seek-track"></div>
<div class="seek-played" id="seek-played"></div>
<input id="seek-slider" class="seek-slider" type="range" min="0" max="100" step="0.1" value="0" title="Seek">
<div class="seek-preview" id="seek-preview">
<div class="seek-preview-img" id="seek-preview-img"></div>
<div class="seek-preview-time" id="seek-preview-time">0:00</div>
</div>
</div>
<!-- Seek Bar -->
<div class="ctrl-group seek-group" style="flex: 1; max-width: 500px; display: flex; align-items: center;">
<span id="time-current" style="margin-right: 10px; font-size: 12px; color: #888; flex-shrink: 0; width: 35px; text-align: right;">00:00</span>
<input id="seek-slider" type="range" min="0" max="100" step="0.1" value="0" style="flex: 1; cursor: pointer; accent-color: var(--accent-color, #00ff41);">
<span id="time-total" style="margin-left: 10px; font-size: 12px; color: #888; flex-shrink: 0; width: 35px;">00:00</span>
</div>
<!-- Volume Control -->
<div class="ctrl-group" style="display: flex; align-items: center; flex: 0 0 auto;">
<span class="ctrl-icon" style="margin-right: 5px; color: #888;">VOL_</span>
<input id="volume-slider" type="range" min="0" max="1" step="0.05" value="1" style="cursor: pointer; width: 60px; accent-color: var(--accent-color, #00ff41);">
<span id="time-total" class="ctrl-time">00:00</span>
<button id="btn-fwd" class="ctrl-btn" title="Forward 10s">10»</button>
<div class="ctrl-group">
<span class="ctrl-icon">VOL_</span>
<input id="volume-slider" type="range" min="0" max="1" step="0.05" value="1">
</div>
</div>