From cd70baa0ac280b797c29bcb53c9702dd9d007c71 Mon Sep 17 00:00:00 2001
From: Eli Mallon <eli@iame.li>
Date: Sat, 30 May 2026 18:42:20 -0700
Subject: [PATCH] vod: minimal VodPlayer at /:user/vod/:tid; point listing
 cards at it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a deliberately thin VOD player — PlayerProvider + src/mode pushed into
the player store + the platform <Video> element, no Fullscreen/danmu/retry/
telemetry/seekbar. On native this lets expo-video's own controls drive
scrubbing, dropping the seekbar->seekBy sync loop that made the unified
player janky on mobile.

VodScreen wraps it in VideoProvider for the video context. New root route
Vod -> :user/vod/:tid (parallel to the existing :user/video/:tid). The
video listing cards now link here so it's reachable on mobile; the old
unified player stays at :user/video/:tid by URL for comparison.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 js/app/components/video/video-card.tsx        |  5 +-
 js/app/src/linking-config.ts                  |  2 +
 js/app/src/navigation-helper.tsx              |  1 +
 js/app/src/navigation-types.ts                |  1 +
 js/app/src/screens/vod.tsx                    | 27 ++++++++++
 js/app/src/shell.tsx                          |  6 +++
 .../src/components/vod/vod-player.tsx         | 52 +++++++++++++++++++
 js/components/src/index.tsx                   |  1 +
 8 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 js/app/src/screens/vod.tsx
 create mode 100644 js/components/src/components/vod/vod-player.tsx

