From 3ba252f73926670b64a87f856396235f477be7ea Mon Sep 17 00:00:00 2001
From: Eli Mallon <eli@iame.li>
Date: Tue, 2 Jun 2026 09:59:32 -0700
Subject: [PATCH] app: show VOD metadata + likes consistently across
 breakpoints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

VOD likes/title only appeared below 768px; between 768–1200 nothing
rendered, and above 1200 the live-stream metadata bar (BottomMetadata,
which has no like button) showed instead. The VOD-purpose-built block
VodMobileMetadata already carries title, author, likes and view count and
reads from the video store.

Render VodSection (VodMobileMetadata) at every breakpoint and suppress
BottomMetadata for VOD, so VOD has one consistent metadata block — with
likes — at all widths.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 js/app/components/mobile/player.tsx              |  2 +-
 js/components/src/components/vod/vod-section.tsx | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/js/app/components/mobile/player.tsx b/js/app/components/mobile/player.tsx
index ae52176c..1c141288 100644
--- a/js/app/components/mobile/player.tsx
+++ b/js/app/components/mobile/player.tsx
@@ -481,7 +481,7 @@ export function PlayerInner(
           </PlayerInnerInner>
         )}
       </Reanimated.View>
-      {showFullDesktopMode && (
+      {showFullDesktopMode && props.mode !== "vod" && (
         <BottomMetadata
           setShowChat={props.setShowChat}
           showChat={props.showChat}
diff --git a/js/components/src/components/vod/vod-section.tsx b/js/components/src/components/vod/vod-section.tsx
index f9c5ed85..11d9bc66 100644
--- a/js/components/src/components/vod/vod-section.tsx
+++ b/js/components/src/components/vod/vod-section.tsx
@@ -1,16 +1,16 @@
-import { useWindowDimensions, View } from "react-native";
+import { View } from "react-native";
 import { px, py } from "../../ui";
 import { useVideoStore } from "../../video-store/video-store";
 import { VodMobileMetadata } from "./vod-mobile-metadata";
 
+// VodSection is the VOD metadata block (title, author, likes, view count)
+// rendered beneath the player at every breakpoint. The live-stream metadata
+// bar (BottomMetadata) is suppressed for VOD, so this is the single source
+// of VOD metadata across all widths.
 export function VodSection() {
   const aturi = useVideoStore((x) => x.aturi);
-  const { width } = useWindowDimensions();
-  const isNarrow = width < 768;
 
-  // Wide layouts surface metadata through BottomMetadata, so the mobile
-  // metadata block is all this section renders now.
-  if (!aturi || !isNarrow) {
+  if (!aturi) {
     return null;
   }
 
-- 
2.51.2