@ksp-gonogo/kerbcast-react 1.10.1 → 1.10.3

package/dist/context.js

@@ -3,6 +3,19 @@ import { createContext, useContext, useMemo, useRef, } from "react";
 /** Build the default refcounted subscriptions implementation for a client. */
 export function createClientSubscriptions(client) {
     const refcounts = new Map();
+    /*
+     * A reconnect clears every slot binding on the client and the sidecar starts
+     * the new peer empty, so re-subscribe each camera still held. Listeners fire
+     * in registration order and the provider builds this before the display-size
+     * registry, so subscriptions go out first. The sidecar treats a repeat
+     * subscribe for a bound camera as a re-announce, and a rejection (for
+     * example a full slot pool) is swallowed like every other subscribe here.
+     */
+    client.on("control-open", () => {
+        for (const flightId of refcounts.keys()) {
+            client.subscribe(flightId).catch(() => { });
+        }
+    });
     return {
         acquire(flightId) {
             const count = (refcounts.get(flightId) ?? 0) + 1;
@@ -53,6 +66,17 @@ export function createClientDisplaySizes(client) {
         lastSent.set(flightId, { w: maxW, h: maxH });
         client.reportDisplaySize(flightId, maxW, maxH).catch(() => { });
     }
+    /*
+     * The sidecar forgets a peer's display sizes when the peer leaves, so after
+     * a reconnect nothing it holds matches lastSent. Re-send the current MAX for
+     * every camera that still has reporters, once the new control channel is
+     * open and can take messages.
+     */
+    client.on("control-open", () => {
+        lastSent.clear();
+        for (const flightId of [...perCamera.keys()])
+            recompute(flightId);
+    });
     return {
         report(flightId, instanceId, width, height) {
             let instances = perCamera.get(flightId);

package/dist/hooks/useReportDisplaySize.d.ts

@@ -15,7 +15,8 @@ export interface ReportDisplaySizeOptions {
  * Self-measure a feed element and drive the client's per-consumer
  * `reportDisplaySize` (via the context display-size registry, which collapses
  * multiple feeds of the same camera to one MAX report). Attach `ref` to the
- * element whose rendered pixel box is the display size. Reporting follows the
+ * element whose rendered pixel box is the display size; an element that
+ * appears or changes after mount is picked up on the host's next render. Reporting follows the
  * mount lifecycle: on unmount / `flightId` change / `enabled` flip it
  * deregisters, and the sidecar's clear-on-departure (unsubscribe) does the
  * server-side clear.

package/dist/hooks/useReportDisplaySize.js

@@ -1,4 +1,4 @@
-import { useEffect, useId } from "react";
+import { useEffect, useId, useLayoutEffect, useState } from "react";
 import { useKerbcastDisplaySizes } from "../context";
 /*
  * Debounce + bucket for self-measured display-size reporting. The first
@@ -18,7 +18,8 @@ function bucket(px) {
  * Self-measure a feed element and drive the client's per-consumer
  * `reportDisplaySize` (via the context display-size registry, which collapses
  * multiple feeds of the same camera to one MAX report). Attach `ref` to the
- * element whose rendered pixel box is the display size. Reporting follows the
+ * element whose rendered pixel box is the display size; an element that
+ * appears or changes after mount is picked up on the host's next render. Reporting follows the
  * mount lifecycle: on unmount / `flightId` change / `enabled` flip it
  * deregisters, and the sidecar's clear-on-departure (unsubscribe) does the
  * server-side clear.
@@ -26,10 +27,20 @@ function bucket(px) {
 export function useReportDisplaySize(flightId, ref, { enabled = true, square = false } = {}) {
     const displaySizes = useKerbcastDisplaySizes();
     const instanceId = useId();
+    /*
+     * Track the element behind the ref as state so an element that mounts or is
+     * swapped after the first render (conditional render, a feed that appears
+     * once a stream arrives) is observed. Checked after every commit of the
+     * host component; the state only changes when the element does.
+     */
+    const [el, setEl] = useState(null);
+    useLayoutEffect(() => {
+        if (ref.current !== el)
+            setEl(ref.current);
+    });
     useEffect(() => {
         if (flightId === null || !enabled)
             return;
-        const el = ref.current;
         if (!el)
             return;
         let timer = null;
@@ -67,5 +78,5 @@ export function useReportDisplaySize(flightId, ref, { enabled = true, square = f
                 clearTimeout(timer);
             displaySizes.clear(flightId, instanceId);
         };
-    }, [displaySizes, flightId, ref, enabled, square, instanceId]);
+    }, [displaySizes, flightId, el, enabled, square, instanceId]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ksp-gonogo/kerbcast-react",
-  "version": "1.10.1",
+  "version": "1.10.3",
   "description": "React components and hooks for kerbcast camera feeds.",
   "license": "MIT",
   "author": "Jon Pepler",
@@ -45,7 +45,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@ksp-gonogo/kerbcast": "^1.10.1"
+    "@ksp-gonogo/kerbcast": "^1.10.3"
   },
   "peerDependencies": {
     "react": "^18 || ^19",

package/src/context.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from "vitest";
 import type { KerbcastClient } from "@ksp-gonogo/kerbcast";
-import { createClientDisplaySizes } from "./context";
+import { createClientDisplaySizes, createClientSubscriptions } from "./context";
 
 /**
  * A client stub that only records reportDisplaySize calls. The registry is the
@@ -11,12 +11,19 @@ import { createClientDisplaySizes } from "./context";
  */
 function fakeClient() {
   const reports: Array<{ flightId: number; width: number; height: number }> = [];
+  const handlers = new Map<string, Array<() => void>>();
   const client = {
+    on: (event: string, h: () => void) => {
+      handlers.set(event, [...(handlers.get(event) ?? []), h]);
+      return () => {};
+    },
     reportDisplaySize: vi.fn(async (flightId: number, width: number, height: number) => {
       reports.push({ flightId, width, height });
     }),
   } as unknown as KerbcastClient;
-  return { client, reports };
+  /** Simulate the control channel (re)opening on a fresh peer. */
+  const openControl = () => handlers.get("control-open")?.forEach((h) => h());
+  return { client, reports, openControl };
 }
 
 describe("createClientDisplaySizes", () => {
@@ -91,4 +98,114 @@ describe("createClientDisplaySizes", () => {
     reg.clear(99, "ghost");
     expect(reports).toEqual([]);
   });
+
+  describe("reconnect", () => {
+    it("re-sends an unchanged size when the control channel reopens", () => {
+      const { client, reports, openControl } = fakeClient();
+      const reg = createClientDisplaySizes(client);
+      reg.report(1, "a", 640, 360);
+      openControl();
+      expect(reports).toEqual([
+        { flightId: 1, width: 640, height: 360 },
+        { flightId: 1, width: 640, height: 360 },
+      ]);
+    });
+
+    it("re-sends the current MAX for every flightId with reporters", () => {
+      const { client, reports, openControl } = fakeClient();
+      const reg = createClientDisplaySizes(client);
+      reg.report(1, "small", 40, 40);
+      reg.report(1, "big", 512, 512);
+      reg.report(2, "a", 320, 180);
+      reg.report(3, "gone", 99, 99);
+      reg.clear(3, "gone");
+      reports.length = 0;
+      openControl();
+      expect(reports).toEqual([
+        { flightId: 1, width: 512, height: 512 },
+        { flightId: 2, width: 320, height: 180 },
+      ]);
+    });
+
+    it("does not send duplicates while connected", () => {
+      const { client, reports } = fakeClient();
+      const reg = createClientDisplaySizes(client);
+      reg.report(1, "a", 640, 360);
+      reg.report(1, "a", 640, 360);
+      reg.report(1, "b", 100, 100);
+      expect(reports).toHaveLength(1);
+    });
+
+    it("keeps de-duplicating after a reconnect resend", () => {
+      const { client, reports, openControl } = fakeClient();
+      const reg = createClientDisplaySizes(client);
+      reg.report(1, "a", 640, 360);
+      openControl();
+      reg.report(1, "a", 640, 360);
+      expect(reports).toHaveLength(2);
+    });
+
+    it("sends nothing on reconnect when no reporters exist", () => {
+      const { client, reports, openControl } = fakeClient();
+      createClientDisplaySizes(client);
+      openControl();
+      expect(reports).toEqual([]);
+    });
+  });
+});
+
+describe("createClientSubscriptions reconnect", () => {
+  function subsClient() {
+    const calls: string[] = [];
+    const handlers: Array<() => void> = [];
+    const client = {
+      on: (_event: string, h: () => void) => {
+        handlers.push(h);
+        return () => {};
+      },
+      subscribe: vi.fn(async (id: number) => {
+        calls.push(`subscribe:${id}`);
+      }),
+      unsubscribe: vi.fn(async (id: number) => {
+        calls.push(`unsubscribe:${id}`);
+      }),
+      reportDisplaySize: vi.fn(async (id: number) => {
+        calls.push(`size:${id}`);
+      }),
+    } as unknown as KerbcastClient;
+    return { client, calls, openControl: () => handlers.forEach((h) => h()) };
+  }
+
+  it("re-subscribes every held flightId when the control channel reopens", () => {
+    const { client, calls, openControl } = subsClient();
+    const subs = createClientSubscriptions(client);
+    subs.acquire(1);
+    subs.acquire(1);
+    subs.acquire(2);
+    subs.acquire(3);
+    subs.release(3);
+    calls.length = 0;
+    openControl();
+    expect(calls).toEqual(["subscribe:1", "subscribe:2"]);
+  });
+
+  it("does not throw when a re-subscribe is rejected", async () => {
+    const { client, openControl } = subsClient();
+    (client.subscribe as ReturnType<typeof vi.fn>).mockRejectedValue(new Error("pool full"));
+    const subs = createClientSubscriptions(client);
+    subs.acquire(1);
+    expect(() => openControl()).not.toThrow();
+    await Promise.resolve();
+  });
+
+  it("re-subscribes before the display-size resend", () => {
+    const { client, calls, openControl } = subsClient();
+    const subs = createClientSubscriptions(client);
+    const sizes = createClientDisplaySizes(client);
+    subs.acquire(1);
+    sizes.report(1, "a", 640, 360);
+    calls.length = 0;
+    openControl();
+    expect(calls).toEqual(["subscribe:1", "size:1"]);
+  });
 });

package/src/context.tsx

@@ -26,6 +26,19 @@ export function createClientSubscriptions(
   client: KerbcastClient,
 ): KerbcastSubscriptions {
   const refcounts = new Map<number, number>();
+  /*
+   * A reconnect clears every slot binding on the client and the sidecar starts
+   * the new peer empty, so re-subscribe each camera still held. Listeners fire
+   * in registration order and the provider builds this before the display-size
+   * registry, so subscriptions go out first. The sidecar treats a repeat
+   * subscribe for a bound camera as a re-announce, and a rejection (for
+   * example a full slot pool) is swallowed like every other subscribe here.
+   */
+  client.on("control-open", () => {
+    for (const flightId of refcounts.keys()) {
+      client.subscribe(flightId).catch(() => {});
+    }
+  });
   return {
     acquire(flightId: number): void {
       const count = (refcounts.get(flightId) ?? 0) + 1;
@@ -99,6 +112,17 @@ export function createClientDisplaySizes(
     client.reportDisplaySize(flightId, maxW, maxH).catch(() => {});
   }
 
+  /*
+   * The sidecar forgets a peer's display sizes when the peer leaves, so after
+   * a reconnect nothing it holds matches lastSent. Re-send the current MAX for
+   * every camera that still has reporters, once the new control channel is
+   * open and can take messages.
+   */
+  client.on("control-open", () => {
+    lastSent.clear();
+    for (const flightId of [...perCamera.keys()]) recompute(flightId);
+  });
+
   return {
     report(flightId: number, instanceId: string, width: number, height: number): void {
       let instances = perCamera.get(flightId);

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

@@ -46,7 +46,7 @@ function fakeClient(): KerbcastClient {
   const controller = new RecordingController(new FakeRecordingClient(), {
     loadTrimmer: () => Promise.resolve(null),
   });
-  return { recording: controller } as unknown as KerbcastClient;
+  return { recording: controller, on: () => () => {} } as unknown as KerbcastClient;
 }
 
 let storeA: RecordingsStore | undefined;

package/src/hooks/useRecordings.test.tsx

@@ -51,7 +51,7 @@ function fakeClient(): KerbcastClient {
   const controller = new RecordingController(new FakeRecordingClient(), {
     loadTrimmer: () => Promise.resolve(null),
   });
-  return { recording: controller } as unknown as KerbcastClient;
+  return { recording: controller, on: () => () => {} } as unknown as KerbcastClient;
 }
 
 let store: RecordingsStore | undefined;

package/src/hooks/useReportDisplaySize.test.tsx

@@ -31,7 +31,7 @@ function recordingRegistry() {
   return { displaySizes, reports, clears };
 }
 
-const fakeClient = {} as unknown as KerbcastClient;
+const fakeClient = { on: () => () => {} } as unknown as KerbcastClient;
 
 function fireResize(width: number, height: number) {
   act(() => {
@@ -56,6 +56,12 @@ function Harness({
   return <div ref={ref} data-testid="feed" />;
 }
 
+function LateHarness({ show }: { show: boolean }) {
+  const ref = useRef<HTMLDivElement>(null);
+  useReportDisplaySize(7, ref);
+  return show ? <div ref={ref} data-testid="late" /> : null;
+}
+
 beforeEach(() => {
   vi.useFakeTimers();
   globalThis.ResizeObserver = class {
@@ -163,4 +169,18 @@ describe("useReportDisplaySize", () => {
     expect(resizeCallback).toBeUndefined();
     expect(reports).toEqual([]);
   });
+
+  it("observes an element that appears after mount", () => {
+    const { displaySizes, reports } = recordingRegistry();
+    const view = (show: boolean) => (
+      <KerbcastProvider client={fakeClient} displaySizes={displaySizes}>
+        <LateHarness show={show} />
+      </KerbcastProvider>
+    );
+    const { rerender } = render(view(false));
+    expect(resizeCallback).toBeUndefined();
+    rerender(view(true));
+    fireResize(40, 30);
+    expect(reports).toEqual([{ flightId: 7, id: expect.any(String), w: 48, h: 32 }]);
+  });
 });

package/src/hooks/useReportDisplaySize.ts

@@ -1,4 +1,4 @@
-import { useEffect, useId } from "react";
+import { useEffect, useId, useLayoutEffect, useState } from "react";
 import { useKerbcastDisplaySizes } from "../context";
 
 /*
@@ -35,7 +35,8 @@ export interface ReportDisplaySizeOptions {
  * Self-measure a feed element and drive the client's per-consumer
  * `reportDisplaySize` (via the context display-size registry, which collapses
  * multiple feeds of the same camera to one MAX report). Attach `ref` to the
- * element whose rendered pixel box is the display size. Reporting follows the
+ * element whose rendered pixel box is the display size; an element that
+ * appears or changes after mount is picked up on the host's next render. Reporting follows the
  * mount lifecycle: on unmount / `flightId` change / `enabled` flip it
  * deregisters, and the sidecar's clear-on-departure (unsubscribe) does the
  * server-side clear.
@@ -48,9 +49,19 @@ export function useReportDisplaySize(
   const displaySizes = useKerbcastDisplaySizes();
   const instanceId = useId();
 
+  /*
+   * Track the element behind the ref as state so an element that mounts or is
+   * swapped after the first render (conditional render, a feed that appears
+   * once a stream arrives) is observed. Checked after every commit of the
+   * host component; the state only changes when the element does.
+   */
+  const [el, setEl] = useState<Element | null>(null);
+  useLayoutEffect(() => {
+    if (ref.current !== el) setEl(ref.current);
+  });
+
   useEffect(() => {
     if (flightId === null || !enabled) return;
-    const el = ref.current;
     if (!el) return;
 
     let timer: ReturnType<typeof setTimeout> | null = null;
@@ -87,5 +98,5 @@ export function useReportDisplaySize(
       if (timer !== null) clearTimeout(timer);
       displaySizes.clear(flightId, instanceId);
     };
-  }, [displaySizes, flightId, ref, enabled, square, instanceId]);
+  }, [displaySizes, flightId, el, enabled, square, instanceId]);
 }