@ksp-gonogo/kerbcast-react 1.4.0 → 1.5.0

package/README.md

@@ -1,26 +1,147 @@
 # @ksp-gonogo/kerbcast-react
 
-React components and hooks for [kerbcast](https://github.com/ksp-gonogo/kerbcast) camera feeds.
+React components and hooks for [kerbcast](https://github.com/ksp-gonogo/kerbcast)
+camera feeds. Drop a `<CameraFeed>` into your app and it handles WebRTC
+streaming, camera selection, pan/zoom controls, quality throttling,
+fullscreen, and the signal-loss and out-of-flight states for you.
 
-This package provides a shared `CameraFeed` component (and related hooks) consumed by
-both gonogo's mission-control dashboard and the kerbcast sidecar's embedded web page.
+This is the React layer on top of
+[`@ksp-gonogo/kerbcast`](https://www.npmjs.com/package/@ksp-gonogo/kerbcast),
+the core client. Use that package directly if you are not on React or
+want the raw client.
 
 ## Install
 
-Published to public npm. No registry route or auth needed:
+```sh
+pnpm add @ksp-gonogo/kerbcast-react @ksp-gonogo/kerbcast
+```
+
+Peer dependencies: `react` (18 or 19), `react-dom`, and
+`styled-components` (6). The core SDK is a normal dependency and comes
+along automatically.
+
+## Quick start
+
+Wrap your tree in a `KerbcastProvider` holding a connected client, then
+render feeds. A `flightId` of `null` auto-selects the first live camera.
+
+```tsx
+import { KerbcastClient } from "@ksp-gonogo/kerbcast";
+import { KerbcastProvider, CameraFeed } from "@ksp-gonogo/kerbcast-react";
+
+const client = new KerbcastClient({ host: "192.168.1.74", port: 8088 });
+await client.connect();
 
+function Dashboard() {
+  return (
+    <KerbcastProvider client={client}>
+      <CameraFeed flightId={null} enableFullscreen enableQualityControl />
+    </KerbcastProvider>
+  );
+}
 ```
-pnpm add @ksp-gonogo/kerbcast-react
+
+## `CameraFeed`
+
+One camera's video with its overlays and controls. It subscribes to the
+sidecar while mounted and releases on unmount, so mounting a feed is all
+you need to start a stream. It never remounts the `<video>` element as
+quality or source changes, so playback stays uninterrupted.
+
+Commonly used props (`CameraFeedProps` has the full set with doc
+comments):
+
+- `flightId: number | null`. The camera to show. `null` latches the
+  first live camera and re-picks if it dies.
+- `onSelectCamera` / `onDisplayedCameraChange`. The user picked a
+  camera, or the resolved camera changed (including auto-latch).
+- `enableFullscreen`, `enablePictureInPicture`, `enableQualityControl`.
+  Opt-in built-in controls in the top-right action bar. Each hides
+  itself where the browser lacks support.
+- `actions` / `trailingActions`. Your own `FeedAction` buttons in the
+  action bar (`trailingActions` sits in the corner, the natural home for
+  a close button).
+- `showDebugInfo`. Resolution and encoder readout.
+- `showStatic`. How a stalled or sourceless feed looks. Defaults to
+  auto, which honours `prefers-reduced-motion`.
+- `inFlight` / `showStandbyIcon`. Override the in-flight signal for one
+  feed, and whether it draws its own standby icon (set `false` when a
+  container renders a single shared out-of-flight overlay).
+- `useStream`. Override how the stream is sourced. See below.
+
+An imperative `CameraFeedHandle` (via `ref`) exposes `stepCamera`,
+`setPanAxis`, `setZoomRate`, `nudgePan`, and `nudgeZoom` for wiring feeds
+to a gamepad or keyboard.
+
+## Hooks
+
+- `useKerbcastCameras(): CameraState[]`. The live camera registry,
+  re-rendering as cameras appear, change, or are destroyed.
+- `useKerbcastStream(flightId): MediaStream | null`. The video stream
+  for one camera, acquiring and releasing its subscription slot. This is
+  what `CameraFeed` uses internally.
+- `useKerbcastInFlight(): boolean | undefined`. Whether KSP is in a
+  flight scene. `undefined` until the first signal arrives, so you can
+  avoid flashing an out-of-flight state on connect.
+- `useKerbcastClock(): { captureUt, epoch, warpRate }`. The sidecar's
+  mission-time capture clock, for aligning playout to sim time.
+- `useKerbcastClient()` and `useKerbcastSubscriptions()`. The client
+  and subscription manager from context, for building your own feed UI.
+
+## Standby icon
+
+`StandbyIcon` is the shared rocket-on-the-pad glyph the feed shows out
+of flight. Export it for a dashboard-level standby overlay so your own
+message and the per-feed indicator use one consistent mark:
+
+```tsx
+import { StandbyIcon, useKerbcastInFlight } from "@ksp-gonogo/kerbcast-react";
+
+function StandbyOverlay() {
+  const inFlight = useKerbcastInFlight();
+  // Only show once we know we are out of flight; stays hidden while
+  // the signal is still undefined so it never flashes on connect.
+  if (inFlight !== false) return null;
+  return (
+    <div className="scrim">
+      <StandbyIcon size={44} />
+      <p>Camera feeds activate in a flight scene.</p>
+    </div>
+  );
+}
 ```
 
-Peer dependencies required: `react` (18 or 19), `react-dom`, `styled-components` (6).
+## Custom stream sourcing
+
+`useStream` lets you route a feed's video through your own pipeline
+(delayed playout for comms-delay parity, an alternate transport, a test
+double) without the feed knowing. It is called as a hook, so it must be
+a stable reference passed consistently across renders.
+
+A replacement takes over the camera's subscription slot: the built-in
+`useKerbcastStream` does not run when `useStream` is supplied, so your
+hook must either compose `useKerbcastStream` or acquire the slot itself,
+or the sidecar is never subscribed and the feed stays black.
+
+```tsx
+import { useKerbcastStream, type CameraStreamHook } from "@ksp-gonogo/kerbcast-react";
+
+// Module scope: a stable reference. Composes the built-in hook so the
+// subscription slot is still acquired exactly once.
+const useDelayedStream: CameraStreamHook = (flightId) => {
+  const live = useKerbcastStream(flightId);
+  return useDelayedPlayout(live); // your own wrapper
+};
+
+<CameraFeed flightId={null} useStream={useDelayedStream} />;
+```
 
-## Purpose
+## License
 
-Extracts camera-feed UI from gonogo into a reusable layer so both gonogo and the
-sidecar page consume the same component without duplicating protocol or rendering code.
+[CC BY-NC-SA 4.0](https://github.com/ksp-gonogo/kerbcast/blob/main/LICENSE).
 
 ## Versioning
 
-This package tracks `@ksp-gonogo/kerbcast` version for version. Use matching versions of both.
-`./scripts/bump-version.sh` bumps them atomically.
+Tracks `@ksp-gonogo/kerbcast` exactly; use matching versions of both.
+`./scripts/bump-version.sh` bumps them atomically. See
+[CHANGELOG.md](https://github.com/ksp-gonogo/kerbcast/blob/main/client-sdk/react/CHANGELOG.md).

package/dist/CameraFeed.d.ts

@@ -62,6 +62,19 @@ export interface CameraFeedProps {
      * (reduced motion defaults to off, normal motion defaults to on).
      */
     showStatic?: boolean;
+    /**
+     * Override the client's in-flight signal for this feed only. When known
+     * false, the feed shows the dimmed standby icon instead of SIGNAL LOST.
+     * Defaults to the client's `useKerbcastInFlight()` value.
+     */
+    inFlight?: boolean;
+    /**
+     * Show the per-feed standby icon when out of flight. Default true. Set
+     * false when a container renders its own single out-of-flight overlay
+     * (e.g. the kerbcast web dashboard) so the icon isn't drawn twice; the
+     * feed then just goes dark.
+     */
+    showStandbyIcon?: boolean;
     /**
      * "auto" (default): ResizeObserver drives `setRenderSize` at a 16:9 crop,
      * debounced 500 ms. "none": no render-size feedback.

package/dist/CameraFeed.js

@@ -6,7 +6,9 @@ import styled, { css } from "styled-components";
 import { buildCameraLabeler } from "./cameraLabels";
 import { KerbcastProvider, useKerbcastClient } from "./context";
 import { useKerbcastCameras } from "./hooks/useKerbcastCameras";
+import { useKerbcastInFlight } from "./hooks/useKerbcastInFlight";
 import { useKerbcastStream } from "./hooks/useKerbcastStream";
+import { StandbyIcon } from "./StandbyIcon";
 import { isCameraDestroyed } from "./lifecycle";
 // ---------------------------------------------------------------------------
 // Tuning constants
@@ -147,9 +149,12 @@ function exitFullscreen() {
 // ---------------------------------------------------------------------------
 // Inner component (reads from context)
 // ---------------------------------------------------------------------------
-const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requestedFlightId, onSelectCamera, onDisplayedCameraChange, showDebugInfo = false, showStatic, renderSize = "auto", emptyMessage = "No camera feeds - start a vessel with Hullcam parts installed", enableFullscreen = false, enablePictureInPicture = false, enableQualityControl = false, actions, trailingActions, useStream, }, ref) {
+const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requestedFlightId, onSelectCamera, 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, actions, trailingActions, useStream, }, ref) {
     const client = useKerbcastClient();
     const cameras = useKerbcastCameras();
+    const inFlightFromClient = useKerbcastInFlight();
+    const inFlight = inFlightProp ?? inFlightFromClient;
+    const outOfFlight = inFlight === false;
     /*
      * Reduced-motion auto mode: when `showStatic` prop is undefined, read and
      * track `prefers-reduced-motion: reduce`. Reduced motion defaults to off
@@ -527,7 +532,7 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
                     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), isDestroyed && (_jsx(SignalLostOverlay, { role: "status", "aria-label": "Signal lost", children: _jsx(SignalLostText, { "$animated": effectiveShowStatic, children: "SIGNAL LOST" }) })), !effectiveShowStatic && isStale && !isDestroyed && (_jsxs(_Fragment, { children: [_jsx(StaleScrim, { "aria-hidden": "true" }), _jsxs(StaleBadge, { role: "status", "aria-label": "Feed stale", children: [_jsx(StaleIcon, {}), "Stale"] })] })), showZoom && (_jsxs(ZoomControlsWrap, { children: [_jsx(ZoomButton, { type: "button", "aria-label": "Zoom in", "$pos": "top", onPointerDown: () => controllerRef.current?.setZoomRate(1), onPointerUp: () => controllerRef.current?.setZoomRate(0), onPointerLeave: () => controllerRef.current?.setZoomRate(0), onPointerCancel: () => controllerRef.current?.setZoomRate(0), onClick: (e) => {
+                    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), 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"] })] })), showZoom && (_jsxs(ZoomControlsWrap, { children: [_jsx(ZoomButton, { type: "button", "aria-label": "Zoom in", "$pos": "top", 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, onChange: (e) => {
@@ -1035,6 +1040,20 @@ const SignalLostOverlay = styled.div `
   justify-content: center;
   background: rgba(0, 0, 0, 0.25);
 `;
+/* Out-of-flight standby: a dark dimmed cover with the shared hard-hat icon
+   only. Supersedes SIGNAL LOST for the whole-scene case; the client keeps
+   the feed blank behind it so no static bleeds through. */
+const StandbyOverlay = styled.div `
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.55);
+`;
+const StandbyIconWrap = styled.div `
+  color: rgba(255, 255, 255, 0.55);
+`;
 const SignalLostText = styled.span `
   color: #ff4444;
   font-size: 1.1rem;

package/dist/StandbyIcon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Shared standby glyph: a rocket on the pad ("waiting for a flight"). Used by
+ * the CameraFeed out-of-flight overlay and the web dashboard standby so the
+ * two read as one system. Inherits `currentColor`.
+ */
+export declare function StandbyIcon({ size }: {
+    size?: number;
+}): import("react").JSX.Element;

package/dist/StandbyIcon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Shared standby glyph: a rocket on the pad ("waiting for a flight"). Used by
+ * the CameraFeed out-of-flight overlay and the web dashboard standby so the
+ * two read as one system. Inherits `currentColor`.
+ */
+export function StandbyIcon({ size = 32 }) {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M12 2.5c1.7 1.9 2.6 4.5 2.6 7.3V16H9.4V9.8C9.4 7 10.3 4.4 12 2.5Z" }), _jsx("circle", { cx: "12", cy: "8.8", r: "1.3" }), _jsx("path", { d: "M9.4 13 7.2 16.8 9.4 15.8Z" }), _jsx("path", { d: "M14.6 13 16.8 16.8 14.6 15.8Z" }), _jsx("path", { d: "M10 16 9 20.3" }), _jsx("path", { d: "M14 16 15 20.3" }), _jsx("path", { d: "M4.5 20.5h15" })] }));
+}

package/dist/hooks/useKerbcastInFlight.d.ts

@@ -0,0 +1,2 @@
+/** Whether KSP is in a flight scene. `undefined` until the first signal. */
+export declare function useKerbcastInFlight(): boolean | undefined;

package/dist/hooks/useKerbcastInFlight.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+import { useKerbcastClient } from "../context";
+/** Whether KSP is in a flight scene. `undefined` until the first signal. */
+export function useKerbcastInFlight() {
+    const client = useKerbcastClient();
+    const [inFlight, setInFlight] = useState(() => client.inFlight);
+    useEffect(() => {
+        setInFlight(client.inFlight);
+        return client.on("scene-change", () => setInFlight(client.inFlight));
+    }, [client]);
+    return inFlight;
+}

package/dist/index.d.ts

@@ -10,6 +10,8 @@ export type { KerbcastProviderProps, KerbcastSubscriptions } from "./context";
 export { useKerbcastCameras } from "./hooks/useKerbcastCameras";
 export { useKerbcastStream } from "./hooks/useKerbcastStream";
 export { useKerbcastClock } from "./hooks/useKerbcastClock";
+export { useKerbcastInFlight } from "./hooks/useKerbcastInFlight";
+export { StandbyIcon } from "./StandbyIcon";
 export { buildCameraLabeler } from "./cameraLabels";
 export type { LabelableCamera } from "./cameraLabels";
 export { getCameraLifecycle, isCameraDestroyed } from "./lifecycle";

package/dist/index.js

@@ -11,6 +11,9 @@ export { KerbcastProvider, createClientSubscriptions, useKerbcastClient, useKerb
 export { useKerbcastCameras } from "./hooks/useKerbcastCameras";
 export { useKerbcastStream } from "./hooks/useKerbcastStream";
 export { useKerbcastClock } from "./hooks/useKerbcastClock";
+export { useKerbcastInFlight } from "./hooks/useKerbcastInFlight";
+// Shared standby glyph (used by CameraFeed + downstream dashboards)
+export { StandbyIcon } from "./StandbyIcon";
 // Camera label utilities
 export { buildCameraLabeler } from "./cameraLabels";
 // Lifecycle utilities

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ksp-gonogo/kerbcast-react",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "React components and hooks for kerbcast camera feeds.",
   "license": "CC-BY-NC-SA-4.0",
   "author": "Jon Pepler",
@@ -35,11 +35,17 @@
     "README.md",
     "CHANGELOG.md"
   ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm run build"
+  },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@ksp-gonogo/kerbcast": "^1.4.0"
+    "@ksp-gonogo/kerbcast": "workspace:^"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -58,10 +64,5 @@
     "styled-components": "^6.0.0",
     "typescript": "^5.4.0",
     "vitest": "^4.1.4"
-  },
-  "scripts": {
-    "build": "tsc",
-    "test": "vitest run",
-    "typecheck": "tsc --noEmit"
   }
-}
+}

package/src/CameraFeed.test.tsx

@@ -155,6 +155,7 @@ function renderFeed(
     renderSize?: "auto" | "none";
     enableQualityControl?: boolean;
     showStatic?: boolean;
+    showStandbyIcon?: boolean;
     ref?: React.Ref<CameraFeedHandle>;
   },
 ) {
@@ -556,6 +557,48 @@ describe("CameraFeed - SIGNAL LOST overlay", () => {
     expect(overlay.textContent).toMatch(/SIGNAL LOST/i);
   });
 
+  it("shows the standby icon (not SIGNAL LOST) when out of flight", async () => {
+    const { client, sidecar } = await buildConnectedSource();
+
+    renderFeed(client, { flightId: 42 });
+
+    await act(async () => {
+      sidecar.fireSceneState(false);
+      sidecar.destroyCamera(42);
+    });
+
+    expect(screen.queryByRole("status", { name: /signal lost/i })).toBeNull();
+    expect(screen.getByRole("status", { name: /standby/i })).toBeTruthy();
+  });
+
+  it("hides the per-feed standby icon when showStandbyIcon is false", async () => {
+    const { client, sidecar } = await buildConnectedSource();
+
+    renderFeed(client, { flightId: 42, showStandbyIcon: false });
+
+    await act(async () => {
+      sidecar.fireSceneState(false);
+      sidecar.destroyCamera(42);
+    });
+
+    expect(screen.queryByRole("status", { name: /standby/i })).toBeNull();
+    expect(screen.queryByRole("status", { name: /signal lost/i })).toBeNull();
+  });
+
+  it("keeps SIGNAL LOST for a single destroyed camera while in flight", async () => {
+    const { client, sidecar } = await buildConnectedSource();
+
+    renderFeed(client, { flightId: 42 });
+
+    await act(async () => {
+      sidecar.fireSceneState(true);
+      sidecar.destroyCamera(42);
+    });
+
+    expect(screen.getByRole("status", { name: /signal lost/i })).toBeTruthy();
+    expect(screen.queryByRole("status", { name: /standby/i })).toBeNull();
+  });
+
   it("auto-latch releases a destroyed camera once a live camera exists (vessel switch)", async () => {
     const { client, sidecar } = await buildConnectedSource([
       makeCamera({ flightId: 42, cameraName: "Old Vessel Cam" }),

package/src/CameraFeed.tsx

@@ -15,7 +15,9 @@ import styled, { css } from "styled-components";
 import { buildCameraLabeler } from "./cameraLabels";
 import { KerbcastProvider, useKerbcastClient } from "./context";
 import { useKerbcastCameras } from "./hooks/useKerbcastCameras";
+import { useKerbcastInFlight } from "./hooks/useKerbcastInFlight";
 import { useKerbcastStream } from "./hooks/useKerbcastStream";
+import { StandbyIcon } from "./StandbyIcon";
 import { isCameraDestroyed } from "./lifecycle";
 
 // ---------------------------------------------------------------------------
@@ -275,6 +277,19 @@ export interface CameraFeedProps {
    * (reduced motion defaults to off, normal motion defaults to on).
    */
   showStatic?: boolean;
+  /**
+   * Override the client's in-flight signal for this feed only. When known
+   * false, the feed shows the dimmed standby icon instead of SIGNAL LOST.
+   * Defaults to the client's `useKerbcastInFlight()` value.
+   */
+  inFlight?: boolean;
+  /**
+   * Show the per-feed standby icon when out of flight. Default true. Set
+   * false when a container renders its own single out-of-flight overlay
+   * (e.g. the kerbcast web dashboard) so the icon isn't drawn twice; the
+   * feed then just goes dark.
+   */
+  showStandbyIcon?: boolean;
   /**
    * "auto" (default): ResizeObserver drives `setRenderSize` at a 16:9 crop,
    * debounced 500 ms. "none": no render-size feedback.
@@ -345,6 +360,8 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
       onDisplayedCameraChange,
       showDebugInfo = false,
       showStatic,
+      inFlight: inFlightProp,
+      showStandbyIcon = true,
       renderSize = "auto",
       emptyMessage = "No camera feeds - start a vessel with Hullcam parts installed",
       enableFullscreen = false,
@@ -358,6 +375,9 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
   ) {
     const client = useKerbcastClient();
     const cameras = useKerbcastCameras();
+    const inFlightFromClient = useKerbcastInFlight();
+    const inFlight = inFlightProp ?? inFlightFromClient;
+    const outOfFlight = inFlight === false;
 
     /*
      * Reduced-motion auto mode: when `showStatic` prop is undefined, read and
@@ -974,12 +994,24 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
                 </QualityMenu>,
                 document.body,
               )}
-            {isDestroyed && (
-              <SignalLostOverlay role="status" aria-label="Signal lost">
-                <SignalLostText $animated={effectiveShowStatic}>SIGNAL LOST</SignalLostText>
-              </SignalLostOverlay>
+            {outOfFlight ? (
+              showStandbyIcon && (
+                <StandbyOverlay role="status" aria-label="Standby, no active flight">
+                  <StandbyIconWrap>
+                    <StandbyIcon size={40} />
+                  </StandbyIconWrap>
+                </StandbyOverlay>
+              )
+            ) : (
+              isDestroyed && (
+                <SignalLostOverlay role="status" aria-label="Signal lost">
+                  <SignalLostText $animated={effectiveShowStatic}>
+                    SIGNAL LOST
+                  </SignalLostText>
+                </SignalLostOverlay>
+              )
             )}
-            {!effectiveShowStatic && isStale && !isDestroyed && (
+            {!outOfFlight && !effectiveShowStatic && isStale && !isDestroyed && (
               <>
                 <StaleScrim aria-hidden="true" />
                 <StaleBadge role="status" aria-label="Feed stale">
@@ -1678,6 +1710,22 @@ const SignalLostOverlay = styled.div`
   background: rgba(0, 0, 0, 0.25);
 `;
 
+/* Out-of-flight standby: a dark dimmed cover with the shared hard-hat icon
+   only. Supersedes SIGNAL LOST for the whole-scene case; the client keeps
+   the feed blank behind it so no static bleeds through. */
+const StandbyOverlay = styled.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.55);
+`;
+
+const StandbyIconWrap = styled.div`
+  color: rgba(255, 255, 255, 0.55);
+`;
+
 const SignalLostText = styled.span<{ $animated: boolean }>`
   color: #ff4444;
   font-size: 1.1rem;

package/src/StandbyIcon.tsx

@@ -0,0 +1,33 @@
+/**
+ * Shared standby glyph: a rocket on the pad ("waiting for a flight"). Used by
+ * the CameraFeed out-of-flight overlay and the web dashboard standby so the
+ * two read as one system. Inherits `currentColor`.
+ */
+export function StandbyIcon({ size = 32 }: { size?: number }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.6}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {/* body + nose cone */}
+      <path d="M12 2.5c1.7 1.9 2.6 4.5 2.6 7.3V16H9.4V9.8C9.4 7 10.3 4.4 12 2.5Z" />
+      {/* window */}
+      <circle cx="12" cy="8.8" r="1.3" />
+      {/* fins */}
+      <path d="M9.4 13 7.2 16.8 9.4 15.8Z" />
+      <path d="M14.6 13 16.8 16.8 14.6 15.8Z" />
+      {/* launch-clamp legs to the pad */}
+      <path d="M10 16 9 20.3" />
+      <path d="M14 16 15 20.3" />
+      {/* pad ground line */}
+      <path d="M4.5 20.5h15" />
+    </svg>
+  );
+}

package/src/hooks/useKerbcastInFlight.test.tsx

@@ -0,0 +1,71 @@
+/**
+ * useKerbcastInFlight scene-state subscription.
+ *
+ * Renders a probe through the real hook + real KerbcastClient with only the
+ * WebRTC transport faked by the SDK's MockSidecar. Asserts the hook starts
+ * undefined (no signal yet) and re-renders on each `scene-state-changed`.
+ */
+
+import { KerbcastClient } from "@ksp-gonogo/kerbcast";
+import { MockSidecar } from "@ksp-gonogo/kerbcast/testing";
+import { act, cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { KerbcastProvider } from "../context";
+import { useKerbcastInFlight } from "./useKerbcastInFlight";
+
+let last: boolean | undefined;
+
+function Probe(): null {
+  last = useKerbcastInFlight();
+  return null;
+}
+
+async function connected(): Promise<{
+  client: KerbcastClient;
+  sidecar: MockSidecar;
+}> {
+  const sidecar = new MockSidecar();
+  const client = new KerbcastClient(
+    { host: "h", port: 1, negotiate: (o) => sidecar.negotiate(o) },
+    sidecar.createTransport(),
+  );
+  await act(async () => {
+    await client.connect([], { slots: 4 });
+    sidecar.open();
+    sidecar.setConnectionState("connected");
+  });
+  return { client, sidecar };
+}
+
+afterEach(() => {
+  cleanup();
+  last = undefined;
+});
+
+describe("useKerbcastInFlight", () => {
+  it("starts undefined and reflects scene-state-changed", async () => {
+    const { client, sidecar } = await connected();
+
+    render(
+      <KerbcastProvider client={client}>
+        <Probe />
+      </KerbcastProvider>,
+    );
+
+    expect(last).toBeUndefined();
+
+    await act(async () => {
+      sidecar.fireSceneState(false);
+    });
+    expect(last).toBe(false);
+
+    await act(async () => {
+      sidecar.fireSceneState(true);
+    });
+    expect(last).toBe(true);
+
+    await act(async () => {
+      await client.disconnect();
+    });
+  });
+});

package/src/hooks/useKerbcastInFlight.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+import { useKerbcastClient } from "../context";
+
+/** Whether KSP is in a flight scene. `undefined` until the first signal. */
+export function useKerbcastInFlight(): boolean | undefined {
+  const client = useKerbcastClient();
+  const [inFlight, setInFlight] = useState(() => client.inFlight);
+
+  useEffect(() => {
+    setInFlight(client.inFlight);
+    return client.on("scene-change", () => setInFlight(client.inFlight));
+  }, [client]);
+
+  return inFlight;
+}

package/src/index.ts

@@ -19,6 +19,10 @@ export type { KerbcastProviderProps, KerbcastSubscriptions } from "./context";
 export { useKerbcastCameras } from "./hooks/useKerbcastCameras";
 export { useKerbcastStream } from "./hooks/useKerbcastStream";
 export { useKerbcastClock } from "./hooks/useKerbcastClock";
+export { useKerbcastInFlight } from "./hooks/useKerbcastInFlight";
+
+// Shared standby glyph (used by CameraFeed + downstream dashboards)
+export { StandbyIcon } from "./StandbyIcon";
 
 // Camera label utilities
 export { buildCameraLabeler } from "./cameraLabels";

package/LICENSE

@@ -1,369 +0,0 @@
-kerbcast
-Copyright (c) 2026 Jon Pepler
-
-This work is licensed under the Creative Commons
-Attribution-NonCommercial-ShareAlike 4.0 International License.
-Full legal text follows.
-
-
-Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International
-Public License
-
-By exercising the Licensed Rights (defined below), You accept and agree
-to be bound by the terms and conditions of this Creative Commons
-Attribution-NonCommercial-ShareAlike 4.0 International Public License
-("Public License"). To the extent this Public License may be
-interpreted as a contract, You are granted the Licensed Rights in
-consideration of Your acceptance of these terms and conditions, and the
-Licensor grants You such rights in consideration of benefits the
-Licensor receives from making the Licensed Material available under
-these terms and conditions.
-
-
-Section 1 -- Definitions.
-
-  a. Adapted Material means material subject to Copyright and Similar
-     Rights that is derived from or based upon the Licensed Material
-     and in which the Licensed Material is translated, altered,
-     arranged, transformed, or otherwise modified in a manner requiring
-     permission under the Copyright and Similar Rights held by the
-     Licensor. For purposes of this Public License, where the Licensed
-     Material is a musical work, performance, or sound recording,
-     Adapted Material is always produced where the Licensed Material is
-     synched in timed relation with a moving image.
-
-  b. Adapter's License means the license You apply to Your Copyright
-     and Similar Rights in Your contributions to Adapted Material in
-     accordance with the terms and conditions of this Public License.
-
-  c. BY-NC-SA Compatible License means a license listed at
-     creativecommons.org/compatiblelicenses, approved by Creative
-     Commons as essentially the equivalent of this Public License.
-
-  d. Copyright and Similar Rights means copyright and/or similar rights
-     closely related to copyright including, without limitation,
-     performance, broadcast, sound recording, and Sui Generis Database
-     Rights, without regard to how the rights are labeled or
-     categorized. For purposes of this Public License, the rights
-     specified in Section 2(b)(1)-(2) are not Copyright and Similar
-     Rights.
-
-  e. Effective Technological Measures means those measures that, in the
-     absence of proper authority, may not be circumvented under laws
-     fulfilling obligations under Article 11 of the WIPO Copyright
-     Treaty adopted on December 20, 1996, and/or similar international
-     agreements.
-
-  f. Exceptions and Limitations means fair use, fair dealing, and/or
-     any other exception or limitation to Copyright and Similar Rights
-     that applies to Your use of the Licensed Material.
-
-  g. License Elements means the license attributes listed in the name
-     of a Creative Commons Public License. The License Elements of this
-     Public License are Attribution, NonCommercial, and ShareAlike.
-
-  h. Licensed Material means the artistic or literary work, database,
-     or other material to which the Licensor applied this Public
-     License.
-
-  i. Licensed Rights means the rights granted to You subject to the
-     terms and conditions of this Public License, which are limited to
-     all Copyright and Similar Rights that apply to Your use of the
-     Licensed Material and that the Licensor has authority to license.
-
-  j. Licensor means the individual(s) or entity(ies) granting rights
-     under this Public License.
-
-  k. NonCommercial means not primarily intended for or directed towards
-     commercial advantage or monetary compensation. For purposes of
-     this Public License, the exchange of the Licensed Material for
-     other material subject to Copyright and Similar Rights by digital
-     file-sharing or similar means is NonCommercial provided there is
-     no payment of monetary compensation in connection with the
-     exchange.
-
-  l. Share means to provide material to the public by any means or
-     process that requires permission under the Licensed Rights, such
-     as reproduction, public display, public performance, distribution,
-     dissemination, communication, or importation, and to make material
-     available to the public including in ways that members of the
-     public may access the material from a place and at a time
-     individually chosen by them.
-
-  m. Sui Generis Database Rights means rights other than copyright
-     resulting from Directive 96/9/EC of the European Parliament and of
-     the Council of 11 March 1996 on the legal protection of databases,
-     as amended and/or succeeded, as well as other essentially
-     equivalent rights anywhere in the world.
-
-  n. You means the individual or entity exercising the Licensed Rights
-     under this Public License. Your has a corresponding meaning.
-
-
-Section 2 -- Scope.
-
-  a. License grant.
-
-       1. Subject to the terms and conditions of this Public License,
-          the Licensor hereby grants You a worldwide, royalty-free,
-          non-sublicensable, non-exclusive, irrevocable license to
-          exercise the Licensed Rights in the Licensed Material to:
-
-            a. reproduce and Share the Licensed Material, in whole or
-               in part, for NonCommercial purposes only; and
-
-            b. produce, reproduce, and Share Adapted Material for
-               NonCommercial purposes only.
-
-       2. Exceptions and Limitations. For the avoidance of doubt, where
-          Exceptions and Limitations apply to Your use, this Public
-          License does not apply, and You do not need to comply with
-          its terms and conditions.
-
-       3. Term. The term of this Public License is specified in Section
-          6(a).
-
-       4. Media and formats; technical modifications allowed. The
-          Licensor authorizes You to exercise the Licensed Rights in
-          all media and formats whether now known or hereafter created,
-          and to make technical modifications necessary to do so. The
-          Licensor waives and/or agrees not to assert any right or
-          authority to forbid You from making technical modifications
-          necessary to exercise the Licensed Rights, including
-          technical modifications necessary to circumvent Effective
-          Technological Measures. For purposes of this Public License,
-          simply making modifications authorized by this Section 2(a)
-          (4) never produces Adapted Material.
-
-       5. Downstream recipients.
-
-            a. Offer from the Licensor -- Licensed Material. Every
-               recipient of the Licensed Material automatically
-               receives an offer from the Licensor to exercise the
-               Licensed Rights under the terms and conditions of this
-               Public License.
-
-            b. Additional offer from the Licensor -- Adapted Material.
-               Every recipient of Adapted Material from You
-               automatically receives an offer from the Licensor to
-               exercise the Licensed Rights in the Adapted Material
-               under the conditions of the Adapter's License You apply.
-
-            c. No downstream restrictions. You may not offer or impose
-               any additional or different terms or conditions on, or
-               apply any Effective Technological Measures to, the
-               Licensed Material if doing so restricts exercise of the
-               Licensed Rights by any recipient of the Licensed
-               Material.
-
-       6. No endorsement. Nothing in this Public License constitutes or
-          may be construed as permission to assert or imply that You
-          are, or that Your use of the Licensed Material is, connected
-          with, or sponsored, endorsed, or granted official status by,
-          the Licensor or others designated to receive attribution as
-          provided in Section 3(a)(1)(A)(i).
-
-  b. Other rights.
-
-       1. Moral rights, such as the right of integrity, are not
-          licensed under this Public License, nor are publicity,
-          privacy, and/or other similar personality rights; however, to
-          the extent possible, the Licensor waives and/or agrees not to
-          assert any such rights held by the Licensor to the limited
-          extent necessary to allow You to exercise the Licensed
-          Rights, but not otherwise.
-
-       2. Patent and trademark rights are not licensed under this
-          Public License.
-
-       3. To the extent possible, the Licensor waives any right to
-          collect royalties from You for the exercise of the Licensed
-          Rights, whether directly or through a collecting society
-          under any voluntary or waivable statutory or compulsory
-          licensing scheme. In all other cases the Licensor expressly
-          reserves any right to collect such royalties, including when
-          the Licensed Material is used other than for NonCommercial
-          purposes.
-
-
-Section 3 -- License Conditions.
-
-Your exercise of the Licensed Rights is expressly made subject to the
-following conditions.
-
-  a. Attribution.
-
-       1. If You Share the Licensed Material (including in modified
-          form), You must:
-
-            a. retain the following if it is supplied by the Licensor
-               with the Licensed Material:
-
-                 i. identification of the creator(s) of the Licensed
-                    Material and any others designated to receive
-                    attribution, in any reasonable manner requested by
-                    the Licensor (including by pseudonym if
-                    designated);
-
-                ii. a copyright notice;
-
-               iii. a notice that refers to this Public License;
-
-                iv. a notice that refers to the disclaimer of
-                    warranties;
-
-                 v. a URI or hyperlink to the Licensed Material to the
-                    extent reasonably practicable;
-
-            b. indicate if You modified the Licensed Material and
-               retain an indication of any previous modifications; and
-
-            c. indicate the Licensed Material is licensed under this
-               Public License, and include the text of, or the URI or
-               hyperlink to, this Public License.
-
-       2. You may satisfy the conditions in Section 3(a)(1) in any
-          reasonable manner based on the medium, means, and context in
-          which You Share the Licensed Material. For example, it may be
-          reasonable to satisfy the conditions by providing a URI or
-          hyperlink to a resource that includes the required
-          information.
-       3. If requested by the Licensor, You must remove any of the
-          information required by Section 3(a)(1)(A) to the extent
-          reasonably practicable.
-
-  b. ShareAlike.
-
-     In addition to the conditions in Section 3(a), if You Share
-     Adapted Material You produce, the following conditions also apply.
-
-       1. The Adapter's License You apply must be a Creative Commons
-          license with the same License Elements, this version or
-          later, or a BY-NC-SA Compatible License.
-
-       2. You must include the text of, or the URI or hyperlink to, the
-          Adapter's License You apply. You may satisfy this condition
-          in any reasonable manner based on the medium, means, and
-          context in which You Share Adapted Material.
-
-       3. You may not offer or impose any additional or different terms
-          or conditions on, or apply any Effective Technological
-          Measures to, Adapted Material that restrict exercise of the
-          rights granted under the Adapter's License You apply.
-
-
-Section 4 -- Sui Generis Database Rights.
-
-Where the Licensed Rights include Sui Generis Database Rights that
-apply to Your use of the Licensed Material:
-
-  a. for the avoidance of doubt, Section 2(a)(1) grants You the right
-     to extract, reuse, reproduce, and Share all or a substantial
-     portion of the contents of the database for NonCommercial purposes
-     only;
-
-  b. if You include all or a substantial portion of the database
-     contents in a database in which You have Sui Generis Database
-     Rights, then the database in which You have Sui Generis Database
-     Rights (but not its individual contents) is Adapted Material,
-     including for purposes of Section 3(b); and
-
-  c. You must comply with the conditions in Section 3(a) if You Share
-     all or a substantial portion of the contents of the database.
-
-For the avoidance of doubt, this Section 4 supplements and does not
-replace Your obligations under this Public License where the Licensed
-Rights include other Copyright and Similar Rights.
-
-
-Section 5 -- Disclaimer of Warranties and Limitation of Liability.
-
-  a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
-     EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
-     AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
-     ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
-     IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
-     WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
-     PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
-     ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
-     KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
-     ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
-
-  b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
-     TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
-     NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
-     INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
-     COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
-     USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
-     ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
-     DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
-     IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
-
-  c. The disclaimer of warranties and limitation of liability provided
-     above shall be interpreted in a manner that, to the extent
-     possible, most closely approximates an absolute disclaimer and
-     waiver of all liability.
-
-
-Section 6 -- Term and Termination.
-
-  a. This Public License applies for the term of the Copyright and
-     Similar Rights licensed here. However, if You fail to comply with
-     this Public License, then Your rights under this Public License
-     terminate automatically.
-
-  b. Where Your right to use the Licensed Material has terminated under
-     Section 6(a), it reinstates:
-
-       1. automatically as of the date the violation is cured, provided
-          it is cured within 30 days of Your discovery of the
-          violation; or
-
-       2. upon express reinstatement by the Licensor.
-
-     For the avoidance of doubt, this Section 6(b) does not affect any
-     right the Licensor may have to seek remedies for Your violations
-     of this Public License.
-
-  c. For the avoidance of doubt, the Licensor may also offer the
-     Licensed Material under separate terms or conditions or stop
-     distributing the Licensed Material at any time; however, doing so
-     will not terminate this Public License.
-
-  d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
-     License.
-
-
-Section 7 -- Other Terms and Conditions.
-
-  a. The Licensor shall not be bound by any additional or different
-     terms or conditions communicated by You unless expressly agreed.
-
-  b. Any arrangements, understandings, or agreements regarding the
-     Licensed Material not stated herein are separate from and
-     independent of the terms and conditions of this Public License.
-
-
-Section 8 -- Interpretation.
-
-  a. For the avoidance of doubt, this Public License does not, and
-     shall not be interpreted to, reduce, limit, restrict, or impose
-     conditions on any use of the Licensed Material that could lawfully
-     be made without permission under this Public License.
-
-  b. To the extent possible, if any provision of this Public License is
-     deemed unenforceable, it shall be automatically reformed to the
-     minimum extent necessary to make it enforceable. If the provision
-     cannot be reformed, it shall be severed from this Public License
-     without affecting the enforceability of the remaining terms and
-     conditions.
-
-  c. No term or condition of this Public License will be waived and no
-     failure to comply consented to unless expressly agreed to by the
-     Licensor.
-
-  d. Nothing in this Public License constitutes or may be interpreted
-     as a limitation upon, or waiver of, any privileges and immunities
-     that apply to the Licensor or You, including from the legal
-     processes of any jurisdiction or authority.
-

package/dist/hooks/useKerbcamCameras.d.ts

@@ -1,8 +0,0 @@
-import type { CameraState } from "@jonpepler/kerbcam";
-/**
- * Live snapshot of the kerbcam camera registry. Returns the empty list
- * before the data channel handshake completes (and after a disconnect).
- * Subscribes via the underlying `KerbcamClient`'s `cameras-change` event for
- * one synchronous push per server-side snapshot or state-changed message.
- */
-export declare function useKerbcamCameras(): CameraState[];

package/dist/hooks/useKerbcamCameras.js

@@ -1,19 +0,0 @@
-import { useEffect, useState } from "react";
-import { useKerbcamClient } from "../context";
-/**
- * Live snapshot of the kerbcam camera registry. Returns the empty list
- * before the data channel handshake completes (and after a disconnect).
- * Subscribes via the underlying `KerbcamClient`'s `cameras-change` event for
- * one synchronous push per server-side snapshot or state-changed message.
- */
-export function useKerbcamCameras() {
-    const client = useKerbcamClient();
-    const [cameras, setCameras] = useState(() => [
-        ...client.cameras,
-    ]);
-    useEffect(() => {
-        setCameras([...client.cameras]);
-        return client.on("cameras-change", (next) => setCameras([...next]));
-    }, [client]);
-    return cameras;
-}

package/dist/hooks/useKerbcamStream.d.ts

@@ -1,10 +0,0 @@
-/**
- * Live `MediaStream` for one kerbcam camera. Returns `null` while the WebRTC
- * track hasn't arrived yet (during connection setup, or after a disconnect).
- * Components bind the stream to a `<video>`'s `srcObject` directly.
- *
- * While mounted with a non-null `flightId`, acquires a subscription slot via
- * the context `KerbcamSubscriptions`. Releases the slot when the component
- * unmounts or the `flightId` changes.
- */
-export declare function useKerbcamStream(flightId: number | null): MediaStream | null;

package/dist/hooks/useKerbcamStream.js

@@ -1,35 +0,0 @@
-import { useEffect, useState } from "react";
-import { useKerbcamClient, useKerbcamSubscriptions } from "../context";
-/**
- * Live `MediaStream` for one kerbcam camera. Returns `null` while the WebRTC
- * track hasn't arrived yet (during connection setup, or after a disconnect).
- * Components bind the stream to a `<video>`'s `srcObject` directly.
- *
- * While mounted with a non-null `flightId`, acquires a subscription slot via
- * the context `KerbcamSubscriptions`. Releases the slot when the component
- * unmounts or the `flightId` changes.
- */
-export function useKerbcamStream(flightId) {
-    const client = useKerbcamClient();
-    const subscriptions = useKerbcamSubscriptions();
-    const [stream, setStream] = useState(() => {
-        if (flightId === null)
-            return null;
-        return client.camera(flightId).mediaStream;
-    });
-    useEffect(() => {
-        if (flightId === null) {
-            setStream(null);
-            return;
-        }
-        const cam = client.camera(flightId);
-        setStream(cam.mediaStream);
-        const off = cam.on("stream", setStream);
-        subscriptions.acquire(flightId);
-        return () => {
-            off();
-            subscriptions.release(flightId);
-        };
-    }, [client, subscriptions, flightId]);
-    return stream;
-}