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

package/src/CommandBrackets.tsx

@@ -0,0 +1,341 @@
+import {
+  commandReadout,
+  type EffectiveCommandTrack,
+  type FrameUtSource,
+} from "@ksp-gonogo/kerbcast";
+import { useEffect, useState, type ReactNode } from "react";
+import styled from "styled-components";
+
+const BRACKET_STROKE_PX = 2;
+const BRACKET_MIN_HALF_PX = 14;
+const BRACKET_ARM_FRACTION = 0.3;
+const BRACKET_MIN_ARM_PX = 6;
+const READOUT_GAP_PX = 11;
+
+/** Default colours; each is overridable through the named CSS custom property. */
+export const COMMAND_BRACKET_COLOURS = {
+  clear: "var(--kerbcast-bracket-clear, #4caf50)",
+  occluded: "var(--kerbcast-bracket-occluded, #f44336)",
+} as const;
+
+export interface ContentRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * Where `object-fit: contain` media actually lands inside its box. Falls back
+ * to the whole box while the media size is unknown.
+ */
+export function containedContentRect(
+  boxWidth: number,
+  boxHeight: number,
+  mediaWidth: number,
+  mediaHeight: number,
+): ContentRect {
+  if (mediaWidth <= 0 || mediaHeight <= 0 || boxWidth <= 0 || boxHeight <= 0) {
+    return { x: 0, y: 0, width: Math.max(0, boxWidth), height: Math.max(0, boxHeight) };
+  }
+  const scale = Math.min(boxWidth / mediaWidth, boxHeight / mediaHeight);
+  const width = mediaWidth * scale;
+  const height = mediaHeight * scale;
+  return { x: (boxWidth - width) / 2, y: (boxHeight - height) / 2, width, height };
+}
+
+export interface BracketPoint {
+  x: number;
+  y: number;
+}
+
+/** The bracket box, in the pixel space of the bracket SVG (the video element's box). */
+export interface BracketGeometry {
+  /** Box centre, which is the aim point. */
+  cx: number;
+  cy: number;
+  /** Half the box side in display px. */
+  half: number;
+  /** Length of each corner stroke. */
+  arm: number;
+  stroke: number;
+  /** The box's top-left and bottom-right corner points. */
+  topLeft: BracketPoint;
+  bottomRight: BracketPoint;
+}
+
+/**
+ * The bracket box centred on the displayed frame. `bracketHalfPx` is in
+ * capture px of a `frameHeightPx`-tall frame, so it scales by the displayed
+ * height; a missing half-size draws the minimum box.
+ */
+export function bracketGeometry(
+  rect: ContentRect,
+  bracketHalfPx: number | null,
+  frameHeightPx: number,
+): BracketGeometry {
+  const scale = frameHeightPx > 0 ? rect.height / frameHeightPx : 1;
+  const half = Math.max(BRACKET_MIN_HALF_PX, (bracketHalfPx ?? 0) * scale);
+  const arm = Math.max(BRACKET_MIN_ARM_PX, BRACKET_ARM_FRACTION * half * 2);
+  const cx = rect.x + rect.width / 2;
+  const cy = rect.y + rect.height / 2;
+  return {
+    cx,
+    cy,
+    half,
+    arm,
+    stroke: BRACKET_STROKE_PX,
+    topLeft: { x: cx - half, y: cy - half },
+    bottomRight: { x: cx + half, y: cy + half },
+  };
+}
+
+export type CommandBracketCorner = "topLeft" | "bottomRight";
+
+export interface CommandBracketCornerStyle {
+  colour: string;
+  dashed: boolean;
+}
+
+/** Changes to one default corner; unset fields keep the default. */
+export interface CommandBracketCornerOverride {
+  colour?: string;
+  dashed?: boolean;
+  hidden?: boolean;
+}
+
+export type CommandBracketCornerOverrides = Partial<
+  Record<CommandBracketCorner, CommandBracketCornerOverride>
+>;
+
+/** Everything a bracket overlay needs to line up with the drawn brackets. */
+export interface CommandBracketContext {
+  geometry: BracketGeometry;
+  /** Size of the bracket SVG, the video element's box. */
+  width: number;
+  height: number;
+  /** Frame UT the brackets describe. */
+  displayUt: number;
+  utSource: FrameUtSource | "override" | null;
+  state: EffectiveCommandTrack;
+}
+
+/**
+ * Consumer additions to a command feed's brackets. Each part is optional and
+ * is called on every render with the context for the displayed frame.
+ */
+export interface CommandBracketOverlay {
+  /**
+   * SVG content drawn inside the bracket SVG above the default corners, in
+   * the same pixel space. Runs in every state, with or without a fix and
+   * over a blanked feed; `ctx.state` says which.
+   */
+  render?: (ctx: CommandBracketContext) => ReactNode;
+  /** Restyle or hide the default corners. */
+  corners?:
+    | CommandBracketCornerOverrides
+    | ((ctx: CommandBracketContext) => CommandBracketCornerOverrides | null | undefined);
+  /**
+   * The readout text under the box. Receives the default text, which is
+   * empty while the feed is blanked; return a replacement (append to keep
+   * it), or null to hide the readout. Runs in every state.
+   */
+  readout?: (defaultText: string, ctx: CommandBracketContext) => string | null;
+}
+
+function cameraCornerStyle(state: EffectiveCommandTrack): CommandBracketCornerStyle {
+  return state.occluded
+    ? { colour: COMMAND_BRACKET_COLOURS.occluded, dashed: true }
+    : { colour: COMMAND_BRACKET_COLOURS.clear, dashed: false };
+}
+
+function applyCorner(
+  base: CommandBracketCornerStyle,
+  override: CommandBracketCornerOverride | undefined,
+): CommandBracketCornerStyle & { hidden: boolean } {
+  return {
+    colour: override?.colour ?? base.colour,
+    dashed: override?.dashed ?? base.dashed,
+    hidden: override?.hidden ?? false,
+  };
+}
+
+/** Tracks the rendered box and intrinsic size of a video element. */
+function useVideoBox(video: HTMLVideoElement | null) {
+  const [box, setBox] = useState({ 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;
+}
+
+export interface CommandBracketsProps {
+  state: EffectiveCommandTrack;
+  displayUt: number;
+  /** Where `displayUt` came from, mirrored to the readout as `data-ut-source`. */
+  utSource?: FrameUtSource | "override" | null;
+  video: HTMLVideoElement | null;
+  /** Frame aspect to assume until the video reports its own size. */
+  fallbackSize?: { width: number; height: number } | null;
+  overlay?: CommandBracketOverlay | null;
+}
+
+/**
+ * Target brackets for a command camera feed: the aim point sits at frame
+ * centre, so the box is always centred on the displayed video. Both corners
+ * show the camera axis by default; an overlay can restyle either and draw
+ * its own marks. Without a fix, or over a blanked feed, the default corners
+ * are left out but the overlay and readout still run.
+ */
+export function CommandBrackets({
+  state,
+  displayUt,
+  utSource,
+  video,
+  fallbackSize,
+  overlay,
+}: CommandBracketsProps) {
+  const { boxW, boxH, mediaW, mediaH } = useVideoBox(video);
+  const rect = containedContentRect(
+    boxW,
+    boxH,
+    mediaW || fallbackSize?.width || 0,
+    mediaH || fallbackSize?.height || 0,
+  );
+  const g = bracketGeometry(rect, state.bracketHalfPx, state.frameHeightPx || mediaH);
+  const ctx: CommandBracketContext = {
+    geometry: g,
+    width: boxW,
+    height: boxH,
+    displayUt,
+    utSource: utSource ?? null,
+    state,
+  };
+  const overrides =
+    typeof overlay?.corners === "function" ? overlay.corners(ctx) : overlay?.corners;
+  const camera = cameraCornerStyle(state);
+  const topLeft = applyCorner(camera, overrides?.topLeft);
+  const bottomRight = applyCorner(camera, overrides?.bottomRight);
+  const { x: left, y: top } = g.topLeft;
+  const { x: right, y: bottom } = g.bottomRight;
+  const blanked = !!state.blank;
+  const drawCorners = state.hasFix && !blanked;
+  const defaultReadout = blanked ? "" : commandReadout(state);
+  const readout = overlay?.readout ? overlay.readout(defaultReadout, ctx) : defaultReadout;
+
+  return (
+    <>
+      {(drawCorners || overlay?.render) && (
+        <BracketSvg aria-hidden="true" data-camera-axis={state.camera} width={boxW} height={boxH}>
+          {drawCorners && !topLeft.hidden && (
+            <path
+              data-corner="topLeft"
+              d={`M${left} ${top + g.arm}L${left} ${top}L${left + g.arm} ${top}`}
+              fill="none"
+              strokeWidth={g.stroke}
+              strokeDasharray={topLeft.dashed ? "3 2" : undefined}
+              style={{ stroke: topLeft.colour }}
+            />
+          )}
+          {drawCorners && !bottomRight.hidden && (
+            <path
+              data-corner="bottomRight"
+              d={`M${right} ${bottom - g.arm}L${right} ${bottom}L${right - g.arm} ${bottom}`}
+              fill="none"
+              strokeWidth={g.stroke}
+              strokeDasharray={bottomRight.dashed ? "3 2" : undefined}
+              style={{ stroke: bottomRight.colour }}
+            />
+          )}
+          {overlay?.render && <g data-bracket-overlay="">{overlay.render(ctx)}</g>}
+        </BracketSvg>
+      )}
+      {readout && (
+        <Readout
+          data-ut-source={utSource ?? undefined}
+          style={{ left: g.cx, top: bottom + READOUT_GAP_PX }}
+        >
+          {readout}
+        </Readout>
+      )}
+    </>
+  );
+}
+
+/** Reason a command feed is blanked, centred on black over the feed. */
+export function CommandBlank({ reason }: { reason: string }) {
+  return (
+    <BlankOverlay role="status" aria-label="Feed blanked">
+      <BlankText>{reason}</BlankText>
+    </BlankOverlay>
+  );
+}
+
+const BracketSvg = styled.svg`
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  overflow: visible;
+  pointer-events: none;
+`;
+
+const Readout = styled.div`
+  position: absolute;
+  z-index: 1;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+  pointer-events: none;
+`;
+
+const BlankOverlay = styled.div`
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: #000;
+  pointer-events: none;
+`;
+
+const BlankText = styled.span`
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-align: center;
+  text-transform: uppercase;
+`;

package/src/hooks/useCommandDisplayUt.test.tsx

@@ -0,0 +1,156 @@
+/**
+ * Display UT for command feeds and the displayed-frame UT hook: the presented
+ * frame's own capture stamp wins over the capture clock, every value says
+ * which it is, and a host override beats both.
+ */
+
+import { KerbcastClient, type CommandTrackEvent } 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 { crossesEvent, useCommandDisplayUt, type CommandDisplayUt } from "./useCommandDisplayUt";
+import { useDisplayedFrameUt } from "./useDisplayedFrameUt";
+
+async function connected() {
+  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");
+  });
+  sidecar.fireSettingsState({ throttleMainScreen: false, captureUt: 1000, timeWarpRate: 1 });
+  return { client, sidecar };
+}
+
+/** A video element whose frames the test presents by hand. */
+function fakeVideo() {
+  let pending: ((now: number, meta: object) => void) | null = null;
+  const video = {
+    requestVideoFrameCallback: (cb: (now: number, meta: object) => void) => {
+      pending = cb;
+      return 1;
+    },
+    cancelVideoFrameCallback: () => {
+      pending = null;
+    },
+  } as unknown as HTMLVideoElement;
+  const present = (rtpTimestamp?: number) =>
+    act(() => {
+      const cb = pending;
+      pending = null;
+      cb?.(0, rtpTimestamp === undefined ? {} : { rtpTimestamp });
+    });
+  return { video, present };
+}
+
+const event = (ut: number): CommandTrackEvent =>
+  ({ ut, occluded: true, sunlit: true, occluder: "", blank: "" }) as CommandTrackEvent;
+
+let last: CommandDisplayUt | null | undefined;
+function CommandProbe(props: {
+  override?: number;
+  events?: CommandTrackEvent[];
+  video: HTMLVideoElement | null;
+}) {
+  last = useCommandDisplayUt(true, props.override, props.events, 7, props.video);
+  return null;
+}
+
+afterEach(() => {
+  cleanup();
+  last = undefined;
+});
+
+describe("useCommandDisplayUt", () => {
+  it("is estimated from the clock until an exactly stamped frame is shown", async () => {
+    const { client, sidecar } = await connected();
+    const { video, present } = fakeVideo();
+    render(
+      <KerbcastProvider client={client}>
+        <CommandProbe video={video} />
+      </KerbcastProvider>,
+    );
+    expect(last?.source).toBe("estimated");
+
+    sidecar.fireFrameStamp({ flightId: 7, rtpTimestamp: 4500, captureUt: 999.8, captureEpoch: 0 });
+    present(4500);
+    expect(last).toEqual({ ut: 999.8, source: "exact" });
+
+    /* An unstamped frame falls back to the clock, and says so. */
+    present(9000);
+    expect(last?.source).toBe("estimated");
+  });
+
+  it("re-renders when an exact frame steps across an event", async () => {
+    const { client, sidecar } = await connected();
+    const { video, present } = fakeVideo();
+    render(
+      <KerbcastProvider client={client}>
+        <CommandProbe video={video} events={[event(999.9)]} />
+      </KerbcastProvider>,
+    );
+    sidecar.fireFrameStamp({ flightId: 7, rtpTimestamp: 1, captureUt: 999.8, captureEpoch: 0 });
+    sidecar.fireFrameStamp({ flightId: 7, rtpTimestamp: 2, captureUt: 999.85, captureEpoch: 0 });
+    sidecar.fireFrameStamp({ flightId: 7, rtpTimestamp: 3, captureUt: 999.95, captureEpoch: 0 });
+    present(1);
+    expect(last?.ut).toBe(999.8);
+    /* Same side of the event: no re-render needed, the value shown holds. */
+    present(2);
+    expect(last?.ut).toBe(999.8);
+    present(3);
+    expect(last?.ut).toBe(999.95);
+  });
+
+  it("prefers a host override over the displayed frame", async () => {
+    const { client, sidecar } = await connected();
+    const { video, present } = fakeVideo();
+    render(
+      <KerbcastProvider client={client}>
+        <CommandProbe video={video} override={990} />
+      </KerbcastProvider>,
+    );
+    sidecar.fireFrameStamp({ flightId: 7, rtpTimestamp: 1, captureUt: 999.8, captureEpoch: 0 });
+    present(1);
+    expect(last).toEqual({ ut: 990, source: "override" });
+  });
+});
+
+describe("crossesEvent", () => {
+  it("counts an event the display moves onto or past, in either direction", () => {
+    const events = [event(10)];
+    expect(crossesEvent(events, 9, 10)).toBe(true);
+    expect(crossesEvent(events, 11, 9)).toBe(true);
+    expect(crossesEvent(events, 10, 11)).toBe(false);
+    expect(crossesEvent(undefined, 0, 100)).toBe(false);
+  });
+});
+
+describe("useDisplayedFrameUt", () => {
+  let frame: ReturnType<typeof useDisplayedFrameUt> | undefined;
+  function FrameProbe({ video }: { video: HTMLVideoElement }) {
+    frame = useDisplayedFrameUt(7, video);
+    return null;
+  }
+
+  it("reports every presented frame with its source", async () => {
+    const { client, sidecar } = await connected();
+    const { video, present } = fakeVideo();
+    render(
+      <KerbcastProvider client={client}>
+        <FrameProbe video={video} />
+      </KerbcastProvider>,
+    );
+    expect(frame).toBeNull();
+    sidecar.fireFrameStamp({ flightId: 7, rtpTimestamp: 77, captureUt: 999.5, captureEpoch: 4 });
+    present(77);
+    expect(frame).toMatchObject({ ut: 999.5, epoch: 4, source: "exact", rtpTimestamp: 77 });
+    /* Unstamped: bounded by the last exactly identified frame. */
+    present(78);
+    expect(frame).toMatchObject({ ut: 999.5, source: "estimated", rtpTimestamp: 77 });
+  });
+});

