@norskvideo/ctl-sdk 0.1.16 → 0.1.18

package/components/ShotBar.d.ts

@@ -18,6 +18,16 @@ export interface ShotBarProps {
     graphicBaseUrl?: string;
     /** Default transition applied to takes. */
     transition?: Transition;
+    /**
+     * Compose output resolution the shot `config` rects are expressed in — the
+     * denominator for the thumbnail geometry. Pass the live reference so a 720p
+     * compose draws the L-bar/PiP box where the graphic frames it; defaults to
+     * 1920x1080.
+     */
+    reference?: {
+        width: number;
+        height: number;
+    };
     /** Show the editable graphic-URL field on graphic-bearing cards (default true). */
     editableGraphics?: boolean;
     /** Send the assembled commands to air. The consumer owns the WebSocket. */
@@ -43,4 +53,4 @@ export interface ShotBarProps {
      */
     renderPreviewMonitor?: (selected: ResolvedShot | null) => ReactNode;
 }
-export declare function ShotBar({ shots, pgmShotId, pvwShotId, graphicBaseUrl, transition, editableGraphics, onTake, onPreview, previewing, onCancelPreview, renderProgramMonitor, renderPreviewMonitor, }: ShotBarProps): import("react").JSX.Element;
+export declare function ShotBar({ shots, pgmShotId, pvwShotId, graphicBaseUrl, transition, reference, editableGraphics, onTake, onPreview, previewing, onCancelPreview, renderProgramMonitor, renderPreviewMonitor, }: ShotBarProps): import("react").JSX.Element;

package/components/ShotBar.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { graphicResolvable, hideReasonLabel, prepareTake } from "./shot-bar-view-model.js";
+import { graphicResolvable, hideReasonLabel, prepareTake, shotThumbnailBox } from "./shot-bar-view-model.js";
 import { useUIPrimitives } from "./ui-primitives.js";
 const FAMILY_BADGE = { geometry: "Geometry", graphic: "Graphic" };
-export function ShotBar({ shots, pgmShotId, pvwShotId, graphicBaseUrl, transition, editableGraphics = true, onTake, onPreview, previewing = false, onCancelPreview, renderProgramMonitor, renderPreviewMonitor, }) {
+export function ShotBar({ shots, pgmShotId, pvwShotId, graphicBaseUrl, transition, reference = { width: 1920, height: 1080 }, editableGraphics = true, onTake, onPreview, previewing = false, onCancelPreview, renderProgramMonitor, renderPreviewMonitor, }) {
     const { Button, Input } = useUIPrimitives();
     const [selectedId, setSelectedId] = useState(null);
     const [editedUrls, setEditedUrls] = useState({});
@@ -28,7 +28,7 @@ export function ShotBar({ shots, pgmShotId, pvwShotId, graphicBaseUrl, transitio
     // preview take handler or a preview monitor renderer). Otherwise it's a dead
     // pane — a direct-take product has no PVW feed — so give On Air the full row.
     const showPreview = Boolean(onPreview || renderPreviewMonitor);
-    return (_jsxs("div", { className: "flex flex-col gap-4 text-zinc-100", children: [_jsxs("div", { className: "grid gap-3", style: { gridTemplateColumns: showPreview ? "minmax(0, 1fr) minmax(0, 1fr)" : "minmax(0, 1fr)" }, children: [showPreview ? (_jsx(Monitor, { label: "Preview", tone: "pvw", shot: findLabel(shots, pvwShotId), render: renderPreviewMonitor ? () => renderPreviewMonitor(selected ?? null) : undefined })) : null, _jsx(Monitor, { label: "Live", tone: "pgm", shot: findLabel(shots, pgmShotId), render: renderProgramMonitor })] }), _jsx("div", { className: "flex gap-3 overflow-x-auto pb-1", children: shots.map((shot) => (_jsx(ShotCard, { shot: shot, selected: shot.id === selectedId, onAir: shot.id === pgmShotId, config: shot.status === "ready" ? shot.config : undefined, onSelect: () => shot.status === "ready" && setSelectedId(shot.id) }, shot.id))) }), selected ? (_jsxs("div", { className: "flex flex-col gap-3 rounded-lg border border-zinc-800 bg-zinc-900/60 p-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", children: [selected.label, previewing ? (_jsx("span", { className: "rounded bg-emerald-600/20 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-400", children: "Previewing" })) : null] }), _jsxs("div", { className: "flex gap-2", children: [previewing ? (onCancelPreview ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: onCancelPreview, children: "Cancel" })) : null) : onPreview ? (_jsx(Button, { variant: "ghost", size: "sm", disabled: !takeableGraphic, onClick: () => onPreview(commands, selected), children: "Preview" })) : null, _jsx(Button, { variant: "primary", size: "sm", disabled: !takeableGraphic, onClick: () => onTake(commands, selected), children: "Take" })] })] }), !takeableGraphic ? (_jsx("p", { className: "text-xs text-amber-500/90", children: "This shot's graphic page is a relative path but no engine-reachable graphic base is configured, so it can't be loaded into the overlay. Set an absolute page URL, or configure the overlay base." })) : null, editableGraphics && selected.graphicUrl !== undefined ? (_jsxs("div", { className: "flex flex-col gap-1 text-xs text-zinc-400", children: [_jsx("label", { htmlFor: "shotbar-graphic-url", children: "Graphic page" }), _jsx(Input, { id: "shotbar-graphic-url", type: "text", value: editedUrls[selected.id] ?? selected.graphicUrl, placeholder: selected.graphicUrl, onChange: (e) => setEditedUrls((prev) => ({ ...prev, [selected.id]: e.target.value })) })] })) : null] })) : (_jsx("div", { className: "rounded-lg border border-dashed border-zinc-800 p-4 text-center text-sm text-zinc-500", children: "No shot selected \u2014 pick an available shot above." }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4 text-zinc-100", children: [_jsxs("div", { className: "grid gap-3", style: { gridTemplateColumns: showPreview ? "minmax(0, 1fr) minmax(0, 1fr)" : "minmax(0, 1fr)" }, children: [showPreview ? (_jsx(Monitor, { label: "Preview", tone: "pvw", shot: findLabel(shots, pvwShotId), render: renderPreviewMonitor ? () => renderPreviewMonitor(selected ?? null) : undefined })) : null, _jsx(Monitor, { label: "Live", tone: "pgm", shot: findLabel(shots, pgmShotId), render: renderProgramMonitor })] }), _jsx("div", { className: "flex gap-3 overflow-x-auto pb-1", children: shots.map((shot) => (_jsx(ShotCard, { shot: shot, selected: shot.id === selectedId, onAir: shot.id === pgmShotId, config: shot.status === "ready" ? shot.config : undefined, reference: reference, onSelect: () => shot.status === "ready" && setSelectedId(shot.id) }, shot.id))) }), selected ? (_jsxs("div", { className: "flex flex-col gap-3 rounded-lg border border-zinc-800 bg-zinc-900/60 p-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", children: [selected.label, previewing ? (_jsx("span", { className: "rounded bg-emerald-600/20 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-400", children: "Previewing" })) : null] }), _jsxs("div", { className: "flex gap-2", children: [previewing ? (onCancelPreview ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: onCancelPreview, children: "Cancel" })) : null) : onPreview ? (_jsx(Button, { variant: "ghost", size: "sm", disabled: !takeableGraphic, onClick: () => onPreview(commands, selected), children: "Preview" })) : null, _jsx(Button, { variant: "primary", size: "sm", disabled: !takeableGraphic, onClick: () => onTake(commands, selected), children: "Take" })] })] }), !takeableGraphic ? (_jsx("p", { className: "text-xs text-amber-500/90", children: "This shot's graphic page is a relative path but no engine-reachable graphic base is configured, so it can't be loaded into the overlay. Set an absolute page URL, or configure the overlay base." })) : null, editableGraphics && selected.graphicUrl !== undefined ? (_jsxs("div", { className: "flex flex-col gap-1 text-xs text-zinc-400", children: [_jsx("label", { htmlFor: "shotbar-graphic-url", children: "Graphic page" }), _jsx(Input, { id: "shotbar-graphic-url", type: "text", value: editedUrls[selected.id] ?? selected.graphicUrl, placeholder: selected.graphicUrl, onChange: (e) => setEditedUrls((prev) => ({ ...prev, [selected.id]: e.target.value })) })] })) : null] })) : (_jsx("div", { className: "rounded-lg border border-dashed border-zinc-800 p-4 text-center text-sm text-zinc-500", children: "No shot selected \u2014 pick an available shot above." }))] }));
 }
 function findLabel(shots, id) {
     if (!id)
@@ -40,28 +40,25 @@ function Monitor({ label, tone, shot, render, }) {
     const chip = tone === "pgm" ? "bg-red-600 text-white" : "bg-emerald-600 text-white";
     return (_jsxs("div", { className: `relative overflow-hidden rounded-lg border-2 ${ring} bg-black`, children: [_jsx("span", { className: `absolute left-2 top-2 z-10 rounded px-1.5 py-0.5 text-[10px] font-semibold ${chip}`, children: label }), _jsx("div", { className: "flex aspect-video items-center justify-center", children: render ? render() : _jsx("span", { className: "text-xs text-zinc-500", children: shot ?? "—" }) })] }));
 }
-function ShotCard({ shot, selected, onAir, config, onSelect, }) {
+function ShotCard({ shot, selected, onAir, config, reference, onSelect, }) {
     const hidden = shot.status === "hidden";
     const border = onAir ? "border-red-600" : selected ? "border-sky-500" : "border-zinc-800 hover:border-zinc-600";
-    return (_jsxs("button", { type: "button", onClick: onSelect, disabled: hidden, title: hidden ? hideReasonLabel(shot.reason) : shot.label, className: `flex w-40 shrink-0 flex-col gap-2 rounded-lg border ${border} bg-zinc-900 p-2 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-40`, children: [_jsx(ShotThumbnail, { preset: shot.status === "ready" ? shot.preset : "fullscreen", config: config }), _jsxs("div", { className: "flex items-center justify-between gap-1", children: [_jsx("span", { className: "truncate text-xs font-medium text-zinc-100", children: shot.label }), shot.status === "ready" ? (_jsx("span", { className: "shrink-0 rounded bg-zinc-800 px-1 text-[9px] uppercase tracking-wide text-zinc-400", children: FAMILY_BADGE[shot.family] })) : null] }), hidden ? (_jsx("span", { className: "text-[10px] leading-tight text-amber-500/80", children: hideReasonLabel(shot.reason) })) : null] }));
+    return (_jsxs("button", { type: "button", onClick: onSelect, disabled: hidden, title: hidden ? hideReasonLabel(shot.reason) : shot.label, className: `flex w-40 shrink-0 flex-col gap-2 rounded-lg border ${border} bg-zinc-900 p-2 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-40`, children: [_jsx(ShotThumbnail, { preset: shot.status === "ready" ? shot.preset : "fullscreen", config: config, reference: reference }), _jsxs("div", { className: "flex items-center justify-between gap-1", children: [_jsx("span", { className: "truncate text-xs font-medium text-zinc-100", children: shot.label }), shot.status === "ready" ? (_jsx("span", { className: "shrink-0 rounded bg-zinc-800 px-1 text-[9px] uppercase tracking-wide text-zinc-400", children: FAMILY_BADGE[shot.family] })) : null] }), hidden ? (_jsx("span", { className: "text-[10px] leading-tight text-amber-500/80", children: hideReasonLabel(shot.reason) })) : null] }));
 }
 // A truthful 16:9 schematic of what the preset does — programme fill plus the
-// preset's overlay/box geometry, read from config where it's positional.
-function ShotThumbnail({ preset, config }) {
-    const c = (config ?? {});
-    const pct = (v, of) => `${Math.max(0, Math.min(100, (v / of) * 100))}%`;
+// preset's overlay/box geometry, read from config where it's positional. The
+// positional box is scaled against `reference` (the compose output space the
+// config px live in), not a fixed canvas — see shotThumbnailBox.
+function ShotThumbnail({ preset, config, reference, }) {
+    const box = shotThumbnailBox(preset, config, reference);
+    const p = (n) => (n == null ? undefined : `${n}%`);
     const prog = _jsx("div", { className: "absolute inset-0 bg-sky-700/50" });
     let overlay = null;
-    if (preset === "pip") {
-        overlay = (_jsx("div", { className: "absolute rounded-sm bg-amber-400/80", style: { right: "8%", bottom: "10%", width: pct(c.width ?? 384, 1920), height: pct(c.height ?? 270, 1080) } }));
+    if (preset === "pip" && box) {
+        overlay = (_jsx("div", { className: "absolute rounded-sm bg-amber-400/80", style: { right: p(box.right), bottom: p(box.bottom), width: p(box.width), height: p(box.height) } }));
     }
-    else if (preset === "lbar") {
-        overlay = (_jsx("div", { className: "absolute rounded-sm bg-sky-700/70 ring-1 ring-sky-300/40", style: {
-                left: pct(c.videoX ?? 480, 1920),
-                top: pct(c.videoY ?? 0, 1080),
-                width: pct(c.videoWidth ?? 1440, 1920),
-                height: pct(c.videoHeight ?? 810, 1080),
-            } }));
+    else if (preset === "lbar" && box) {
+        overlay = (_jsx("div", { className: "absolute rounded-sm bg-sky-700/70 ring-1 ring-sky-300/40", style: { left: p(box.left), top: p(box.top), width: p(box.width), height: p(box.height) } }));
     }
     else if (preset === "side-by-side") {
         return (_jsxs("div", { className: "relative aspect-video w-full overflow-hidden rounded bg-zinc-950", children: [_jsx("div", { className: "absolute inset-y-0 left-0 w-1/2 bg-sky-700/50" }), _jsx("div", { className: "absolute inset-y-0 right-0 w-1/2 bg-emerald-700/50" })] }));

package/components/shot-bar-view-model.d.ts

@@ -27,6 +27,33 @@ export declare function resolveGraphicUrl(url: string, base: string | undefined)
  * rather than fire a `change-url` the media container can't fetch.
  */
 export declare function graphicResolvable(graphicUrl: string | undefined, base: string | undefined): boolean;
+/** The overlay box a positional preset draws in the ShotCard thumbnail, as
+ *  percentages (0..100) of the 16:9 card. Corner-anchored presets use
+ *  right/bottom; rect presets use left/top. */
+export interface ThumbBox {
+    left?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    width: number;
+    height: number;
+}
+/**
+ * The overlay box for a shot's thumbnail schematic, or `null` for presets whose
+ * thumbnail is a fixed schematic with no config-driven geometry (side-by-side,
+ * quarters, overlay, lower-third, fullscreen).
+ *
+ * A shot's `config` rect is absolute px in the compose OUTPUT space, so the box
+ * MUST be divided by that same `reference` resolution — NOT a fixed 1080p canvas.
+ * A 720p compose (config scaled to 1280x720) drew the L-bar window at 16.7%/50%
+ * against a hardcoded 1920x1080, landing it off the top-left of where the
+ * graphic frames it. Absent config fields fall back to the shipped demo geometry
+ * as fixed percentages, so a bare deployment is unchanged at any resolution.
+ */
+export declare function shotThumbnailBox(preset: string, config: Record<string, unknown> | undefined, reference: {
+    width: number;
+    height: number;
+}): ThumbBox | null;
 export interface PrepareTakeOptions {
     /**
      * Engine-reachable base to resolve a relative graphic path against — the

package/components/shot-bar-view-model.js

@@ -69,6 +69,46 @@ export function graphicResolvable(graphicUrl, base) {
         return true;
     return resolveGraphicUrl(graphicUrl, base) !== null;
 }
+/**
+ * The overlay box for a shot's thumbnail schematic, or `null` for presets whose
+ * thumbnail is a fixed schematic with no config-driven geometry (side-by-side,
+ * quarters, overlay, lower-third, fullscreen).
+ *
+ * A shot's `config` rect is absolute px in the compose OUTPUT space, so the box
+ * MUST be divided by that same `reference` resolution — NOT a fixed 1080p canvas.
+ * A 720p compose (config scaled to 1280x720) drew the L-bar window at 16.7%/50%
+ * against a hardcoded 1920x1080, landing it off the top-left of where the
+ * graphic frames it. Absent config fields fall back to the shipped demo geometry
+ * as fixed percentages, so a bare deployment is unchanged at any resolution.
+ */
+export function shotThumbnailBox(preset, config, reference) {
+    const c = config ?? {};
+    const num = (k) => (typeof c[k] === "number" ? c[k] : undefined);
+    const pct = (v, of) => Math.max(0, Math.min(100, (v / of) * 100));
+    if (preset === "lbar") {
+        const vx = num("videoX");
+        const vy = num("videoY");
+        const vw = num("videoWidth");
+        const vh = num("videoHeight");
+        return {
+            left: vx != null ? pct(vx, reference.width) : 25,
+            top: vy != null ? pct(vy, reference.height) : 0,
+            width: vw != null ? pct(vw, reference.width) : 75,
+            height: vh != null ? pct(vh, reference.height) : 75,
+        };
+    }
+    if (preset === "pip") {
+        const w = num("width");
+        const h = num("height");
+        return {
+            right: 8,
+            bottom: 10,
+            width: w != null ? pct(w, reference.width) : 20,
+            height: h != null ? pct(h, reference.height) : 25,
+        };
+    }
+    return null;
+}
 /**
  * Assemble the exact `TakeCommand[]` for a shot: pick the graphic URL (edited
  * over manifest), resolve it against the engine-reachable base, and hand

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norskvideo/ctl-sdk",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "type": "module",
   "exports": {
     ".": {

package/product-template-parsing.js

@@ -49,6 +49,10 @@ export function parseProductTemplatesFile(raw, path) {
             rec.sha256 = entry.sha256;
         if (isRecord(entry.launchDefaults))
             rec.launchDefaults = entry.launchDefaults;
+        if (isRecord(entry.parameterDefaults) &&
+            Object.values(entry.parameterDefaults).every((v) => typeof v === "string")) {
+            rec.parameterDefaults = entry.parameterDefaults;
+        }
         if (Array.isArray(entry.suggestedSecurityGroups) &&
             entry.suggestedSecurityGroups.every((l) => typeof l === "string")) {
             rec.suggestedSecurityGroups = entry.suggestedSecurityGroups;

package/product-template-record.d.ts

@@ -49,6 +49,14 @@ export interface ProductTemplateRecord {
      *  authoritatively by the worker at launch. Rides launches as
      *  template_launch_defaults_json. */
     launchDefaults?: Record<string, unknown>;
+    /** Template-author parameter tier (env-var authoring): name → default
+     *  value. A name the product declared overrides the manifest default;
+     *  an undeclared name ADDS a template-defined variable. Fused into every
+     *  launch's parameter map beneath the operator's instance values —
+     *  instance wins, template default wins over manifest default. Names
+     *  must be env-var shaped and never `NORSK_`-prefixed (that namespace is
+     *  infra-injected: NORSK_RUNTIME_ROLE, NORSK_MATCHED_CAPABILITIES, …). */
+    parameterDefaults?: Record<string, string>;
     /** Template-author security-group suggestions, by discovery-tag LABEL
      *  (portable across deployments; ids are not). The launch UI pre-ticks
      *  discovered groups whose label matches — a suggestion the operator