layout

1/** Video-layout safe area — 80px sides / 100px vertical at 1080p reference */
2const REFERENCE_WIDTH = 1080;
3const REFERENCE_HEIGHT = 1080;
4const HORIZONTAL_SAFE = 80;
5const VERTICAL_SAFE = 100;
6 
7export type SafePaddingOptions = {
8  width: number;
9  height: number;
10  ratio?: number;
11};
12 
13export type SafeAreaPadding = {
14  paddingLeft: number;
15  paddingRight: number;
16  paddingTop: number;
17  paddingBottom: number;
18};
19 
20/** Per-edge safe area from video-layout guidance */
21export function getSafeAreaPadding({
22  width,
23  height,
24}: {
25  width: number;
26  height: number;
27}): SafeAreaPadding {
28  const horizontal = Math.round((HORIZONTAL_SAFE / REFERENCE_WIDTH) * width);
29  const vertical = Math.round((VERTICAL_SAFE / REFERENCE_HEIGHT) * height);
30 
31  return {
32    paddingLeft: horizontal,
33    paddingRight: horizontal,
34    paddingTop: vertical,
35    paddingBottom: vertical,
36  };
37}
38 
39/** Uniform padding — max of horizontal/vertical safe insets */
40export function getSafePadding({
41  width,
42  height,
43  ratio,
44}: SafePaddingOptions): number {
45  if (ratio !== undefined) {
46    return Math.round(Math.min(width, height) * ratio);
47  }
48 
49  const { paddingLeft, paddingTop } = getSafeAreaPadding({ width, height });
50  return Math.max(paddingLeft, paddingTop);
51}
52 
53/**
54 * Scale a font size defined at 1080p width to any composition width.
55 * Skill minimums at 1080: headline 84, supporting 44, label 32.
56 */
57export function scaleFont(
58  sizeAt1080: number,
59  width: number,
60  referenceWidth = REFERENCE_WIDTH,
61): number {
62  return Math.round(sizeAt1080 * (width / referenceWidth));
63}
64 
65export type Rect = {
66  x: number;
67  y: number;
68  width: number;
69  height: number;
70};
71 
72/** Clamp a rect inside the video safe area (for spotlight targets, overlays). */
73export function clampRectToSafeArea(
74  rect: Rect,
75  frameWidth: number,
76  frameHeight: number,
77): Rect {
78  const safe = getSafeAreaPadding({ width: frameWidth, height: frameHeight });
79  const minX = safe.paddingLeft;
80  const minY = safe.paddingTop;
81  const maxX = frameWidth - safe.paddingRight;
82  const maxY = frameHeight - safe.paddingBottom;
83 
84  const width = Math.min(rect.width, maxX - minX);
85  const height = Math.min(rect.height, maxY - minY);
86  const x = Math.min(Math.max(rect.x, minX), maxX - width);
87  const y = Math.min(Math.max(rect.y, minY), maxY - height);
88 
89  return { x, y, width, height };
90}
91 
92/** Preview aspect presets for docs QA */
93export const PREVIEW_LANDSCAPE = { width: 960, height: 540 } as const;
94// … truncated