@mineo71/showtime 0.0.0-stage → 0.2.1

package/src/timeline/cursor.ts

@@ -0,0 +1,59 @@
+import { clamp, easeInOutCubic } from './math';
+import type { Click, CursorKind, Move } from './types';
+
+export const RIPPLE_MS = 450;
+const PRESS_MS = 140;
+const FADE_IN_MS = 200;
+const KIND_SWITCH_AT = 0.9;
+
+export interface CursorState {
+  x: number;
+  y: number;
+  kind: CursorKind;
+  visible: boolean;
+  opacity: number;
+  press: number;
+}
+
+export function pressAt(clicks: Click[], tMs: number): number {
+  for (const c of clicks) {
+    const d = tMs - c.tMs;
+    if (d >= 0 && d <= PRESS_MS) return 1 - 0.15 * Math.sin((Math.PI * d) / PRESS_MS);
+  }
+  return 1;
+}
+
+export function ripplesAt(clicks: Click[], tMs: number): Array<{ x: number; y: number; tMs: number; progress: number }> {
+  return clicks
+    .filter((c) => tMs >= c.tMs && tMs <= c.tMs + RIPPLE_MS)
+    .map((c) => ({ x: c.x, y: c.y, tMs: c.tMs, progress: (tMs - c.tMs) / RIPPLE_MS }));
+}
+
+export function cursorAt(moves: Move[], clicks: Click[], tMs: number): CursorState {
+  if (!moves.length) return { x: 0, y: 0, kind: 'arrow', visible: false, opacity: 0, press: 1 };
+  const first = moves[0];
+  if (tMs < first.startMs) return { ...first.from, kind: 'arrow', visible: false, opacity: 0, press: 1 };
+
+  let i = 0;
+  while (i + 1 < moves.length && moves[i + 1].startMs <= tMs) i++;
+  const m = moves[i];
+  const prevKind: CursorKind = i > 0 ? moves[i - 1].cursor : 'arrow';
+
+  let { x, y } = m.to;
+  let kind = m.cursor;
+  if (tMs < m.endMs) {
+    const p = clamp((tMs - m.startMs) / Math.max(1, m.endMs - m.startMs), 0, 1);
+    const e = easeInOutCubic(p);
+    const dx = m.to.x - m.from.x;
+    const dy = m.to.y - m.from.y;
+    const dist = Math.hypot(dx, dy);
+    const arc = Math.sin(Math.PI * p) * Math.min(40, dist * 0.08);
+    const nx = dist ? -dy / dist : 0;
+    const ny = dist ? dx / dist : 0;
+    x = m.from.x + dx * e + nx * arc;
+    y = m.from.y + dy * e + ny * arc;
+    kind = p < KIND_SWITCH_AT ? prevKind : m.cursor;
+  }
+  const opacity = clamp((tMs - first.startMs) / FADE_IN_MS, 0, 1);
+  return { x, y, kind, visible: true, opacity, press: pressAt(clicks, tMs) };
+}

package/src/timeline/frames.ts

