diff --git a/js/app/components/provider/provider.tsx b/js/app/components/provider/provider.tsx
index 2c8a59972..211c8f690 100644
--- a/js/app/components/provider/provider.tsx
+++ b/js/app/components/provider/provider.tsx
@@ -1,4 +1,5 @@
 import { LinkingOptions } from "@react-navigation/native";
+import { VideoHostProvider } from "@streamplace/components/src/components/mobile-player/video-host";
 import React, { useEffect } from "react";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import SharedProvider from "./provider.shared";
@@ -20,7 +21,10 @@ export default function Provider({
   }, []);
   return (
     <SafeAreaProvider>
-      <SharedProvider linking={linking}>{children}</SharedProvider>
+      <SharedProvider linking={linking}>
+        {/* Owns players' <video> elements so a layout change doesn't reload them. */}
+        <VideoHostProvider>{children}</VideoHostProvider>
+      </SharedProvider>
     </SafeAreaProvider>
   );
 }
diff --git a/js/components/src/components/mobile-player/fullscreen.tsx b/js/components/src/components/mobile-player/fullscreen.tsx
index a977720ce..faeedda4f 100644
--- a/js/components/src/components/mobile-player/fullscreen.tsx
+++ b/js/components/src/components/mobile-player/fullscreen.tsx
@@ -13,6 +13,7 @@ import {
 import { View } from "../../components/ui";
 import { AudioOnlyOverlay } from "./ui/audio-only-overlay";
 import Video from "./video";
+import { HostedVideo } from "./video-host";
 import VideoRetry from "./video-retry";
 
 export function Fullscreen(props: {
@@ -123,12 +124,14 @@ export function Fullscreen(props: {
       ref={divRef}
       style={{ width: "100%", height: "100%", overflow: "hidden" }}
     >
-      <VideoRetry>
-        <Video
-          objectFit={props.objectFit}
-          pictureInPictureEnabled={props.pictureInPictureEnabled}
-        />
-      </VideoRetry>
+      <HostedVideo>
+        <VideoRetry>
+          <Video
+            objectFit={props.objectFit}
+            pictureInPictureEnabled={props.pictureInPictureEnabled}
+          />
+        </VideoRetry>
+      </HostedVideo>
       <AudioOnlyOverlay />
       <DanmuOverlay
         enabled={danmuEnabled}
diff --git a/js/components/src/components/mobile-player/video-host.tsx b/js/components/src/components/mobile-player/video-host.tsx
new file mode 100644
index 000000000..38e05e7f9
--- /dev/null
+++ b/js/components/src/components/mobile-player/video-host.tsx
@@ -0,0 +1,121 @@
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import { PlayerContext } from "../../player-store/context";
+import { PlayerStore, usePlayerContext } from "../../player-store/player-store";
+
+// A player's video (the <video> element and the hls.js or WebRTC session
+// feeding it) is rendered here, near the top of the app, instead of wherever
+// the layout puts the player. The layout renders a <HostedVideo> slot and the
+// video's DOM node is moved into it, so when a window resize moves the player
+// to another branch of the layout, the new slot picks up the same playing
+// video instead of loading it again.
+
+type Host = {
+  attach(store: PlayerStore, box: HTMLElement): void;
+  detach(store: PlayerStore, box: HTMLElement): void;
+  render(store: PlayerStore, content: ReactNode): void;
+};
+
+type Hosted = {
+  key: string;
+  container: HTMLDivElement;
+  release?: ReturnType<typeof setTimeout>;
+};
+
+const VideoHostContext = createContext<Host | null>(null);
+
+let nextKey = 0;
+
+export function VideoHostProvider({ children }: { children: ReactNode }) {
+  const parking = useRef<HTMLDivElement>(null);
+  const [hosted] = useState(() => new Map<PlayerStore, Hosted>());
+  const [contents, setContents] = useState<ReadonlyMap<PlayerStore, ReactNode>>(
+    () => new Map(),
+  );
+
+  const host = useMemo<Host>(
+    () => ({
+      attach(store, box) {
+        let h = hosted.get(store);
+        if (!h) {
+          const container = document.createElement("div");
+          container.style.width = "100%";
+          container.style.height = "100%";
+          h = { key: String(nextKey++), container };
+          hosted.set(store, h);
+        }
+        clearTimeout(h.release);
+        box.appendChild(h.container);
+      },
+      detach(store, box) {
+        const h = hosted.get(store);
+        if (!h || h.container.parentNode !== box) return;
+        // A <video> moved within the document keeps playing. A slot that
+        // remounted elsewhere attaches it again in the same commit, before
+        // this fires; otherwise the player is gone.
+        parking.current?.appendChild(h.container);
+        h.release = setTimeout(() => {
+          hosted.delete(store);
+          h.container.remove();
+          setContents((prev) => {
+            const next = new Map(prev);
+            next.delete(store);
+            return next;
+          });
+        });
+      },
+      render(store, content) {
+        setContents((prev) => new Map(prev).set(store, content));
+      },
+    }),
+    [hosted],
+  );
+
+  return (
+    <VideoHostContext.Provider value={host}>
+      {children}
+      <div ref={parking} style={{ display: "none" }} />
+      {[...contents].map(([store, content]) => {
+        const h = hosted.get(store);
+        return h && createPortal(content, h.container, h.key);
+      })}
+    </VideoHostContext.Provider>
+  );
+}
+
+// Shows the current player's video, rendered by the VideoHostProvider when
+// the app has one, or in place when it doesn't.
+export function HostedVideo({ children }: { children: ReactNode }) {
+  const host = useContext(VideoHostContext);
+  const players = usePlayerContext();
+  const store = players.players[Object.keys(players.players)[0]];
+  const box = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (!host) return;
+    const el = box.current!;
+    host.attach(store, el);
+    return () => host.detach(store, el);
+  }, [host, store]);
+
+  useLayoutEffect(() => {
+    // The host is above this player's PlayerProvider.
+    host?.render(
+      store,
+      <PlayerContext.Provider value={players}>
+        {children}
+      </PlayerContext.Provider>,
+    );
+  }, [host, store, players, children]);
+
+  if (!host) return <>{children}</>;
+  return <div ref={box} style={{ width: "100%", height: "100%" }} />;
+}
diff --git a/js/e2e-web/flows/stream.spec.ts b/js/e2e-web/flows/stream.spec.ts
index f9739f274..a287fb364 100644
--- a/js/e2e-web/flows/stream.spec.ts
+++ b/js/e2e-web/flows/stream.spec.ts
@@ -97,3 +97,52 @@ test("stream: portrait player exposes playback controls", async ({ page }) => {
     .toBe(false);
   await expect(page.getByLabel("Enter fullscreen")).toBeVisible();
 });
+
+// Crossing the desktop/mobile breakpoint moves the player to another branch
+// of the layout. The video has to survive that: same element, never re-sourced
+// ("emptied" fires when its src or srcObject is reset), still playing.
+test("stream: resizing the window keeps the same playing video", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1280, height: 720 });
+  await page.goto("/");
+
+  const card = page.getByTestId("home-stream-card").first();
+  await expect(card).toBeVisible({ timeout: 30_000 });
+  await card.click();
+
+  const video = page.locator("video").first();
+  await expect
+    .poll(() =>
+      video.evaluate((v: HTMLVideoElement) => !v.paused && v.readyState >= 2),
+    )
+    .toBe(true);
+  await video.evaluate((v: HTMLVideoElement) => {
+    const w = window as any;
+    w.__spVideo = v;
+    w.__spEmptied = 0;
+    v.addEventListener("emptied", () => w.__spEmptied++);
+  });
+
+  const videoWidth = () =>
+    page.evaluate(
+      () => document.querySelector("video")?.getBoundingClientRect().width,
+    );
+  for (const width of [900, 1280]) {
+    const oldWidth = await videoWidth();
+    await page.setViewportSize({ width, height: 720 });
+    // The layout has caught up once the video's box changes.
+    await expect.poll(videoWidth).not.toBe(oldWidth);
+    const state = await page.evaluate(() => {
+      const w = window as any;
+      const v = document.querySelector("video")!;
+      return { same: v === w.__spVideo, emptied: w.__spEmptied };
+    });
+    expect(state).toEqual({ same: true, emptied: 0 });
+    await expect(video).toBeVisible();
+    const before = await video.evaluate((v: HTMLVideoElement) => v.currentTime);
+    await expect
+      .poll(() => video.evaluate((v: HTMLVideoElement) => v.currentTime))
+      .toBeGreaterThan(before);
+  }
+});
-- 
knotmirror 0.0.1


