@norskvideo/ctl-sdk 0.1.9 → 0.1.10

package/components/ShotBar.d.ts

@@ -7,8 +7,15 @@ export interface ShotBarProps {
     pgmShotId?: string | null;
     /** The shot currently in preview, if the product runs a preview bus. */
     pvwShotId?: string | null;
-    /** Origin for resolving relative graphic paths. Defaults to `location.origin`. */
-    origin?: string;
+    /**
+     * Engine-reachable base for resolving relative graphic pages (`/overlays/…`)
+     * to the absolute URL `change-url` needs — the origin of the overlay
+     * `input.browser`'s configured URL, NOT the operator's `location.origin`
+     * (the media container's chromium fetches the page, not the browser). Omit
+     * only when the deployment has no overlay graphics; a graphic shot whose page
+     * can't be resolved without it is shown but can't be taken.
+     */
+    graphicBaseUrl?: string;
     /** Default transition applied to takes. */
     transition?: Transition;
     /** Show the editable graphic-URL field on graphic-bearing cards (default true). */
@@ -22,4 +29,4 @@ export interface ShotBarProps {
     /** Drop-in preview monitor. */
     renderPreviewMonitor?: () => ReactNode;
 }
-export declare function ShotBar({ shots, pgmShotId, pvwShotId, origin, transition, editableGraphics, onTake, onPreview, renderProgramMonitor, renderPreviewMonitor, }: ShotBarProps): import("react").JSX.Element;
+export declare function ShotBar({ shots, pgmShotId, pvwShotId, graphicBaseUrl, transition, editableGraphics, onTake, onPreview, renderProgramMonitor, renderPreviewMonitor, }: ShotBarProps): import("react").JSX.Element;

package/components/ShotBar.js

@@ -1,20 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { hideReasonLabel, prepareTake } from "./shot-bar-view-model.js";
+import { graphicResolvable, hideReasonLabel, prepareTake } from "./shot-bar-view-model.js";
 import { useUIPrimitives } from "./ui-primitives.js";
-function defaultOrigin() {
-    return typeof location !== "undefined" ? location.origin : "";
-}
 const FAMILY_BADGE = { geometry: "Geometry", graphic: "Graphic" };
-export function ShotBar({ shots, pgmShotId, pvwShotId, origin, transition, editableGraphics = true, onTake, onPreview, renderProgramMonitor, renderPreviewMonitor, }) {
+export function ShotBar({ shots, pgmShotId, pvwShotId, graphicBaseUrl, transition, editableGraphics = true, onTake, onPreview, renderProgramMonitor, renderPreviewMonitor, }) {
     const { Button, Input } = useUIPrimitives();
-    const resolvedOrigin = origin ?? defaultOrigin();
     const firstReady = shots.find((s) => s.status === "ready")?.id ?? null;
     const [selectedId, setSelectedId] = useState(firstReady);
     const [editedUrls, setEditedUrls] = useState({});
     const selected = shots.find((s) => s.id === selectedId && s.status === "ready");
-    const commands = useMemo(() => selected ? prepareTake(selected, { origin: resolvedOrigin, editedUrl: editedUrls[selected.id], transition }) : [], [selected, resolvedOrigin, editedUrls, transition]);
-    return (_jsxs("div", { className: "flex flex-col gap-4 text-zinc-100", children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(Monitor, { label: "Preview", tone: "pvw", shot: findLabel(shots, pvwShotId), render: renderPreviewMonitor }), _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", onClick: () => onPreview(commands, selected), children: "Preview" })) : null, _jsx(Button, { variant: "primary", size: "sm", onClick: () => onTake(commands, selected), children: "Take" })] })] }), 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("pre", { className: "max-h-40 overflow-auto rounded bg-zinc-950 p-2 font-mono text-[11px] leading-relaxed text-zinc-400", children: JSON.stringify(commands, null, 2) })] })) : (_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." }))] }));
+    const commands = useMemo(() => (selected ? prepareTake(selected, { graphicBaseUrl, editedUrl: editedUrls[selected.id], transition }) : []), [selected, graphicBaseUrl, editedUrls, transition]);
+    // A graphic shot whose page is relative and has no engine-reachable base
+    // can't safely change-url — surface it instead of firing an unfetchable page.
+    const takeableGraphic = selected
+        ? graphicResolvable(editedUrls[selected.id] ?? selected.graphicUrl, graphicBaseUrl)
+        : true;
+    return (_jsxs("div", { className: "flex flex-col gap-4 text-zinc-100", children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(Monitor, { label: "Preview", tone: "pvw", shot: findLabel(shots, pvwShotId), render: renderPreviewMonitor }), _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("pre", { className: "max-h-40 overflow-auto rounded bg-zinc-950 p-2 font-mono text-[11px] leading-relaxed text-zinc-400", children: JSON.stringify(commands, null, 2) })] })) : (_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,5 +1,5 @@
 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";
-export { hideReasonLabel, type PrepareTakeOptions, prepareTake, resolveGraphicUrl, } from "./shot-bar-view-model.js";
+export { graphicResolvable, hideReasonLabel, type PrepareTakeOptions, prepareTake, resolveGraphicUrl, } from "./shot-bar-view-model.js";
 export { type ButtonProps, type ButtonSize, type ButtonVariant, type InputProps, type LabelProps, type UIPrimitives, UIPrimitivesProvider, useUIPrimitives, } from "./ui-primitives.js";

package/components/index.js

@@ -1,5 +1,5 @@
 export { ProductIframe } from "./ProductIframe.js";
 export { ProductTemplateBuildForm, } from "./ProductTemplateBuildForm.js";
 export { ShotBar } from "./ShotBar.js";
-export { hideReasonLabel, prepareTake, resolveGraphicUrl, } from "./shot-bar-view-model.js";
+export { graphicResolvable, hideReasonLabel, prepareTake, resolveGraphicUrl, } from "./shot-bar-view-model.js";
 export { UIPrimitivesProvider, useUIPrimitives, } from "./ui-primitives.js";

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

@@ -2,15 +2,33 @@ import { type HideReason, type ResolvedShot, type TakeCommand, type Transition }
 /** Operator-facing text for why a shot can't be taken right now. */
 export declare function hideReasonLabel(reason: HideReason): string;
 /**
- * Resolve a shot's graphic page to an absolute URL for `change-url`. Manifests
- * ship relative paths (`/overlays/lbar.html`) so they're host-independent; the
- * engine's `input.browser` needs an absolute http(s) URL. Absolute inputs pass
+ * Resolve a shot's graphic page to an absolute URL for `change-url`, or `null`
+ * if it can't be resolved safely.
+ *
+ * Manifests ship relative paths (`/overlays/lbar.html`) so they're
+ * host-independent, but `change-url` is fetched by the media container's
+ * chromium (`input.browser`), NOT the operator's browser — so the base MUST be
+ * an engine-reachable origin the product supplies (the overlay layer's own
+ * configured URL origin). Resolving a relative path against the operator origin
+ * (`location.origin`) yields a plausible-but-unreachable URL that 404s in the
+ * container; refuse it (`null`) rather than emit that. Absolute inputs pass
  * through untouched, so an operator-typed full URL is honoured as-is.
  */
-export declare function resolveGraphicUrl(url: string, origin: string): string;
+export declare function resolveGraphicUrl(url: string, base: string | undefined): string | null;
+/**
+ * Whether a shot's graphic page can be taken to air: an absolute page always
+ * can, a relative one only with an engine-reachable base, and a shot naming no
+ * page is trivially fine. The ShotBar uses this to disable Take (and say why)
+ * rather than fire a `change-url` the media container can't fetch.
+ */
+export declare function graphicResolvable(graphicUrl: string | undefined, base: string | undefined): boolean;
 export interface PrepareTakeOptions {
-    /** Origin to resolve a relative graphic path against (usually `location.origin`). */
-    origin: string;
+    /**
+     * Engine-reachable base to resolve a relative graphic path against — the
+     * origin of the overlay `input.browser`'s configured URL, NOT the operator's
+     * `location.origin`. Omit only for deployments with no overlay graphics.
+     */
+    graphicBaseUrl?: string;
     /** Operator-edited graphic URL from the card, if they changed it. */
     editedUrl?: string;
     transition?: Transition;
@@ -18,7 +36,9 @@ export interface PrepareTakeOptions {
 }
 /**
  * Assemble the exact `TakeCommand[]` for a shot: pick the graphic URL (edited
- * over manifest), resolve it to absolute, and hand `buildTake` the right opts.
- * The result is what the consumer sends over its component WebSocket, in order.
+ * over manifest), resolve it against the engine-reachable base, and hand
+ * `buildTake` the right opts. A relative page with no usable base resolves to
+ * `null` and its `change-url` is dropped — better to squeeze the layout with a
+ * stale overlay than to fire a page the media container can't reach.
  */
 export declare function prepareTake(shot: ResolvedShot, opts: PrepareTakeOptions): TakeCommand[];

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

@@ -26,32 +26,60 @@ export function hideReasonLabel(reason) {
     }
 }
 /**
- * Resolve a shot's graphic page to an absolute URL for `change-url`. Manifests
- * ship relative paths (`/overlays/lbar.html`) so they're host-independent; the
- * engine's `input.browser` needs an absolute http(s) URL. Absolute inputs pass
+ * Resolve a shot's graphic page to an absolute URL for `change-url`, or `null`
+ * if it can't be resolved safely.
+ *
+ * Manifests ship relative paths (`/overlays/lbar.html`) so they're
+ * host-independent, but `change-url` is fetched by the media container's
+ * chromium (`input.browser`), NOT the operator's browser — so the base MUST be
+ * an engine-reachable origin the product supplies (the overlay layer's own
+ * configured URL origin). Resolving a relative path against the operator origin
+ * (`location.origin`) yields a plausible-but-unreachable URL that 404s in the
+ * container; refuse it (`null`) rather than emit that. Absolute inputs pass
  * through untouched, so an operator-typed full URL is honoured as-is.
  */
-export function resolveGraphicUrl(url, origin) {
+export function resolveGraphicUrl(url, base) {
     if (/^https?:\/\//i.test(url))
         return url;
+    if (!base)
+        return null;
     try {
-        return new URL(url, origin).toString();
+        const resolved = new URL(url, base);
+        // A relative path against a bare/relative base can still land on a
+        // non-http(s) or otherwise unreachable origin — only absolute web URLs are
+        // safe to hand the engine.
+        return /^https?:$/i.test(resolved.protocol) ? resolved.toString() : null;
     }
     catch {
-        // origin unusable (e.g. empty in a non-browser context) — return the raw
-        // value rather than throwing; the caller/engine will reject a bad URL.
-        return url;
+        return null;
     }
 }
+/**
+ * Whether a shot's graphic page can be taken to air: an absolute page always
+ * can, a relative one only with an engine-reachable base, and a shot naming no
+ * page is trivially fine. The ShotBar uses this to disable Take (and say why)
+ * rather than fire a `change-url` the media container can't fetch.
+ */
+export function graphicResolvable(graphicUrl, base) {
+    if (!graphicUrl)
+        return true;
+    return resolveGraphicUrl(graphicUrl, base) !== null;
+}
 /**
  * Assemble the exact `TakeCommand[]` for a shot: pick the graphic URL (edited
- * over manifest), resolve it to absolute, and hand `buildTake` the right opts.
- * The result is what the consumer sends over its component WebSocket, in order.
+ * over manifest), resolve it against the engine-reachable base, and hand
+ * `buildTake` the right opts. A relative page with no usable base resolves to
+ * `null` and its `change-url` is dropped — better to squeeze the layout with a
+ * stale overlay than to fire a page the media container can't reach.
  */
 export function prepareTake(shot, opts) {
     const rawUrl = opts.editedUrl ?? shot.graphicUrl;
-    const graphicUrl = rawUrl ? resolveGraphicUrl(rawUrl, opts.origin) : undefined;
-    return buildTake(shot, {
+    const graphicUrl = rawUrl ? resolveGraphicUrl(rawUrl, opts.graphicBaseUrl) : null;
+    // An unresolvable page must be dropped, not passed through: buildTake falls
+    // back to `shot.graphicUrl` (the raw, relative, unreachable manifest path)
+    // when no resolved url is supplied, so strip it from the shot as well.
+    const effectiveShot = rawUrl && graphicUrl === null ? { ...shot, graphicUrl: undefined } : shot;
+    return buildTake(effectiveShot, {
         ...(graphicUrl ? { graphicUrl } : {}),
         ...(opts.transition ? { transition: opts.transition } : {}),
         ...(opts.configOverride ? { configOverride: opts.configOverride } : {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norskvideo/ctl-sdk",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "type": "module",
   "exports": {
     ".": {
@@ -37,7 +37,7 @@
   "types": "./index.d.ts",
   "dependencies": {
     "@norskvideo/ctl-foundation": "^0.1.0",
-    "@norskvideo/ctl-product-template-schema": "^0.1.0",
+    "@norskvideo/ctl-product-template-schema": "^0.1.5",
     "express": "5",
     "lucide-react": "^0.483.0",
     "react": "^19.0.0",