From dd28158da0f6f4219aa87d74892c5ea3814e4c75 Mon Sep 17 00:00:00 2001
From: Eli Mallon <eli@iame.li>
Date: Tue, 13 Oct 2026 16:45:46 -0700
Subject: [PATCH] player: keep the web video alive across layout changes

Crossing a breakpoint moves the player to another branch of the stream
page's layout, which remounted the <video> and the hls.js/WebRTC session
feeding it, so every resize reloaded the stream.

A VideoHostProvider near the top of the web app now renders each player's
video (keyed to its player store) and moves the DOM node into the
player's <HostedVideo> slot. A slot that remounts picks up the same
playing element. Native is unchanged.
---
 js/app/components/provider/provider.tsx       |   6 +-
 .../components/mobile-player/fullscreen.tsx   |  15 ++-
 .../components/mobile-player/video-host.tsx   | 121 ++++++++++++++++++
 js/e2e-web/flows/stream.spec.ts               |  49 +++++++
 4 files changed, 184 insertions(+), 7 deletions(-)
 create mode 100644 js/components/src/components/mobile-player/video-host.tsx

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