Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-31 12:14:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix fullscreen handling

Browse Source
This commit is contained in:
Zoe Roux 2022-12-23 00:20:03 +09:00
parent 7315d5f5a1
commit b0eb8c3b42
1 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
front/packages/ui/src/player/state.tsx
View File

@ -53,19 +53,22 @@ const publicProgressAtom = atom(0);
export const volumeAtom = atom(100); export const volumeAtom = atom(100);
export const mutedAtom = atom(false); export const mutedAtom = atom(false);
export const [_, fullscreenAtom] = bakedAtom(false, async (_, set, value, baker) => { export const [privateFullscreen, fullscreenAtom] = bakedAtom(
try { false,
if (value) { async (_, set, value, baker) => {
await document.body.requestFullscreen(); try {
set(baker, true); if (value) {
await screen.orientation.lock("landscape"); await document.body.requestFullscreen();
} else { set(baker, true);
await document.exitFullscreen(); await screen.orientation.lock("landscape");
set(baker, false); } else {
screen.orientation.unlock(); await document.exitFullscreen();
} set(baker, false);
} catch {} screen.orientation.unlock();
}); }
} catch {}
},
);
let hls: Hls | null = null; let hls: Hls | null = null;
@ -77,7 +80,7 @@ export const Video = ({
// const [playMode, setPlayMode] = useAtom(playModeAtom); // const [playMode, setPlayMode] = useAtom(playModeAtom);
const ref = useRef<NativeVideo | null>(null); const ref = useRef<NativeVideo | null>(null);
const [isPlaying, setPlay] = useAtom(playAtom); const isPlaying = useAtomValue(playAtom);
const setLoad = useSetAtom(loadAtom); const setLoad = useSetAtom(loadAtom);
useLayoutEffect(() => { useLayoutEffect(() => {
@ -95,6 +98,15 @@ export const Video = ({
const volume = useAtomValue(volumeAtom); const volume = useAtomValue(volumeAtom);
const isMuted = useAtomValue(mutedAtom); const isMuted = useAtomValue(mutedAtom);
const setFullscreen = useSetAtom(privateFullscreen);
useEffect(() => {
const handler = () => {
setFullscreen(document.fullscreenElement != null);
};
document.addEventListener("fullscreenchange", handler);
return () => document.removeEventListener("fullscreenchange", handler);
});
// useEffect(() => { // useEffect(() => {
// setPlayMode(PlayMode.Direct); // setPlayMode(PlayMode.Direct);
// }, [links, setPlayMode]); // }, [links, setPlayMode]);