feat: add clip management with I/O marking, timeline markers, and clip list

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

src/lib/components/ClipList.svelte

@@ -1,16 +1,196 @@
+<script lang="ts">
+  import {
+    clipStore,
+    selectClip,
+    removeClip,
+    updateClip,
+  } from '$lib/stores/clips.svelte';
+  import { formatTime, parseTime } from '$lib/utils/time';
+  import { session } from '$lib/stores/videoSession.svelte';
+
+  let clips = $derived(clipStore.clips);
+  let selectedId = $derived(clipStore.selectedClipId);
+
+  function handleSelect(id: string) {
+    selectClip(id);
+    const clip = clips.find((c) => c.id === id);
+    if (clip) {
+      session.currentTime = clip.startTime;
+      const videoEl = document.querySelector('video');
+      if (videoEl) videoEl.currentTime = clip.startTime;
+    }
+  }
+
+  function handleTimeEdit(clipId: string, field: 'startTime' | 'endTime', value: string) {
+    const parsed = parseTime(value);
+    if (parsed !== null) {
+      updateClip(clipId, { [field]: parsed });
+    }
+  }
+
+  function handleLabelEdit(clipId: string, value: string) {
+    updateClip(clipId, { label: value });
+  }
+</script>
+
 <div class="clip-list">
-  <div class="placeholder-text">No clips yet — press I to mark in-point</div>
+  {#if clips.length === 0}
+    <div class="empty">No clips yet — press I to mark in-point, O to mark out-point</div>
+  {:else}
+    <div class="header">
+      <span>CLIPS ({clips.length})</span>
+    </div>
+    {#each clips as clip (clip.id)}
+      <div
+        class="clip-row"
+        class:selected={clip.id === selectedId}
+        role="button"
+        tabindex="0"
+        onclick={() => handleSelect(clip.id)}
+        onkeydown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleSelect(clip.id);
+          }
+        }}
+      >
+        <span class="color-swatch" style="background: {clip.color}"></span>
+        <input
+          class="label-input"
+          type="text"
+          value={clip.label}
+          onchange={(e) => handleLabelEdit(clip.id, (e.target as HTMLInputElement).value)}
+          onclick={(e) => e.stopPropagation()}
+        />
+        <input
+          class="time-input"
+          type="text"
+          value={formatTime(clip.startTime)}
+          onchange={(e) =>
+            handleTimeEdit(clip.id, 'startTime', (e.target as HTMLInputElement).value)}
+          onclick={(e) => e.stopPropagation()}
+        />
+        <span class="arrow">→</span>
+        <input
+          class="time-input"
+          type="text"
+          value={formatTime(clip.endTime)}
+          onchange={(e) =>
+            handleTimeEdit(clip.id, 'endTime', (e.target as HTMLInputElement).value)}
+          onclick={(e) => e.stopPropagation()}
+        />
+        <button
+          class="delete-btn"
+          onclick={(e) => {
+            e.stopPropagation();
+            removeClip(clip.id);
+          }}
+          title="Delete clip"
+        >✕</button>
+      </div>
+    {/each}
+  {/if}
 </div>
 
 <style>
   .clip-list {
     padding: 8px 12px;
     background: var(--bg-secondary);
-    min-height: 80px;
+    min-height: 60px;
+    max-height: 200px;
+    overflow-y: auto;
     border-top: 1px solid var(--border);
   }
