@norskvideo/ctl-sdk 0.1.13 → 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/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.13",
+  "version": "0.1.14",
   "type": "module",
   "exports": {
     ".": {