package/src/hooks/useCommandDisplayUt.ts

@@ -0,0 +1,135 @@
+import { useEffect, useReducer, useRef } from "react";
+import {
+  extrapolateCaptureUt,
+  type DisplayedFrameUt,
+  type FrameUtSource,
+  type CommandTrackEvent,
+} from "@ksp-gonogo/kerbcast";
+import { useKerbcastClient } from "../context";
+import { nowMs } from "../timing";
+
+export { MAX_UT_EXTRAPOLATION_MS, extrapolateCaptureUt } from "@ksp-gonogo/kerbcast";
+
+const TICK_MS = 500;
+
+/** Real milliseconds until the first event after `displayUt`, or `null` when none is ahead. */
+export function msUntilNextEvent(
+  events: readonly CommandTrackEvent[] | undefined,
+  displayUt: number,
+  warpRate: number,
+): number | null {
+  if (!events?.length || !(warpRate > 0)) return null;
+  let next = Infinity;
+  for (const e of events) if (e.ut > displayUt && e.ut < next) next = e.ut;
+  return next === Infinity ? null : ((next - displayUt) / warpRate) * 1000;
+}
+
+/** Whether an event's UT lies in `(from, to]`, i.e. moving the display from `from` to `to` changes the state in force. */
+export function crossesEvent(
+  events: readonly CommandTrackEvent[] | undefined,
+  from: number,
+  to: number,
+): boolean {
+  if (!events?.length) return false;
+  const lo = Math.min(from, to);
+  const hi = Math.max(from, to);
+  return events.some((e) => e.ut > lo && e.ut <= hi);
+}
+
+/** The UT a command feed is showing and where it came from; `"override"` is a host's own value. */
+export interface CommandDisplayUt {
+  ut: number;
+  source: FrameUtSource | "override";
+}
+
+/**
+ * The UT a command feed is showing. An explicit `override` (a host with its
+ * own delayed playout) wins. Otherwise, given the feed's `flightId` and the
+ * `video` element showing it, the presented frame's own capture stamp is
+ * used (`source: "exact"`); without one, the client's capture clock is
+ * interpolated to now (`"estimated"`). Re-evaluated twice a second while
+ * `enabled` so readout ages keep counting, and again the moment the
+ * displayed UT reaches the next of `events`, so a state change lands on its
+ * frame rather than on the next tick. `null` when nothing is known.
+ */
+export function useCommandDisplayUt(
+  enabled: boolean,
+  override?: number,
+  events?: readonly CommandTrackEvent[],
+  flightId?: number | null,
+  video?: HTMLVideoElement | null,
+): CommandDisplayUt | null {
+  const client = useKerbcastClient();
+  const sample = useRef<{ captureUt: number | null; warpRate: number; at: number }>({
+    captureUt: client.clock.captureUt,
+    warpRate: client.clock.warpRate,
+    at: nowMs(),
+  });
+  const frame = useRef<DisplayedFrameUt | null>(null);
+  const shown = useRef<CommandDisplayUt | null>(null);
+  const eventsRef = useRef(events);
+  eventsRef.current = events;
+  const [, tick] = useReducer((c: number) => c + 1, 0);
+
+  useEffect(() => {
+    const take = () => {
+      const { captureUt, warpRate } = client.clock;
+      sample.current = { captureUt, warpRate, at: nowMs() };
+    };
+    take();
+    return client.on("settings-change", take);
+  }, [client]);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const interval = setInterval(tick, TICK_MS);
+    return () => clearInterval(interval);
+  }, [enabled]);
+
+  /* Exact frames re-render only when they change what is drawn: a switch of
+     source, or a step across an event. Ages catch up on the tick. */
+  const overriding = override !== undefined;
+  useEffect(() => {
+    frame.current = null;
+    if (!enabled || overriding || flightId == null || !video) return;
+    return client.watchDisplayedFrames(flightId, video, (f) => {
+      frame.current = f.source === "exact" ? f : null;
+      const prev = shown.current;
+      if (!frame.current) {
+        if (prev?.source === "exact") tick();
+        return;
+      }
+      if (
+        prev === null ||
+        prev.source !== "exact" ||
+        crossesEvent(eventsRef.current, prev.ut, f.ut)
+      ) {
+        tick();
+      }
+    });
+  }, [client, enabled, overriding, flightId, video]);
+
+  const { captureUt, warpRate, at } = sample.current;
+  const exact = frame.current;
+  const displayUt: CommandDisplayUt | null = overriding
+    ? { ut: override, source: "override" }
+    : exact
+      ? { ut: exact.ut, source: "exact" }
+      : captureUt === null
+        ? null
+        : { ut: extrapolateCaptureUt(captureUt, warpRate, at, nowMs()), source: "estimated" };
+  shown.current = displayUt;
+  const untilEdge =
+    enabled && displayUt?.source === "estimated"
+      ? msUntilNextEvent(events, displayUt.ut, warpRate)
+      : null;
+
+  /* Edges further out than a tick are caught by a later render's timer. */
+  useEffect(() => {
+    if (untilEdge === null || untilEdge > TICK_MS) return;
+    const timer = setTimeout(tick, Math.max(0, untilEdge) + 1);
+    return () => clearTimeout(timer);
+  });
+
+  return displayUt;
+}

