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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user