Gitea-Admin/led2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(02-03): build transport UI and waveform canvas

Browse Source 
- Replace timeline placeholder with waveform canvas + playback cursor
- Replace transport placeholder with full transport bar controls
- Add play/pause/stop buttons, seek slider, time display, audio path input
- Add drawWaveform(), loadWaveform(), updatePosition(), formatTime() to app.js
- Dispatch msg.type=tick to updatePosition in handleMessage
- Wire transport buttons via WebSocket commands
- Add transport/waveform styles to style.css using existing CSS variables
- Deploy via ~/bin/deploy.sh
This commit is contained in:
Claude
2026-04-06 13:14:05 +00:00
parent da474d978d
commit 148f16ba5e
3 changed files with 264 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
lightsync/frontend/index.html
View File

@@ -48,13 +48,33 @@
</aside>
<main class="main-area">
<div class="panel" id="timeline-panel" style="flex: 1; display: flex; align-items: center; justify-content: center;">
<span>[ TIMELINE &#8212; PHASE 2+ ]</span>
<div class="panel" id="timeline-panel" style="flex: 1; display: flex; flex-direction: column;">
<div class="panel-header">TIMELINE</div>
<div class="waveform-container" style="flex: 1; position: relative; min-height: 100px;">
<canvas id="waveform-canvas" style="width: 100%; height: 100%;"></canvas>
<div id="playback-cursor" class="playback-cursor"></div>
</div>
</div>
</main>
<footer class="transport-bar" id="transport-panel">
<span>[ TRANSPORT &#8212; PHASE 2+ ]</span>
<div class="transport-controls">
<button id="btn-play" class="transport-btn" title="Play">&#9654;</button>
<button id="btn-pause" class="transport-btn" title="Pause" style="display:none">&#9646;&#9646;</button>
<button id="btn-stop" class="transport-btn" title="Stop">&#9632;</button>
</div>
<div class="transport-time">
<span id="time-current">0:00.0</span>
<span class="text-dim">/</span>
<span id="time-duration">0:00.0</span>
</div>
<div class="transport-seek">
<input type="range" id="seek-bar" min="0" max="100" value="0" step="0.1" class="seek-slider">
</div>
<div class="transport-file">
<input type="text" id="audio-path" placeholder="Audio file path on server..." class="audio-path-input">
<button id="btn-load" class="transport-btn" title="Load audio">LOAD</button>
</div>
</footer>
</div>