package/src/hooks/useDisplayedFrameUt.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+import type { DisplayedFrameUt } from "@ksp-gonogo/kerbcast";
+import { useKerbcastClient } from "../context";
+
+/**
+ * Mission time of the frame `video` is showing for camera `flightId`,
+ * updated on every presented frame (so the calling component re-renders at
+ * the video's frame rate). `source` says whether the UT is the frame's own
+ * capture stamp (`"exact"`) or the capture clock extrapolated
+ * (`"estimated"`). `null` until the first frame with a known UT, and while
+ * either argument is null. For per-frame work without re-rendering, use
+ * `client.watchDisplayedFrames` directly.
+ */
+export function useDisplayedFrameUt(
+  flightId: number | null,
+  video: HTMLVideoElement | null,
+): DisplayedFrameUt | null {
+  const client = useKerbcastClient();
+  const [frame, setFrame] = useState<DisplayedFrameUt | null>(null);
+  useEffect(() => {
+    setFrame(null);
+    if (flightId === null || !video) return;
+    return client.watchDisplayedFrames(flightId, video, setFrame);
+  }, [client, flightId, video]);
+  return frame;
+}

package/src/hooks/useReportDisplaySize.test.tsx

@@ -11,7 +11,7 @@ import { useRef } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { KerbcastProvider, type KerbcastDisplaySizes } from "../context";
-import { useReportDisplaySize } from "./useReportDisplaySize";
+import { displayReportSize, useReportDisplaySize } from "./useReportDisplaySize";
 
 // A controllable ResizeObserver: captures the callback so a test can fire a
 // resize with a chosen contentRect.
