diff --git a/src/pages/parts/player/PlayerPart.tsx b/src/pages/parts/player/PlayerPart.tsx index eba51132..d52e6de5 100644 --- a/src/pages/parts/player/PlayerPart.tsx +++ b/src/pages/parts/player/PlayerPart.tsx @@ -1,4 +1,4 @@ -import { ReactNode, useState } from "react"; +import { ReactNode, useCallback, useEffect, useState } from "react"; import { useParams } from "react-router-dom"; import IosPwaLimitations from "@/components/buttons/IosPwaLimitations"; @@ -33,11 +33,11 @@ export function PlayerPart(props: PlayerPartProps) { const { isMobile } = useIsMobile(); const isLoading = usePlayerStore((s) => s.mediaPlaying.isLoading); const { playerMeta: meta } = usePlayerMeta(); + const display = usePlayerStore((s) => s.display); - // Detect if running as a PWA on iOS + const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent); const isIOSPWA = - /iPad|iPhone|iPod/i.test(navigator.userAgent) && - window.matchMedia("(display-mode: standalone)").matches; + isIOS && window.matchMedia("(display-mode: standalone)").matches; // Detect if Shift key is being held const [isShifting, setIsShifting] = useState(false); @@ -54,6 +54,23 @@ export function PlayerPart(props: PlayerPartProps) { } }); + // Fullscreen on rotation horizontal + const onRotate = useCallback(() => { + if (window.orientation === 90 || window.orientation === -90) { + if (!document.fullscreenElement && status === playerStatus.PLAYING) { + display?.toggleFullscreen(); + } + } else if (document.fullscreenElement && status === playerStatus.PLAYING) { + display?.toggleFullscreen(); + } + }, [display, status]); + useEffect(() => { + window.addEventListener("orientationchange", onRotate); + return () => { + window.removeEventListener("orientationchange", onRotate); + }; + }, [onRotate]); + return ( {props.children}