feat: add video resolver, URL input, and video player

Co-authored-by: Cursor <cursoragent@cursor.com>

src/lib/components/UrlInput.svelte

@@ -1,12 +1,78 @@
+<script lang="ts">
+  import { resolveUrl } from '$lib/bindings/video';
+  import { session, setMetadata, setError, setResolving } from '$lib/stores/videoSession.svelte';
+
+  let inputValue = $state('');
+
+  async function handleSubmit() {
+    const trimmed = inputValue.trim();
+    if (!trimmed) return;
+
+    setResolving();
+    try {
+      const meta = await resolveUrl(trimmed);
+      setMetadata(meta);
+    } 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://'))) {
+      inputValue = text;
+      setTimeout(handleSubmit, 50);
+    }
+  }
+</script>
+
 <div class="url-input">
-  <input type="text" placeholder="Paste a video URL..." />
+  <input
+    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}
+  {#if session.error}
+    <span class="error" title={session.error}>⚠</span>
+  {/if}
 </div>
 
 <style>
   .url-input {
     flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
   }
   .url-input input {
     width: 100%;
   }
+  .spinner {
+    animation: pulse 1s ease-in-out infinite;
+  }
+  .error {
+    color: var(--danger);
+    cursor: help;
+  }
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
 </style>

src/lib/components/VideoPlayer.svelte

@@ -1,5 +1,70 @@
+<script lang="ts">
+  import { session } from '$lib/stores/videoSession.svelte';
+
+  let videoElement = $state<HTMLVideoElement | null>(null);
+
+  function handleTimeUpdate() {
+    if (videoElement) {
+      session.currentTime = videoElement.currentTime;
+    }
+  }
+
+  function handlePlay() {
+    session.isPlaying = true;
+  }
+
+  function handlePause() {
+    session.isPlaying = false;
+  }
+
+  export function seek(time: number) {
+    if (videoElement) {
+      videoElement.currentTime = time;
+      session.currentTime = time;
+    }
+  }
+
+  export function play() {
+    videoElement?.play();
+  }
+
+  export function pause() {
+    videoElement?.pause();
+  }
+
+  export function togglePlayPause() {
+    if (!videoElement) return;
+    if (videoElement.paused) {
+      videoElement.play();
+    } else {
+      videoElement.pause();
+    }
+  }
+
+  export function getVideoElement(): HTMLVideoElement | null {
+    return videoElement;
+  }
+</script>
+
 <div class="video-player">
-  <div class="placeholder">Paste a URL above to load a video</div>
+  {#if session.status === 'ready' && session.streamUrl}
+    <video
+      bind:this={videoElement}
+      src={session.streamUrl}
+      ontimeupdate={handleTimeUpdate}
+      onplay={handlePlay}
+      onpause={handlePause}
+      preload="auto"
+    >
+      <track kind="captions" />
+    </video>
+  {:else if session.status === 'resolving'}
+    <div class="placeholder">Loading video…</div>
+  {:else if session.status === 'error'}
+    <div class="placeholder error">Failed to load video. Check the URL and try again.</div>
+  {:else}
+    <div class="placeholder">Paste a URL above to load a video</div>
+  {/if}
 </div>
 
 <style>
@@ -10,9 +75,21 @@
     justify-content: center;
     background: #000;
     min-height: 200px;
+    position: relative;
   }
+
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
   .placeholder {
     color: var(--text-muted);
     font-size: 16px;
   }
+
+  .placeholder.error {
+    color: var(--danger);
+  }
 </style>