-  .placeholder-text {
+
+  .empty {
     color: var(--text-muted);
     font-size: 13px;
+    padding: 8px 0;
+  }
+
+  .header {
+    font-size: 11px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+  }
+
+  .clip-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    border-radius: 4px;
+    width: 100%;
+    text-align: left;
+    background: transparent;
+    border: 1px solid transparent;
+  }
+
+  .clip-row:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+  }
+
+  .clip-row.selected {
+    border-color: var(--accent);
+    background: var(--bg-tertiary);
+  }
+
+  .color-swatch {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+
+  .label-input {
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    font-size: 13px;
+    width: 80px;
+    padding: 2px 4px;
+  }
+
+  .label-input:focus {
+    background: var(--bg-primary);
+    outline: 1px solid var(--accent);
+    border-radius: 2px;
+  }
+
+  .time-input {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    width: 85px;
+    padding: 2px 4px;
+    text-align: center;
+  }
+
+  .time-input:focus {
+    background: var(--bg-primary);
+    outline: 1px solid var(--accent);
+    border-radius: 2px;
+  }
+
+  .arrow {
+    color: var(--text-muted);
+    font-size: 12px;
+  }
+
+  .delete-btn {
+    font-size: 14px;
+    padding: 2px 6px;
+    color: var(--text-muted);
+    background: transparent;
+  }
+
+  .delete-btn:hover {
+    color: var(--danger);
+    background: transparent;
   }
 </style>

src/lib/components/Timeline.svelte

@@ -1,10 +1,18 @@
 <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);
@@ -19,6 +27,7 @@
   });
 
   let isDragging = $state(false);
+  let dragTarget = $state<ClipDragTarget | null>(null);
 
   $effect(() => {
     if (session.duration > 0) {
@@ -53,7 +62,15 @@
       if (!ctx || !canvas) return;
       ctx.save();
       ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-      drawTimeline(ctx, timelineState, session.currentTime, session.duration);
+      drawTimeline(
+        ctx,
+        timelineState,
+        session.currentTime,
+        session.duration,
+        clipStore.clips,
+        clipStore.selectedClipId,
+        clipStore.pendingInPoint
+      );
       ctx.restore();
       animFrameId = requestAnimationFrame(draw);
     }
@@ -68,6 +85,12 @@
     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');
@@ -77,8 +100,22 @@
   }
 
   function handleMouseDown(e: MouseEvent) {
-    isDragging = true;
     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);
   }
