@ksp-gonogo/kerbcast-react 1.11.1 → 1.12.0-rc.2

package/dist/CameraFeed.js

@@ -6,17 +6,20 @@ import styled, { css } from "styled-components";
 import { buildCameraLabeler } from "./cameraLabels";
 import { KerbcastProvider, useKerbcastClient } from "./context";
 import { ActionBarRow, FeedActionBar, OverlayIconButton, feedActionToEntry, } from "./FeedActionBar";
-import { CommandBlank, CommandBrackets } from "./CommandBrackets";
+import { CommandBlank, LiveCommandBrackets } from "./CommandBrackets";
+import { LiveAnchorMarkers } from "./AnchorMarkers";
 import { useCommandDisplayUt } from "./hooks/useCommandDisplayUt";
 import { useKerbcastCameras } from "./hooks/useKerbcastCameras";
 import { useKerbcastInFlight } from "./hooks/useKerbcastInFlight";
 import { useKerbcastStream } from "./hooks/useKerbcastStream";
+import { useKerbcastWaitingForSlot } from "./hooks/useKerbcastWaitingForSlot";
 import { useRecordings } from "./hooks/useRecordings";
 import { DEFAULT_FEED_ASPECT, useReportDisplaySize } from "./hooks/useReportDisplaySize";
 import { useTargetBracketsPreference } from "./hooks/useTargetBracketsPreference";
 import { StandbyIcon } from "./StandbyIcon";
 import { isCameraDestroyed } from "./lifecycle";
-import { usePortalMenu } from "./menuPositioning";
+import { claimAnchors } from "./sharedAnchors";
+import { menuPortalRoot, usePortalMenu } from "./menuPositioning";
 import { formatElapsed, nowMs } from "./timing";
 // ---------------------------------------------------------------------------
 // Tuning constants
@@ -41,6 +44,15 @@ function presetDim(operatorDim, scale) {
     const v = Math.trunc(operatorDim * scale) & ~1;
     return v < 2 ? 2 : v;
 }
+function videoTrackId(source) {
+    if (!source || !("getVideoTracks" in source))
+        return undefined;
+    return source.getVideoTracks()[0]?.id;
+}
+function sameVideoTrack(a, b) {
+    const id = videoTrackId(a);
+    return id !== undefined && id === videoTrackId(b);
+}
 function isFullscreenSupported() {
     if (typeof document === "undefined")
         return false;
@@ -62,7 +74,7 @@ function exitFullscreen() {
 // ---------------------------------------------------------------------------
 // Inner component (reads from context)
 // ---------------------------------------------------------------------------
-const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requestedFlightId, onSelectCamera, cameraFilter, onDisplayedCameraChange, showDebugInfo = false, showStatic, inFlight: inFlightProp, showStandbyIcon = true, renderSize = "auto", emptyMessage = "No camera feeds - start a vessel with Hullcam parts installed", enableFullscreen = false, enablePictureInPicture = false, enableQualityControl = false, enableTracking = false, disableManualControls = false, enableRecording = false, recordFullResolution = false, actions, trailingActions, showActions = true, useStream, enableTargetBrackets = true, targetBracketOverlay, displayUt: displayUtProp, }, ref) {
+const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requestedFlightId, onSelectCamera, cameraFilter, onDisplayedCameraChange, showDebugInfo = false, showStatic, inFlight: inFlightProp, showStandbyIcon = true, renderSize = "auto", emptyMessage = "No camera feeds - start a vessel with Hullcam parts installed", enableFullscreen = false, enablePictureInPicture = false, enableQualityControl = false, enableTracking = false, disableManualControls = false, enableRecording = false, recordFullResolution = false, actions, trailingActions, showActions = true, useStream, enableTargetBrackets = true, targetBracketOverlay, waitingForTargetLabel = "Waiting for target", noSlotLabel = "Not streaming: too many feeds are open. Close a feed to watch this one.", displayUt: displayUtProp, displayFrame, anchors, anchorOverlay, }, ref) {
     const client = useKerbcastClient();
     // Always called (rules of hooks); `enableRecording` only gates whether the
     // REC entry/badge render, not whether the store is subscribed.
@@ -96,7 +108,7 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
     }, [showStatic]);
     const effectiveShowStatic = showStatic === undefined ? !reducedMotion : showStatic;
     // -------------------------------------------------------------------------
