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

package/src/CameraFeed.test.tsx

@@ -22,8 +22,19 @@
  *  - Station (brokered) mode -- gonogo-only KerbcastDataSource.attachBroker.
  */
 
-import { KerbcastClient, QualityPreset, TrackMode } from "@ksp-gonogo/kerbcast";
-import type { CameraLifecycle, ClientMessage } from "@ksp-gonogo/kerbcast";
+import {
+  CameraKind,
+  CommandTargetEligibility,
+  KerbcastClient,
+  QualityPreset,
+  TrackMode,
+} from "@ksp-gonogo/kerbcast";
+import type {
+  CameraLifecycle,
+  ClientMessage,
+  CommandCentreInfo,
+  CommandTrackState,
+} from "@ksp-gonogo/kerbcast";
 import { type MockCameraInit, MockSidecar } from "@ksp-gonogo/kerbcast/testing";
 import {
   act,
@@ -33,16 +44,18 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
-import { createRef } from "react";
+import { createRef, useEffect } from "react";
 import { useState } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
   CameraFeed,
   type CameraFeedHandle,
+  type CameraFeedProps,
   type CameraStreamHook,
   type FeedAction,
 } from "./CameraFeed";
 import { KerbcastProvider } from "./context";
+import { useKerbcastCameras } from "./hooks/useKerbcastCameras";
 
 /*
  * The REC control reads/drives `useRecordings()` (see CameraFeed - REC below).
@@ -208,6 +221,8 @@ function toInit(c: CameraStateLike): MockCameraInit {
     renderHeight: c.renderHeight as number | undefined,
     operatorWidth: c.operatorWidth as number | undefined,
     operatorHeight: c.operatorHeight as number | undefined,
+    maxWidth: c.maxWidth as number | undefined,
+    maxHeight: c.maxHeight as number | undefined,
     supportsZoom: c.supportsZoom as boolean | undefined,
     fov: c.fov as number | undefined,
     fovMin: c.fovMin as number | undefined,
@@ -225,6 +240,9 @@ function toInit(c: CameraStateLike): MockCameraInit {
     viewerQuality: c.viewerQuality as QualityPreset | undefined,
     qualityLimitedBy: c.qualityLimitedBy as string | undefined,
     trackMode: c.trackMode as TrackMode | undefined,
+    kind: c.kind as CameraKind | undefined,
+    commandCentre: c.commandCentre as CommandCentreInfo | undefined,
+    commandTrack: c.commandTrack as CommandTrackState | undefined,
   };
 }
 
@@ -282,6 +300,9 @@ function renderFeed(
     showStatic?: boolean;
     showStandbyIcon?: boolean;
     showActions?: boolean;
+    enableTargetBrackets?: boolean;
+    targetBracketOverlay?: CameraFeedProps["targetBracketOverlay"];
+    displayUt?: number;
     ref?: React.Ref<CameraFeedHandle>;
   },
 ) {
@@ -1480,8 +1501,10 @@ describe("CameraFeed - ResizeObserver render-size feedback", () => {
     resizeCallback = undefined;
   });
 
-  it("reports the measured display size (report-display-size, real w x h)", async () => {
-    const { client, sidecar } = await buildConnectedSource();
+  it("reports the measured display size at 16:9 (report-display-size)", async () => {
+    const { client, sidecar } = await buildConnectedSource([
+      makeCamera({ flightId: 42, cameraName: "Starboard Cam", maxWidth: 1280, maxHeight: 720 }),
+    ]);
 
     renderFeed(client, { flightId: 42 });
 
@@ -1495,15 +1518,45 @@ describe("CameraFeed - ResizeObserver render-size feedback", () => {
 
     const msg = sidecar.lastCommand("report-display-size");
     expect(msg).toBeTruthy();
-    // Measured w x h (no synthetic 16:9 crop), bucketed to a 16-multiple:
-    // 400 -> 400, 224 -> 224.
+    // The 16:9 picture that fits 400x224 is ~398 wide: bucketed to 400, height
+    // 225 rounded to even.
     expect(msg?.content.width).toBe(400);
-    expect(msg?.content.height).toBe(224);
+    expect(msg?.content.height).toBe(226);
     // Measurement no longer drives the operator set-render-size (that path is
     // the manual quality cap only).
     expect(sidecar.commands.some((c) => c.type === "set-render-size")).toBe(false);
   });
 
+  it("asks for the camera's configured shape, not the box's, and gives the feed that shape", async () => {
+    const { client, sidecar } = await buildConnectedSource([
+      makeCamera({ flightId: 42, cameraName: "Starboard Cam", maxWidth: 1024, maxHeight: 768 }),
+    ]);
+
+    const { container } = renderFeed(client, { flightId: 42 });
+
+    await act(async () => {
+      resizeCallback?.(
+        [{ contentRect: { width: 400, height: 224 } }] as ResizeObserverEntry[],
+        {} as ResizeObserver,
+      );
+    });
+
+    // The 4:3 picture that fits 400x224 is ~299 wide: 304x228.
+    const msg = sidecar.lastCommand("report-display-size");
+    expect(msg?.content).toMatchObject({ width: 304, height: 228 });
+    const box = container.firstElementChild as HTMLElement;
+    expect(box.style.getPropertyValue("--kc-feed-w")).toBe("1024");
+    expect(box.style.getPropertyValue("--kc-feed-h")).toBe("768");
+  });
+
+  it("falls back to 16:9 while no configured size is known", async () => {
+    const { client } = await buildConnectedSource([]);
+    const { container } = renderFeed(client, { flightId: null });
+    const box = container.firstElementChild as HTMLElement;
+    expect(box.style.getPropertyValue("--kc-feed-w")).toBe("16");
+    expect(box.style.getPropertyValue("--kc-feed-h")).toBe("9");
+  });
+
   it("does not report when renderSize is none", async () => {
     const { client, sidecar } = await buildConnectedSource();
 
@@ -1515,6 +1568,212 @@ describe("CameraFeed - ResizeObserver render-size feedback", () => {
   });
 });
 
+// ---------------------------------------------------------------------------
+// Render size in a narrow, tall tile, with a frame sized from the stream
+// ---------------------------------------------------------------------------
+
+describe("CameraFeed - render size in a narrow, tall tile", () => {
+  const PHONE_HALF_TILE = { width: 170, height: 400 };
+  let tile = PHONE_HALF_TILE;
+  let watched: Array<{ el: Element; cb: ResizeObserverCallback; last: string | null }> = [];
+  const originalResizeObserver = globalThis.ResizeObserver;
+
+  /* An element sized in px by its own style has that size, anything inside it fills it, anything else is the tile. */
+  function boxOf(el: Element): { width: number; height: number } {
+    for (let at: Element | null = el; at; at = at.parentElement) {
+      const style = (at as HTMLElement).style;
+      if (style?.width.endsWith("px") && style.height.endsWith("px")) {
+        return { width: Number.parseFloat(style.width), height: Number.parseFloat(style.height) };
+      }
+    }
+    return tile;
+  }
+
+  function layout() {
+    for (const w of watched) {
+      const box = boxOf(w.el);
+      const key = `${box.width}x${box.height}`;
+      if (key === w.last) continue;
+      w.last = key;
+      w.cb(
+        [{ target: w.el, contentRect: box as DOMRectReadOnly } as ResizeObserverEntry],
+        {} as ResizeObserver,
+      );
+    }
+  }
+
+  async function run(ms: number) {
+    for (let t = 0; t < ms; t += 16) {
+      await act(async () => {
+        vi.advanceTimersByTime(16);
+      });
+      act(() => layout());
+    }
+  }
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    tile = PHONE_HALF_TILE;
+    watched = [];
+    globalThis.ResizeObserver = class {
+      private readonly cb: ResizeObserverCallback;
+      constructor(cb: ResizeObserverCallback) {
+        this.cb = cb;
+      }
+      observe(el: Element) {
+        watched.push({ el, cb: this.cb, last: null });
+      }
+      unobserve() {}
+      disconnect() {
+        watched = watched.filter((w) => w.cb !== this.cb);
+      }
+    } as unknown as typeof ResizeObserver;
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    globalThis.ResizeObserver = originalResizeObserver;
+  });
+
+  /*
+   * The natural way to keep a video's shape: a frame whose height comes from
+   * the playing video's size, or the camera's render size before it plays.
+   */
+  function StreamShapedFrame({ client }: { client: KerbcastClient }) {
+    const [root, setRoot] = useState<HTMLDivElement | null>(null);
+    const [, bump] = useState(0);
+    useEffect(() => {
+      if (!root) return;
+      const sync = () => bump((n) => n + 1);
+      root.addEventListener("resize", sync, true);
+      root.addEventListener("loadedmetadata", sync, true);
+      return () => {
+        root.removeEventListener("resize", sync, true);
+        root.removeEventListener("loadedmetadata", sync, true);
+      };
+    }, [root]);
+    return (
+      <KerbcastProvider client={client}>
+        <Shaped root={root} setRoot={setRoot} />
+      </KerbcastProvider>
+    );
+  }
+
+  function Shaped({
+    root,
+    setRoot,
+  }: {
+    root: HTMLDivElement | null;
+    setRoot: (el: HTMLDivElement | null) => void;
+  }) {
+    const camera = useKerbcastCameras().find((c) => c.flightId === 42);
+    const video = root?.querySelector("video");
+    const aspect =
+      video && video.videoWidth > 0
+        ? video.videoWidth / video.videoHeight
+        : camera
+          ? camera.renderWidth / camera.renderHeight
+          : 16 / 9;
+    const width = Math.min(tile.width, tile.height * aspect);
+    return (
+      <div
+        ref={setRoot}
+        style={{ width: `${Math.floor(width)}px`, height: `${Math.floor(width / aspect)}px` }}
+      >
+        <CameraFeed flightId={42} />
+      </div>
+    );
+  }
+
+  async function connect() {
+    return buildConnectedSource([
+      makeCamera({
+        flightId: 42,
+        cameraName: "Starboard Cam",
+        renderWidth: 1280,
+        renderHeight: 720,
+        maxWidth: 1280,
+        maxHeight: 720,
+      }),
+    ]);
+  }
+
+  function sizeReports(sidecar: MockSidecar) {
+    return sidecar.commands
+      .filter((c) => c.type === "report-display-size")
+      .map((c) => (c as { content: { flightId: number; width: number; height: number } }).content);
+  }
+
+  async function mountShaped() {
+    const { client, sidecar } = await connect();
+    const view = render(<StreamShapedFrame client={client} />);
+    await run(500);
+    const video = view.container.querySelector("video");
+    if (!video) throw new Error("no video element");
+    return { sidecar, video, view, client };
+  }
+
+  async function streamBecomes(
+    sidecar: MockSidecar,
+    video: HTMLVideoElement,
+    width: number,
+    height: number,
+  ) {
+    Object.defineProperty(video, "videoWidth", { value: width, configurable: true });
+    Object.defineProperty(video, "videoHeight", { value: height, configurable: true });
+    await act(async () => {
+      sidecar.updateCamera(42, { renderWidth: width, renderHeight: height });
+      video.dispatchEvent(new Event("loadedmetadata"));
+      video.dispatchEvent(new Event("resize"));
+    });
+    await run(300);
+  }
+
+  it("asks a layout-sized tile for one size at the camera's shape", async () => {
+    const { client, sidecar } = await connect();
+    renderFeed(client, { flightId: 42 });
+    await run(500);
+    expect(sizeReports(sidecar)).toEqual([{ flightId: 42, width: 176, height: 100 }]);
+  });
+
+  it("sends no request when the stream comes back smaller, larger or another shape", async () => {
+    const { sidecar, video } = await mountShaped();
+    const before = sizeReports(sidecar).length;
+    for (const [w, h] of [
+      [96, 54],
+      [1920, 1080],
+      [160, 120],
+      [176, 400],
+    ] as const) {
+      await streamBecomes(sidecar, video, w, h);
+      await run(2000);
+    }
+    expect(sizeReports(sidecar).length - before).toBe(0);
+  });
+
+  it("sends nothing while the tile holds still and the stream flips between two sizes", async () => {
+    const { sidecar, video } = await mountShaped();
+    const before = sizeReports(sidecar);
+    for (let i = 0; i < 6; i++) {
+      await streamBecomes(sidecar, video, 176, i % 2 ? 128 : 96);
+    }
+    await run(3000);
+    expect(sizeReports(sidecar)).toEqual(before);
+  });
+
+  it("sends exactly one request, sized from the tile, for a resize dragged across several sizes", async () => {
+    const { sidecar, view, client } = await mountShaped();
+    const before = sizeReports(sidecar).length;
+    for (const width of [240, 280, 320]) {
+      tile = { width, height: 400 };
+      view.rerender(<StreamShapedFrame client={client} />);
+      act(() => layout());
+    }
+    await run(1000);
+    expect(sizeReports(sidecar).slice(before)).toEqual([{ flightId: 42, width: 320, height: 180 }]);
+  });
+});
+
 // ---------------------------------------------------------------------------
 // showActions
 // ---------------------------------------------------------------------------
