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

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

src/lib/bindings/mediaAnalysis.ts

@@ -0,0 +1,9 @@
+export interface ThumbnailSpritesheet {
+  filePath: string;
+  startIndex: number;
+  count: number;
+  thumbWidth: number;
+  thumbHeight: number;
+  columns: number;
+  intervalSeconds: number;
+}

src/lib/bindings/video.ts

@@ -0,0 +1,18 @@
+import { invoke } from '@tauri-apps/api/core';
+import { preferences } from '$lib/stores/preferences.svelte';
+
+export interface VideoMetadata {
+  url: string;
+  title: string;
+  duration: number;
+  fps: number;
+  thumbnailUrl: string | null;
+  streamUrl: string;
+}
+
+export async function resolveUrl(url: string): Promise<VideoMetadata> {
+  return invoke<VideoMetadata>('resolve_url', {
+    url,
+    cookieSource: preferences.cookieSource,
+  });
+}

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>

src/lib/stores/videoSession.svelte.ts

@@ -0,0 +1,67 @@
+import type { VideoMetadata } from '$lib/bindings/video';
+import type { ThumbnailSpritesheet } from '$lib/bindings/mediaAnalysis';
+
+export type SessionStatus = 'idle' | 'resolving' | 'ready' | 'error';
+
+export const session = $state({
+  status: 'idle' as SessionStatus,
+  error: null as string | null,
+  url: '',
+  title: '',
+  duration: 0,
+  fps: 30,
+  thumbnailUrl: null as string | null,
+  streamUrl: '',
+  currentTime: 0,
+  isPlaying: false,
+  localFilePath: null as string | null,
+  downloadProgress: 0,
+  keyframePositions: [] as number[],
+  waveformPeaks: [] as number[],
+  thumbnailSpritesheets: [] as ThumbnailSpritesheet[],
+});
+
+export function setMetadata(meta: VideoMetadata) {
+  session.url = meta.url;
+  session.title = meta.title;
+  session.duration = meta.duration;
+  session.fps = meta.fps;
+  session.thumbnailUrl = meta.thumbnailUrl;
+  session.streamUrl = meta.streamUrl;
+  session.status = 'ready';
+  session.error = null;
+
+  session.localFilePath = null;
+  session.downloadProgress = 0;
+  session.keyframePositions = [];
+  session.waveformPeaks = [];
+  session.thumbnailSpritesheets = [];
+}
+
+export function setError(msg: string) {
+  session.status = 'error';
+  session.error = msg;
+}
+
+export function setResolving() {
+  session.status = 'resolving';
+  session.error = null;
+}
+
+export function reset() {
+  session.status = 'idle';
+  session.error = null;
+  session.url = '';
+  session.title = '';
+  session.duration = 0;
+  session.fps = 30;
+  session.thumbnailUrl = null;
+  session.streamUrl = '';
+  session.currentTime = 0;
+  session.isPlaying = false;
+  session.localFilePath = null;
+  session.downloadProgress = 0;
+  session.keyframePositions = [];
+  session.waveformPeaks = [];
+  session.thumbnailSpritesheets = [];
+}