-    // Selection model (mirrors gonogo's CameraFeed)
+    // Selection model
     //
     // Resolution order:
     //   1. Explicit pick, if still present in the list (destroyed or not).
@@ -158,10 +170,17 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
     }, []);
     // The feed frame; fullscreen targets this and ResizeObserver measures it.
     const wrapRef = useRef(null);
+    /* Clearing to null on a switch to a camera with no stream yet stops the
+       previous camera's last frame lingering. A rebind can hand over a new
+       MediaStream around the same track; reassigning that would reset the
+       element and flash black, so it is skipped. */
     useEffect(() => {
-        if (videoRef.current && stream) {
-            videoRef.current.srcObject = stream;
-        }
+        const video = videoRef.current;
+        if (!video || video.srcObject === stream)
+            return;
+        if (sameVideoTrack(video.srcObject, stream))
+            return;
+        video.srcObject = stream;
     }, [stream]);
     // -------------------------------------------------------------------------
     // Stall presentation. The static is composited in-stream by the SDK's
@@ -183,6 +202,19 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
         setIsStale(cam.stalled);
         return cam.on("stall", setIsStale);
     }, [client, flightId]);
+    const [hasSource, setHasSource] = useState(false);
+    useEffect(() => {
+        if (flightId === null) {
+            setHasSource(false);
+            return;
+        }
+        const cam = client.camera(flightId);
+        setHasSource(cam.hasSource);
+        return cam.on("source", setHasSource);
+    }, [client, flightId]);
+    /* The in-stream static keeps the video element presenting frames, so a
+       frame count cannot tell a picture from static; this attribute can. */
+    const signal = flightId === null ? undefined : !hasSource ? "none" : isStale ? "stalled" : "live";
     // -------------------------------------------------------------------------
     // Fullscreen + Picture-in-Picture (opt-in, feature-detected)
     // -------------------------------------------------------------------------
@@ -221,6 +253,21 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
             v.removeEventListener("leavepictureinpicture", onLeave);
         };
     }, [pipAvailable, flightId]);
+    /* Browsers usually consume Escape to leave fullscreen themselves; this
+       covers hosts and embedded views that hand the key to the page instead. */
+    useEffect(() => {
+        if (!isFullscreen)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape" &&
+                !e.defaultPrevented &&
+                currentFullscreenElement() === wrapRef.current) {
+                exitFullscreen();
+            }
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [isFullscreen]);
     const toggleFullscreen = useCallback(() => {
         const el = wrapRef.current;
         if (!el)
@@ -242,6 +289,7 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
         }
     }, []);
     const isDestroyed = camera ? isCameraDestroyed(camera) : false;
+    const waitingForSlot = useKerbcastWaitingForSlot(flightId);
     /* Gating here rather than at the render sites covers the whole manual
        path at once: the controls unmount, the effects below zero any in-flight
        rate, and the imperative handle's pan/zoom methods no-op. */
@@ -259,11 +307,23 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
     const commandCamera = camera?.kind === CameraKind.Command && !isDestroyed ? camera : null;
     const isCommandFeed = commandCamera !== null;
     const commandTrack = commandCamera?.commandTrack ?? null;
-    const commandDisplayUt = useCommandDisplayUt(commandTrack !== null, displayUtProp, commandTrack?.events, commandCamera?.flightId ?? null, videoEl);
+    const commandDisplayUt = useCommandDisplayUt(commandTrack !== null, displayFrame ? displayFrame.ut : displayUtProp, commandTrack?.events, commandCamera?.flightId ?? null, videoEl, displayFrame?.command);
     const commandState = commandTrack
-        ? effectiveCommandTrack(commandTrack, commandDisplayUt?.ut)
+        ? effectiveCommandTrack(commandTrack, commandDisplayUt?.ut, commandDisplayUt?.command)
         : null;
