@ksp-gonogo/kerbcast-react 1.11.1 → 1.12.0-rc.2

package/src/CameraFeed.test.tsx

@@ -23,6 +23,7 @@
  */
 
 import {
+  AnchorKind,
   CameraKind,
   CommandTargetEligibility,
   KerbcastClient,
@@ -30,10 +31,12 @@ import {
   TrackMode,
 } from "@ksp-gonogo/kerbcast";
 import type {
+  Anchor,
   CameraLifecycle,
   ClientMessage,
   CommandCentreInfo,
   CommandTrackState,
+  DisplayedFrameUt,
 } from "@ksp-gonogo/kerbcast";
 import { type MockCameraInit, MockSidecar } from "@ksp-gonogo/kerbcast/testing";
 import {
@@ -995,6 +998,107 @@ describe("CameraFeed - stall presentation (showStatic)", () => {
     }
   });
 
+  it("data-kc-signal follows a feed into and out of a stall without remounting its video", async () => {
+    const env = installStallEnv();
+    try {
+      const { client, sidecar } = await buildConnectedSource();
+      const { container } = renderFeed(client, { flightId: 42 });
+      const signal = () => container.querySelector("[data-kc-signal]")?.getAttribute("data-kc-signal");
+      expect(signal()).toBe("none");
+
+      await act(async () => {
+        sidecar.deliverTrack(sidecar.slotMidFor(42) as string, {} as MediaStreamTrack);
+      });
+      env.setNow(1000);
+      await act(async () => {
+        env.fireFrame();
+        env.drawOnce();
+      });
+      expect(signal()).toBe("live");
+      const video = container.querySelector("video");
+
+      env.setNow(1601);
+      await act(async () => {
+        env.drawOnce();
+      });
+      expect(signal()).toBe("stalled");
+      expect(container.querySelector("video")).toBe(video);
+
+      await act(async () => {
+        env.fireFrame();
+        env.drawOnce();
+      });
+      expect(signal()).toBe("live");
+      expect(container.querySelector("video")).toBe(video);
+    } finally {
+      env.restore();
+    }
+  });
+
+  it("data-kc-signal reads stalled for a source that never delivers a frame", async () => {
+    const env = installStallEnv();
+    try {
+      const { client, sidecar } = await buildConnectedSource();
+      const { container } = renderFeed(client, { flightId: 42 });
+      const signal = () => container.querySelector("[data-kc-signal]")?.getAttribute("data-kc-signal");
+
+      env.setNow(1000);
+      await act(async () => {
+        sidecar.deliverTrack(sidecar.slotMidFor(42) as string, {} as MediaStreamTrack);
+        env.drawOnce();
+      });
+      env.setNow(1601);
+      await act(async () => {
+        env.drawOnce();
+      });
+      expect(signal()).toBe("stalled");
+    } finally {
+      env.restore();
+    }
+  });
+
+  it("data-kc-signal reads stalled after a camera switch until the new camera's first frame", async () => {
+    const env = installStallEnv();
+    try {
+      const { client, sidecar } = await buildConnectedSource([
+        makeCamera({ flightId: 42, cameraName: "Starboard Cam" }),
+        makeCamera({ flightId: 43, cameraName: "Port Cam" }),
+      ]);
+      const view = renderFeed(client, { flightId: 42 });
+      const signal = () => view.container.querySelector("[data-kc-signal]")?.getAttribute("data-kc-signal");
+      await act(async () => {
+        sidecar.deliverTrack(sidecar.slotMidFor(42) as string, {} as MediaStreamTrack);
+      });
+      env.setNow(1000);
+      await act(async () => {
+        env.fireFrame();
+        env.drawOnce();
+      });
+      expect(signal()).toBe("live");
+
+      /* The freed slot passes straight to the new camera, so there is a
+         source at once but no frame of it yet. */
+      view.rerender(
+        <KerbcastProvider client={client}>
+          <CameraFeed flightId={43} />
+        </KerbcastProvider>,
+      );
+      env.setNow(1601);
+      await act(async () => {
+        env.drawOnce();
+      });
+      expect(signal()).toBe("stalled");
+
+      await act(async () => {
+        env.fireFrame();
+        env.drawOnce();
+      });
+      expect(signal()).toBe("live");
+    } finally {
+      env.restore();
+    }
+  });
+
   it("SIGNAL LOST supersedes the stale badge when the camera is destroyed", async () => {
     const env = installStallEnv();
     try {
@@ -2747,9 +2851,54 @@ describe("CameraFeed - recording locks source and close", () => {
 // Command camera target brackets
 // ---------------------------------------------------------------------------
 
+
+describe("CameraFeed: no video slot", () => {
+  const NOTICE = /Not streaming: too many feeds are open/;
+  const ids = [1, 2, 3, 4, 5];
+  const feeds = (client: KerbcastClient, shown: number[], label?: string | null) => (
+    <KerbcastProvider client={client}>
+      {shown.map((id) => (
+        <CameraFeed
+          key={id}
+          flightId={id}
+          {...(label !== undefined ? { noSlotLabel: label } : {})}
+        />
+      ))}
+    </KerbcastProvider>
+  );
+
+  it("says so on the feed that found every slot taken, until another feed closes", async () => {
+    const { client } = await buildConnectedSource(
+      ids.map((id) => makeCamera({ flightId: id, cameraName: `Cam ${id}` })),
+    );
+    const view = render(feeds(client, ids));
+    await act(async () => {});
+    expect(screen.getAllByText(NOTICE)).toHaveLength(1);
+    expect(client.camera(5).waitingForSlot).toBe(true);
+
+    view.rerender(feeds(client, [2, 3, 4, 5]));
+    await act(async () => {});
+    expect(screen.queryByText(NOTICE)).toBeNull();
+    expect(client.camera(5).waitingForSlot).toBe(false);
+  });
+
+  it("takes a host's own words, or none", async () => {
+    const { client } = await buildConnectedSource(
+      ids.map((id) => makeCamera({ flightId: id, cameraName: `Cam ${id}` })),
+    );
+    const view = render(feeds(client, ids, "No room"));
+    await act(async () => {});
+    expect(screen.getByText("No room")).toBeTruthy();
+    view.rerender(feeds(client, ids, null));
+    expect(screen.queryByText("No room")).toBeNull();
+    expect(screen.queryByText(NOTICE)).toBeNull();
+  });
+});
+
 describe("CameraFeed - command camera target brackets", () => {
   const STATION: CommandCentreInfo = {
     stationId: "ground:KSC",
+    siteKey: "KSC",
     nodeName: "KSC",
     displayName: "Kerbal Space Center",
     body: "Kerbin",
@@ -2809,7 +2958,7 @@ describe("CameraFeed - command camera target brackets", () => {
     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");
+    expect(localStorage.getItem("kerbcast:target-brackets:KSC")).toBe("0");
     first.unmount();
 
     renderFeed(client, { flightId: 301 });
@@ -2819,22 +2968,87 @@ describe("CameraFeed - command camera target brackets", () => {
     ).toBe("false");
   });
 
-  it("still labels a blanked feed with the brackets toggled off", async () => {
+  it("carries a brackets-off choice saved under the 1.11 key over to the site key", async () => {
     localStorage.setItem("kerbcast:target-brackets:ground:KSC", "0");
+    const { client } = await buildConnectedSource([commandCamera()]);
+    renderFeed(client, { flightId: 301 });
+    expect(
+      screen.getByRole("button", { name: "Target brackets" }).getAttribute("aria-pressed"),
+    ).toBe("false");
+    expect(localStorage.getItem("kerbcast:target-brackets:KSC")).toBe("0");
+    expect(localStorage.getItem("kerbcast:target-brackets:ground:KSC")).toBeNull();
+  });
+
+  it("still labels a blanked feed with the brackets toggled off", async () => {
+    localStorage.setItem("kerbcast:target-brackets: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" }) });
+      sidecar.updateCamera(301, { commandTrack: commandTrack({ blank: "Waiting for mission control" }) });
     });
     expect(screen.getByRole("status", { name: "Feed blanked" }).textContent).toBe(
-      "Waiting for gonogo",
+      "Waiting for mission control",
     );
   });
 
+  describe("waiting for a target", () => {
+    const waitingFrame = (waitingForTarget: boolean): DisplayedFrameUt => ({
+      flightId: 301,
+      ut: 1000,
+      epoch: 0,
+      source: "exact",
+      rtpTimestamp: 1,
+      presentedAt: 0,
+      command: {
+        hasFix: false,
+        frameHeightPx: 576,
+        framingFits: true,
+        occluded: false,
+        occluder: "",
+        sunlit: false,
+        subjectPersistentId: 0,
+        waitingForTarget,
+      },
+    });
+    const feed = (client: KerbcastClient, frame: DisplayedFrameUt, label?: string | null) => (
+      <KerbcastProvider client={client}>
+        <CameraFeed
+          flightId={301}
+          displayFrame={frame}
+          {...(label !== undefined ? { waitingForTargetLabel: label } : {})}
+        />
+      </KerbcastProvider>
+    );
+
+    it("says so while the frame does, and stops once the target arrives", async () => {
+      const { client } = await buildConnectedSource([commandCamera()]);
+      const view = render(feed(client, waitingFrame(true)));
+      expect(screen.getByText("Waiting for target")).toBeTruthy();
+      view.rerender(feed(client, waitingFrame(false)));
+      expect(screen.queryByText("Waiting for target")).toBeNull();
+    });
+
+    it("takes a host's own words, or none", async () => {
+      const { client } = await buildConnectedSource([commandCamera()]);
+      const view = render(feed(client, waitingFrame(true), "Acquiring"));
+      expect(screen.getByText("Acquiring")).toBeTruthy();
+      view.rerender(feed(client, waitingFrame(true), null));
+      expect(screen.queryByText("Acquiring")).toBeNull();
+      expect(screen.queryByText("Waiting for target")).toBeNull();
+    });
+
+    it("gives way to a blank", async () => {
+      const { client } = await buildConnectedSource([commandCamera()]);
+      const frame = waitingFrame(true);
+      render(feed(client, { ...frame, command: { ...frame.command!, blank: "Held" } }));
+      expect(screen.getByRole("status", { name: "Feed blanked" })).toBeTruthy();
+      expect(screen.queryByText("Waiting for target")).toBeNull();
+    });
+  });
+
   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 },
@@ -2873,6 +3087,46 @@ describe("CameraFeed - command camera target brackets", () => {
     expect(screen.getByText(/ · T\+1060$/)).toBeTruthy();
   });
 
+  it("gives the brackets the subject's anchor from the displayed frame's stamp", async () => {
+    const { client, sidecar } = await buildConnectedSource([commandCamera()]);
+    const subjects: (string | undefined)[] = [];
+    renderFeed(client, {
+      flightId: 301,
+      targetBracketOverlay: {
+        render: (ctx) => {
+          subjects.push(ctx.subject ? `${ctx.subject.owner}/${ctx.subject.id}` : undefined);
+          return null;
+        },
+      },
+    });
+    await act(async () => {
+      sidecar.fireFrameStamp({
+        flightId: 301,
+        rtpTimestamp: 1,
+        captureUt: 1000,
+        captureEpoch: 0,
+        width: 1024,
+        height: 576,
+        anchors: [
+          {
+            id: "subject",
+            owner: "kerbcast",
+            x: 100,
+            y: 100,
+            inFrame: true,
+            behind: false,
+            distanceM: 11_507_905,
+            apparentRadiusPx: 4,
+            angleOffAxis: 3,
+            occluded: false,
+          },
+        ],
+      });
+    });
+    /* Without frame callbacks (jsdom) a stamp is taken as on screen once it is old enough. */
+    await waitFor(() => expect(subjects).toContain("kerbcast/subject"), { timeout: 2000 });
+  });
+
   describe("target picker", () => {
     const TARGETS: CommandCentreInfo = {
       ...STATION,
@@ -2993,7 +3247,7 @@ describe("CameraFeed - command camera target brackets", () => {
           kind: CameraKind.Command,
           cameraName: "KSC tracking",
           commandCentre: TARGETS,
-          commandTrack: commandTrack({ authority: { owner: "gonogo" } }),
+          commandTrack: commandTrack({ authority: { owner: "mission-control" } }),
         }),
       ]);
       const lockedView = renderFeed(locked.client, { flightId: 301 });
@@ -3013,3 +3267,430 @@ describe("CameraFeed - command camera target brackets", () => {
     expect(screen.queryByRole("button", { name: "Target brackets" })).toBeNull();
   });
 });
+
+describe("CameraFeed - anchors", () => {
+  const port = { id: "port", kind: AnchorKind.Part, vessel: 11, part: 22, orientation: true };
+
+  function Feed({ client, flightId, anchors }: { client: KerbcastClient; flightId: number; anchors?: Anchor[] }) {
+    return (
+      <KerbcastProvider client={client}>
+        <CameraFeed flightId={flightId} anchors={anchors} />
+      </KerbcastProvider>
+    );
+  }
+
+  it("sets its anchors on the displayed camera and clears them when it moves or unmounts", async () => {
+    const { client, sidecar } = await buildConnectedSource([
+      makeCamera({ flightId: 42, cameraName: "Starboard Cam" }),
+      makeCamera({ flightId: 43, cameraName: "Port Cam" }),
+    ]);
+    const view = render(<Feed client={client} flightId={42} anchors={[port]} />);
+    await waitFor(() => expect(sidecar.anchorsFor(42)).toEqual([port]));
+
+    /* A new array with the same anchors is no change. */
+    const sent = () => sidecar.commands.filter((c) => c.type === "set-anchors").length;
+    const before = sent();
+    view.rerender(<Feed client={client} flightId={42} anchors={[{ ...port }]} />);
+    expect(sent()).toBe(before);
+
+    view.rerender(<Feed client={client} flightId={43} anchors={[port]} />);
+    await waitFor(() => expect(sidecar.anchorsFor(43)).toEqual([port]));
+    expect(sidecar.anchorsFor(42)).toEqual([]);
+
+    view.unmount();
+    await waitFor(() => expect(sidecar.anchorsFor(43)).toEqual([]));
+  });
+
+  it("gives two feeds on one camera both their anchors, until each unmounts", async () => {
+    const { client, sidecar } = await buildConnectedSource([
+      makeCamera({ flightId: 42, cameraName: "Starboard Cam" }),
+    ]);
+    const dock = { id: "dock", kind: AnchorKind.Vessel, vessel: 12 };
+    const first = render(<Feed client={client} flightId={42} anchors={[port]} />);
+    const second = render(<Feed client={client} flightId={42} anchors={[port, dock]} />);
+    await waitFor(() => expect(sidecar.anchorsFor(42)).toEqual([port, dock]));
+
+    first.unmount();
+    await waitFor(() => expect(sidecar.anchorsFor(42)).toEqual([port, dock]));
+    second.rerender(<Feed client={client} flightId={42} anchors={[dock]} />);
+    await waitFor(() => expect(sidecar.anchorsFor(42)).toEqual([dock]));
+    second.unmount();
+    await waitFor(() => expect(sidecar.anchorsFor(42)).toEqual([]));
+  });
+
+  it("warns when two feeds on one camera use one anchor id for different things", async () => {
+    const { client, sidecar } = await buildConnectedSource([makeCamera({ flightId: 42 })]);
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const other = { ...port, part: 23 };
+    render(<Feed client={client} flightId={42} anchors={[port]} />);
+    render(<Feed client={client} flightId={42} anchors={[port]} />);
+    expect(warn).not.toHaveBeenCalled();
+    render(<Feed client={client} flightId={42} anchors={[other]} />);
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining("id port"));
+    await waitFor(() => expect(sidecar.anchorsFor(42)).toEqual([port]));
+    warn.mockRestore();
+  });
+});
+
+describe("CameraFeed - fullscreen exit without a mouse", () => {
+  type FsDoc = Document & {
+    fullscreenEnabled?: boolean;
+    fullscreenElement?: Element | null;
+    exitFullscreen?: () => Promise<void>;
+  };
+  const fsDoc = document as FsDoc;
+  let fsElement: Element | null = null;
+  const exitSpy = vi.fn(async () => {
+    fsElement = null;
+    document.dispatchEvent(new Event("fullscreenchange"));
+  });
+
+  beforeEach(() => {
+    fsElement = null;
+    exitSpy.mockClear();
+    Object.defineProperty(fsDoc, "fullscreenEnabled", { value: true, configurable: true });
+    Object.defineProperty(fsDoc, "fullscreenElement", {
+      get: () => fsElement,
+      configurable: true,
+    });
+    Object.defineProperty(fsDoc, "exitFullscreen", { value: exitSpy, configurable: true });
+    Object.defineProperty(HTMLElement.prototype, "requestFullscreen", {
+      value: async function (this: HTMLElement) {
+        fsElement = this;
+        document.dispatchEvent(new Event("fullscreenchange"));
+      },
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    delete (fsDoc as { fullscreenEnabled?: boolean }).fullscreenEnabled;
+    delete (fsDoc as { fullscreenElement?: Element | null }).fullscreenElement;
+    delete (fsDoc as { exitFullscreen?: unknown }).exitFullscreen;
+    delete (HTMLElement.prototype as { requestFullscreen?: unknown }).requestFullscreen;
+    delete (document as { pictureInPictureEnabled?: boolean }).pictureInPictureEnabled;
+  });
+
+  async function enterFullscreen() {
+    const pipDoc = document as Document & { pictureInPictureEnabled?: boolean };
+    Object.defineProperty(pipDoc, "pictureInPictureEnabled", { value: true, configurable: true });
+    const { client } = await buildConnectedSource([
+      makeCamera({
+        flightId: 42,
+        cameraName: "Launchpad Cam",
+        supportsPan: true,
+        supportsZoom: true,
+        panPitchMin: -90,
+        panPitchMax: 90,
+      }),
+    ]);
+    /* Crowded enough (REC + tracking + PiP + fullscreen) that fullscreen
+       starts out in the ⋮ overflow. */
+    const utils = renderFeed(client, {
+      flightId: 42,
+      enableRecording: true,
+      enableTracking: true,
+      enableFullscreen: true,
+      enablePictureInPicture: true,
+    });
+    fireEvent.click(utils.getByLabelText("More actions"));
+    await act(async () => {
+      fireEvent.click(utils.getByLabelText("Enter fullscreen"));
+    });
+    return utils;
+  }
+
+  it("keeps the exit inline and marked as the always-visible control", async () => {
+    const { getByLabelText } = await enterFullscreen();
+    const exit = getByLabelText("Exit fullscreen");
+    expect(exit.hasAttribute("data-kc-fullscreen-exit")).toBe(true);
+    expect(exit.closest("[role=menu]")).toBeNull();
+    expect(exit.closest("[data-fullscreen]")).toBe(fsElement);
+    expect(exit.tabIndex).toBe(0);
+    /* The ⋮ menu hands focus back to its trigger, which reveals the whole
+       bar by focus-within; at rest only the exit shows. */
+    (document.activeElement as HTMLElement | null)?.blur();
+    expect(getComputedStyle(exit).opacity).not.toBe("0");
+    expect(getComputedStyle(exit).pointerEvents).not.toBe("none");
+    expect(getComputedStyle(getByLabelText("Auto-track")).opacity).toBe("0");
+
+    await act(async () => {
+      fireEvent.click(exit);
+    });
+    expect(exitSpy).toHaveBeenCalledTimes(1);
+    expect(document.querySelector("[data-kc-fullscreen-exit]")).toBeNull();
+    expect(document.querySelector("[data-fullscreen]")).toBeNull();
+  });
+
+  it("entering fullscreen adds the exit without moving the rest of the bar", async () => {
+    const barLabels = () => {
+      const row = screen.getByLabelText("More actions").parentElement as HTMLElement;
+      return Array.from(row.children).map((c) => c.getAttribute("aria-label") ?? "steps");
+    };
+    const pipDoc = document as Document & { pictureInPictureEnabled?: boolean };
+    Object.defineProperty(pipDoc, "pictureInPictureEnabled", { value: true, configurable: true });
+    const { client } = await buildConnectedSource([
+      makeCamera({
+        flightId: 42,
+        cameraName: "Launchpad Cam",
+        supportsPan: true,
+        supportsZoom: true,
+        panPitchMin: -90,
+        panPitchMax: 90,
+      }),
+    ]);
+    const { getByLabelText } = renderFeed(client, {
+      flightId: 42,
+      enableRecording: true,
+      enableTracking: true,
+      enableFullscreen: true,
+      enablePictureInPicture: true,
+      trailingActions: [{ id: "x", label: "Close", icon: null, onClick: () => {} }],
+    });
+    const before = barLabels();
+    expect(before).toContain("More actions");
+    expect(before).not.toContain("Picture in picture");
+
+    fireEvent.click(getByLabelText("More actions"));
+    await act(async () => {
+      fireEvent.click(getByLabelText("Enter fullscreen"));
+    });
+    const after = barLabels();
+    expect(after.filter((l) => l !== "Exit fullscreen")).toEqual(before);
+    expect(after.indexOf("Exit fullscreen")).toBe(after.indexOf("More actions") - 1);
+  });
+
+  it("leaves an Escape another handler already consumed alone", async () => {
+    await enterFullscreen();
+    const consumed = new KeyboardEvent("keydown", { key: "Escape", cancelable: true });
+    consumed.preventDefault();
+    await act(async () => {
+      document.dispatchEvent(consumed);
+    });
+    expect(exitSpy).not.toHaveBeenCalled();
+  });
+
+  it("a tap on the video reveals the rest of the bar", async () => {
+    const { getByLabelText } = await enterFullscreen();
+    (document.activeElement as HTMLElement | null)?.blur();
+    expect(getComputedStyle(getByLabelText("Auto-track")).opacity).toBe("0");
+    const video = document.querySelector("video") as HTMLVideoElement;
+    fireEvent.click(video);
+    expect(getComputedStyle(getByLabelText("Auto-track")).opacity).not.toBe("0");
+  });
+
+  it("Escape leaves fullscreen", async () => {
+    const { queryByLabelText } = await enterFullscreen();
+    await act(async () => {
+      fireEvent.keyDown(document, { key: "Escape" });
+    });
+    expect(exitSpy).toHaveBeenCalledTimes(1);
+    expect(queryByLabelText("Exit fullscreen")).toBeNull();
+  });
+});
+
+describe("CameraFeed - video source on camera switch", () => {
+  const TWO_CAMERAS = [
+    makeCamera({ flightId: 42, cameraName: "Starboard Cam" }),
+    makeCamera({ flightId: 43, cameraName: "Nose Cam" }),
+  ];
+
+  it("clears the previous frame when the new camera has no stream yet", async () => {
+    const { client } = await buildConnectedSource(TWO_CAMERAS);
+    const sentinel = {} as MediaStream;
+    const useCustom: CameraStreamHook = (id) => (id === 42 ? sentinel : null);
+    const view = (flightId: number) => (
+      <KerbcastProvider client={client}>
+        <CameraFeed flightId={flightId} useStream={useCustom} />
+      </KerbcastProvider>
+    );
+    const { rerender } = render(view(42));
+    const video = document.querySelector("video") as HTMLVideoElement;
+    expect(video.srcObject).toBe(sentinel);
+
+    rerender(view(43));
+    expect(document.querySelector("video")).toBe(video);
+    expect(video.srcObject).toBeNull();
+  });
+
+  it("keeps the element bound when a rebind wraps the same track in a new stream", async () => {
+    const { client } = await buildConnectedSource(TWO_CAMERAS);
+    const track = { id: "track-1", kind: "video" } as MediaStreamTrack;
+    const wrap = () =>
+      ({ getVideoTracks: () => [track] }) as unknown as MediaStream;
+    const first = wrap();
+    const second = wrap();
+    const view = (stream: MediaStream) => {
+      const useFixed: CameraStreamHook = () => stream;
+      return (
+        <KerbcastProvider client={client}>
+          <CameraFeed flightId={42} useStream={useFixed} />
+        </KerbcastProvider>
+      );
+    };
+    const { rerender } = render(view(first));
+    const video = document.querySelector("video") as HTMLVideoElement;
+    expect(video.srcObject).toBe(first);
+
+    rerender(view(second));
+    expect(video.srcObject).toBe(first);
+
+    const other = { getVideoTracks: () => [{ id: "track-2" }] } as unknown as MediaStream;
+    rerender(view(other));
+    expect(video.srcObject).toBe(other);
+  });
+
+  it("never reassigns a live stream on a re-render", async () => {
+    const { client } = await buildConnectedSource(TWO_CAMERAS);
+    const sentinel = {} as MediaStream;
+    const useCustom: CameraStreamHook = () => sentinel;
+    const view = (debug: boolean) => (
+      <KerbcastProvider client={client}>
+        <CameraFeed flightId={42} useStream={useCustom} showDebugInfo={debug} />
+      </KerbcastProvider>
+    );
+    const { rerender } = render(view(false));
+    const video = document.querySelector("video") as HTMLVideoElement;
+    expect(video.srcObject).toBe(sentinel);
+
+    let current: MediaProvider | null = sentinel;
+    const sets: (MediaProvider | null)[] = [];
+    Object.defineProperty(video, "srcObject", {
+      get: () => current,
+      set: (v: MediaProvider | null) => {
+        sets.push(v);
+        current = v;
+      },
+      configurable: true,
+    });
+    rerender(view(true));
+    rerender(view(false));
+    expect(sets).toEqual([]);
+    expect(video.srcObject).toBe(sentinel);
+  });
+});
+
+describe("CameraFeed - menus in fullscreen", () => {
+  type FsDoc = Document & {
+    fullscreenEnabled?: boolean;
+    fullscreenElement?: Element | null;
+    pictureInPictureEnabled?: boolean;
+  };
+  const fsDoc = document as FsDoc;
+  let fsElement: Element | null = null;
+
+  beforeEach(() => {
+    fsElement = null;
+    Object.defineProperty(fsDoc, "fullscreenEnabled", { value: true, configurable: true });
+    Object.defineProperty(fsDoc, "pictureInPictureEnabled", { value: true, configurable: true });
+    Object.defineProperty(fsDoc, "fullscreenElement", {
+      get: () => fsElement,
+      configurable: true,
+    });
+    Object.defineProperty(HTMLElement.prototype, "requestFullscreen", {
+      value: async function (this: HTMLElement) {
+        fsElement = this;
+        document.dispatchEvent(new Event("fullscreenchange"));
+      },
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    delete (fsDoc as { fullscreenEnabled?: boolean }).fullscreenEnabled;
+    delete (fsDoc as { pictureInPictureEnabled?: boolean }).pictureInPictureEnabled;
+    delete (fsDoc as { fullscreenElement?: Element | null }).fullscreenElement;
+    delete (HTMLElement.prototype as { requestFullscreen?: unknown }).requestFullscreen;
+  });
+
+  it("opens the more actions menu inside the fullscreen feed on the first tap", async () => {
+    const { client } = await buildConnectedSource();
+    const { getByLabelText, getByRole } = renderFeed(client, {
+      flightId: 42,
+      enableFullscreen: true,
+      enablePictureInPicture: true,
+      actions: [
+        { id: "a", label: "Spotlight", icon: null, onClick: () => {} },
+        { id: "b", label: "Snapshot", icon: null, onClick: () => {} },
+      ],
+      trailingActions: [{ id: "x", label: "Close", icon: null, onClick: () => {} }],
+    });
+    /* Crowded enough that ⋮ stays even once fullscreen pins its exit inline. */
+    fireEvent.click(getByLabelText("More actions"));
+    await act(async () => {
+      fireEvent.click(getByLabelText("Enter fullscreen"));
+    });
+    expect(fsElement).not.toBeNull();
+
+    const trigger = getByLabelText("More actions");
+    fireEvent.pointerDown(trigger);
+    fireEvent.click(trigger);
+    const menu = getByRole("menu", { name: "More actions" });
+    expect(fsElement?.contains(menu)).toBe(true);
+
+    fireEvent.pointerDown(menu);
+    expect(getByRole("menu", { name: "More actions" })).toBe(menu);
+  });
+
+  async function openMenuInFullscreen() {
+    const { client } = await buildConnectedSource();
+    const utils = renderFeed(client, {
+      flightId: 42,
+      enableFullscreen: true,
+      enablePictureInPicture: true,
+      actions: [
+        { id: "a", label: "Spotlight", icon: null, onClick: () => {} },
+        { id: "b", label: "Snapshot", icon: null, onClick: () => {} },
+      ],
+    });
+    fireEvent.click(utils.getByLabelText("More actions"));
+    await act(async () => {
+      fireEvent.click(utils.getByLabelText("Enter fullscreen"));
+    });
+    fireEvent.click(utils.getByLabelText("More actions"));
+    expect(utils.getByRole("menu", { name: "More actions" })).toBeTruthy();
+    return utils;
+  }
+
+  it("Escape with a menu open closes the menu and stays fullscreen", async () => {
+    const exitSpy = vi.fn();
+    Object.defineProperty(fsDoc, "exitFullscreen", { value: exitSpy, configurable: true });
+    try {
+      const { queryByRole, getByLabelText, getByRole } = await openMenuInFullscreen();
+      await act(async () => {
+        fireEvent.keyDown(getByRole("button", { name: "More actions" }), { key: "Escape" });
+      });
+      expect(queryByRole("menu", { name: "More actions" })).toBeNull();
+      expect(exitSpy).not.toHaveBeenCalled();
+      expect(document.activeElement).toBe(getByLabelText("More actions"));
+    } finally {
+      delete (fsDoc as { exitFullscreen?: unknown }).exitFullscreen;
+    }
+  });
+
+  it("closes an open menu when fullscreen ends", async () => {
+    const { queryByRole, getByLabelText } = await openMenuInFullscreen();
+    await act(async () => {
+      fsElement = null;
+      document.dispatchEvent(new Event("fullscreenchange"));
+    });
+    expect(queryByRole("menu", { name: "More actions" })).toBeNull();
+    expect(document.activeElement).toBe(getByLabelText("More actions"));
+  });
+
+  it("still portals menus to the body when not fullscreen", async () => {
+    const { client } = await buildConnectedSource();
+    const { getByLabelText, getByRole } = renderFeed(client, {
+      flightId: 42,
+      enableFullscreen: true,
+      enablePictureInPicture: true,
+      actions: [
+        { id: "a", label: "Spotlight", icon: null, onClick: () => {} },
+        { id: "b", label: "Snapshot", icon: null, onClick: () => {} },
+      ],
+    });
+    fireEvent.click(getByLabelText("More actions"));
+    const menu = getByRole("menu", { name: "More actions" });
+    expect(menu.parentElement).toBe(document.body);
+  });
+});