@@ -86,12 +123,31 @@
   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) {

src/lib/stores/clips.svelte.ts

@@ -0,0 +1,95 @@
+import { getClipColor } from '$lib/utils/colors';
+
+export interface Clip {
+  id: string;
+  startTime: number;
+  endTime: number;
+  label: string;
+  color: string;
+}
+
+export const clipStore = $state({
+  clips: [] as Clip[],
+  selectedClipId: null as string | null,
+  pendingInPoint: null as number | null,
+  nextClipNumber: 1,
+});
+
+export function getClips(): Clip[] {
+  return clipStore.clips;
+}
+
+export function getSelectedClipId(): string | null {
+  return clipStore.selectedClipId;
+}
+
+export function getPendingInPoint(): number | null {
+  return clipStore.pendingInPoint;
+}
+
+export function selectClip(id: string | null) {
+  clipStore.selectedClipId = id;
+  clipStore.pendingInPoint = null;
+}
+
+export function addClip(startTime: number, endTime: number): Clip {
+  const start = Math.min(startTime, endTime);
+  const end = Math.max(startTime, endTime);
+
+  const clip: Clip = {
+    id: crypto.randomUUID(),
+    startTime: start,
+    endTime: end,
+    label: `Clip ${clipStore.nextClipNumber}`,
+    color: getClipColor(clipStore.nextClipNumber - 1),
+  };
+  clipStore.nextClipNumber++;
+  clipStore.clips = [...clipStore.clips, clip];
+  clipStore.selectedClipId = clip.id;
+  return clip;
+}
+
+export function removeClip(id: string) {
+  clipStore.clips = clipStore.clips.filter((c) => c.id !== id);
+  if (clipStore.selectedClipId === id) {
+    clipStore.selectedClipId = null;
+  }
+}
+
+export function updateClip(
+  id: string,
+  changes: Partial<Pick<Clip, 'startTime' | 'endTime' | 'label'>>
+) {
+  clipStore.clips = clipStore.clips.map((c) => {
+    if (c.id !== id) return c;
+    const updated = { ...c, ...changes };
+    if (updated.startTime > updated.endTime) {
+      [updated.startTime, updated.endTime] = [updated.endTime, updated.startTime];
+    }
+    return updated;
+  });
+}
+
+export function markInPoint(time: number) {
+  if (clipStore.selectedClipId) {
+    updateClip(clipStore.selectedClipId, { startTime: time });
+  } else {
+    clipStore.pendingInPoint = time;
+  }
+}
+
+export function markOutPoint(time: number) {
+  if (clipStore.selectedClipId) {
+    updateClip(clipStore.selectedClipId, { endTime: time });
+  } else if (clipStore.pendingInPoint !== null) {
+    addClip(clipStore.pendingInPoint, time);
+    clipStore.pendingInPoint = null;
+  }
+}
+
+export function clearAll() {
+  clipStore.clips = [];
+  clipStore.selectedClipId = null;
+  clipStore.pendingInPoint = null;
+  clipStore.nextClipNumber = 1;
+}

src/lib/timeline/clipRenderer.ts

@@ -0,0 +1,91 @@
+import type { Clip } from '$lib/stores/clips.svelte';
+import { timeToX, type TimelineState } from './renderer';
+
+const CLIP_LANE_Y = 90;
+const CLIP_LANE_HEIGHT = 30;
+const HANDLE_WIDTH = 6;
+
+export function drawClips(
+  ctx: CanvasRenderingContext2D,
+  state: TimelineState,
+  clips: Clip[],
+  selectedId: string | null,
+  pendingInPoint: number | null
+): void {
+  for (const clip of clips) {
+    const x1 = timeToX(clip.startTime, state);
+    const x2 = timeToX(clip.endTime, state);
+    const isSelected = clip.id === selectedId;
+
+    ctx.fillStyle = clip.color + '66';
+    ctx.fillRect(x1, CLIP_LANE_Y, x2 - x1, CLIP_LANE_HEIGHT);
+
+    ctx.strokeStyle = isSelected ? '#ffffff' : clip.color;
+    ctx.lineWidth = isSelected ? 2 : 1;
+    ctx.strokeRect(x1, CLIP_LANE_Y, x2 - x1, CLIP_LANE_HEIGHT);
+    ctx.lineWidth = 1;
+
+    ctx.fillStyle = isSelected ? '#ffffff' : clip.color;
+    ctx.fillRect(x1 - HANDLE_WIDTH / 2, CLIP_LANE_Y, HANDLE_WIDTH, CLIP_LANE_HEIGHT);
+    ctx.fillRect(x2 - HANDLE_WIDTH / 2, CLIP_LANE_Y, HANDLE_WIDTH, CLIP_LANE_HEIGHT);
+
+    const labelWidth = x2 - x1;
+    if (labelWidth > 40) {
+      ctx.fillStyle = '#ffffff';
+      ctx.font = '11px -apple-system, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(
+        clip.label,
+        (x1 + x2) / 2,
+        CLIP_LANE_Y + CLIP_LANE_HEIGHT / 2 + 4,
+        labelWidth - 10
+      );
+    }
+  }
+
+  if (pendingInPoint !== null) {
+    const x = timeToX(pendingInPoint, state);
+    ctx.strokeStyle = '#f9e2af';
+    ctx.lineWidth = 2;
+    ctx.setLineDash([4, 4]);
+    ctx.beginPath();
+    ctx.moveTo(x, CLIP_LANE_Y);
+    ctx.lineTo(x, CLIP_LANE_Y + CLIP_LANE_HEIGHT);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.lineWidth = 1;
+  }
+}
+
+export interface ClipHitResult {
+  clipId: string;
+  edge: 'start' | 'end' | 'body';
+}
+
+export function hitTestClip(
+  x: number,
+  y: number,
+  state: TimelineState,
+  clips: Clip[]
+): ClipHitResult | null {
+  if (y < CLIP_LANE_Y || y > CLIP_LANE_Y + CLIP_LANE_HEIGHT) {
+    return null;
+  }
+
+  for (const clip of [...clips].reverse()) {
+    const x1 = timeToX(clip.startTime, state);
+    const x2 = timeToX(clip.endTime, state);
+
+    if (Math.abs(x - x1) <= HANDLE_WIDTH) {
+      return { clipId: clip.id, edge: 'start' };
+    }
+    if (Math.abs(x - x2) <= HANDLE_WIDTH) {
+      return { clipId: clip.id, edge: 'end' };
+    }
+    if (x >= x1 && x <= x2) {
+      return { clipId: clip.id, edge: 'body' };
+    }
+  }
+
+  return null;
+}