-    const [bracketsOn, toggleBrackets] = useTargetBracketsPreference(commandCamera ? (commandCamera.commandCentre?.stationId ?? String(commandCamera.flightId)) : null);
+    /* This feed's anchors go to the camera it displays, and leave with it. */
+    const anchorsKey = anchors?.length ? JSON.stringify(anchors) : "";
+    useEffect(() => {
+        if (flightId === null || !anchorsKey)
+            return;
+        return claimAnchors(client, flightId, JSON.parse(anchorsKey));
+    }, [client, flightId, anchorsKey]);
+    const drawsAnchors = !!anchorsKey || !!anchorOverlay?.owners?.length;
+    const [bracketsOn, toggleBrackets] = useTargetBracketsPreference(commandCamera
+        ? (commandCamera.commandCentre?.siteKey || commandCamera.commandCentre?.nodeName || String(commandCamera.flightId))
+        : null, 
+    // 1.11 keyed the preference by stationId; carry a saved choice over.
+    commandCamera?.commandCentre?.stationId ?? null);
     const targetBracketsAvailable = enableTargetBrackets && isCommandFeed;
     // -------------------------------------------------------------------------
     // Camera selection callbacks (Next/Prev, picker)
@@ -489,8 +549,12 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
     // one aims the camera at it. Hidden while a command authority holds the
     // aim lock, since only it can aim then.
     // -------------------------------------------------------------------------
-    const commandTargets = commandCamera?.commandCentre?.targets ?? [];
-    const commandTargetId = commandCamera?.commandCentre?.subjectPersistentId ?? 0;
+    /* The list as it stood at the displayed frame, so a delayed feed never offers what its picture has not reached. */
+    const shownCentre = commandCamera
+        ? client.commandCentreAt(commandCamera.flightId, commandDisplayUt?.ut)
+        : null;
+    const commandTargets = shownCentre?.targets ?? [];
+    const commandTargetId = shownCentre?.subjectPersistentId ?? 0;
     const commandLocked = commandCamera?.commandTrack?.authority != null;
     const commandTargetAvailable = isCommandFeed && !disableManualControls && !commandLocked && commandTargets.length > 0;
     const commandTargetMenuId = useId();
@@ -523,6 +587,8 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
        yet (see ActiveRecordingInfo.arming). Drives the ARMING pill below in
        place of the REC badge. */
     const armingActive = activeRecording?.arming === true;
+    /* Stopped, clip not in the store yet (ActiveRecordingInfo.stopping). */
+    const savingActive = activeRecording?.stopping === true;
     // Ticks once a second while recording so the elapsed timer stays live;
     // the timer itself is derived from activeRecording.startedAt each render.
     const [, tickRecordingTimer] = useReducer((c) => c + 1, 0);
@@ -561,7 +627,7 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
                 createPortal(_jsx(CameraMenu, { ref: cameraMenu.menuRef, id: menuId, role: "menu", "aria-label": "Camera", style: cameraMenu.position, children: cameras.map((c) => (_jsxs(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": c.flightId === flightId, "$selected": c.flightId === flightId, onClick: () => {
                             onSelectCamera?.(c.flightId);
                             cameraMenu.close();
-                        }, children: [cameraLabel(c), " (", c.vesselName, ")", isCameraDestroyed(c) ? " - signal lost" : ""] }, c.flightId))) }), document.body), showDebugInfo &&
+                        }, children: [cameraLabel(c), " (", c.vesselName, ")", isCameraDestroyed(c) ? " - signal lost" : ""] }, c.flightId))) }), menuPortalRoot()), showDebugInfo &&
                 (camera ? (_jsxs(TopMeta, { children: [camera.vesselName, " \u00B7 ", camera.renderWidth, "\u00D7", camera.renderHeight, bitrateLabel, adaptiveLabel] })) : (_jsx(TopMeta, { children: "no cameras on this vessel" })))] }));
     /*
      * Built-in action-bar entries, in the bar's natural (fallback) order:
@@ -655,8 +721,11 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
                 {
                     id: "fullscreen",
                     label: fullscreenLabel,
+                    /* While fullscreen the exit stays inline, never in the ⋮ menu,
+                       so it can be the one control the Stage keeps visible. */
                     stateful: false,
