@norskvideo/ctl-sdk 0.1.12 → 0.1.14

package/components/ComposeLayerPreview.d.ts

@@ -0,0 +1,37 @@
+import type { ReactElement } from "react";
+/** One compose layer, matching a videoCompose preset generator's layer shape. */
+export interface ComposeLayer {
+    sourceName: string;
+    zIndex: number;
+    opacity: number;
+    destRect?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+export interface ComposeLayerPreviewProps {
+    /** Layers to composite (any order — sorted by `zIndex` here). Typically the
+     *  product passes `PRESETS[preset](...).finalConfig.layers`. */
+    layers: ComposeLayer[];
+    /** The reference (canvas) resolution the layer `destRect`s are expressed in. */
+    reference: {
+        width: number;
+        height: number;
+    };
+    /** Latest still per source (sourceName → url), e.g. compose `sourceJpegUrls`. */
+    sourceJpegUrls?: Record<string, string>;
+    /** Raw HTML per browser source (sourceName → page). A layer whose `sourceName`
+     *  has an entry renders the page in a transparent iframe keyed over the layers
+     *  beneath, instead of that source's still — so a graphic preview shows the
+     *  shot's real target page. Pages must be self-contained (inline CSS/JS). */
+    overlayHtmlBySource?: Record<string, string>;
+    /** Optional override for the backdrop shown where no layer covers. */
+    background?: string;
+}
+/**
+ * Composite a set of compose layers into a preview still. Pure presentational —
+ * no data fetching, no compose-preset knowledge.
+ */
+export declare function ComposeLayerPreview({ layers, reference, sourceJpegUrls, overlayHtmlBySource, background, }: ComposeLayerPreviewProps): ReactElement;

package/components/ComposeLayerPreview.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const MISSING_STILL = "#374151";
+/**
+ * Composite a set of compose layers into a preview still. Pure presentational —
+ * no data fetching, no compose-preset knowledge.
+ */
+export function ComposeLayerPreview({ layers, reference, sourceJpegUrls, overlayHtmlBySource, background = "#111827", }) {
+    const { width: refW, height: refH } = reference;
+    return (_jsx("div", { style: { position: "absolute", inset: 0, background, overflow: "hidden" }, children: [...layers]
+            .sort((a, b) => a.zIndex - b.zIndex)
+            .map((layer, idx) => {
+            if (!layer.destRect)
+                return null;
+            const boxStyle = {
+                position: "absolute",
+                left: `${(layer.destRect.x / refW) * 100}%`,
+                top: `${(layer.destRect.y / refH) * 100}%`,
+                width: `${(layer.destRect.width / refW) * 100}%`,
+                height: `${(layer.destRect.height / refH) * 100}%`,
+                opacity: layer.opacity,
+                zIndex: layer.zIndex,
+                overflow: "hidden",
+            };
+            const html = overlayHtmlBySource?.[layer.sourceName];
+            const jpeg = sourceJpegUrls?.[layer.sourceName];
+            return (
+            // biome-ignore lint/suspicious/noArrayIndexKey: layers can share a sourceName; the zIndex-sorted index disambiguates them in this stable list
+            _jsx("div", { style: boxStyle, children: html ? (_jsx("iframe", { title: "Overlay graphic preview", srcDoc: html, sandbox: "allow-scripts", style: {
+                        display: "block",
+                        width: "100%",
+                        height: "100%",
+                        border: 0,
+                        background: "transparent",
+                        // `color-scheme` inherits into the iframe; a dark-mode host
+                        // would make the UA paint a dark canvas and hide the layers
+                        // beneath. Force light so the transparent page keys over them
+                        // (alpha), matching the engine composite.
+                        colorScheme: "light",
+                        pointerEvents: "none",
+                    } })) : jpeg ? (_jsx("img", { src: jpeg, alt: "", style: { display: "block", width: "100%", height: "100%", objectFit: "contain" } })) : (_jsx("div", { style: { width: "100%", height: "100%", background: MISSING_STILL } })) }, `${layer.sourceName}-${idx}`));
+        }) }));
+}

package/components/ShotBar.d.ts

@@ -24,9 +24,23 @@ export interface ShotBarProps {
     onTake: (commands: TakeCommand[], shot: ResolvedShot) => void;
     /** Optional preview bus — omit to hide the Preview control. */
     onPreview?: (commands: TakeCommand[], shot: ResolvedShot) => void;
+    /**
+     * True while a preview node is up (between Preview and Take/Cancel). Product-
+     * owned: the ShotBar just reflects it — swapping the Preview control for
+     * Cancel and letting the preview monitor show the live feed. Take commits it.
+     */
+    previewing?: boolean;
+    /** Back out of a preview without taking it (tears the preview node down). */
+    onCancelPreview?: () => void;
     /** Drop-in program monitor (e.g. a WHEP player). */
     renderProgramMonitor?: () => ReactNode;
-    /** Drop-in preview monitor. */
-    renderPreviewMonitor?: () => ReactNode;
+    /**
+     * Drop-in preview monitor. Receives the shot currently selected in the bar
+     * (or null) so the product can render *that shot's* what-if — the JPEG preset
+     * preview before Preview is pressed, swapping to the live preview-node feed
+     * once previewing. Selection lives inside the ShotBar, so this is the only way
+     * the product learns which shot to preview.
+     */
+    renderPreviewMonitor?: (selected: ResolvedShot | null) => ReactNode;
 }
-export declare function ShotBar({ shots, pgmShotId, pvwShotId, graphicBaseUrl, transition, editableGraphics, onTake, onPreview, renderProgramMonitor, renderPreviewMonitor, }: ShotBarProps): import("react").JSX.Element;
+export declare function ShotBar({ shots, pgmShotId, pvwShotId, graphicBaseUrl, transition, editableGraphics, onTake, onPreview, previewing, onCancelPreview, renderProgramMonitor, renderPreviewMonitor, }: ShotBarProps): import("react").JSX.Element;

package/components/ShotBar.js

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from "react";
 import { graphicResolvable, hideReasonLabel, prepareTake } 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, renderProgramMonitor, renderPreviewMonitor, }) {
+export function ShotBar({ shots, pgmShotId, pvwShotId, graphicBaseUrl, transition, 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 ${showPreview ? "grid-cols-2" : "grid-cols-1"}`, children: [showPreview ? (_jsx(Monitor, { label: "Preview", tone: "pvw", shot: findLabel(shots, pvwShotId), render: renderPreviewMonitor })) : null, _jsx(Monitor, { label: "On Air", 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: [_jsx("div", { className: "text-sm font-medium", children: selected.label }), _jsxs("div", { className: "flex gap-2", children: [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 ${showPreview ? "grid-cols-2" : "grid-cols-1"}`, children: [showPreview ? (_jsx(Monitor, { label: "Preview", tone: "pvw", shot: findLabel(shots, pvwShotId), render: renderPreviewMonitor ? () => renderPreviewMonitor(selected ?? null) : undefined })) : null, _jsx(Monitor, { label: "On Air", 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." }))] }));
 }
 function findLabel(shots, id) {
     if (!id)

package/components/index.d.ts

@@ -1,3 +1,4 @@
+export { type ComposeLayer, ComposeLayerPreview, type ComposeLayerPreviewProps } from "./ComposeLayerPreview.js";
 export { ProductIframe, type ProductIframeHandle, type SubmitResult } from "./ProductIframe.js";
 export { ProductTemplateBuildForm, type ProductTemplateBuildOutcome, type ProductTemplateBuildRequest, } from "./ProductTemplateBuildForm.js";
 export { ShotBar, type ShotBarProps } from "./ShotBar.js";

package/components/index.js

@@ -1,3 +1,4 @@
+export { ComposeLayerPreview } from "./ComposeLayerPreview.js";
 export { ProductIframe } from "./ProductIframe.js";
 export { ProductTemplateBuildForm, } from "./ProductTemplateBuildForm.js";
 export { ShotBar } from "./ShotBar.js";

package/package.json

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