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

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

src-tauri/src/commands/video.rs

@@ -1 +1,12 @@
-// Video resolve and download commands — implemented in Task 4/5
+use crate::models::{CookieSource, VideoMetadata};
+use crate::services::video_resolver;
+
+#[tauri::command]
+pub async fn resolve_url(
+    url: String,
+    cookie_source: CookieSource,
+) -> Result<VideoMetadata, String> {
+    tokio::task::spawn_blocking(move || video_resolver::resolve(&url, &cookie_source))
+        .await
+        .map_err(|e| format!("Task failed: {e}"))?
+}

src-tauri/src/lib.rs

@@ -2,7 +2,7 @@ mod commands;
 mod models;
 mod services;
 
-use commands::dependencies;
+use commands::{dependencies, video};
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
@@ -14,6 +14,7 @@ pub fn run() {
         .invoke_handler(tauri::generate_handler![
             dependencies::check_dependencies,
             dependencies::install_dependency,
+            video::resolve_url,
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src-tauri/src/services/video_resolver.rs

@@ -1 +1,105 @@
-// Implemented in Task 4
+use crate::models::{CookieSource, VideoMetadata};
+use serde::Deserialize;
+use std::process::Command;
+
+#[derive(Debug, Deserialize)]
+pub struct YtDlpJson {
+    pub title: String,
+    pub duration: Option<f64>,
+    pub fps: Option<f64>,
+    pub thumbnail: Option<String>,
+}
+
+pub fn parse_ytdlp_json(json_str: &str) -> Result<YtDlpJson, String> {
+    serde_json::from_str::<YtDlpJson>(json_str)
+        .map_err(|e| format!("Failed to parse yt-dlp JSON: {e}"))
+}
+
+pub fn resolve(url: &str, cookie_source: &CookieSource) -> Result<VideoMetadata, String> {
+    let cookie_args = cookie_source.to_ytdlp_args();
+
+    let mut meta_cmd = Command::new("yt-dlp");
+    meta_cmd.arg("--dump-json").arg("--no-download");
+    for arg in &cookie_args {
+        meta_cmd.arg(arg);
+    }
+    meta_cmd.arg(url);
+
+    let meta_output = meta_cmd
+        .output()
+        .map_err(|e| format!("Failed to run yt-dlp: {e}"))?;
+
+    if !meta_output.status.success() {
+        let stderr = String::from_utf8_lossy(&meta_output.stderr);
+        return Err(format!("yt-dlp metadata failed: {stderr}"));
+    }
+
+    let json_str = String::from_utf8_lossy(&meta_output.stdout);
+    let meta = parse_ytdlp_json(&json_str)?;
+
+    let mut stream_cmd = Command::new("yt-dlp");
+    stream_cmd.arg("-g").arg("--no-download");
+    for arg in &cookie_args {
+        stream_cmd.arg(arg);
+    }
+    stream_cmd.arg(url);
+
+    let stream_output = stream_cmd
+        .output()
+        .map_err(|e| format!("Failed to get stream URL: {e}"))?;
+
+    if !stream_output.status.success() {
+        let stderr = String::from_utf8_lossy(&stream_output.stderr);
+        return Err(format!("yt-dlp stream URL failed: {stderr}"));
+    }
+
+    let stream_url = String::from_utf8_lossy(&stream_output.stdout)
+        .lines()
+        .next()
+        .unwrap_or("")
+        .trim()
+        .to_string();
+
+    Ok(VideoMetadata {
+        url: url.to_string(),
+        title: meta.title,
+        duration: meta.duration.unwrap_or(0.0),
+        fps: meta.fps.unwrap_or(30.0),
+        thumbnail_url: meta.thumbnail,
+        stream_url,
+    })
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_parse_ytdlp_json_valid() {
+        let json = r#"{"title": "Test Video", "duration": 125.5, "fps": 29.97, "thumbnail": "https://i.ytimg.com/vi/abc/hqdefault.jpg"}"#;
+        let result = parse_ytdlp_json(json).unwrap();
+        assert_eq!(result.title, "Test Video");
+        assert!((result.duration.unwrap() - 125.5).abs() < 0.001);
+        assert!((result.fps.unwrap() - 29.97).abs() < 0.001);
+        assert_eq!(
+            result.thumbnail.unwrap(),
+            "https://i.ytimg.com/vi/abc/hqdefault.jpg"
+        );
+    }
+
+    #[test]
+    fn test_parse_ytdlp_json_missing_optional_fields() {
+        let json = r#"{"title": "Minimal Video"}"#;
+        let result = parse_ytdlp_json(json).unwrap();
+        assert_eq!(result.title, "Minimal Video");
+        assert!(result.duration.is_none());
+        assert!(result.fps.is_none());
+        assert!(result.thumbnail.is_none());
+    }
+
+    #[test]
+    fn test_parse_ytdlp_json_invalid() {
+        let result = parse_ytdlp_json("not json");
+        assert!(result.is_err());
+    }
+}

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">
+  {#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 = [];
+}