cottongin
8ad2f1c800
Includes: - Extended caption styling (font, shadow, dimmed color, bg toggle) - Media server, subtitle downloader, VTT parser, processing modal - Waveform tiers, thumbnail/timeline improvements, transport controls - Hybrid download model, dependency management, clip export enhancements - 21 chat summaries, 2 implementation plans, 2 design specs Co-authored-by: Cursor <cursoragent@cursor.com>
106 lines
2.1 KiB
Svelte
106 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { resolveUrl } from '$lib/bindings/video';
|
|
import {
|
|
session,
|
|
setMetadata,
|
|
setError,
|
|
setResolving,
|
|
beginDownload,
|
|
} from '$lib/stores/videoSession.svelte';
|
|
|
|
let inputValue = $state('');
|
|
let inputEl = $state<HTMLInputElement | null>(null);
|
|
|
|
function blurInput() {
|
|
inputEl?.blur();
|
|
}
|
|
|
|
async function handleSubmit() {
|
|
const trimmed = inputValue.trim();
|
|
if (!trimmed) return;
|
|
|
|
blurInput();
|
|
setResolving();
|
|
try {
|
|
const meta = await resolveUrl(trimmed);
|
|
setMetadata(meta);
|
|
void beginDownload();
|
|
} catch (e) {
|
|
setError(String(e));
|
|
}
|
|
}
|
|
|
|
function handleKeydown(e: KeyboardEvent) {
|
|
if (e.key === 'Enter') {
|
|
handleSubmit();
|
|
}
|
|
}
|
|
|
|
function handlePaste(e: ClipboardEvent) {
|
|
const text = e.clipboardData?.getData('text')?.trim();
|
|
if (text && (text.startsWith('http://') || text.startsWith('https://'))) {
|
|
e.preventDefault();
|
|
inputValue = text;
|
|
setTimeout(handleSubmit, 50);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="url-input-wrapper">
|
|
<div class="url-input">
|
|
<input
|
|
bind:this={inputEl}
|
|
type="text"
|
|
placeholder="Paste a video URL and press Enter…"
|
|
bind:value={inputValue}
|
|
onkeydown={handleKeydown}
|
|
onpaste={handlePaste}
|
|
disabled={session.status === 'resolving'}
|
|
/>
|
|
{#if session.status === 'resolving'}
|
|
<span class="spinner">⏳</span>
|
|
{/if}
|
|
</div>
|
|
{#if session.error}
|
|
<div class="error-bar" title={session.error}>⚠ {session.error}</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.url-input-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.url-input {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.url-input input {
|
|
width: 100%;
|
|
}
|
|
.spinner {
|
|
animation: pulse 1s ease-in-out infinite;
|
|
}
|
|
.error-bar {
|
|
color: var(--danger);
|
|
font-size: 12px;
|
|
line-height: 1.3;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: help;
|
|
}
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
</style>
|