@ksp-gonogo/kerbcast-react 1.11.0 → 1.12.0-rc.1

package/src/hooks/useRecordings.sharedState.test.tsx

@@ -31,13 +31,16 @@ function liveStream(): MediaStream {
 /** Fake RecordingClient with a settable clock; enough for the controller. */
 class FakeRecordingClient implements RecordingClient {
   captureUt: number | null = 100;
-  camera(_flightId: number): { readonly mediaStream: MediaStream | null } {
-    return { mediaStream: liveStream() };
+  camera(_flightId: number): {
+    readonly mediaStream: MediaStream | null;
+    on(): () => void;
+  } {
+    return { mediaStream: liveStream(), on: () => () => {} };
   }
   get clock(): { readonly captureUt: number | null } {
     return { captureUt: this.captureUt };
   }
-  on(_event: "settings-change", _handler: (data: unknown) => void): () => void {
+  on(): () => void {
     return () => {};
   }
 }

package/src/hooks/useRecordings.test.tsx

@@ -33,13 +33,16 @@ function liveStream(): MediaStream {
 /** Fake RecordingClient with a settable clock; enough for the controller. */
 class FakeRecordingClient implements RecordingClient {
   captureUt: number | null = 100;
-  camera(_flightId: number): { readonly mediaStream: MediaStream | null } {
-    return { mediaStream: liveStream() };
+  camera(_flightId: number): {
+    readonly mediaStream: MediaStream | null;
+    on(): () => void;
+  } {
+    return { mediaStream: liveStream(), on: () => () => {} };
   }
   get clock(): { readonly captureUt: number | null } {
     return { captureUt: this.captureUt };
   }
-  on(_event: "settings-change", _handler: (data: unknown) => void): () => void {
+  on(): () => void {
     return () => {};
   }
 }

package/src/hooks/useTargetBracketsPreference.ts

@@ -2,9 +2,18 @@ import { useCallback, useMemo, useState } from "react";
 
 const STORAGE_PREFIX = "kerbcast:target-brackets:";
 
-function readPreference(key: string): boolean {
+/* A preference saved under `legacyKey` moves to `key` the first time it is read. */
+function readPreference(key: string, legacyKey: string | null): boolean {
   try {
-    return globalThis.localStorage?.getItem(STORAGE_PREFIX + key) !== "0";
+    const storage = globalThis.localStorage;
+    if (!storage) return true;
+    const value = storage.getItem(STORAGE_PREFIX + key);
+    if (value !== null || legacyKey === null || legacyKey === key) return value !== "0";
+    const legacy = storage.getItem(STORAGE_PREFIX + legacyKey);
+    if (legacy === null) return true;
+    storage.setItem(STORAGE_PREFIX + key, legacy);
+    storage.removeItem(STORAGE_PREFIX + legacyKey);
+    return legacy !== "0";
   } catch {
     return true;
   }
@@ -22,11 +31,12 @@ function writePreference(key: string, on: boolean): void {
 /**
  * Whether target brackets are shown for one command camera, remembered per
  * camera in this browser. Defaults on. `key` is null for a feed with no
- * command camera, which reads as on and ignores toggles.
+ * command camera, which reads as on and ignores toggles. A preference saved
+ * under `legacyKey` (the key an older version used) is moved to `key`.
  */
-export function useTargetBracketsPreference(key: string | null): [boolean, () => void] {
+export function useTargetBracketsPreference(key: string | null, legacyKey: string | null = null): [boolean, () => void] {
   const [overrides, setOverrides] = useState<Record<string, boolean>>({});
-  const stored = useMemo(() => (key === null ? true : readPreference(key)), [key]);
+  const stored = useMemo(() => (key === null ? true : readPreference(key, legacyKey)), [key, legacyKey]);
   const on = key !== null && key in overrides ? overrides[key]! : stored;
   const toggle = useCallback(() => {
     if (key === null) return;

package/src/index.ts

@@ -27,6 +27,7 @@ export { useKerbcastStream } from "./hooks/useKerbcastStream";
 export { useKerbcastClock } from "./hooks/useKerbcastClock";
 export { useDisplayedFrameUt } from "./hooks/useDisplayedFrameUt";
 export { useKerbcastInFlight } from "./hooks/useKerbcastInFlight";
+export { useKerbcastWaitingForSlot } from "./hooks/useKerbcastWaitingForSlot";
 export { useReportDisplaySize } from "./hooks/useReportDisplaySize";
 export { useRecordings } from "./hooks/useRecordings";
 export type { RecordingsStore, ActiveRecordingInfo } from "./hooks/useRecordings";
@@ -68,6 +69,27 @@ export type {
   ContentRect,
 } from "./CommandBrackets";
 
+// Anchored markers: CameraFeed's `anchors` and `anchorOverlay`, and the
+// pieces for drawing a frame's anchors over a video of your own
+export {
+  AnchorMarkers,
+  ANCHOR_MARKER_COLOURS,
+  anchorMarkerGeometry,
+  useDisplayedFrame,
+} from "./AnchorMarkers";
+export type {
+  AnchorContext,
+  AnchorCorner,
+  AnchorCornerOverride,
+  AnchorCornerOverrides,
+  AnchorCornerStyle,
+  AnchorMarkerGeometry,
+  AnchorMarkerShape,
+  AnchorMarkersProps,
+  AnchorOverlay,
+  PlacedAnchor,
+} from "./AnchorMarkers";
+
 // FeedActionBar: the shared action row (tracking, fullscreen, PiP, quality,
 // close, REC) both CameraFeed and KerbalFaceFeed render, with the issue-#6
 // overflow (⋮) engine.
@@ -79,5 +101,5 @@ export { KerbalFaceFeed } from "./KerbalFaceFeed";
 export type { KerbalFaceFeedProps, KerbalFeedState } from "./KerbalFaceFeed";
 
 // RecordingsTray: a presentational drawer over the recordings store
-export { RecordingsTray } from "./RecordingsTray";
+export { RecordingsTray, recordingEndNote } from "./RecordingsTray";
 export type { RecordingsTrayProps } from "./RecordingsTray";

package/src/sharedAnchors.ts

@@ -0,0 +1,67 @@
+import type { Anchor, KerbcastClient } from "@ksp-gonogo/kerbcast";
+
+/**
+ * A client holds one anchor set per camera, so feeds showing the same
+ * camera each claim their anchors here and the camera gets them all: the
+ * first claim of an id wins, and the set stops at the client's cap.
+ */
+const claims = new WeakMap<KerbcastClient, Map<number, Map<symbol, readonly Anchor[]>>>();
+
+/** Add `anchors` to `flightId`'s set until the returned release is called. */
+export function claimAnchors(
+  client: KerbcastClient,
+  flightId: number,
+  anchors: readonly Anchor[],
+): () => void {
+  let byFlight = claims.get(client);
+  if (!byFlight) {
+    byFlight = new Map();
+    claims.set(client, byFlight);
+  }
+  let feeds = byFlight.get(flightId);
+  if (!feeds) {
+    feeds = new Map();
+    byFlight.set(flightId, feeds);
+  }
+  const token = Symbol("anchors");
+  feeds.set(token, anchors);
+  publish(client, flightId, feeds);
+  return () => {
+    if (!feeds.delete(token)) return;
+    if (feeds.size === 0) byFlight.delete(flightId);
+    publish(client, flightId, feeds);
+  };
+}
+
+function publish(client: KerbcastClient, flightId: number, feeds: Map<symbol, readonly Anchor[]>): void {
+  const ids = new Map<string, string>();
+  const merged: Anchor[] = [];
+  let dropped = 0;
+  for (const list of feeds.values()) {
+    for (const a of list) {
+      const seen = ids.get(a.id);
+      if (seen !== undefined) {
+        if (seen !== JSON.stringify(a)) {
+          console.warn(`[kerbcast] two feeds on camera ${flightId} set different anchors with id ${a.id}; the first is kept`);
+        }
+        continue;
+      }
+      if (merged.length >= client.maxAnchorsPerCamera) {
+        dropped++;
+        continue;
+      }
+      ids.set(a.id, JSON.stringify(a));
+      merged.push(a);
+    }
+  }
+  if (dropped > 0) {
+    console.warn(`[kerbcast] ${dropped} anchors over the ${client.maxAnchorsPerCamera} per camera left out`);
+  }
+  if (merged.length === 0) {
+    void client.setAnchors(flightId, null).catch(() => {});
+    return;
+  }
+  client.setAnchors(flightId, merged).catch((err: unknown) => {
+    console.warn("[kerbcast] anchors refused", err);
+  });
+}

package/src/videoBox.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+
+export interface VideoBox {
+  boxW: number;
+  boxH: number;
+  mediaW: number;
+  mediaH: number;
+}
+
+/** Tracks the rendered box and intrinsic size of a video element. */
+export function useVideoBox(video: HTMLVideoElement | null): VideoBox {
+  const [box, setBox] = useState<VideoBox>({ boxW: 0, boxH: 0, mediaW: 0, mediaH: 0 });
+  useEffect(() => {
+    if (!video) return;
+    const measure = () => {
+      const next = {
+        boxW: video.clientWidth,
+        boxH: video.clientHeight,
+        mediaW: video.videoWidth,
+        mediaH: video.videoHeight,
+      };
+      setBox((prev) =>
+        prev.boxW === next.boxW &&
+        prev.boxH === next.boxH &&
+        prev.mediaW === next.mediaW &&
+        prev.mediaH === next.mediaH
+          ? prev
+          : next,
+      );
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(video);
+    video.addEventListener("loadedmetadata", measure);
+    video.addEventListener("resize", measure);
+    return () => {
+      observer.disconnect();
+      video.removeEventListener("loadedmetadata", measure);
+      video.removeEventListener("resize", measure);
+    };
+  }, [video]);
+  return box;
+}
+
+/** The element's CSS `object-fit`, as the two fits a feed uses. */
+export function videoFit(video: HTMLVideoElement | null): "contain" | "cover" {
+  if (!video || typeof getComputedStyle !== "function") return "contain";
+  return getComputedStyle(video).objectFit === "cover" ? "cover" : "contain";
+}