From b0eb8c3b42a57073703ca4f7dfa9ab5128b96e95 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Fri, 23 Dec 2022 00:20:03 +0900
Subject: [PATCH] Fix fullscreen handling

---
 front/packages/ui/src/player/state.tsx | 40 +++++++++++++++++---------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/front/packages/ui/src/player/state.tsx b/front/packages/ui/src/player/state.tsx
index 32bedcf6..3848e25d 100644
--- a/front/packages/ui/src/player/state.tsx
+++ b/front/packages/ui/src/player/state.tsx
@@ -53,19 +53,22 @@ const publicProgressAtom = atom(0);
 export const volumeAtom = atom(100);
 export const mutedAtom = atom(false);
 
-export const [_, fullscreenAtom] = bakedAtom(false, async (_, set, value, baker) => {
-	try {
-		if (value) {
-			await document.body.requestFullscreen();
-			set(baker, true);
-			await screen.orientation.lock("landscape");
-		} else {
-			await document.exitFullscreen();
-			set(baker, false);
-			screen.orientation.unlock();
-		}
-	} catch {}
-});
+export const [privateFullscreen, fullscreenAtom] = bakedAtom(
+	false,
+	async (_, set, value, baker) => {
+		try {
+			if (value) {
+				await document.body.requestFullscreen();
+				set(baker, true);
+				await screen.orientation.lock("landscape");
+			} else {
+				await document.exitFullscreen();
+				set(baker, false);
+				screen.orientation.unlock();
+			}
+		} catch {}
+	},
+);
 
 let hls: Hls | null = null;
 
@@ -77,7 +80,7 @@ export const Video = ({
 	// const [playMode, setPlayMode] = useAtom(playModeAtom);
 
 	const ref = useRef<NativeVideo | null>(null);
-	const [isPlaying, setPlay] = useAtom(playAtom);
+	const isPlaying = useAtomValue(playAtom);
 	const setLoad = useSetAtom(loadAtom);
 
 	useLayoutEffect(() => {
@@ -95,6 +98,15 @@ export const Video = ({
 	const volume = useAtomValue(volumeAtom);
 	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(() => {
 	// 	setPlayMode(PlayMode.Direct);
 	// }, [links, setPlayMode]);