fix(player): improve viewport safe area handling

[stackia]

Summary

Improve the web player's viewport and safe-area behavior on devices with display cutouts.

The player now uses 100vh in standalone mode and 100dvh in browser mode, while locking body scrolling. On platforms that expose navigator.standalone, that value is authoritative so iOS does not depend on its unreliable display-mode media query. Other platforms fall back to matchMedia("(display-mode: standalone)"). Detection runs synchronously before the stylesheet and React app load to avoid an incorrect first layout.

The loading overlay lives inside the main player viewport as an absolutely positioned full-page layer and retains its own four-sided safe-area padding.

On naturally portrait devices in landscape, the sidebar removes its right inset at 90°, when that edge is on the device-bottom side and may safely overlap the smaller system area. At 270° the right inset is retained to protect content from the device-top cutout side. Portrait and naturally landscape devices keep the existing right inset behavior. Mobile portrait keeps the bottom safe area inside the sidebar's scrollable content so the sidebar background extends beneath it.

When the player owns a horizontal screen edge, its surface background continues through that safe-area strip and the controls toolbar extends its bottom gradient over it. The controls content applies matching inset padding, so buttons, metadata, and the progress bar remain in the safe content region. In split layouts with a visible sidebar, the gradient does not extend into the sidebar-owned right edge.

The player does not add special handling for the portrait top safe area. The standalone playlist error page remains a normal vertically scrollable page and does not apply special safe-area padding. Player controls retain their existing bottom spacing without extra Home Indicator compensation.

Validation

• pnpm exec biome check web-ui/src/pages/player.tsx web-ui/src/components/player/video-player.tsx web-ui/src/index.css
• pnpm exec vite build web-ui --outDir /tmp/rtp2httpd-web-ui-safe-area-build --emptyOutDir
• git diff --check

[github-actions]

Documentation preview

The documentation preview has been deployed for this pull request.

• Preview: https://thankful-water-0a297bf00-651.eastasia.1.azurestaticapps.net
• Commit: 6c92ded

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 644457081e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Guard Screen Orientation before rendering

On browsers or webviews without the Screen Orientation API, this now runs during the state initializer path before any UI renders; destructuring screen.orientation throws when it is undefined, so the player becomes a blank page instead of falling back to the existing resize-only behavior. Please guard screen.orientation here and in the orientation-change listener, defaulting the sidebar inset when the API is unavailable.

Useful? React with 👍 / 👎.