@@ -0,0 +1,60 @@
+import { outputDurationMs, outputToSource, sourceToOutput } from './timemap';
+import type { StepEvent, Timeline } from './types';
+
+export interface SegmentPlan {
+  fromFrame: number;
+  durationInFrames: number;
+  /** source frame where this segment starts */
+  trimBefore: number;
+  speed: number;
+}
+
+export interface Shot {
+  frame: number;
+  name: string;
+}
+
+const toFrames = (ms: number, fps: number) => Math.round((ms * fps) / 1000);
+
+export function introFrames(t: Timeline): number {
+  return t.intro ? toFrames(t.intro.durationMs, t.fps) : 0;
+}
+
+export function totalFrames(t: Timeline): number {
+  return Math.max(1, introFrames(t) + toFrames(outputDurationMs(t.segments), t.fps));
+}
+
+export function segmentPlan(t: Timeline): SegmentPlan[] {
+  const intro = introFrames(t);
+  const plan: SegmentPlan[] = [];
+  let outMs = 0;
+  for (const s of t.segments) {
+    const startF = toFrames(outMs, t.fps);
+    outMs += (s.srcEndMs - s.srcStartMs) / s.speed;
+    const endF = toFrames(outMs, t.fps);
+    if (endF > startF) {
+      plan.push({ fromFrame: intro + startF, durationInFrames: endF - startF, trimBefore: toFrames(s.srcStartMs, t.fps), speed: s.speed });
+    }
+  }
+  return plan;
+}
+
+/** Source ms shown at a composition frame, or null during the intro. */
+export function sourceMsAtFrame(t: Timeline, frame: number): number | null {
+  const f = frame - introFrames(t);
+  if (f < 0) return null;
+  return outputToSource(t.segments, (f * 1000) / t.fps);
+}
+
+export function qaShots(t: Timeline, steps: StepEvent[]): Shot[] {
+  const intro = introFrames(t);
+  const last = totalFrames(t) - 1;
+  const shots: Shot[] = [];
+  if (t.intro) shots.push({ frame: Math.floor(intro / 2), name: '00-intro' });
+  steps.forEach((s, i) => {
+    const mid = (s.actionMs + s.settledMs) / 2;
+    const frame = Math.min(last, intro + toFrames(sourceToOutput(t.segments, mid), t.fps));
+    shots.push({ frame, name: `${String(i + 1).padStart(2, '0')}-${s.sceneId}-${s.index + 1}-${s.do}` });
+  });
+  return shots;
+}

package/src/timeline/layout.ts

@@ -0,0 +1,29 @@
+export interface Box {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** Height of the browser bar, in stage (viewport) pixels. */
+export const BROWSER_BAR = 44;
+
+/**
+ * Where the recorded viewport sits inside the output frame. `bar` (stage px) reserves room for a
+ * browser bar above it; the returned box is the viewport, `bar` the bar height in output px.
+ */
+export function windowLayout(
+  output: { width: number; height: number },
+  stage: { width: number; height: number },
+  padding: number,
+  bar = 0,
+): Box & { bar: number } {
+  const availW = output.width * (1 - 2 * padding);
+  const availH = output.height * (1 - 2 * padding);
+  const k = Math.min(availW / stage.width, availH / (stage.height + bar));
+  const width = Math.round(stage.width * k);
+  const height = Math.round(stage.height * k);
+  const barPx = Math.round(bar * k);
+  const top = Math.round((output.height - height - barPx) / 2);
+  return { x: Math.round((output.width - width) / 2), y: top + barPx, width, height, bar: barPx };
+}

package/src/timeline/math.ts

@@ -0,0 +1,7 @@
+export const clamp = (v: number, lo: number, hi: number): number => Math.min(hi, Math.max(lo, v));
+
+export const lerp = (a: number, b: number, t: number): number => a + (b - a) * t;
+
+export const easeInOutCubic = (t: number): number => (t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2);
+
+export const easeOutCubic = (t: number): number => 1 - (1 - t) ** 3;

package/src/timeline/timemap.ts

@@ -0,0 +1,52 @@
+import type { Interval, Segment } from './types';
+
+export interface SpeedSpan extends Interval {
+  speed: number;
+}
+
+/** Cover [0, durationMs] with speed segments. Later spans win where spans overlap. */
+export function buildSegments(durationMs: number, spans: SpeedSpan[]): Segment[] {
+  const clip = (t: number) => Math.min(durationMs, Math.max(0, t));
+  const cuts = new Set<number>([0, durationMs]);
+  for (const s of spans) {
+    cuts.add(clip(s.startMs));
+    cuts.add(clip(s.endMs));
+  }
+  const points = [...cuts].sort((a, b) => a - b);
+  const out: Segment[] = [];
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i];
+    const b = points[i + 1];
+    if (b <= a) continue;
+    const mid = (a + b) / 2;
+    let speed = 1;
+    for (const s of spans) if (s.startMs <= mid && mid < s.endMs) speed = s.speed;
+    const last = out[out.length - 1];
+    if (last && last.speed === speed) last.srcEndMs = b;
+    else out.push({ srcStartMs: a, srcEndMs: b, speed });
+  }
+  return out;
+}
+
+export function outputDurationMs(segments: Segment[]): number {
+  return segments.reduce((acc, s) => acc + (s.srcEndMs - s.srcStartMs) / s.speed, 0);
+}
+
+export function outputToSource(segments: Segment[], tOutMs: number): number {
+  let acc = 0;
+  for (const s of segments) {
+    const len = (s.srcEndMs - s.srcStartMs) / s.speed;
+    if (tOutMs < acc + len) return s.srcStartMs + Math.max(0, tOutMs - acc) * s.speed;
+    acc += len;
+  }
+  return segments.length ? segments[segments.length - 1].srcEndMs : 0;
+}
+
+export function sourceToOutput(segments: Segment[], tSrcMs: number): number {
+  let acc = 0;
+  for (const s of segments) {
+    if (tSrcMs < s.srcEndMs) return acc + Math.max(0, tSrcMs - s.srcStartMs) / s.speed;
+    acc += (s.srcEndMs - s.srcStartMs) / s.speed;
+  }
+  return acc;
+}