diff --git a/js/app/components/video/video-card.tsx b/js/app/components/video/video-card.tsx
index 876e6a61d..29f4f3312 100644
--- a/js/app/components/video/video-card.tsx
+++ b/js/app/components/video/video-card.tsx
@@ -38,10 +38,7 @@ export default function VideoCard({
   const viewCount = video.viewCounts?.count ?? 0;
 
   return (
-    <AQLink
-      to={{ screen: "VodPlayerDemo", params: { user, tid } }}
-      style={{ flex: 1 }}
-    >
+    <AQLink to={{ screen: "Vod", params: { user, tid } }} style={{ flex: 1 }}>
       <View style={[zero.flex.values[1], zero.gap.all[2]]}>
         {/* Thumbnail */}
         <View
diff --git a/js/app/src/linking-config.ts b/js/app/src/linking-config.ts
index 87d2dfd16..e43c3f6df 100644
--- a/js/app/src/linking-config.ts
+++ b/js/app/src/linking-config.ts
@@ -131,6 +131,7 @@ export const SCREEN_PATHS = {
   PopoutMultistream: "widgets/multistream",
   PopoutLivestream: "widgets/livestream",
   VodPlayerDemo: ":user/video/:tid",
+  Vod: ":user/vod/:tid",
 } as const;
 
 /**
@@ -242,6 +243,7 @@ export const streamplaceLinkingOptions: LinkingOptions<ReactNavigation.RootParam
         PopoutMultistream: SCREEN_PATHS.PopoutMultistream,
         PopoutLivestream: SCREEN_PATHS.PopoutLivestream,
         VodPlayerDemo: SCREEN_PATHS.VodPlayerDemo,
+        Vod: SCREEN_PATHS.Vod,
       },
     },
   };
diff --git a/js/app/src/navigation-helper.tsx b/js/app/src/navigation-helper.tsx
index 03c3b44d8..3ca06258c 100644
--- a/js/app/src/navigation-helper.tsx
+++ b/js/app/src/navigation-helper.tsx
@@ -40,6 +40,7 @@ export const ROOT_SCREENS = [
   "AVSync",
   "LegacyStream",
   "VodPlayerDemo",
+  "Vod",
 ];
 
 /**
diff --git a/js/app/src/navigation-types.ts b/js/app/src/navigation-types.ts
index 8b21aa702..279934ea2 100644
--- a/js/app/src/navigation-types.ts
+++ b/js/app/src/navigation-types.ts
@@ -62,6 +62,7 @@ export type RootStackParamList = {
   PopoutMultistream: undefined;
   PopoutLivestream: undefined;
   VodPlayerDemo: undefined;
+  Vod: { user: string; tid: string };
 };
 
 // Helper type for screen props
diff --git a/js/app/src/screens/vod.tsx b/js/app/src/screens/vod.tsx
new file mode 100644
index 000000000..8d52c6828
--- /dev/null
+++ b/js/app/src/screens/vod.tsx
@@ -0,0 +1,27 @@
+import { VideoProvider, View, VodPlayer, zero } from "@streamplace/components";
+import { Redirect } from "components/aqlink";
+
+// A pared-down VOD route (/:user/vod/:tid) that drops the unified live+vod
+// player in favor of the minimal <VodPlayer>. VideoProvider supplies the video
+// context (title/author/etc.) for anything we want to render around it; the
+// player itself is just a thin wrapper over the <Video> element.
+export default function VodScreen({
+  route,
+}: {
+  route?: { params?: { user?: string; tid?: string } };
+}) {
+  if (!route?.params?.user || !route?.params?.tid) {
+    return <Redirect to={{ screen: "HomeMain" }} />;
+  }
+  const aturi = `at://${route.params.user}/place.stream.video/${route.params.tid}`;
+
+  return (
+    <VideoProvider aturi={aturi}>
+      <View style={[zero.flex.values[1], { backgroundColor: "#000" }]}>
+        <View style={{ flex: 1 }}>
+          <VodPlayer src={aturi} />
+        </View>
+      </View>
+    </VideoProvider>
+  );
+}
diff --git a/js/app/src/shell.tsx b/js/app/src/shell.tsx
index 9036430d0..0268bf4c6 100644
--- a/js/app/src/shell.tsx
+++ b/js/app/src/shell.tsx
@@ -68,6 +68,7 @@ import SupportScreen from "src/screens/support";
 import UploadScreen from "src/screens/upload";
 import VideoScreen from "src/screens/video";
 import VideoListScreen from "src/screens/video-list";
+import VodScreen from "src/screens/vod";
 import { useStore } from "store";
 import {
   useHydrated,
@@ -646,6 +647,11 @@ export default function Shell() {
             component={VideoScreen}
             options={{ headerShown: false }}
           />
+          <RootStack.Screen
+            name="Vod"
+            component={VodScreen}
+            options={{ headerShown: false }}
+          />
 
           {/* Utility/embed screens */}
           <RootStack.Screen
diff --git a/js/components/src/components/vod/vod-player.tsx b/js/components/src/components/vod/vod-player.tsx
new file mode 100644
index 000000000..8d37770bf
--- /dev/null
+++ b/js/components/src/components/vod/vod-player.tsx
@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+import { View } from "react-native";
+import { PlayerProvider } from "../../player-store/player-provider";
+import { usePlayerStore } from "../../player-store/player-store";
+import Video from "../mobile-player/video";
+
+// A deliberately minimal VOD player: a PlayerProvider, the src pushed into the
+// player store in "vod" mode, and the platform <Video> element. No Fullscreen
+// chrome, danmu, retry, telemetry, or custom seek UI — on native, expo-video's
+// own controls handle scrubbing/play/pause, which is what we want for a simple
+// wrapper. Contrast with <Player>, the unified live+vod player that layers all
+// of that on top.
+export function VodPlayer({
+  src,
+  objectFit = "contain",
+}: {
+  // at:// URI of a place.stream.video record (or any src the <Video> element
+  // understands).
+  src: string;
+  objectFit?: "contain" | "cover";
+}) {
+  return (
+    <PlayerProvider>
+      <VodPlayerInner src={src} objectFit={objectFit} />
+    </PlayerProvider>
+  );
+}
+
+function VodPlayerInner({
+  src,
+  objectFit,
+}: {
+  src: string;
+  objectFit: "contain" | "cover";
+}) {
+  const setSrc = usePlayerStore((x) => x.setSrc);
+  const setMode = usePlayerStore((x) => x.setMode);
+  const storeSrc = usePlayerStore((x) => x.src);
+
+  useEffect(() => {
+    setMode("vod");
+    setSrc(src);
+  }, [src, setMode, setSrc]);
+
+  return (
+    <View style={{ width: "100%", height: "100%", backgroundColor: "#000" }}>
+      {/* Wait until our src is in the store so <Video> never renders against a
+          stale/empty source (which would resolve to a bogus live playlist). */}
+      {storeSrc === src ? <Video objectFit={objectFit} /> : null}
+    </View>
+  );
+}
diff --git a/js/components/src/index.tsx b/js/components/src/index.tsx
index 1ed375d84..488886310 100644
--- a/js/components/src/index.tsx
+++ b/js/components/src/index.tsx
@@ -86,5 +86,6 @@ export {
 export * from "./components/vod/vod-comments";
 export * from "./components/vod/vod-like-button";
 export * from "./components/vod/vod-mobile-metadata";
+export * from "./components/vod/vod-player";
 export * from "./components/vod/vod-section";
 export * from "./vod-store/vod-interactions";
-- 
2.51.2