@@ -2483,3 +2742,274 @@ describe("CameraFeed - recording locks source and close", () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 });
+
+// ---------------------------------------------------------------------------
+// Command camera target brackets
+// ---------------------------------------------------------------------------
+
+describe("CameraFeed - command camera target brackets", () => {
+  const STATION: CommandCentreInfo = {
+    stationId: "ground:KSC",
+    nodeName: "KSC",
+    displayName: "Kerbal Space Center",
+    body: "Kerbin",
+    latitude: -0.1,
+    longitude: -74.6,
+    altitude: 95,
+    subjectPersistentId: 0,
+    trackingLevel: 3,
+    targets: [],
+  };
+
+  function commandTrack(overrides: Partial<CommandTrackState> = {}): CommandTrackState {
+    return {
+      ut: 1000,
+      hasFix: true,
+      rangeM: 11_507_905,
+      occluded: false,
+      occluder: "",
+      sunlit: true,
+      bracketHalfPx: 4,
+      frameHeightPx: 576,
+      framingFits: true,
+      events: [],
+      ...overrides,
+    };
+  }
+
+  function commandCamera(track: CommandTrackState | undefined = commandTrack()) {
+    return makeCamera({
+      flightId: 301,
+      kind: CameraKind.Command,
+      cameraName: "KSC tracking",
+      commandCentre: STATION,
+      commandTrack: track,
+    });
+  }
+
+  beforeEach(() => localStorage.clear());
+
+  it("shows the brackets readout and a pressed toggle on a command feed", async () => {
+    const { client } = await buildConnectedSource([commandCamera()]);
+    renderFeed(client, { flightId: 301 });
+    expect(screen.getByText("IN VIEW · 11,508 km")).toBeTruthy();
+    expect(
+      screen.getByRole("button", { name: "Target brackets" }).getAttribute("aria-pressed"),
+    ).toBe("true");
+  });
+
+  it("offers no toggle on a part feed", async () => {
+    const { client } = await buildConnectedSource();
+    renderFeed(client, { flightId: 42 });
+    expect(screen.queryByRole("button", { name: "Target brackets" })).toBeNull();
+  });
+
+  it("hides the brackets when toggled off and remembers it per camera", async () => {
+    const { client } = await buildConnectedSource([commandCamera()]);
+    const first = renderFeed(client, { flightId: 301 });
+    fireEvent.click(screen.getByRole("button", { name: "Target brackets" }));
+    expect(screen.queryByText("IN VIEW · 11,508 km")).toBeNull();
+    expect(localStorage.getItem("kerbcast:target-brackets:ground:KSC")).toBe("0");
+    first.unmount();
+
+    renderFeed(client, { flightId: 301 });
+    expect(screen.queryByText("IN VIEW · 11,508 km")).toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Target brackets" }).getAttribute("aria-pressed"),
+    ).toBe("false");
+  });
+
+  it("still labels a blanked feed with the brackets toggled off", async () => {
+    localStorage.setItem("kerbcast:target-brackets:ground:KSC", "0");
+    const { client, sidecar } = await buildConnectedSource([commandCamera()]);
+    renderFeed(client, { flightId: 301 });
+    expect(screen.queryByRole("status", { name: "Feed blanked" })).toBeNull();
+    await act(async () => {
+      sidecar.updateCamera(301, { commandTrack: commandTrack({ blank: "Waiting for gonogo" }) });
+    });
+    expect(screen.getByRole("status", { name: "Feed blanked" }).textContent).toBe(
+      "Waiting for gonogo",
+    );
+  });
+
+  it("shows the transition in force at the displayed UT", async () => {
+    const track = commandTrack({
+      authority: { owner: "gonogo" },
+      events: [
+        { ut: 990, occluded: true, occluder: "Mun", sunlit: true },
+        { ut: 999, occluded: false, occluder: "", sunlit: true },
+      ],
+    });
+    const { client } = await buildConnectedSource([commandCamera(track)]);
+    const view = renderFeed(client, { flightId: 301, displayUt: 995 });
+    expect(screen.getByText("OCCLUDED MUN · 11,508 km")).toBeTruthy();
+    view.rerender(
+      <KerbcastProvider client={client}>
+        <CameraFeed flightId={301} displayUt={999.5} />
+      </KerbcastProvider>,
+    );
+    expect(screen.getByText("IN VIEW · 11,508 km")).toBeTruthy();
+  });
+
+  it("passes the target bracket overlay through to the brackets", async () => {
+    const { client } = await buildConnectedSource([commandCamera()]);
+    const seenUts: number[] = [];
+    const { container } = renderFeed(client, {
+      flightId: 301,
+      displayUt: 1060,
+      targetBracketOverlay: {
+        render: (ctx) => {
+          seenUts.push(ctx.displayUt);
+          return <circle data-testid="overlay-mark" cx={ctx.geometry.cx} cy={ctx.geometry.cy} r={2} />;
+        },
+        corners: { bottomRight: { hidden: true } },
+        readout: (text, ctx) => `${text} · T+${ctx.displayUt}`,
+      },
+    });
+    expect(screen.getByTestId("overlay-mark")).toBeTruthy();
+    expect(seenUts).toContain(1060);
+    expect(container.querySelector('path[data-corner="bottomRight"]')).toBeNull();
+    expect(container.querySelector('path[data-corner="topLeft"]')).not.toBeNull();
+    expect(screen.getByText(/ · T\+1060$/)).toBeTruthy();
+  });
+
+  describe("target picker", () => {
+    const TARGETS: CommandCentreInfo = {
+      ...STATION,
+      subjectPersistentId: 11,
+      rangeM: 12_300,
+      trackingLevel: 1,
+      targets: [
+        {
+          persistentId: 11,
+          vesselName: "Kerbal X",
+          vesselType: "Ship",
+          rangeM: 12_300,
+          eligibility: CommandTargetEligibility.Ok,
+          eligibilityText: "Trackable",
+        },
+        {
+          persistentId: 22,
+          vesselName: "Relay 1",
+          vesselType: "Relay",
+          rangeM: 1_500_000,
+          eligibility: CommandTargetEligibility.Ok,
+          eligibilityText: "Trackable",
+        },
+        {
+          persistentId: 33,
+          vesselName: "Ast. HSJ-227",
+          vesselType: "SpaceObject",
+          eligibility: CommandTargetEligibility.LevelTooLow,
+          eligibilityText: "Upgrade the Tracking Station",
+        },
+      ],
+    };
+
+    function targetCamera() {
+      return makeCamera({
+        flightId: 301,
+        kind: CameraKind.Command,
+        cameraName: "KSC tracking",
+        commandCentre: TARGETS,
+        commandTrack: commandTrack(),
+      });
+    }
+
+    it("lists targets, marks the current one and disables ineligible ones", async () => {
+      const { client } = await buildConnectedSource([targetCamera()]);
+      renderFeed(client, { flightId: 301 });
+      const trigger = screen.getByRole("button", { name: "Choose target" });
+      expect(trigger.getAttribute("title")).toBe("Watching Kerbal X");
+      fireEvent.click(trigger);
+      const items = screen.getAllByRole("menuitemradio");
+      expect(items.map((i) => i.textContent)).toEqual([
+        "Kerbal X · 12 km",
+        "Relay 1 · 1,500 km",
+        "Ast. HSJ-227 · Upgrade the Tracking Station",
+      ]);
+      expect(items[0]!.getAttribute("aria-checked")).toBe("true");
+      expect(items[1]!.getAttribute("aria-checked")).toBe("false");
+      expect((items[2] as HTMLButtonElement).disabled).toBe(true);
+      expect(items[2]!.getAttribute("title")).toBe("Upgrade the Tracking Station");
+    });
+
+    it("keeps the quality menu reachable when the row overflows", async () => {
+      const { client } = await buildConnectedSource([targetCamera()]);
+      renderFeed(client, {
+        flightId: 301,
+        enableQualityControl: true,
+        enableFullscreen: true,
+        enablePictureInPicture: true,
+        actions: [
+          { id: "a", label: "Extra A", icon: null, onClick: () => {} },
+          { id: "b", label: "Extra B", icon: null, onClick: () => {} },
+        ],
+      });
+      fireEvent.click(screen.getByRole("button", { name: /quality/i }));
+      expect(screen.getByRole("menu", { name: "Quality" })).toBeTruthy();
+    });
+
+    it("keeps the target menu reachable when the row overflows", async () => {
+      const { client } = await buildConnectedSource([targetCamera()]);
+      renderFeed(client, {
+        flightId: 301,
+        enableFullscreen: true,
+        enablePictureInPicture: true,
+        actions: [
+          { id: "a", label: "Extra A", icon: null, onClick: () => {} },
+          { id: "b", label: "Extra B", icon: null, onClick: () => {} },
+        ],
+      });
+      fireEvent.click(screen.getByRole("button", { name: "Choose target" }));
+      expect(screen.getAllByRole("menuitemradio")).toHaveLength(3);
+    });
+
+    it("sends the choice and follows the published target", async () => {
+      const { client, sidecar } = await buildConnectedSource([targetCamera()]);
+      renderFeed(client, { flightId: 301 });
+      fireEvent.click(screen.getByRole("button", { name: "Choose target" }));
+      await act(async () => {
+        fireEvent.click(screen.getByRole("menuitemradio", { name: /Relay 1/ }));
+      });
+      expect(sidecar.lastCommand("set-command-aim", 301)?.content).toEqual({
+        flightId: 301,
+        aim: { kind: "vessel", persistentId: 22 },
+      });
+      expect(
+        screen.getByRole("button", { name: "Choose target" }).getAttribute("title"),
+      ).toBe("Watching Relay 1");
+    });
+
+    it("is hidden with no targets, with manual controls disabled or under the lock", async () => {
+      const { client } = await buildConnectedSource([targetCamera()]);
+      const view = renderFeed(client, { flightId: 301, disableManualControls: true });
+      expect(screen.queryByRole("button", { name: "Choose target" })).toBeNull();
+      view.unmount();
+
+      const locked = await buildConnectedSource([
+        makeCamera({
+          flightId: 301,
+          kind: CameraKind.Command,
+          cameraName: "KSC tracking",
+          commandCentre: TARGETS,
+          commandTrack: commandTrack({ authority: { owner: "gonogo" } }),
+        }),
+      ]);
+      const lockedView = renderFeed(locked.client, { flightId: 301 });
+      expect(screen.queryByRole("button", { name: "Choose target" })).toBeNull();
+      lockedView.unmount();
+
+      const empty = await buildConnectedSource([commandCamera()]);
+      renderFeed(empty.client, { flightId: 301 });
+      expect(screen.queryByRole("button", { name: "Choose target" })).toBeNull();
+    });
+  });
+
+  it("draws nothing with enableTargetBrackets off", async () => {
+    const { client } = await buildConnectedSource([commandCamera()]);
+    renderFeed(client, { flightId: 301, enableTargetBrackets: false });
+    expect(screen.queryByText("IN VIEW · 11,508 km")).toBeNull();
+    expect(screen.queryByRole("button", { name: "Target brackets" })).toBeNull();
+  });
+});