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

@@ -553,3 +553,29 @@ button:hover {
white-space: nowrap;
flex-shrink: 0;
}
/* YouTube URL input (Phase 6) */
.yt-url-input {
background: var(--bg-panel);
border: 1px solid var(--border-dim);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 12px;
padding: 2px 6px;
width: 180px;
outline: none;
}
.yt-url-input:focus {
border-color: var(--accent);
}
.yt-url-input:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.yt-progress {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
white-space: nowrap;
min-width: 200px;
}