gui-video-clipper/src/lib/components/Timeline.svelte

<script lang="ts">
  import { session } from '$lib/stores/videoSession.svelte';
  import {
    clipStore,
    selectClip,
    updateClip,
  } from '$lib/stores/clips.svelte';
  import { drawTimeline, type TimelineState } from '$lib/timeline/renderer';
  import {
    computeZoom,
    handleClick as computeClickTime,
  } from '$lib/timeline/interactions';
  import { hitTestClip } from '$lib/timeline/clipRenderer';

  type ClipDragTarget = { clipId: string; edge: 'start' | 'end' };

  let canvas = $state<HTMLCanvasElement | null>(null);
  let containerEl = $state<HTMLDivElement | null>(null);
  let animFrameId = $state(0);

  let timelineState = $state<TimelineState>({
    visibleStart: 0,
    visibleEnd: 60,
    zoom: 1,
    width: 600,
    height: 160,
  });

  let isDragging = $state(false);
  let dragTarget = $state<ClipDragTarget | null>(null);

  $effect(() => {
    if (session.duration > 0) {
      timelineState.visibleEnd = session.duration;
    }
  });

  $effect(() => {
    if (!containerEl) return;
    const observer = new ResizeObserver((entries) => {
      for (const entry of entries) {
        timelineState.width = entry.contentRect.width;
        timelineState.height = entry.contentRect.height;
        if (canvas) {
          canvas.width = entry.contentRect.width * window.devicePixelRatio;
          canvas.height = entry.contentRect.height * window.devicePixelRatio;
          canvas.style.width = `${entry.contentRect.width}px`;
          canvas.style.height = `${entry.contentRect.height}px`;
        }
      }
    });
    observer.observe(containerEl);
    return () => observer.disconnect();
  });

  $effect(() => {
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    function draw() {
      if (!ctx || !canvas) return;
      ctx.save();
      ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
      drawTimeline(
        ctx,
        timelineState,
        session.currentTime,
        session.duration,
        clipStore.clips,
        clipStore.selectedClipId,
        clipStore.pendingInPoint,
        session.waveformPeaks,
        session.thumbnailSpritesheets
      );
      ctx.restore();
      animFrameId = requestAnimationFrame(draw);
    }

    draw();
    return () => cancelAnimationFrame(animFrameId);
  });

  function getCanvasX(e: MouseEvent): number {
    if (!canvas) return 0;
    const rect = canvas.getBoundingClientRect();
    return e.clientX - rect.left;
  }

  function getCanvasY(e: MouseEvent): number {
    if (!canvas) return 0;
    const rect = canvas.getBoundingClientRect();
    return e.clientY - rect.top;
  }

  function seekTo(time: number) {
    session.currentTime = time;
    const videoEl = document.querySelector('video');
    if (videoEl) {
      videoEl.currentTime = time;
    }
  }

  function handleMouseDown(e: MouseEvent) {
    const x = getCanvasX(e);
    const y = getCanvasY(e);

    const hit = hitTestClip(x, y, timelineState, clipStore.clips);
    if (hit) {
      if (hit.edge === 'body') {
        selectClip(hit.clipId);
      } else if (hit.edge === 'start' || hit.edge === 'end') {
        dragTarget = { clipId: hit.clipId, edge: hit.edge };
        selectClip(hit.clipId);
      }
      isDragging = true;
      return;
    }

    isDragging = true;
    const targetTime = computeClickTime(x, timelineState, session.duration);
    seekTo(targetTime);
  }

  function handleMouseMove(e: MouseEvent) {
    if (!isDragging) return;
    const x = getCanvasX(e);

    if (dragTarget) {
      const time = computeClickTime(x, timelineState, session.duration);
      switch (dragTarget.edge) {
        case 'start':
          updateClip(dragTarget.clipId, { startTime: time });
          break;
        case 'end':
          updateClip(dragTarget.clipId, { endTime: time });
          break;
        default: {
          const _exhaustive: never = dragTarget.edge;
          void _exhaustive;
        }
      }
      return;
    }

    const targetTime = computeClickTime(x, timelineState, session.duration);
    seekTo(targetTime);
  }

  function handleMouseUp() {
    isDragging = false;
    dragTarget = null;
  }

  function handleWheel(e: WheelEvent) {
    e.preventDefault();
    const x = getCanvasX(e);
    const anchorTime = computeClickTime(x, timelineState, session.duration);
    const factor = e.deltaY < 0 ? 1.15 : 0.87;
    const result = computeZoom(timelineState, anchorTime, factor, session.duration);
    timelineState.visibleStart = result.visibleStart;
    timelineState.visibleEnd = result.visibleEnd;
    timelineState.zoom = result.zoom;
  }
</script>

<div class="timeline-container" bind:this={containerEl}>
  <canvas
    bind:this={canvas}
    onmousedown={handleMouseDown}
    onmousemove={handleMouseMove}
    onmouseup={handleMouseUp}
    onmouseleave={handleMouseUp}
    onwheel={handleWheel}
  ></canvas>
</div>

<style>
  .timeline-container {
    height: 160px;
    background: var(--timeline-bg);
    position: relative;
    cursor: crosshair;
  }

  canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
</style>