From b4bd64fdb7bed5acad021eb0a283514a2d2c84f8 Mon Sep 17 00:00:00 2001
From: Eli Mallon <eli@iame.li>
Date: Tue, 13 Oct 2026 17:30:05 -0700
Subject: [PATCH 2/3] player: keep the playback session and stores with the
 hosted video

Player remounts with the layout even though the video now doesn't. Its
cleanup cleared the streamer's playback session, which changed the HLS
URL and restarted hls.js, so usePlaybackSession now runs next to the
video (inside the hosted subtree on web, in Fullscreen on native).

The hosted subtree also needs the livestream and video stores (the
webcam ingest reads the stream key from the livestream store), and a
remounted ingest Player no longer resets a live connection's state to
"new".

The resize e2e now compares the video's src/srcObject rather than
counting emptied events, and covers the streamer's own HLS playback.
---
 .../mobile-player/fullscreen.native.tsx       |  2 +
 .../components/mobile-player/fullscreen.tsx   |  9 +++
 .../mobile-player/playback-session.tsx        | 50 +++++++++++++
 .../src/components/mobile-player/player.tsx   | 52 ++------------
 .../components/mobile-player/video-host.tsx   | 14 +++-
 js/e2e-web/flows/stream.spec.ts               | 70 +++++++++++++------
 6 files changed, 127 insertions(+), 70 deletions(-)
 create mode 100644 js/components/src/components/mobile-player/playback-session.tsx

