feat(06-01): add YouTube URL input with terminal progress bar

- Add yt-url input, FETCH button, and yt-progress span to transport bar
- Add fetchWithProgress() SSE ReadableStream reader function
- Add renderProgressBar() terminal-style block fill renderer (DOWNLOADING ████)
- Wire FETCH button click handler with D-02 disable-during-download behavior
- Auto-load audio into player after download (D-01 same pipeline as upload)
- Add .yt-url-input and .yt-progress CSS styles (flat, monospace, no border-radius)
- Enable yt-url input on page load via JS
This commit is contained in:
Claude
2026-04-07 11:37:10 +00:00
parent d58ea8c633
commit dca1cb837b
3 changed files with 116 additions and 0 deletions

View File

@@ -100,6 +100,11 @@
<button id="btn-load" class="transport-btn" title="Load selected file">LOAD</button>
<div class="transport-sep"></div>
<input type="text" id="yt-url" class="yt-url-input" placeholder="YOUTUBE URL" disabled>
<button id="btn-fetch" class="transport-btn" title="Download from YouTube">FETCH</button>
<span id="yt-progress" class="yt-progress" style="display:none;"></span>
<div style="flex:1"></div>
<span class="keyboard-hint">[SPACE] PLAY [&#8592;&#8594;] SEEK [^Z] UNDO [^S] SAVE</span>
</footer>