Timeline

import type { Clip } from "@miraiclip/core";

const { doc } = project.getState();

// trackOrder[0] is the bottom layer. Timelines usually draw the top layer first.
const rows = [...doc.trackOrder].reverse().map((trackId) => ({
  track: doc.tracks[trackId]!,
  clips: Object.values(doc.clips)
    .filter((clip: Clip) => clip.trackId === trackId)
    .sort((a, b) => a.startUs - b.startUs),
}));

import { projectFrameRate, snapToFrame } from "@miraiclip/core";

let pxPerSecond = 100; // zoom

const usToPx = (us: number) => (us / 1_000_000) * pxPerSecond;
const pxToUs = (px: number) => Math.round((px / pxPerSecond) * 1_000_000);

const rate = projectFrameRate(project.getState().doc.settings);
const snapped = snapToFrame(pxToUs(437), rate);

import { projectFrameRate, snapToFrame, type Clip, type Project, type ProjectDocument } from "@miraiclip/core";

// Zoom is pixels per second of timeline.
export const usToPx = (us: number, pxPerSecond: number) => (us / 1_000_000) * pxPerSecond;
export const pxToUs = (px: number, pxPerSecond: number) => Math.round((px / pxPerSecond) * 1_000_000);

/** The clips on one track, in time order. */
export function clipsOnTrack(doc: ProjectDocument, trackId: string): Clip[] {
  return Object.values(doc.clips)
    .filter((clip) => clip.trackId === trackId)
    .sort((a, b) => a.startUs - b.startUs);
}

/** True when [startUs, startUs + durationUs) overlaps no clip on the track except `ignoreId`. */
export function isFree(doc: ProjectDocument, trackId: string, startUs: number, durationUs: number, ignoreId?: string) {
  return clipsOnTrack(doc, trackId).every(
    (c) => c.id === ignoreId || c.startUs >= startUs + durationUs || c.startUs + c.durationUs <= startUs,
  );
}

/** Drag a clip along its track. The DOM follows the pointer; one `clip/move` is dispatched on release. */
export function dragClip(
  project: Project,
  clipId: string,
  el: HTMLElement,
  down: { pointerId: number; clientX: number },
  pxPerSecond: number,
) {
  const clip = project.getState().doc.clips[clipId];
  if (!clip) return;
  const rate = projectFrameRate(project.getState().doc.settings);
  let startUs = clip.startUs;

  const onMove = (e: PointerEvent) => {
    const deltaUs = pxToUs(e.clientX - down.clientX, pxPerSecond);
    startUs = Math.max(0, snapToFrame(clip.startUs + deltaUs, rate));
    el.style.translate = `${usToPx(startUs - clip.startUs, pxPerSecond)}px 0`;
  };
  const onUp = () => {
    el.removeEventListener("pointermove", onMove);
    el.style.translate = "";
    const doc = project.getState().doc;
    if (startUs !== clip.startUs && isFree(doc, clip.trackId, startUs, clip.durationUs, clipId)) {
      project.dispatch({ type: "clip/move", payload: { clipId, startUs } });
    }
  };

  el.setPointerCapture(down.pointerId);
  el.addEventListener("pointermove", onMove);
  el.addEventListener("pointerup", onUp, { once: true });
  el.addEventListener("pointercancel", onUp, { once: true });
}

import { projectFrameRate, snapToFrame } from "@miraiclip/core";
import type { Player } from "@miraiclip/renderer";

declare const player: Player;
const pxPerSecond = 100;
const ruler = document.querySelector<HTMLElement>("#ruler")!;
const playheadLine = document.querySelector<HTMLElement>("#playhead")!;

project.subscribe(
  (s) => s.playheadUs,
  (us) => {
    playheadLine.style.translate = `${(us / 1_000_000) * pxPerSecond}px 0`;
  },
);

function seekToPointer(e: PointerEvent) {
  const x = e.clientX - ruler.getBoundingClientRect().left;
  const us = Math.max(0, Math.round((x / pxPerSecond) * 1_000_000));
  player.seek(snapToFrame(us, projectFrameRate(project.getState().doc.settings)));
}

ruler.addEventListener("pointerdown", (e) => {
  ruler.setPointerCapture(e.pointerId);
  seekToPointer(e);
  ruler.addEventListener("pointermove", seekToPointer);
  ruler.addEventListener("pointerup", () => ruler.removeEventListener("pointermove", seekToPointer), { once: true });
});

project.dispatch({ type: "clip/move", payload: { clipId: "intro", startUs: 2_000_000, trackId: "overlay" } });

import { projectFrameRate, snapToFrame } from "@miraiclip/core";