-                    render: () => (_jsx(OverlayIconButton, { type: "button", "aria-label": fullscreenLabel, "aria-pressed": isFullscreen, title: fullscreenLabel, "$active": isFullscreen, onClick: toggleFullscreen, children: isFullscreen ? _jsx(FullscreenExitIcon, {}) : _jsx(FullscreenEnterIcon, {}) })),
+                    inline: isFullscreen,
+                    render: () => (_jsx(OverlayIconButton, { type: "button", "data-kc-fullscreen-exit": isFullscreen || undefined, "aria-label": fullscreenLabel, "aria-pressed": isFullscreen, title: fullscreenLabel, "$active": isFullscreen, onClick: toggleFullscreen, children: isFullscreen ? _jsx(FullscreenExitIcon, {}) : _jsx(FullscreenEnterIcon, {}) })),
                 },
             ]
             : []),
@@ -691,24 +760,24 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
             builtInActions);
     const stepButtons = hasCameras ? (_jsxs(StepButtons, { children: [_jsx(OverlayIconButton, { type: "button", "aria-label": "Previous camera", disabled: !canStep, onClick: () => stepCamera(-1), children: "\u2039" }), _jsx(OverlayIconButton, { type: "button", "aria-label": "Next camera", disabled: !canStep, onClick: () => stepCamera(1), children: "\u203A" })] })) : null;
     const actionBar = hasActionBar ? (_jsx(FeedActionBar, { leading: stepButtons, entries: entries })) : null;
