@ksp-gonogo/kerbcast-react 1.10.2 → 1.11.0-rc.4

package/src/hooks/useReportDisplaySize.ts

@@ -4,10 +4,12 @@ import { useKerbcastDisplaySizes } from "../context";
 /*
  * Debounce + bucket for self-measured display-size reporting. The first
  * measurement after mount reports promptly (so a feed never sits at a stale
- * resolution until it is resized); later churn is debounced. Sizes are ceiled
- * to a BUCKET_PX multiple: that meets-the-minimum-need (never under-serve),
- * yields an even value (H.264-friendly), and gives a material-change threshold
- * so a feed re-reports only when a resize crosses a bucket boundary.
+ * resolution until it is resized); later churn is debounced. The width is
+ * ceiled to a BUCKET_PX multiple: that meets-the-minimum-need (never
+ * under-serve) and gives a material-change threshold so a feed re-reports
+ * only when a resize crosses a bucket boundary. The height follows from the
+ * box's own aspect, rounded to even for H.264, so the frame fills the box
+ * instead of letterboxing inside it.
  */
 const DEBOUNCE_MS = 200;
 const BUCKET_PX = 16;
@@ -17,6 +19,14 @@ function bucket(px: number): number {
   return b < BUCKET_PX ? BUCKET_PX : b;
 }
 
+/** Report size for a `width` x `height` box: bucketed width, height at the box's aspect. */
+export function displayReportSize(width: number, height: number): { width: number; height: number } {
+  const w = bucket(width);
+  if (!(width > 0) || !(height > 0)) return { width: w, height: bucket(height) };
+  const h = Math.max(2, Math.round((w * height) / width / 2) * 2);
+  return { width: w, height: h };
+}
+
 export interface ReportDisplaySizeOptions {
   /**
    * Report while mounted. Default true. Set false for a fixed-resolution feed
@@ -70,9 +80,10 @@ export function useReportDisplaySize(
     let firstReported = false;
 
     const report = (width: number, height: number) => {
-      const side = square ? Math.min(width, height) : 0;
-      const bw = bucket(square ? side : width);
-      const bh = bucket(square ? side : height);
+      const side = bucket(Math.min(width, height));
+      const { width: bw, height: bh } = square
+        ? { width: side, height: side }
+        : displayReportSize(width, height);
       if (bw === lastW && bh === lastH) return;
       lastW = bw;
       lastH = bh;

package/src/hooks/useTargetBracketsPreference.ts

@@ -0,0 +1,38 @@
+import { useCallback, useMemo, useState } from "react";
+
+const STORAGE_PREFIX = "kerbcast:target-brackets:";
+
+function readPreference(key: string): boolean {
+  try {
+    return globalThis.localStorage?.getItem(STORAGE_PREFIX + key) !== "0";
+  } catch {
+    return true;
+  }
+}
+
+function writePreference(key: string, on: boolean): void {
+  try {
+    if (on) globalThis.localStorage?.removeItem(STORAGE_PREFIX + key);
+    else globalThis.localStorage?.setItem(STORAGE_PREFIX + key, "0");
+  } catch {
+    /* Storage blocked or full: the toggle still works for this session. */
+  }
+}
+
+/**
+ * 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.
+ */
+export function useTargetBracketsPreference(key: string | null): [boolean, () => void] {
+  const [overrides, setOverrides] = useState<Record<string, boolean>>({});
+  const stored = useMemo(() => (key === null ? true : readPreference(key)), [key]);
+  const on = key !== null && key in overrides ? overrides[key]! : stored;
+  const toggle = useCallback(() => {
+    if (key === null) return;
+    const next = !on;
+    writePreference(key, next);
+    setOverrides((o) => ({ ...o, [key]: next }));
+  }, [key, on]);
+  return [on, toggle];
+}

package/src/index.test.ts

@@ -3,8 +3,9 @@ import { describe, it, expect } from "vitest";
 // Smoke test: the package module resolves and its shape is what consumers
 // expect. Real component tests land with the CameraFeed extraction.
 describe("@ksp-gonogo/kerbcast-react", () => {
+  /* A cold import transforms the whole package, which can exceed the default timeout on a busy machine. */
   it("module resolves", async () => {
     const mod = await import("./index");
     expect(mod).toBeDefined();
-  });
+  }, 30_000);
 });

package/src/index.ts

@@ -25,6 +25,7 @@ export type {
 export { useKerbcastCameras } from "./hooks/useKerbcastCameras";
 export { useKerbcastStream } from "./hooks/useKerbcastStream";
 export { useKerbcastClock } from "./hooks/useKerbcastClock";
+export { useDisplayedFrameUt } from "./hooks/useDisplayedFrameUt";
 export { useKerbcastInFlight } from "./hooks/useKerbcastInFlight";
 export { useReportDisplaySize } from "./hooks/useReportDisplaySize";
 export { useRecordings } from "./hooks/useRecordings";
@@ -53,6 +54,20 @@ export type {
   FeedAction,
 } from "./CameraFeed";
 
+// Target brackets geometry and the overlay API for drawing on top of them
+export { bracketGeometry, containedContentRect, COMMAND_BRACKET_COLOURS } from "./CommandBrackets";
+export type {
+  BracketGeometry,
+  BracketPoint,
+  CommandBracketContext,
+  CommandBracketCorner,
+  CommandBracketCornerOverride,
+  CommandBracketCornerOverrides,
+  CommandBracketCornerStyle,
+  CommandBracketOverlay,
+  ContentRect,
+} from "./CommandBrackets";
+
 // FeedActionBar: the shared action row (tracking, fullscreen, PiP, quality,
 // close, REC) both CameraFeed and KerbalFaceFeed render, with the issue-#6
 // overflow (⋮) engine.