package/src/timeline/types.ts

@@ -0,0 +1,111 @@
+import type { Step, Style } from '../script/schema';
+
+export interface Pt {
+  x: number;
+  y: number;
+}
+
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export type CursorKind = 'arrow' | 'pointer' | 'text';
+
+export interface Move {
+  startMs: number;
+  endMs: number;
+  from: Pt;
+  to: Pt;
+  cursor: CursorKind;
+}
+
+export interface Click {
+  tMs: number;
+  x: number;
+  y: number;
+}
+
+export interface Interval {
+  startMs: number;
+  endMs: number;
+}
+
+export interface StepEvent {
+  sceneId: string;
+  index: number;
+  do: Step['do'];
+  /** step begins (before scroll / cursor travel) */
+  startMs: number;
+  /** cursor arrived, action performed */
+  actionMs: number;
+  /** action finished (excludes settle / hold) */
+  endMs: number;
+  /** after settle + beat + hold */
+  settledMs: number;
+  /** CSS px, viewport-relative, measured after scrolling */
+  target?: Rect;
+}
+
+/** Written by `record` to take/events.json. All times: ms since capture start. */
+export interface TakeEvents {
+  version: 1;
+  actionHash: string;
+  viewport: { width: number; height: number };
+  deviceScaleFactor: number;
+  video: { file: string; width: number; height: number; fps: number; durationMs: number };
+  steps: StepEvent[];
+  moves: Move[];
+  clicks: Click[];
+  idle: Interval[];
+}
+
+export interface Segment {
+  srcStartMs: number;
+  srcEndMs: number;
+  speed: number;
+}
+
+export interface CameraKey {
+  tMs: number;
+  scale: number;
+  /** focus, 0..1 of stage width */
+  cx: number;
+  /** focus, 0..1 of stage height */
+  cy: number;
+}
+
+export interface Caption {
+  startMs: number;
+  endMs: number;
+  text: string;
+}
+
+export interface Spotlight {
+  startMs: number;
+  endMs: number;
+  rect: Rect;
+}
+
+export type ResolvedStyle = Style;
+
+/** The renderer contract. All overlay times are source ms. */
+export interface Timeline {
+  version: 1;
+  fps: number;
+  output: { width: number; height: number };
+  stage: { width: number; height: number };
+  video: { src: string; durationMs: number };
+  intro: { title: string; subtitle?: string; durationMs: number } | null;
+  /** Browser window around the take, or null for the bare viewport. */
+  chrome: { address: string; dark: boolean } | null;
+  segments: Segment[];
+  camera: CameraKey[];
+  moves: Move[];
+  clicks: Click[];
+  captions: Caption[];
+  spotlights: Spotlight[];
+  style: ResolvedStyle;
+}