-    return (_jsx(FeedBox, { style: feedShape, children: _jsx(Stage, { ref: wrapRef, "$pinned": chromePinned, children: flightId === null ? (_jsxs(_Fragment, { children: [_jsx(Empty, { children: emptyMessage }), topOverlay, actionBar] })) : (_jsxs(_Fragment, { children: [_jsx(StyledVideo, { ref: attachVideo, autoPlay: true, playsInline: true, muted: true, controls: false, onClick: () => setChromePinned((v) => !v) }), topOverlay, actionBar, qualityAvailable &&
+    return (_jsx(FeedBox, { style: feedShape, children: _jsx(Stage, { ref: wrapRef, "$pinned": chromePinned, "$fullscreen": isFullscreen, "data-fullscreen": isFullscreen || undefined, "data-kc-signal": signal, children: flightId === null ? (_jsxs(_Fragment, { children: [_jsx(Empty, { children: emptyMessage }), topOverlay, actionBar] })) : (_jsxs(_Fragment, { children: [_jsx(StyledVideo, { ref: attachVideo, autoPlay: true, playsInline: true, muted: true, controls: false, onClick: () => setChromePinned((v) => !v) }), topOverlay, actionBar, qualityAvailable &&
                         qualityMenu.open &&
                         qualityMenu.position &&
                         camera &&
-                        createPortal(_jsxs(QualityMenu, { ref: qualityMenu.menuRef, id: qualityMenuId, role: "menu", "aria-label": "Quality", style: qualityMenu.position, children: [_jsx(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": camera.viewerQuality == null, "$selected": camera.viewerQuality == null, onClick: () => selectQuality(null), children: "Auto" }), QUALITY_PRESETS.map(({ preset, label, scale }) => (_jsxs(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": camera.viewerQuality === preset, "$selected": camera.viewerQuality === preset, onClick: () => selectQuality(preset), children: [label, " (", presetDim(camera.operatorWidth, scale), "\u00D7", presetDim(camera.operatorHeight, scale), ")"] }, preset))), _jsxs(QualityMeta, { role: "status", children: ["now ", camera.renderWidth, "\u00D7", camera.renderHeight, qualityThrottled ? " · throttled" : ""] })] }), document.body), trackingAvailable &&
+                        createPortal(_jsxs(QualityMenu, { ref: qualityMenu.menuRef, id: qualityMenuId, role: "menu", "aria-label": "Quality", style: qualityMenu.position, children: [_jsx(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": camera.viewerQuality == null, "$selected": camera.viewerQuality == null, onClick: () => selectQuality(null), children: "Auto" }), QUALITY_PRESETS.map(({ preset, label, scale }) => (_jsxs(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": camera.viewerQuality === preset, "$selected": camera.viewerQuality === preset, onClick: () => selectQuality(preset), children: [label, " (", presetDim(camera.operatorWidth, scale), "\u00D7", presetDim(camera.operatorHeight, scale), ")"] }, preset))), _jsxs(QualityMeta, { role: "status", children: ["now ", camera.renderWidth, "\u00D7", camera.renderHeight, qualityThrottled ? " · throttled" : ""] })] }), menuPortalRoot()), trackingAvailable &&
                         trackingMenu.open &&
                         trackingMenu.position &&
                         camera &&
-                        createPortal(_jsxs(QualityMenu, { ref: trackingMenu.menuRef, id: trackingMenuId, role: "menu", "aria-label": "Auto-track", style: trackingMenu.position, children: [_jsx(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": trackMode === TrackMode.ActiveVessel, "$selected": trackMode === TrackMode.ActiveVessel, onClick: () => selectTrack(TrackMode.ActiveVessel), children: "Track active vessel" }), _jsx(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": trackMode === TrackMode.Target, "$selected": trackMode === TrackMode.Target, onClick: () => selectTrack(TrackMode.Target), children: "Track target" })] }), document.body), commandTargetAvailable &&
+                        createPortal(_jsxs(QualityMenu, { ref: trackingMenu.menuRef, id: trackingMenuId, role: "menu", "aria-label": "Auto-track", style: trackingMenu.position, children: [_jsx(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": trackMode === TrackMode.ActiveVessel, "$selected": trackMode === TrackMode.ActiveVessel, onClick: () => selectTrack(TrackMode.ActiveVessel), children: "Track active vessel" }), _jsx(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": trackMode === TrackMode.Target, "$selected": trackMode === TrackMode.Target, onClick: () => selectTrack(TrackMode.Target), children: "Track target" })] }), menuPortalRoot()), commandTargetAvailable &&
                         commandTargetMenu.open &&
                         commandTargetMenu.position &&
                         createPortal(_jsx(CameraMenu, { ref: commandTargetMenu.menuRef, id: commandTargetMenuId, role: "menu", "aria-label": "Target", style: commandTargetMenu.position, children: commandTargets.map((t) => {
                                 const eligible = t.eligibility === CommandTargetEligibility.Ok;
                                 const current = t.persistentId === commandTargetId;
                                 return (_jsxs(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": current, "$selected": current, disabled: !eligible, title: eligible ? undefined : t.eligibilityText, onClick: () => selectCommandTarget(t.persistentId), children: [t.vesselName, t.rangeM != null ? ` · ${formatCommandRange(t.rangeM)}` : "", eligible ? "" : ` · ${t.eligibilityText}`] }, t.persistentId));
-                            }) }), document.body), commandState &&
+                            }) }), menuPortalRoot()), commandState &&
                         !outOfFlight &&
-                        (_jsxs(_Fragment, { children: [commandState.blank && _jsx(CommandBlank, { reason: commandState.blank }), targetBracketsAvailable && bracketsOn && (_jsx(CommandBrackets, { state: commandState, displayUt: commandDisplayUt?.ut ?? commandTrack.ut, utSource: commandDisplayUt?.source ?? null, video: videoEl, fallbackSize: camera ? { width: camera.renderWidth, height: camera.renderHeight } : null, overlay: targetBracketOverlay }))] })), outOfFlight ? (showStandbyIcon && (_jsx(StandbyOverlay, { role: "status", "aria-label": "Standby, no active flight", children: _jsx(StandbyIconWrap, { children: _jsx(StandbyIcon, { size: 40 }) }) }))) : (isDestroyed && (_jsx(SignalLostOverlay, { role: "status", "aria-label": "Signal lost", children: _jsx(SignalLostText, { "$animated": effectiveShowStatic, children: "SIGNAL LOST" }) }))), !outOfFlight && !effectiveShowStatic && isStale && !isDestroyed && (_jsxs(_Fragment, { children: [_jsx(StaleScrim, { "aria-hidden": "true" }), _jsxs(StaleBadge, { role: "status", "aria-label": "Feed stale", children: [_jsx(StaleIcon, {}), "Stale"] })] })), recordingActive && armingActive && (_jsxs(ArmingBadge, { role: "status", "aria-label": "Arming", children: [_jsx(ArmingDot, { "aria-hidden": "true" }), "ARMING"] })), recordingActive && !armingActive && (_jsxs(RecBadge, { role: "status", "aria-label": "Recording", children: [_jsx(RecDot, { "aria-hidden": "true" }), "REC ", formatElapsed(recordingElapsedMs)] })), showZoom && (_jsxs(ZoomControlsWrap, { "$disabled": manualDisabled, "aria-hidden": manualDisabled, children: [_jsx(ZoomButton, { type: "button", "aria-label": "Zoom in", "$pos": "top", disabled: manualDisabled, onPointerDown: () => controllerRef.current?.setZoomRate(1), onPointerUp: () => controllerRef.current?.setZoomRate(0), onPointerLeave: () => controllerRef.current?.setZoomRate(0), onPointerCancel: () => controllerRef.current?.setZoomRate(0), onClick: (e) => {
+                        (_jsxs(_Fragment, { children: [commandState.blank && _jsx(CommandBlank, { reason: commandState.blank }), commandState.waitingForTarget && !commandState.blank && !isDestroyed && waitingForTargetLabel && (_jsx(WaitingBadge, { role: "status", children: waitingForTargetLabel })), targetBracketsAvailable && bracketsOn && (_jsx(LiveCommandBrackets, { flightId: commandCamera?.flightId ?? null, state: commandState, displayUt: commandDisplayUt?.ut ?? commandTrack.ut, utSource: commandDisplayUt?.source ?? null, video: videoEl, fallbackSize: camera ? { width: camera.renderWidth, height: camera.renderHeight } : null, overlay: targetBracketOverlay }))] })), waitingForSlot && !outOfFlight && !isDestroyed && noSlotLabel && (_jsx(NoSlotNotice, { role: "status", children: noSlotLabel })), drawsAnchors && !outOfFlight && !isDestroyed && !commandState?.blank && (_jsx(LiveAnchorMarkers, { flightId: flightId, video: videoEl, overlay: anchorOverlay })), outOfFlight ? (showStandbyIcon && (_jsx(StandbyOverlay, { role: "status", "aria-label": "Standby, no active flight", children: _jsx(StandbyIconWrap, { children: _jsx(StandbyIcon, { size: 40 }) }) }))) : (isDestroyed && (_jsx(SignalLostOverlay, { role: "status", "aria-label": "Signal lost", children: _jsx(SignalLostText, { "$animated": effectiveShowStatic, children: "SIGNAL LOST" }) }))), !outOfFlight && !effectiveShowStatic && isStale && !isDestroyed && (_jsxs(_Fragment, { children: [_jsx(StaleScrim, { "aria-hidden": "true" }), _jsxs(StaleBadge, { role: "status", "aria-label": "Feed stale", children: [_jsx(StaleIcon, {}), "Stale"] })] })), recordingActive && armingActive && (_jsxs(ArmingBadge, { role: "status", "aria-label": "Arming", children: [_jsx(ArmingDot, { "aria-hidden": "true" }), "ARMING"] })), recordingActive && !armingActive && !savingActive && (_jsxs(RecBadge, { role: "status", "aria-label": "Recording", children: [_jsx(RecDot, { "aria-hidden": "true" }), "REC ", formatElapsed(recordingElapsedMs)] })), recordingActive && savingActive && (_jsx(RecBadge, { role: "status", "aria-label": "Saving recording", children: "SAVING" })), showZoom && (_jsxs(ZoomControlsWrap, { "$disabled": manualDisabled, "aria-hidden": manualDisabled, children: [_jsx(ZoomButton, { type: "button", "aria-label": "Zoom in", "$pos": "top", disabled: manualDisabled, onPointerDown: () => controllerRef.current?.setZoomRate(1), onPointerUp: () => controllerRef.current?.setZoomRate(0), onPointerLeave: () => controllerRef.current?.setZoomRate(0), onPointerCancel: () => controllerRef.current?.setZoomRate(0), onClick: (e) => {
                                     if (e.detail === 0)
                                         controllerRef.current?.nudgeZoom(-1);
                                 }, children: "+" }), _jsx(FovSlider, { type: "range", "aria-label": "Zoom", min: camera.fovMin, max: camera.fovMax, step: 0.5, value: sliderFov, disabled: manualDisabled, onChange: (e) => {
@@ -742,7 +811,7 @@ export const CameraFeed = forwardRef(function CameraFeed({ client, ...rest }, re
     return _jsx(CameraFeedInner, { ref: ref, ...rest });
 });
 // ---------------------------------------------------------------------------
-// Inline UI primitives (replacing @gonogo/ui dependencies)
+// Inline UI primitives
 // ---------------------------------------------------------------------------
 function ChevronDownIcon(props) {
     return (_jsx("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", ...props, children: _jsx("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: 1.5, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -1011,8 +1080,9 @@ const StepButtons = styled.div `
   flex-shrink: 0;
 `;
 const CameraMenu = styled.div `
-  /* Portaled to document.body: fixed position (set inline from the trigger
-     rect) keeps it clear of the tile's overflow clipping. */
+  /* Portaled to document.body (the fullscreen element while fullscreen):
+     fixed position (set inline from the trigger rect) keeps it clear of the
+     tile's overflow clipping. */
   position: fixed;
   z-index: 1000;
   max-width: min(260px, calc(100vw - 16px));
@@ -1068,7 +1138,7 @@ const TopMeta = styled.div `
   color: rgba(255, 255, 255, 0.78);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
 `;
-/* The quality picker: portaled to document.body like CameraMenu, hung from
+/* The quality picker: portaled like CameraMenu, hung from
    its action-bar trigger (fixed position set inline from the trigger rect)
    so tile clipping cannot cut it off and it survives the hover-revealed
    chrome fading while the pointer is over the menu. */
@@ -1285,6 +1355,30 @@ const Stage = styled(Panel) `
         opacity: 1;
       }
     `}
+
+  /* Fullscreen has no hover on touch and may have no pointer at all, so the
+     exit button stays visible in its usual slot while the rest of the bar
+     keeps its hover/focus/tap reveal. */
+  ${(p) => p.$fullscreen &&
+    !p.$pinned &&
+    css `
+      ${ActionBarRow} {
+        opacity: 1;
+        pointer-events: auto;
+      }
+      ${ActionBarRow} > * {
+        transition: opacity 0.15s;
+      }
+      &:not(:hover):not(:focus-within) ${ActionBarRow} > :not([data-kc-fullscreen-exit]) {
+        opacity: 0;
+        pointer-events: none;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        ${ActionBarRow} > * {
+          transition: none;
+        }
+      }
+    `}
 `;
 const Empty = styled.div `
   color: #888;
@@ -1366,6 +1460,52 @@ const StaleScrim = styled.div `
   background: rgba(0, 0, 0, 0.32);
   pointer-events: none;
 `;
+/* Centred in the picture, clear of the chrome along the edges, and wrapping so
+   a small tile still shows the whole sentence. */
+const NoSlotNotice = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  max-width: calc(100% - 32px);
+  padding: 6px 10px;
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  border-radius: 3px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+  pointer-events: none;
+`;
+/* Bottom centre: the zoom controls take the bottom left, pan and the stale
+   badge the bottom right, the title and REC badge the top left and the
+   action bar the top right. */
+const WaitingBadge = styled.div `
+  position: absolute;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  /* Clear of the stale badge on the bottom right, even on a small tile. */
+  max-width: calc(100% - 180px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 2px 6px;
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  border-radius: 3px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+  pointer-events: none;
+`;
 const StaleBadge = styled.div `
   position: absolute;
   bottom: 8px;

package/dist/CommandBrackets.d.ts

@@ -1,4 +1,4 @@
-import { type EffectiveCommandTrack, type FrameUtSource } from "@ksp-gonogo/kerbcast";
+import { type EffectiveCommandTrack, type FrameAnchor, type FrameUtSource } from "@ksp-gonogo/kerbcast";
 import { type ReactNode } from "react";
 /** Default colours; each is overridable through the named CSS custom property. */
 export declare const COMMAND_BRACKET_COLOURS: {
@@ -22,7 +22,10 @@ export interface BracketPoint {
 }
 /** The bracket box, in the pixel space of the bracket SVG (the video element's box). */
 export interface BracketGeometry {
-    /** Box centre, which is the aim point. */
+    /**
+     * Box centre: where the subject is in the displayed frame, or the frame
+     * centre (the aim point) while that is not known.
+     */
     cx: number;
     cy: number;
     /** Half the box side in display px. */
@@ -35,11 +38,12 @@ export interface BracketGeometry {
     bottomRight: BracketPoint;
 }
 /**
- * The bracket box centred on the displayed frame. `bracketHalfPx` is in
- * capture px of a `frameHeightPx`-tall frame, so it scales by the displayed
- * height; a missing half-size draws the minimum box.
+ * The bracket box, centred on the displayed frame or on `centre` (in the
+ * same pixel space as `rect`). `bracketHalfPx` is in capture px of a
+ * `frameHeightPx`-tall frame, so it scales by the displayed height; a
+ * missing half-size draws the minimum box.
  */
-export declare function bracketGeometry(rect: ContentRect, bracketHalfPx: number | null, frameHeightPx: number): BracketGeometry;
+export declare function bracketGeometry(rect: ContentRect, bracketHalfPx: number | null, frameHeightPx: number, centre?: BracketPoint | null): BracketGeometry;
 export type CommandBracketCorner = "topLeft" | "bottomRight";
 export interface CommandBracketCornerStyle {
     colour: string;
@@ -62,6 +66,19 @@ export interface CommandBracketContext {
     displayUt: number;
     utSource: FrameUtSource | "override" | null;
     state: EffectiveCommandTrack;
+    /**
+     * The subject's anchor in the displayed frame: where the game projected
+     * the craft, whether it is in frame and whether something hides it.
+     * `null` without one (an older sidecar or plugin, or before the first
+     * stamped frame), when the box is centred on the frame instead.
+     */
+    subject?: FrameAnchor | null;
+    /**
+     * True while the aim lies off the frame (the view is still turning onto
+     * it): the box then sits on the frame's edge nearest the aim, with a
+     * chevron pointing on toward it.
+     */
+    aimOffscreen?: boolean;
 }
 /**
  * Consumer additions to a command feed's brackets. Each part is optional and
@@ -95,15 +112,47 @@ export interface CommandBracketsProps {
         height: number;
     } | null;
     overlay?: CommandBracketOverlay | null;
+    /**
+     * The subject's anchor in the displayed frame. While it is visible and no
+     * command lock is held the box sits on it and takes its size from it.
+     */
+    subject?: FrameAnchor | null;
+    /** The capture frame size `subject` is in (the stamp's width and height). */
+    subjectFrameSize?: {
+        width: number;
+        height: number;
+    } | null;
+    /**
+     * The aim anchor in the displayed frame. The aimed box sits on it rather
+     * than on the frame centre, so it stays on the aim while the view turns
+     * onto a moved one.
+     */
+    aim?: FrameAnchor | null;
 }
 /**
- * Target brackets for a command camera feed: the aim point sits at frame
- * centre, so the box is always centred on the displayed video. Both corners
- * show the camera axis by default; an overlay can restyle either and draw
- * its own marks. Without a fix, or over a blanked feed, the default corners
- * are left out but the overlay and readout still run.
+ * Target brackets for a command camera feed. With no command lock held and
+ * the subject's anchor visible in the displayed frame, the box sits on the
+ * craft where the game saw it, so it stays on the craft when an aim points
+ * elsewhere; while the aimed box is in frame and holds the craft it is drawn
+ * instead, since it frames the craft's whole extent as the view does. Otherwise (the anchor out of frame or occluded, which then
+ * carries no position, no anchor at all, or a command authority holding the
+ * lock) the box is the 1.11 one: on the aim (the frame centre, or the aim
+ * anchor while the view turns onto a moved aim), sized from the aimed range,
+ * red and dashed when the aim line is occluded. `ctx.subject` always
+ * carries the anchor, so a consumer can draw it as a second mark. An overlay
+ * can restyle either corner and draw its own marks. Without a fix, or over a
+ * blanked feed, the default corners are left out but the overlay and readout
+ * still run.
+ */
+export declare function CommandBrackets({ state, displayUt, utSource, video, fallbackSize, overlay, subject, subjectFrameSize, aim, }: CommandBracketsProps): import("react").JSX.Element;
+/**
+ * CommandBrackets fed with the subject's and the aim's anchors from each frame of
+ * `flightId` that `video` presents. Re-renders at the frame rate, which is
+ * why it is its own component.
  */
-export declare function CommandBrackets({ state, displayUt, utSource, video, fallbackSize, overlay, }: CommandBracketsProps): import("react").JSX.Element;
+export declare function LiveCommandBrackets({ flightId, ...props }: CommandBracketsProps & {
+    flightId: number | null;
+}): import("react").JSX.Element;
 /** Reason a command feed is blanked, centred on black over the feed. */
 export declare function CommandBlank({ reason }: {
     reason: string;