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>