@norskvideo/ctl-sdk 0.1.8 → 0.1.10

package/components/ShotBar.d.ts

@@ -0,0 +1,32 @@
+import type { DerivedShot, ResolvedShot, TakeCommand, Transition } from "@norskvideo/ctl-foundation/browser";
+import { type ReactNode } from "react";
+export interface ShotBarProps {
+    /** Shots already derived from the manifest + live room by the consumer. */
+    shots: DerivedShot[];
+    /** The shot currently on air, if known — highlights its card. */
+    pgmShotId?: string | null;
+    /** The shot currently in preview, if the product runs a preview bus. */
+    pvwShotId?: string | null;
+    /**
+     * 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). */
+    editableGraphics?: boolean;
+    /** Send the assembled commands to air. The consumer owns the WebSocket. */
+    onTake: (commands: TakeCommand[], shot: ResolvedShot) => void;
+    /** Optional preview bus — omit to hide the Preview control. */
+    onPreview?: (commands: TakeCommand[], shot: ResolvedShot) => void;
+    /** Drop-in program monitor (e.g. a WHEP player). */
+    renderProgramMonitor?: () => ReactNode;
+    /** Drop-in preview monitor. */
+    renderPreviewMonitor?: () => ReactNode;
+}
+export declare function ShotBar({ shots, pgmShotId, pvwShotId, graphicBaseUrl, transition, editableGraphics, onTake, onPreview, renderProgramMonitor, renderPreviewMonitor, }: ShotBarProps): import("react").JSX.Element;

package/components/ShotBar.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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, }) {
+    const { Button, Input } = useUIPrimitives();
+    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, { 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)
+        return null;
+    return shots.find((s) => s.id === id)?.label ?? null;
+}
+function Monitor({ label, tone, shot, render, }) {
+    const ring = tone === "pgm" ? "border-red-600/70" : "border-emerald-600/70";
+    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, }) {
+    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] }));
+}
+// 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))}%`;
+    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) } }));
+    }
+    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 === "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" })] }));
+    }
+    else if (preset === "quarters") {
+        return (_jsxs("div", { className: "relative grid aspect-video w-full grid-cols-2 grid-rows-2 gap-px overflow-hidden rounded bg-zinc-700", children: [_jsx("div", { className: "bg-sky-700/50" }), _jsx("div", { className: "bg-emerald-700/50" }), _jsx("div", { className: "bg-violet-700/50" }), _jsx("div", { className: "bg-amber-700/50" })] }));
+    }
+    else if (preset === "overlay" || preset === "lower-third") {
+        overlay = _jsx("div", { className: "absolute inset-x-[6%] bottom-[8%] h-[22%] rounded-sm bg-amber-400/80" });
+    }
+    return (_jsxs("div", { className: "relative aspect-video w-full overflow-hidden rounded bg-zinc-950", children: [prog, overlay] }));
+}

package/components/index.d.ts

@@ -1,3 +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 { 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,3 +1,5 @@
 export { ProductIframe } from "./ProductIframe.js";
 export { ProductTemplateBuildForm, } from "./ProductTemplateBuildForm.js";
+export { ShotBar } from "./ShotBar.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

@@ -0,0 +1,44 @@
+import { type HideReason, type ResolvedShot, type TakeCommand, type Transition } from "@norskvideo/ctl-foundation/browser";
+/** 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`, 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, 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 {
+    /**
+     * 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;
+    configOverride?: Record<string, unknown>;
+}
+/**
+ * Assemble the exact `TakeCommand[]` for a shot: pick the graphic URL (edited
+ * 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

@@ -0,0 +1,87 @@
+// Pure view-model for the Shot Bar — the testable logic behind `ShotBar.tsx`,
+// kept React-free so it can be unit-tested without a DOM (the SDK ships no
+// render harness). The component stays a thin presentational shell over these.
+import { buildTake, } from "@norskvideo/ctl-foundation/browser";
+/** Operator-facing text for why a shot can't be taken right now. */
+export function hideReasonLabel(reason) {
+    switch (reason) {
+        case "no-compose":
+            return "No compositor in this channel";
+        case "no-programme":
+            return "Waiting for programme";
+        case "no-overlay-layer":
+            return "No graphics overlay layer";
+        case "no-commentator-on-camera":
+            return "No commentator on camera";
+        case "commentator-count-mismatch":
+            return "Doesn't fit the commentators on camera";
+        case "no-contributor":
+            return "No contributor connected";
+        case "graphic-shot-missing-url":
+            return "No graphic page configured";
+        default:
+            // Unknown reason from an untyped boundary — show something honest rather
+            // than crash the whole bar.
+            return "Unavailable";
+    }
+}
+/**
+ * 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, base) {
+    if (/^https?:\/\//i.test(url))
+        return url;
+    if (!base)
+        return null;
+    try {
+        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 {
+        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 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.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.8",
+  "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",