Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-21 00:32:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fullscreen on rotate screen

Browse source
This commit is contained in:
Pas 2025-01-30 14:54:31 -07:00
parent 5580967b94
commit 4c71cd246e
1 changed files with 21 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/pages/parts/player/PlayerPart.tsx
View file

@ -1,4 +1,4 @@
import { ReactNode, useState } from "react"; import { ReactNode, useCallback, useEffect, useState } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import IosPwaLimitations from "@/components/buttons/IosPwaLimitations"; import IosPwaLimitations from "@/components/buttons/IosPwaLimitations";
@ -33,11 +33,11 @@ export function PlayerPart(props: PlayerPartProps) {
const { isMobile } = useIsMobile(); const { isMobile } = useIsMobile();
const isLoading = usePlayerStore((s) => s.mediaPlaying.isLoading); const isLoading = usePlayerStore((s) => s.mediaPlaying.isLoading);
const { playerMeta: meta } = usePlayerMeta(); 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 = const isIOSPWA =
/iPad|iPhone|iPod/i.test(navigator.userAgent) && isIOS && window.matchMedia("(display-mode: standalone)").matches;
window.matchMedia("(display-mode: standalone)").matches;
// Detect if Shift key is being held // Detect if Shift key is being held
const [isShifting, setIsShifting] = useState(false); 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 ( return (
<Player.Container onLoad={props.onLoad} showingControls={showTargets}> <Player.Container onLoad={props.onLoad} showingControls={showTargets}>
{props.children} {props.children}