@mineo71/showtime 0.2.0 → 0.3.0

package/src/timeline/frames.ts

@@ -20,8 +20,17 @@ export function introFrames(t: Timeline): number {
   return t.intro ? toFrames(t.intro.durationMs, t.fps) : 0;
 }
 
+export function outroFrames(t: Timeline): number {
+  return t.outro ? toFrames(t.outro.durationMs, t.fps) : 0;
+}
+
+/** First frame after the video (where the outro starts). */
+export function videoEndFrame(t: Timeline): number {
+  return introFrames(t) + toFrames(outputDurationMs(t.segments), t.fps);
+}
+
 export function totalFrames(t: Timeline): number {
-  return Math.max(1, introFrames(t) + toFrames(outputDurationMs(t.segments), t.fps));
+  return Math.max(1, videoEndFrame(t) + outroFrames(t));
 }
 
 export function segmentPlan(t: Timeline): SegmentPlan[] {
@@ -48,7 +57,7 @@ export function sourceMsAtFrame(t: Timeline, frame: number): number | null {
 
 export function qaShots(t: Timeline, steps: StepEvent[]): Shot[] {
   const intro = introFrames(t);
-  const last = totalFrames(t) - 1;
+  const last = Math.max(0, videoEndFrame(t) - 1);
   const shots: Shot[] = [];
   if (t.intro) shots.push({ frame: Math.floor(intro / 2), name: '00-intro' });
   steps.forEach((s, i) => {
@@ -56,5 +65,6 @@ export function qaShots(t: Timeline, steps: StepEvent[]): Shot[] {
     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}` });
   });
+  if (t.outro) shots.push({ frame: videoEndFrame(t) + Math.round(outroFrames(t) * 0.6), name: '99-outro' });
   return shots;
 }

package/src/timeline/layout.ts

@@ -1,3 +1,5 @@
+import type { CameraKey, Rect } from './types';
+
 export interface Box {
   x: number;
   y: number;
@@ -27,3 +29,22 @@ export function windowLayout(
   const top = Math.round((output.height - height - barPx) / 2);
   return { x: Math.round((output.width - width) / 2), y: top + barPx, width, height, bar: barPx };
 }
+
+const r2 = (v: number) => Math.round(v * 100) / 100;
+
+/** Where a stage rect (CSS px) lands in the output: through the camera, inside the window viewport. */
+export function projectRect(
+  r: Rect,
+  cam: Pick<CameraKey, 'scale' | 'cx' | 'cy'>,
+  stage: { width: number; height: number },
+  win: Box,
+): Rect {
+  const w = win.width * cam.scale;
+  const h = win.height * cam.scale;
+  return {
+    x: r2(win.x + win.width / 2 + (r.x / stage.width - cam.cx) * w),
+    y: r2(win.y + win.height / 2 + (r.y / stage.height - cam.cy) * h),
+    width: r2((r.width / stage.width) * w),
+    height: r2((r.height / stage.height) * h),
+  };
+}

package/src/timeline/types.ts

@@ -81,6 +81,8 @@ export interface Caption {
   startMs: number;
   endMs: number;
   text: string;
+  /** Bottom unless the step's target would sit under a bottom caption. */
+  position: 'bottom' | 'top';
 }
 
 export interface Spotlight {
@@ -101,6 +103,10 @@ export interface Timeline {
   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;
+  /** Closing card after the video. */
+  outro: { title: string; subtitle?: string; url?: string; durationMs: number } | null;
+  /** Logo for the intro and outro cards, as a data URI. */
+  logo: string | null;
   segments: Segment[];
   camera: CameraKey[];
   moves: Move[];