diff --git a/js/components/src/components/mobile-player/fullscreen.native.tsx b/js/components/src/components/mobile-player/fullscreen.native.tsx
index 78cbbd56b..a584cd3ee 100644
--- a/js/components/src/components/mobile-player/fullscreen.native.tsx
+++ b/js/components/src/components/mobile-player/fullscreen.native.tsx
@@ -22,6 +22,7 @@ import {
   VideoRetry,
 } from "../..";
 import { colors, surfaces } from "../../lib/theme/tokens";
+import { usePlaybackSession } from "./playback-session";
 import { AudioOnlyOverlay } from "./ui/audio-only-overlay";
 import Video from "./video.native";
 
@@ -31,6 +32,7 @@ export function Fullscreen(props: {
   objectFit?: "contain" | "cover";
   pictureInPictureEnabled?: boolean;
 }) {
+  usePlaybackSession(props.src);
   const ref = useRef<VideoView>(null);
   const insets = useSafeAreaInsets();
   const dimensions = useWindowDimensions();
diff --git a/js/components/src/components/mobile-player/fullscreen.tsx b/js/components/src/components/mobile-player/fullscreen.tsx
index faeedda4f..b877ef0de 100644
--- a/js/components/src/components/mobile-player/fullscreen.tsx
+++ b/js/components/src/components/mobile-player/fullscreen.tsx
@@ -11,6 +11,7 @@ import {
   usePlayerStore,
 } from "../..";
 import { View } from "../../components/ui";
+import { usePlaybackSession } from "./playback-session";
 import { AudioOnlyOverlay } from "./ui/audio-only-overlay";
 import Video from "./video";
 import { HostedVideo } from "./video-host";
@@ -125,6 +126,7 @@ export function Fullscreen(props: {
       style={{ width: "100%", height: "100%", overflow: "hidden" }}
     >
       <HostedVideo>
+        <PlaybackSession src={props.src} />
         <VideoRetry>
           <Video
             objectFit={props.objectFit}
@@ -144,3 +146,10 @@ export function Fullscreen(props: {
     </View>
   );
 }
+
+// Hosted with the video, so a layout change that remounts this Fullscreen
+// doesn't drop the session and change the video's URL.
+function PlaybackSession(props: { src: string }) {
+  usePlaybackSession(props.src);
+  return null;
+}
diff --git a/js/components/src/components/mobile-player/playback-session.tsx b/js/components/src/components/mobile-player/playback-session.tsx
new file mode 100644
index 000000000..f78542e3f
--- /dev/null
+++ b/js/components/src/components/mobile-player/playback-session.tsx
@@ -0,0 +1,50 @@
+import { useEffect } from "react";
+import { place } from "streamplace";
+import { useLivestreamStoreOptional } from "../../livestream-store/use-store";
+import { usePlayerStore } from "../../player-store";
+import { useDID } from "../../streamplace-store";
+import { usePDSAgent } from "../../streamplace-store/xrpc";
+
+// Pre-live over HLS: the streamer previewing their own stream needs their
+// own playback session (an anonymous one opens published streams only).
+// It only opens the caller's own stream, so ask when this is that viewer,
+// and again before it expires. Fullscreen calls this next to the video so
+// every place that mounts a player (the live dashboard included) gets it,
+// and so the session lasts as long as the video whose URL carries it.
+export function usePlaybackSession(src: string) {
+  const myDid = useDID();
+  const streamerDid = useLivestreamStoreOptional((x) => x.profile?.did);
+  const agent = usePDSAgent();
+  const setPlaybackSession = usePlayerStore((x) => x.setPlaybackSession);
+  const isMine =
+    !!myDid && (src === myDid || (!!streamerDid && streamerDid === myDid));
+  useEffect(() => {
+    if (!isMine || !agent) {
+      setPlaybackSession(undefined);
+      return;
+    }
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const fetchToken = async () => {
+      try {
+        const res = await agent.client.call(
+          place.stream.playback.getPlaybackSession,
+        );
+        if (cancelled) return;
+        setPlaybackSession(res.sid);
+        const msLeft = new Date(res.expiresAt).getTime() - Date.now();
+        timer = setTimeout(fetchToken, Math.max(60_000, msLeft - 5 * 60_000));
+      } catch (e) {
+        if (cancelled) return;
+        console.warn("could not fetch a playback session", e);
+        timer = setTimeout(fetchToken, 60_000);
+      }
+    };
+    void fetchToken();
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+      setPlaybackSession(undefined);
+    };
+  }, [isMine, agent, setPlaybackSession]);
+}
diff --git a/js/components/src/components/mobile-player/player.tsx b/js/components/src/components/mobile-player/player.tsx
index 4cf49ddfd..f740924cc 100644
--- a/js/components/src/components/mobile-player/player.tsx
+++ b/js/components/src/components/mobile-player/player.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { place } from "streamplace";
 import { flex, h, layout, w, zIndex } from "../../lib/theme/atoms";
 import { useLivestreamStoreOptional } from "../../livestream-store/use-store";
 import {
@@ -8,12 +7,10 @@ import {
   usePlayerStore,
 } from "../../player-store";
 import {
-  useDID,
   useMuted,
   useSetMuted,
   useStreamplaceStore,
 } from "../../streamplace-store";
-import { usePDSAgent } from "../../streamplace-store/xrpc";
 import { Text, View } from "../ui";
 import { Fullscreen } from "./fullscreen";
 import { PlayerProps } from "./props";
@@ -59,49 +56,6 @@ export function Player(
     }
   }, [streamHasBFrames, streamForcesHLS, protocol, setStreamForcesHLS]);
 
-  // Pre-live over HLS: the streamer previewing their own stream needs their
-  // own playback session (an anonymous one opens published streams only).
-  // It only opens the caller's own stream, so ask when this is that viewer,
-  // and again before it expires. Lives here rather than in the app's
-  // wrapper so every place that mounts a player (the live dashboard
-  // included) gets it.
-  const myDid = useDID();
-  const streamerDid = useLivestreamStoreOptional((x) => x.profile?.did);
-  const agent = usePDSAgent();
-  const setPlaybackSession = usePlayerStore((x) => x.setPlaybackSession);
-  const isMine =
-    !!myDid &&
-    (props.src === myDid || (!!streamerDid && streamerDid === myDid));
-  useEffect(() => {
-    if (!isMine || !agent) {
-      setPlaybackSession(undefined);
-      return;
-    }
-    let cancelled = false;
-    let timer: ReturnType<typeof setTimeout> | null = null;
-    const fetchToken = async () => {
-      try {
-        const res = await agent.client.call(
-          place.stream.playback.getPlaybackSession,
-        );
-        if (cancelled) return;
-        setPlaybackSession(res.sid);
-        const msLeft = new Date(res.expiresAt).getTime() - Date.now();
-        timer = setTimeout(fetchToken, Math.max(60_000, msLeft - 5 * 60_000));
-      } catch (e) {
-        if (cancelled) return;
-        console.warn("could not fetch a playback session", e);
-        timer = setTimeout(fetchToken, 60_000);
-      }
-    };
-    void fetchToken();
-    return () => {
-      cancelled = true;
-      if (timer) clearTimeout(timer);
-      setPlaybackSession(undefined);
-    };
-  }, [isMine, agent, setPlaybackSession]);
-
   // if we set muted, set it and restore after
   useEffect(() => {
     let wasMuted: null | boolean = null;
@@ -135,8 +89,12 @@ export function Player(
   // Will call back every few seconds to send health updates
   usePlayerStatus();
 
+  // A Player remounting over a hosted video that's already ingesting keeps
+  // that connection, and its state.
+  const ingestState = usePlayerStore((x) => x.ingestConnectionState);
   useEffect(() => {
-    setIngest(props.ingest ? "new" : null);
+    if (!props.ingest) setIngest(null);
+    else if (ingestState === null) setIngest("new");
   }, []);
 
   useEffect(() => {
diff --git a/js/components/src/components/mobile-player/video-host.tsx b/js/components/src/components/mobile-player/video-host.tsx
index 38e05e7f9..27bc57f10 100644
--- a/js/components/src/components/mobile-player/video-host.tsx
+++ b/js/components/src/components/mobile-player/video-host.tsx
@@ -8,8 +8,10 @@ import {
   useState,
 } from "react";
 import { createPortal } from "react-dom";
+import { LivestreamContext } from "../../livestream-store/context";
 import { PlayerContext } from "../../player-store/context";
 import { PlayerStore, usePlayerContext } from "../../player-store/player-store";
+import { VideoContext } from "../../video-store/context";
 
 // A player's video (the <video> element and the hls.js or WebRTC session
 // feeding it) is rendered here, near the top of the app, instead of wherever
@@ -96,6 +98,8 @@ export function VideoHostProvider({ children }: { children: ReactNode }) {
 export function HostedVideo({ children }: { children: ReactNode }) {
   const host = useContext(VideoHostContext);
   const players = usePlayerContext();
+  const livestream = useContext(LivestreamContext);
+  const video = useContext(VideoContext);
   const store = players.players[Object.keys(players.players)[0]];
   const box = useRef<HTMLDivElement>(null);
 
@@ -107,14 +111,18 @@ export function HostedVideo({ children }: { children: ReactNode }) {
   }, [host, store]);
 
   useLayoutEffect(() => {
-    // The host is above this player's PlayerProvider.
+    // The host is above the screen's stores; pass their contexts along.
     host?.render(
       store,
       <PlayerContext.Provider value={players}>
-        {children}
+        <LivestreamContext.Provider value={livestream}>
+          <VideoContext.Provider value={video}>
+            {children}
+          </VideoContext.Provider>
+        </LivestreamContext.Provider>
       </PlayerContext.Provider>,
     );
-  }, [host, store, players, children]);
+  }, [host, store, players, livestream, video, children]);
 
   if (!host) return <>{children}</>;
   return <div ref={box} style={{ width: "100%", height: "100%" }} />;
diff --git a/js/e2e-web/flows/stream.spec.ts b/js/e2e-web/flows/stream.spec.ts
index a287fb364..e184cf7d2 100644
--- a/js/e2e-web/flows/stream.spec.ts
+++ b/js/e2e-web/flows/stream.spec.ts
@@ -1,4 +1,5 @@
-import { expect, test } from "@playwright/test";
+import { expect, test, type Page } from "@playwright/test";
+import { loginThroughPds } from "./login";
 
 // Mirror of .maestro/logged-out/stream.yaml: open the looping test stream from the home
 // feed and confirm playback context loads. The home feed card carries
@@ -99,18 +100,10 @@ test("stream: portrait player exposes playback controls", async ({ page }) => {
 });
 
 // Crossing the desktop/mobile breakpoint moves the player to another branch
-// of the layout. The video has to survive that: same element, never re-sourced
-// ("emptied" fires when its src or srcObject is reset), still playing.
-test("stream: resizing the window keeps the same playing video", async ({
-  page,
-}) => {
-  await page.setViewportSize({ width: 1280, height: 720 });
-  await page.goto("/");
-
-  const card = page.getByTestId("home-stream-card").first();
-  await expect(card).toBeVisible({ timeout: 30_000 });
-  await card.click();
-
+// of the layout. The video has to survive that: same element, still playing
+// what it was (a WebRTC srcObject, or a src, which hls.js sets to a new blob:
+// URL on the element or a <source> child each time it starts over).
+async function expectVideoSurvivesResize(page: Page) {
   const video = page.locator("video").first();
   await expect
     .poll(() =>
@@ -118,10 +111,8 @@ test("stream: resizing the window keeps the same playing video", async ({
     )
     .toBe(true);
   await video.evaluate((v: HTMLVideoElement) => {
-    const w = window as any;
-    w.__spVideo = v;
-    w.__spEmptied = 0;
-    v.addEventListener("emptied", () => w.__spEmptied++);
+    const src = v.src + (v.querySelector("source")?.src ?? "");
+    (window as any).__spVideo = { el: v, src, srcObject: v.srcObject };
   });
 
   const videoWidth = () =>
@@ -134,15 +125,54 @@ test("stream: resizing the window keeps the same playing video", async ({
     // The layout has caught up once the video's box changes.
     await expect.poll(videoWidth).not.toBe(oldWidth);
     const state = await page.evaluate(() => {
-      const w = window as any;
+      const before = (window as any).__spVideo;
       const v = document.querySelector("video")!;
-      return { same: v === w.__spVideo, emptied: w.__spEmptied };
+      const src = v.src + (v.querySelector("source")?.src ?? "");
+      return {
+        sameElement: v === before.el,
+        sameSource: src === before.src && v.srcObject === before.srcObject,
+      };
     });
-    expect(state).toEqual({ same: true, emptied: 0 });
+    expect(state).toEqual({ sameElement: true, sameSource: true });
     await expect(video).toBeVisible();
     const before = await video.evaluate((v: HTMLVideoElement) => v.currentTime);
     await expect
       .poll(() => video.evaluate((v: HTMLVideoElement) => v.currentTime))
       .toBeGreaterThan(before);
   }
+}
+
+test("stream: resizing the window keeps the same playing video", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1280, height: 720 });
+  await page.goto("/");
+  const card = page.getByTestId("home-stream-card").first();
+  await expect(card).toBeVisible({ timeout: 30_000 });
+  await card.click();
+  await expectVideoSurvivesResize(page);
+});
+
+// The streamer watching their own stream over HLS plays it with their own
+// playback session, which is part of the playlist URL. A layout change must
+// not drop it, or the URL changes and hls.js starts over.
+test("stream: the streamer's own HLS video survives a resize", async ({
+  page,
+}) => {
+  const httpsUrl = process.env.SERVER_HTTPS_URL;
+  test.skip(!httpsUrl, "harness started without its HTTPS hostnames");
+  await page.setViewportSize({ width: 1280, height: 720 });
+  await loginThroughPds(page);
+  await page.evaluate(() => localStorage.setItem("player-protocol", "hls"));
+
+  await page.goto(`${httpsUrl}/`);
+  // The player's own master playlist URL, once it has the session (the
+  // node's variant playlists carry a sid of their own). hls.js attaches its
+  // new source in the same task as this request.
+  const sessionPlaylist = page.waitForRequest((r) =>
+    /getLivePlaylist\?streamer=[^&]+&sid=/.test(r.url()),
+  );
+  await page.getByTestId("home-stream-card").first().click();
+  await sessionPlaylist;
+  await expectVideoSurvivesResize(page);
 });
-- 
knotmirror 0.0.1


From 457873ee19836b1a17eb4513e203779a8be9d22a Mon Sep 17 00:00:00 2001
From: Eli Mallon <eli@iame.li>
Date: Tue, 13 Oct 2026 18:26:33 -0700
Subject: [PATCH 3/3] components: stub usePlaybackSession in the portrait
 player test

The native Fullscreen now calls it, and this test renders Fullscreen
without a StreamplaceProvider, stubbing its other store-backed pieces.
---
 js/components/tests/portrait-player.test.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/js/components/tests/portrait-player.test.tsx b/js/components/tests/portrait-player.test.tsx
index a4721533a..cd733cdf3 100644
--- a/js/components/tests/portrait-player.test.tsx
+++ b/js/components/tests/portrait-player.test.tsx
@@ -187,6 +187,9 @@ vi.mock("../src/components/mobile-player/video.native", () => ({
 vi.mock("../src/components/mobile-player/ui/audio-only-overlay", () => ({
   AudioOnlyOverlay: () => null,
 }));
+vi.mock("../src/components/mobile-player/playback-session", () => ({
+  usePlaybackSession: () => {},
+}));
 
 async function bindings() {
   const atoms = await import("../src/lib/theme/atoms");