From 1cad18826b7a700f6b8b8dc770c20b8455ac523c Mon Sep 17 00:00:00 2001 From: Jonathan Sykes Date: Tue, 6 Oct 2026 02:27:42 +0800 Subject: [PATCH] Fill viewport in fullscreen playback --- frontend/fullscreen-orientation.css | 45 +++++++++++++++++++++++------ frontend/styles.css | 29 +++++++++++++++++++ 2 files changed, 65 insertions(+), 9 deletions(-) diff --git a/frontend/fullscreen-orientation.css b/frontend/fullscreen-orientation.css index 7213dec..beb1b98 100644 --- a/frontend/fullscreen-orientation.css +++ b/frontend/fullscreen-orientation.css @@ -1,18 +1,45 @@ /* Shared fullscreen surface; inline player styling is unchanged. */ .orientation-fullscreen .fullscreen-hud[hidden] { display: none; } -.orientation-fullscreen .fullscreen-hud { position: absolute; z-index: 20; bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: rgb(0 0 0 / .8); color: white; } -.fullscreen-hud button { min-height: 44px; padding: 8px 12px; border: 1px solid rgb(255 255 255 / .25); border-radius: 8px; background: rgb(255 255 255 / .12); color: white; font: inherit; } +.orientation-fullscreen .fullscreen-hud { + position: absolute; z-index: 20; bottom: max(12px, env(safe-area-inset-bottom)); + left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); + display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; + background: rgb(0 0 0 / .8); color: white; +} +.fullscreen-hud button { + min-height: 44px; padding: 8px 12px; border: 1px solid rgb(255 255 255 / .25); + border-radius: 8px; background: rgb(255 255 255 / .12); color: white; font: inherit; +} .fullscreen-hud button:focus-visible { outline: 2px solid white; outline-offset: 2px; } .fullscreen-hud input { min-width: 40px; flex: 1; height: 44px; } -.player-stage.orientation-fullscreen { background: black; } -.player-stage.orientation-overlay { position: fixed !important; z-index: 10000 !important; inset: 0 !important; width: 100dvw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; margin: 0 !important; border-radius: 0 !important; } -.player-stage.orientation-overlay[data-fullscreen-rotation="90"], .player-stage.orientation-overlay[data-fullscreen-rotation="-90"] { inset: auto !important; left: 50% !important; top: 50% !important; width: 100dvh !important; height: 100dvw !important; transform: translate(-50%, -50%) rotate(90deg) !important; } +.player-stage.orientation-fullscreen { background: #000; } +.player-stage.orientation-overlay { + position: fixed !important; z-index: 10000 !important; inset: 0 !important; + width: 100dvw !important; height: 100dvh !important; + min-width: 0 !important; min-height: 0 !important; + max-width: none !important; max-height: none !important; + aspect-ratio: auto !important; margin: 0 !important; padding: 0 !important; + border: 0 !important; border-radius: 0 !important; box-shadow: none !important; +} +.player-stage.orientation-overlay[data-fullscreen-rotation="90"], +.player-stage.orientation-overlay[data-fullscreen-rotation="-90"] { + inset: auto !important; left: 50% !important; top: 50% !important; + width: 100dvh !important; height: 100dvw !important; + transform: translate(-50%, -50%) rotate(90deg) !important; +} .player-stage.orientation-overlay[data-fullscreen-rotation="-90"] { transform: translate(-50%, -50%) rotate(-90deg) !important; } -.orientation-fullscreen video { width: 100% !important; height: 100% !important; object-fit: contain; } +.orientation-fullscreen video { + flex: none !important; width: 100% !important; height: 100% !important; + max-width: none !important; max-height: none !important; object-fit: contain; +} .orientation-fullscreen #stgOverlay { display: none !important; } -.orientation-overlay[data-fullscreen-rotation="90"] .fullscreen-hud { bottom: max(12px, env(safe-area-inset-left)); left: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-bottom)); } -.orientation-overlay[data-fullscreen-rotation="-90"] .fullscreen-hud { bottom: max(12px, env(safe-area-inset-right)); left: max(12px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-top)); } +.orientation-overlay[data-fullscreen-rotation="90"] .fullscreen-hud { + bottom: max(12px, env(safe-area-inset-left)); left: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-bottom)); +} +.orientation-overlay[data-fullscreen-rotation="-90"] .fullscreen-hud { + bottom: max(12px, env(safe-area-inset-right)); left: max(12px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-top)); +} @media(max-width: 460px) { .fullscreen-hud { flex-wrap: wrap; } .fullscreen-hud input { flex-basis: 100%; order: -1; } .fullscreen-hud button { flex: 1; padding-inline: 6px; font-size: 12px; } } -/* Raise the existing ancestry instead of moving a playing video in WebKit. */ +/* Raise existing ancestry instead of moving a playing video in WebKit. */ body.landscape-fs .orientation-ancestor { z-index: 10001 !important; transform: none !important; filter: none !important; overflow: visible !important; } body.landscape-fs { overflow: hidden; } diff --git a/frontend/styles.css b/frontend/styles.css index 613f9fa..7ef6f7e 100755 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -3905,6 +3905,35 @@ body.presenter-open { overflow: hidden; } .player-stage { touch-action: pan-y; } /* page still scrolls; we get double-tap + pinch */ :fullscreen .player-stage, .player-stage:fullscreen, body.landscape-fs .player-stage { touch-action: none; } /* fullscreen (real or the iOS landscape one): swipes too */ +/* Native fullscreen keeps the ordinary stage's aspect ratio and pane width unless + all sizing constraints are explicitly reset. This also covers every layout's + player because fullscreen is a cross-layout surface. */ +:is(.player-stage:fullscreen, .player-stage.orientation-fullscreen.orientation-overlay) { + position: fixed !important; + inset: 0 !important; + width: 100dvw !important; + height: 100dvh !important; + min-width: 0 !important; + min-height: 0 !important; + max-width: none !important; + max-height: none !important; + aspect-ratio: auto !important; + margin: 0 !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + box-shadow: none !important; + overflow: hidden !important; + background: #000 !important; +} +.player-stage.orientation-fullscreen > video { + flex: none !important; + width: 100% !important; + height: 100% !important; + max-width: none !important; + max-height: none !important; + object-fit: contain; +} #video { transform-origin: center center; transition: transform 0.05s linear; } .gesture-hud { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6;