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] 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);
 });
-- 
2.54.0