@@ -89,9 +89,15 @@ describe("useReportDisplaySize", () => {
         <Harness flightId={7} />
       </KerbcastProvider>,
     );
-    // 40x30 -> ceil to a 16-multiple = 48x32, reported without advancing timers.
+    // 40x30 -> width ceiled to a 16-multiple (48), height at the box's 4:3 (36), reported without advancing timers.
     fireResize(40, 30);
-    expect(reports).toEqual([{ flightId: 7, id: expect.any(String), w: 48, h: 32 }]);
+    expect(reports).toEqual([{ flightId: 7, id: expect.any(String), w: 48, h: 36 }]);
+  });
+
+  it("keeps the box's aspect so the frame fills it", () => {
+    expect(displayReportSize(441, 246)).toEqual({ width: 448, height: 250 });
+    expect(displayReportSize(372, 208)).toEqual({ width: 384, height: 214 });
+    expect(displayReportSize(1024, 576)).toEqual({ width: 1024, height: 576 });
   });
 
   it("reports a square (min edge) when square is set", () => {
@@ -181,6 +187,6 @@ describe("useReportDisplaySize", () => {
     expect(resizeCallback).toBeUndefined();
     rerender(view(true));
     fireResize(40, 30);
-    expect(reports).toEqual([{ flightId: 7, id: expect.any(String), w: 48, h: 32 }]);
+    expect(reports).toEqual([{ flightId: 7, id: expect.any(String), w: 48, h: 36 }]);
   });
 });