diff --git a/js/app/components/mobile/player.tsx b/js/app/components/mobile/player.tsx index 264b17bc..f107a048 100644 --- a/js/app/components/mobile/player.tsx +++ b/js/app/components/mobile/player.tsx @@ -393,6 +393,12 @@ export function PlayerInner( const showFullDesktopMode = aspectRatio > 1 && screenWidth > 1200; const isLandscape = aspectRatio > 1; + // When fullscreen or the device is rotated to landscape, a width-100% + + // aspectRatio VOD box is taller than the screen and clips off the bottom. + // In those cases fill the area and let objectFit:contain letterbox instead. + const { width: winWidth, height: winHeight } = useWindowDimensions(); + const vodFillScreen = fullscreen || winWidth > winHeight; + const isPlayerRatioGreater = aspectRatio >= 16 / 9; // animated style for offline height transition @@ -434,15 +440,19 @@ export function PlayerInner( width: calculatedWidth, } : props.mode === "vod" - ? { - // Bound the video to its real aspect ratio so it occupies a - // fixed height with the metadata/comments below — never the - // whole window. (A pixel height derived from contentWidth - // collapsed to full-window on Android when contentWidth - // measured 0.) - width: "100%" as any, - aspectRatio: vodAspectRatio, - } + ? vodFillScreen + ? // Fullscreen/landscape: fill the area; objectFit:contain + // letterboxes so the video fits without clipping. + { flex: 1 } + : { + // Portrait inline: bound the video to its real aspect ratio + // so it occupies a fixed height with the metadata below — + // never the whole window. (A pixel height derived from + // contentWidth collapsed to full-window on Android when + // contentWidth measured 0.) + width: "100%" as any, + aspectRatio: vodAspectRatio, + } : { flex: 1, maxHeight: "auto", diff --git a/js/components/src/components/mobile-player/video-async.native.tsx b/js/components/src/components/mobile-player/video-async.native.tsx index 35768474..071b93ba 100644 --- a/js/components/src/components/mobile-player/video-async.native.tsx +++ b/js/components/src/components/mobile-player/video-async.native.tsx @@ -80,7 +80,6 @@ export function NativeVideo(props?: { const muted = useMuted(); const volume = useEffectiveVolume(); const setFullscreen = usePlayerStore((x) => x.setFullscreen); - const fullscreen = usePlayerStore((x) => x.fullscreen); const playerEvent = usePlayerStore((x) => x.playerEvent); const spurl = useStreamplaceStore((x) => x.url); @@ -226,7 +225,9 @@ export function NativeVideo(props?: { { setFullscreen(true); }}