@aicut/core 0.4.3 → 0.5.0

package/dist/index.js

@@ -152,6 +152,14 @@ var HANDLE_PX = 8;
 var CLIP_INSET = 6;
 var SCALE_MIN = 10;
 var SCALE_MAX = 400;
+function setTimelineMetrics(opts) {
+  if (opts.trackHeight != null && opts.trackHeight > 0) {
+    TRACK_HEIGHT = Math.round(opts.trackHeight);
+  }
+  if (opts.rulerHeight != null && opts.rulerHeight > 0) {
+    RULER_HEIGHT = Math.round(opts.rulerHeight);
+  }
+}
 var SCROLLBAR_THICKNESS = 10;
 var SCROLLBAR_MIN_THUMB = 24;
 var SCROLLBAR_INSET = 2;
@@ -254,8 +262,8 @@ function uncoveredIntervals(project) {
   return gaps;
 }
 
-// src/playback.ts
-var PlaybackEngine = class {
+// src/playback/html-video.ts
+var HtmlVideoEngine = class {
   host;
   mount;
   videos = /* @__PURE__ */ new Map();
@@ -271,9 +279,9 @@ var PlaybackEngine = class {
   onError;
   onReady;
   onSourceMetadata;
-  constructor(host, project) {
-    this.host = host;
-    this.project = project;
+  constructor(opts) {
+    this.host = opts.host;
+    this.project = opts.project;
     this.mount = document.createElement("div");
     this.mount.className = "aicut-preview";
     this.host.appendChild(this.mount);
@@ -515,6 +523,328 @@ var PlaybackEngine = class {
     this.onTimeUpdate?.(this.timeMs);
   }
 };
+var htmlVideoEngineFactory = (opts) => new HtmlVideoEngine(opts);
+
+// src/playback/canvas-compositor.ts
+var CanvasCompositorEngine = class {
+  host;
+  mount;
+  canvas;
+  ctx;
+  /** Only created when constructed with `debug: true`. */
+  badge = null;
+  videos = /* @__PURE__ */ new Map();
+  project;
+  currentClipId = null;
+  playing = false;
+  timeMs = 0;
+  rafHandle = null;
+  lastFrameTs = 0;
+  paintedFrames = 0;
+  onTimeUpdate;
+  onEnded;
+  onError;
+  onReady;
+  onSourceMetadata;
+  constructor(opts) {
+    this.host = opts.host;
+    this.project = opts.project;
+    this.mount = document.createElement("div");
+    this.mount.className = "aicut-preview aicut-preview--canvas";
+    Object.assign(this.mount.style, {
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%"
+    });
+    this.canvas = document.createElement("canvas");
+    Object.assign(this.canvas.style, {
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%",
+      // Stretch with letterboxing handled by the draw loop.
+      objectFit: "contain",
+      // Black until the first frame is drawn so the swap from the
+      // previous engine doesn't flash the host background.
+      background: "#000"
+    });
+    this.mount.appendChild(this.canvas);
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) throw new Error("CanvasCompositorEngine: 2d context unavailable");
+    this.ctx = ctx;
+    if (opts.debug) {
+      const badge = document.createElement("div");
+      badge.className = "aicut-preview__badge";
+      Object.assign(badge.style, {
+        position: "absolute",
+        top: "8px",
+        left: "8px",
+        padding: "4px 8px",
+        borderRadius: "6px",
+        background: "rgba(0, 0, 0, 0.55)",
+        color: "rgba(255, 255, 255, 0.92)",
+        font: "11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace",
+        pointerEvents: "none",
+        zIndex: "2",
+        letterSpacing: "0.02em"
+      });
+      badge.textContent = "engine: canvas compositor";
+      this.mount.appendChild(badge);
+      this.badge = badge;
+    }
+    this.host.appendChild(this.mount);
+    this.syncSources();
+    this.resizeCanvas();
+    this.startTickLoop();
+  }
+  setProject(next) {
+    this.project = next;
+    this.syncSources();
+    const clip = this.clipAtTime(this.timeMs);
+    if (!clip) {
+      this.timeMs = 0;
+      this.activate(null);
+      this.onTimeUpdate?.(0);
+    } else {
+      this.activate(clip);
+      this.seekVideoToClipOffset(clip, this.timeMs - clip.start);
+    }
+  }
+  play() {
+    if (this.playing) return;
+    if (this.totalDuration() <= 0) return;
+    const clip = this.clipAtTime(this.timeMs) ?? this.nextClipAfterTime(this.timeMs);
+    if (!clip) return;
+    if (this.timeMs < clip.start) this.timeMs = clip.start;
+    this.activate(clip);
+    this.seekVideoToClipOffset(clip, this.timeMs - clip.start);
+    const v = this.videos.get(clip.sourceId);
+    if (!v) return;
+    void v.play().catch((err) => this.onError?.(err));
+    this.playing = true;
+    this.lastFrameTs = performance.now();
+  }
+  pause() {
+    if (!this.playing) return;
+    this.playing = false;
+    if (this.currentClipId) {
+      const clip = this.clipById(this.currentClipId);
+      if (clip) this.videos.get(clip.sourceId)?.pause();
+    }
+  }
+  isPlaying() {
+    return this.playing;
+  }
+  getTime() {
+    return this.timeMs;
+  }
+  seek(timeMs) {
+    const total = this.totalDuration();
+    if (total <= 0) {
+      this.timeMs = 0;
+      return;
+    }
+    const clamped = Math.max(0, Math.min(timeMs, total));
+    this.timeMs = clamped;
+    const clip = this.clipAtTime(clamped);
+    if (clip) {
+      this.activate(clip);
+      this.seekVideoToClipOffset(clip, clamped - clip.start);
+    } else {
+      this.activate(null);
+    }
+    this.onTimeUpdate?.(clamped);
+  }
+  destroy() {
+    this.stopTickLoop();
+    for (const v of this.videos.values()) {
+      v.pause();
+      v.removeAttribute("src");
+      v.load();
+    }
+    this.videos.clear();
+    this.mount.remove();
+  }
+  // --- internals -------------------------------------------------------
+  syncSources() {
+    const wanted = new Set(this.project.sources.map((s) => s.id));
+    for (const [id, v] of this.videos) {
+      if (!wanted.has(id)) {
+        v.pause();
+        this.videos.delete(id);
+      }
+    }
+    for (const src of this.project.sources) {
+      if (src.kind !== "video") continue;
+      if (this.videos.has(src.id)) continue;
+      const v = document.createElement("video");
+      v.preload = "auto";
+      v.playsInline = true;
+      v.muted = false;
+      v.src = src.url;
+      const sourceId = src.id;
+      v.addEventListener(
+        "error",
+        () => this.onError?.(new Error(`Failed to load ${src.url}`))
+      );
+      v.addEventListener("loadedmetadata", () => {
+        this.onReady?.();
+        const durMs = Math.round(v.duration * 1e3);
+        if (Number.isFinite(durMs) && durMs > 0) {
+          this.onSourceMetadata?.(sourceId, durMs);
+        }
+      });
+      this.videos.set(src.id, v);
+    }
+  }
+  activate(clip) {
+    if (clip?.id === this.currentClipId) return;
+    if (this.currentClipId) {
+      const prev = this.clipById(this.currentClipId);
+      if (prev) this.videos.get(prev.sourceId)?.pause();
+    }
+    this.currentClipId = clip ? clip.id : null;
+  }
+  seekVideoToClipOffset(clip, offsetMs) {
+    const v = this.videos.get(clip.sourceId);
+    if (!v) return;
+    const target = (clip.in + Math.max(0, offsetMs)) / 1e3;
+    if (Math.abs(v.currentTime - target) > 0.05) {
+      v.currentTime = target;
+    }
+  }
+  clipById(id) {
+    for (const t of this.project.tracks) {
+      for (const c of t.clips) if (c.id === id) return c;
+    }
+    return null;
+  }
+  clipAtTime(timeMs) {
+    for (const t of this.project.tracks) {
+      if (t.kind !== "video") continue;
+      for (const c of t.clips) {
+        if (timeMs >= c.start && timeMs < c.start + (c.out - c.in)) return c;
+      }
+    }
+    return null;
+  }
+  nextClipAfterTime(timeMs) {
+    let best = null;
+    for (const t of this.project.tracks) {
+      if (t.kind !== "video") continue;
+      for (const c of t.clips) {
+        if (c.start >= timeMs && (!best || c.start < best.start)) best = c;
+      }
+    }
+    return best;
+  }
+  totalDuration() {
+    let max = 0;
+    for (const t of this.project.tracks) {
+      if (t.kind !== "video") continue;
+      for (const c of t.clips) {
+        const e = c.start + (c.out - c.in);
+        if (e > max) max = e;
+      }
+    }
+    return max;
+  }
+  resizeCanvas() {
+    const rect = this.mount.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    const w = Math.max(1, Math.floor(rect.width * dpr));
+    const h = Math.max(1, Math.floor(rect.height * dpr));
+    if (this.canvas.width !== w || this.canvas.height !== h) {
+      this.canvas.width = w;
+      this.canvas.height = h;
+    }
+  }
+  startTickLoop() {
+    this.lastFrameTs = performance.now();
+    const tick = (now) => {
+      this.resizeCanvas();
+      if (this.playing) {
+        const dtMs = now - this.lastFrameTs;
+        this.lastFrameTs = now;
+        this.advance(dtMs);
+      }
+      this.paint();
+      this.rafHandle = requestAnimationFrame(tick);
+    };
+    this.rafHandle = requestAnimationFrame(tick);
+  }
+  stopTickLoop() {
+    if (this.rafHandle != null) {
+      cancelAnimationFrame(this.rafHandle);
+      this.rafHandle = null;
+    }
+  }
+  advance(dtMs) {
+    if (this.project.tracks.length === 0) return;
+    this.timeMs += dtMs;
+    const totalDur = this.totalDuration();
+    if (this.timeMs >= totalDur) {
+      this.timeMs = totalDur;
+      this.onTimeUpdate?.(this.timeMs);
+      this.pause();
+      this.onEnded?.();
+      return;
+    }
+    const clip = this.clipAtTime(this.timeMs);
+    if (!clip) {
+      const next = this.nextClipAfterTime(this.timeMs);
+      if (next) {
+        this.timeMs = next.start;
+        this.activate(next);
+        this.seekVideoToClipOffset(next, 0);
+        const v = this.videos.get(next.sourceId);
+        if (v) void v.play().catch((err) => this.onError?.(err));
+      } else {
+        this.pause();
+        this.onEnded?.();
+        return;
+      }
+    } else if (clip.id !== this.currentClipId) {
+      this.activate(clip);
+      this.seekVideoToClipOffset(clip, this.timeMs - clip.start);
+      const v = this.videos.get(clip.sourceId);
+      if (v) void v.play().catch((err) => this.onError?.(err));
+    }
+    this.onTimeUpdate?.(this.timeMs);
+  }
+  /**
+   * One paint per rAF — clears the canvas, draws the current active
+   * video frame letterboxed to fit, then refreshes the HUD. Done
+   * unconditionally (not just on `playing`) so the HUD frame counter
+   * and the seek preview both update when paused.
+   */
+  paint() {
+    const cw = this.canvas.width;
+    const ch = this.canvas.height;
+    this.ctx.clearRect(0, 0, cw, ch);
+    const clip = this.currentClipId ? this.clipById(this.currentClipId) : null;
+    const v = clip ? this.videos.get(clip.sourceId) : null;
+    if (v && v.videoWidth > 0 && v.videoHeight > 0) {
+      const vw = v.videoWidth;
+      const vh = v.videoHeight;
+      const scale = Math.min(cw / vw, ch / vh);
+      const dw = vw * scale;
+      const dh = vh * scale;
+      const dx = (cw - dw) / 2;
+      const dy = (ch - dh) / 2;
+      this.ctx.drawImage(v, dx, dy, dw, dh);
+      this.paintedFrames += 1;
+    }
+    this.updateBadge();
+  }
+  updateBadge() {
+    if (!this.badge) return;
+    const sec = (this.timeMs / 1e3).toFixed(2);
+    this.badge.textContent = `engine: canvas compositor \u2022 t=${sec}s \u2022 frames painted: ${this.paintedFrames}`;
+  }
+};
+var canvasCompositorEngineFactory = (opts) => new CanvasCompositorEngine(opts);
 
 // src/ui/thumbnails.ts
 var THUMB_HEIGHT = 44;
@@ -574,11 +904,19 @@ var ThumbnailRibbon = class {
   /**
    * Paint thumbnails for the clip's visible window onto `ctx`. The
    * canvas is the per-clip strip — width = clip's px width, height =
-   * THUMB_HEIGHT. Source-time range derives from the clip's `in/out`
-   * and the px range we're drawing into.
+   * `pxHeight` (defaults to the cached `THUMB_HEIGHT`). Source-time
+   * range derives from the clip's `in/out` and the px range we're
+   * drawing into.
+   *
+   * `pxHeight` lets the caller stretch thumbs to fill a taller clip
+   * body when `trackHeight` is configured above the default. Aspect
+   * ratio is already broken per-thumb (we slice variable widths from a
+   * fixed-aspect cached bitmap), so stretching height too is fine — it
+   * preserves the "filmstrip" look without leaving an empty bottom
+   * band of the brand gradient showing through.
    */
-  paintStrip(ctx, sourceId, sourceInMs, sourceOutMs, pxWidth) {
-    ctx.clearRect(0, 0, pxWidth, THUMB_HEIGHT);
+  paintStrip(ctx, sourceId, sourceInMs, sourceOutMs, pxWidth, pxHeight = THUMB_HEIGHT) {
+    ctx.clearRect(0, 0, pxWidth, pxHeight);
     const st = this.sources.get(sourceId);
     if (!st) return;
     if (sourceOutMs <= sourceInMs || pxWidth <= 0) return;
@@ -591,10 +929,10 @@ var ThumbnailRibbon = class {
       const x = Math.round(i * pxWidth / count);
       const w = Math.round((i + 1) * pxWidth / count) - x;
       if (bmp) {
-        ctx.drawImage(bmp, x, 0, w, THUMB_HEIGHT);
+        ctx.drawImage(bmp, x, 0, w, pxHeight);
       } else {
         ctx.fillStyle = "rgba(255,255,255,0.04)";
-        ctx.fillRect(x, 0, w, THUMB_HEIGHT);
+        ctx.fillRect(x, 0, w, pxHeight);
         this.enqueue(st, bucket);
       }
     }
@@ -949,7 +1287,7 @@ function drawClipAt(ctx, clip, trackIndex, startMs, sources, state, style, thumb
   roundRect(ctx, startX, y, widthPx, h, 6);
   ctx.clip();
   ctx.translate(startX, y);
-  thumbs.paintStrip(ctx, clip.sourceId, clip.in, clip.out, widthPx);
+  thumbs.paintStrip(ctx, clip.sourceId, clip.in, clip.out, widthPx, h);
   ctx.restore();
   ctx.strokeStyle = "rgba(255,255,255,0.2)";
   ctx.lineWidth = 1;
@@ -1220,7 +1558,7 @@ function hitTest(x, y, ctx) {
       if (track2.clips.length === 0) {
         const btnSize = 18;
         const btnLeft = HEADER_WIDTH - btnSize - 6;
-        const btnTop = RULER_HEIGHT + ti2 * 56 + (56 - btnSize) / 2 - ctx.scrollTop;
+        const btnTop = RULER_HEIGHT + ti2 * TRACK_HEIGHT + (TRACK_HEIGHT - btnSize) / 2 - ctx.scrollTop;
         if (x >= btnLeft && x <= btnLeft + btnSize && y >= btnTop && y <= btnTop + btnSize) {
           return { kind: "header-delete", trackIndex: ti2 };
         }
@@ -1520,7 +1858,6 @@ var Timeline = class _Timeline {
     const dpr = window.devicePixelRatio || 1;
     this.canvas.width = Math.floor(this.viewportWidth * dpr);
     this.canvas.height = Math.floor(this.viewportHeight * dpr);
-    this.canvas.style.height = `${this.viewportHeight}px`;
     this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
   }
   computeFitScale() {
@@ -1937,7 +2274,8 @@ var Timeline = class _Timeline {
     const tiRaw = this.trackIndexAtY(y);
     const phantomIdx = this.project.tracks.length;
     const phantomScreenY = RULER_HEIGHT + phantomIdx * TRACK_HEIGHT - this.scrollTop;
-    const onPhantom = y >= phantomScreenY && y < phantomScreenY + TRACK_HEIGHT;
+    const viewportBottom = this.viewportHeight - SCROLLBAR_THICKNESS;
+    const onPhantom = y >= phantomScreenY && y < Math.max(phantomScreenY + TRACK_HEIGHT, viewportBottom);
     const intendedTrackIndex = onPhantom ? phantomIdx : tiRaw >= 0 ? tiRaw : drag.trackIndex;
     let ghostTrackIndex = intendedTrackIndex;
     let overlap = false;
@@ -2702,7 +3040,19 @@ var Editor = class _Editor {
     this.pxPerSec = clampScale2(opts.initialScale ?? DEFAULT_PX_PER_SEC);
     this.snap = opts.initialSnap !== false;
     this.locale = mergeLocale(opts.locale);
+    if (opts.trackHeight != null || opts.rulerHeight != null) {
+      setTimelineMetrics({
+        ...opts.trackHeight != null ? { trackHeight: opts.trackHeight } : {},
+        ...opts.rulerHeight != null ? { rulerHeight: opts.rulerHeight } : {}
+      });
+    }
     applyTheme(this.container, opts.theme);
+    if (opts.timelineHeight != null && opts.timelineHeight > 0) {
+      this.container.style.setProperty(
+        "--aicut-timeline-height",
+        `${Math.round(opts.timelineHeight)}px`
+      );
+    }
     this.ui = new EditorUI(this.container, this, {
       onPlayToggle: () => this.togglePlay(),
       onSplit: () => this.split(),
@@ -2720,7 +3070,11 @@ var Editor = class _Editor {
       onMoveClip: (id, opts2) => this.moveClip(id, opts2),
       onResizeClip: (id, edits) => this.resizeClip(id, edits)
     });
-    this.engine = new PlaybackEngine(this.ui.previewHost, this.project);
+    const engineFactory = opts.playbackEngine ?? ((o) => new HtmlVideoEngine(o));
+    this.engine = engineFactory({
+      host: this.ui.previewHost,
+      project: this.project
+    });
     this.engine.onTimeUpdate = (ms) => {
       this.bus.emit("time", { timeMs: ms });
       this.ui.onTimeTick(ms);
@@ -3265,6 +3619,6 @@ function clampScale2(s) {
   return Math.max(MIN_PX_PER_SEC, Math.min(MAX_PX_PER_SEC, s));
 }
 
-export { Editor, HEADER_WIDTH, RULER_HEIGHT, TRACK_HEIGHT, Timeline, createEmptyProject, createId, normalizeProject };
+export { CanvasCompositorEngine, Editor, HEADER_WIDTH, HtmlVideoEngine, RULER_HEIGHT, TRACK_HEIGHT, Timeline, canvasCompositorEngineFactory, createEmptyProject, createId, htmlVideoEngineFactory, normalizeProject, setTimelineMetrics };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map