feat: add PlayerTimeline simplified waveform component

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

src/lib/components/PlayerTimeline.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+  import { session } from '$lib/stores/videoSession.svelte';
+  import { drawWaveform, type WaveformData } from '$lib/timeline/waveformRenderer';
+  import { type TimelineState, timeToX, drawPlayhead } from '$lib/timeline/renderer';
+  import { seekTo } from '$lib/transport/playback';
+
+  let { visible }: { visible: boolean } = $props();
+
+  let canvas = $state<HTMLCanvasElement | null>(null);
+  let containerEl = $state<HTMLDivElement | null>(null);
+  let pendingDraw = 0;
+
+  const TIMELINE_HEIGHT = 50;
+
+  let timelineState = $state<TimelineState>({
+    visibleStart: 0,
+    visibleEnd: 60,
+    zoom: 1,
+    width: 600,
+    height: TIMELINE_HEIGHT,
+  });
+
+  let waveformData = $derived<WaveformData>({
+    tiers: session.waveformTiers,
+  });
+
+  function requestDraw() {
+    if (!pendingDraw) {
+      pendingDraw = requestAnimationFrame(() => {
+        drawMainCanvas();
+        pendingDraw = 0;
+      });
+    }
+  }
+
+  function drawMainCanvas() {
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    ctx.save();
+    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+
+    const { width } = timelineState;
+    ctx.clearRect(0, 0, width, TIMELINE_HEIGHT);
+
+    // Background
+    ctx.fillStyle = 'transparent';
+    ctx.fillRect(0, 0, width, TIMELINE_HEIGHT);
+
+    // Draw major time ticks
+    drawSimpleTimeTicks(ctx, timelineState, session.duration);
+
+    // Draw waveform
+    if (waveformData.tiers) {
+      drawWaveform(ctx, timelineState, waveformData, session.duration, 0, TIMELINE_HEIGHT - 16);
+    }
+
+    // Draw playhead
+    drawPlayhead(ctx, timelineState, session.currentTime);
+
+    ctx.restore();
+  }
+
+  function drawSimpleTimeTicks(
+    ctx: CanvasRenderingContext2D,
+    state: TimelineState,
+    duration: number
+  ) {
+    if (duration <= 0) return;
+    const range = state.visibleEnd - state.visibleStart;
+    const tickInterval = getTickInterval(range, state.width);
+    const startTick = Math.floor(state.visibleStart / tickInterval) * tickInterval;
+    const baselineY = TIMELINE_HEIGHT - 2;
+
+    ctx.textAlign = 'center';
+    ctx.font = '10px -apple-system, sans-serif';
+    ctx.fillStyle = '#6c7086';
+
+    for (let t = startTick; t <= state.visibleEnd; t += tickInterval) {
+      if (t < 0 || t > duration) continue;
+      const x = timeToX(t, state);
+
+      ctx.strokeStyle = '#45475a';
+      ctx.beginPath();
+      ctx.moveTo(x, TIMELINE_HEIGHT - 14);
+      ctx.lineTo(x, TIMELINE_HEIGHT - 8);
+      ctx.stroke();
+
+      const m = Math.floor(t / 60);
+      const s = Math.floor(t % 60);
+      ctx.fillText(`${m}:${String(s).padStart(2, '0')}`, x, baselineY);
+    }
+  }
+
+  function getTickInterval(visibleRange: number, width: number): number {
+    const minPixelsPerTick = 80;
+    const maxTicks = width / minPixelsPerTick;
+    const rawInterval = visibleRange / maxTicks;
+    const intervals = [0.1, 0.25, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600];
+    for (const interval of intervals) {
+      if (interval >= rawInterval) return interval;
+    }
+    return 600;
+  }
+
+  // Sync timeline state with session duration
+  $effect(() => {
+    if (session.duration > 0) {
+      timelineState.visibleStart = 0;
+      timelineState.visibleEnd = session.duration;
+      timelineState.zoom = 1;
+    }
+  });
+
+  // Resize observer
+  $effect(() => {
+    if (!containerEl) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        timelineState.width = entry.contentRect.width;
+        if (canvas) {
+          canvas.width = entry.contentRect.width * window.devicePixelRatio;
+          canvas.height = TIMELINE_HEIGHT * window.devicePixelRatio;
+          canvas.style.width = `${entry.contentRect.width}px`;
+          canvas.style.height = `${TIMELINE_HEIGHT}px`;
+        }
+      }
+    });
+    observer.observe(containerEl);
+    return () => observer.disconnect();
+  });
+
+  // Redraw on state changes
+  $effect(() => {
+    void session.currentTime;
+    void session.duration;
+    void session.waveformTiers;
+    void timelineState.visibleStart;
+    void timelineState.visibleEnd;
+    void timelineState.width;
+    void canvas;
+    requestDraw();
+  });
+
+  function handleClick(e: MouseEvent) {
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const range = timelineState.visibleEnd - timelineState.visibleStart;
+    const time = timelineState.visibleStart + (x / timelineState.width) * range;
+    seekTo(Math.max(0, Math.min(time, session.duration)));
+  }
+</script>
+
+<div
+  class="player-timeline"
+  class:visible
+  bind:this={containerEl}
+>
+  <canvas
+    bind:this={canvas}
+    onclick={handleClick}
+  ></canvas>
+</div>
+
+<style>
+  .player-timeline {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 50px;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(4px);
+    z-index: 15;
+    pointer-events: none;
+    opacity: 0;
+    transform: translateY(100%);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+    cursor: crosshair;
+  }
+
+  .player-timeline.visible {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+</style>