function snapStart(proposedUs: number, clipId: string, thresholdUs: number): number {
  const { doc, playheadUs } = project.getState();
  const clip = doc.clips[clipId]!;
  const targets = [0, playheadUs];
  for (const other of Object.values(doc.clips)) {
    if (other.id === clipId) continue;
    targets.push(other.startUs, other.startUs + other.durationUs);
  }
  let best = snapToFrame(proposedUs, projectFrameRate(doc.settings));
  let bestDistance = thresholdUs;
  for (const t of targets) {
    // Snap the clip's start or its end to the target.
    for (const candidate of [t, t - clip.durationUs]) {
      const distance = Math.abs(candidate - proposedUs);
      if (candidate >= 0 && distance < bestDistance) {
        best = candidate;
        bestDistance = distance;
      }
    }
  }
  return best;
}

const pxPerSecond = 100;
const startUs = snapStart(1_480_000, "intro", Math.round((8 / pxPerSecond) * 1_000_000)); // 8px

import { clipHeadroomUs, frameDurationUs, projectFrameRate } from "@miraiclip/core";

/** Drag the left edge by deltaUs (negative = extend left). */
function trimLeft(clipId: string, deltaUs: number) {
  const { doc } = project.getState();
  const clip = doc.clips[clipId]!;
  const minUs = Math.ceil(frameDurationUs(projectFrameRate(doc.settings)));
  const d = Math.min(
    Math.max(deltaUs, -clipHeadroomUs(doc, clip, "in"), -clip.startUs),
    clip.durationUs - minUs,
  );
  if (d === 0) return;
  project.dispatch({
    type: "clip/trim",
    payload: {
      clipId,
      startUs: clip.startUs + d,
      durationUs: clip.durationUs - d,
      // Only video and audio clips have a source offset.
      ...("trimStartUs" in clip ? { trimStartUs: clip.trimStartUs + d } : {}),
    },
  });
}

/** Drag the right edge by deltaUs (positive = extend right). */
function trimRight(clipId: string, deltaUs: number) {
  const { doc } = project.getState();
  const clip = doc.clips[clipId]!;
  const minUs = Math.ceil(frameDurationUs(projectFrameRate(doc.settings)));
  const durationUs = Math.max(minUs, clip.durationUs + Math.min(deltaUs, clipHeadroomUs(doc, clip, "out")));
  project.dispatch({ type: "clip/trim", payload: { clipId, durationUs } });
}

function splitAtPlayhead() {
  const { doc, playheadUs, selection } = project.getState();
  const targets = Object.values(doc.clips).filter(
    (clip) =>
      (selection.length === 0 || selection.includes(clip.id)) &&
      !doc.tracks[clip.trackId]?.locked &&
      clip.startUs < playheadUs &&
      playheadUs < clip.startUs + clip.durationUs,
  );
  if (targets.length === 0) return;
  project.transaction(() => {
    for (const clip of targets) {
      project.dispatch({
        type: "clip/split",
        payload: { clipId: clip.id, atUs: playheadUs, newClipId: `${clip.id}-${playheadUs}` },
      });
    }
  }, "Split");
}

/** Remove a clip and close the gap on its track. */
function rippleDelete(clipId: string) {
  const { doc } = project.getState();
  const removed = doc.clips[clipId];
  if (!removed) return;
  const endUs = removed.startUs + removed.durationUs;
  const later = Object.values(doc.clips)
    .filter((c) => c.trackId === removed.trackId && c.startUs >= endUs)
    .sort((a, b) => a.startUs - b.startUs);

  project.transaction(() => {
    project.dispatch({ type: "clip/remove", payload: { clipId } });
    for (const clip of later) {
      project.dispatch({ type: "clip/move", payload: { clipId: clip.id, startUs: clip.startUs - removed.durationUs } });
    }
  }, "Ripple delete");
}

import type { AudioClip } from "@miraiclip/core";
import { computeWaveformPeaks, openMediabunnyAudio, peaksForRange, type WaveformPeaks } from "@miraiclip/renderer";

const waveforms = new Map<string, Promise<WaveformPeaks | null>>();

function waveformFor(assetId: string): Promise<WaveformPeaks | null> {
  let cached = waveforms.get(assetId);
  if (!cached) {
    const asset = project.getState().doc.assets[assetId]!;
    cached = openMediabunnyAudio(assetId, asset.src).then(async (source) => {
      if (!source || asset.durationUs === undefined) return null; // no audio track, or unknown length
      try {
        return await computeWaveformPeaks(source, { durationUs: asset.durationUs });
      } finally {
        source.dispose();
      }
    });
    waveforms.set(assetId, cached);
  }
  return cached;
}

async function drawWaveform(canvas: HTMLCanvasElement, clip: AudioClip) {
  const waveform = await waveformFor(clip.assetId);
  if (!waveform) return;
  const columns = peaksForRange(waveform, clip.trimStartUs, clip.trimStartUs + clip.durationUs, canvas.width);
  const ctx = canvas.getContext("2d")!;
  const mid = canvas.height / 2;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  columns.forEach((peak, x) => ctx.fillRect(x, mid - peak * mid, 1, Math.max(1, peak * canvas.height)));
}