src/lib/timeline/renderer.ts

@@ -1,3 +1,6 @@
+import { drawClips } from './clipRenderer';
+import type { Clip } from '$lib/stores/clips.svelte';
+
 export interface TimelineState {
   visibleStart: number;
   visibleEnd: number;
@@ -26,7 +29,10 @@ export function drawTimeline(
   ctx: CanvasRenderingContext2D,
   state: TimelineState,
   currentTime: number,
-  duration: number
+  duration: number,
+  clips: Clip[] = [],
+  selectedClipId: string | null = null,
+  pendingInPoint: number | null = null
 ): void {
   const { width, height } = state;
   ctx.clearRect(0, 0, width, height);
@@ -39,6 +45,8 @@ export function drawTimeline(
   drawPlaceholderLane(ctx, state, 0, THUMB_LANE_HEIGHT, 'Thumbnails');
   drawPlaceholderLane(ctx, state, THUMB_LANE_HEIGHT, WAVEFORM_LANE_HEIGHT, 'Waveform');
 
+  drawClips(ctx, state, clips, selectedClipId, pendingInPoint);
+
   drawPlayhead(ctx, state, currentTime);
 }
 

tests/lib/stores/clips.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import {
+  addClip,
+  removeClip,
+  updateClip,
+  markInPoint,
+  markOutPoint,
+  getClips,
+  getSelectedClipId,
+  getPendingInPoint,
+  clearAll,
+  selectClip,
+} from '$lib/stores/clips.svelte';
+
+describe('clip store', () => {
+  beforeEach(() => {
+    clearAll();
+  });
+
+  it('starts with no clips', () => {
+    expect(getClips()).toHaveLength(0);
+  });
+
+  it('adds a clip', () => {
+    addClip(10, 20);
+    const clips = getClips();
+    expect(clips).toHaveLength(1);
+    expect(clips[0].startTime).toBe(10);
+    expect(clips[0].endTime).toBe(20);
+    expect(clips[0].label).toBe('Clip 1');
+  });
+
+  it('removes a clip', () => {
+    addClip(10, 20);
+    const id = getClips()[0].id;
+    removeClip(id);
+    expect(getClips()).toHaveLength(0);
+  });
+
+  it('updates clip times', () => {
+    addClip(10, 20);
+    const id = getClips()[0].id;
+    updateClip(id, { startTime: 5 });
+    expect(getClips()[0].startTime).toBe(5);
+    expect(getClips()[0].endTime).toBe(20);
+  });
+
+  it('marks in-point and out-point to create a clip', () => {
+    markInPoint(15);
+    expect(getPendingInPoint()).toBe(15);
+    expect(getClips()).toHaveLength(0);
+
+    markOutPoint(25);
+    expect(getPendingInPoint()).toBeNull();
+    expect(getClips()).toHaveLength(1);
+    expect(getClips()[0].startTime).toBe(15);
+    expect(getClips()[0].endTime).toBe(25);
+  });
+
+  it('updates selected clip start when I is pressed', () => {
+    addClip(10, 20);
+    const id = getClips()[0].id;
+    selectClip(id);
+
+    markInPoint(5);
+    expect(getClips()[0].startTime).toBe(5);
+    expect(getPendingInPoint()).toBeNull();
+  });
+
+  it('swaps start/end if in-point is after out-point', () => {
+    markInPoint(30);
+    markOutPoint(10);
+    const clip = getClips()[0];
+    expect(clip.startTime).toBe(10);
+    expect(clip.endTime).toBe(30);
+  });
+});