diff --git a/src/components/MainMenu.tsx b/src/components/MainMenu.tsx index a84ee2e..0707f72 100644 --- a/src/components/MainMenu.tsx +++ b/src/components/MainMenu.tsx @@ -41,10 +41,10 @@ export default function MainMenu() { const changeTitle = (title: string) => (document.title = title); let playSound = useAudio(start, stop, sound1, sound2); - const { enableScreenWake, releaseScreenWake } = useScreenWake(); // Destructure the functions + const { enableScreenWake, releaseScreenWake } = useScreenWake(); useEffect(() => { - let isMounted = true; // used in the cleanup function + let isMounted = true; if (timer && isMounted) { enableScreenWake(); @@ -157,7 +157,7 @@ export default function MainMenu() { releaseScreenWake(); } }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [time]); + }, [time, enableScreenWake, releaseScreenWake]); // Add enableScreenWake and releaseScreenWake to the dependency array return ( <> diff --git a/src/components/MenuButtons.tsx b/src/components/MenuButtons.tsx index 2097aba..eeaec62 100644 --- a/src/components/MenuButtons.tsx +++ b/src/components/MenuButtons.tsx @@ -2,6 +2,7 @@ import { useEventListener } from "usehooks-ts"; import useStore from "../store/useStore"; import Timer from "../utils/Timer"; import Button from "./Button"; +import useScreenWake from "../utils/useScreenWake"; // Add this import export default function MenuButtons() { const [setWorkTime, setRestTime, setPrepTime] = useStore((state) => [state.setWorkTime, state.setRestTime, state.setPrepTime]); @@ -11,6 +12,8 @@ export default function MenuButtons() { const [updateWorkoutFullTime, isPaused, setIsPaused] = useStore((state) => [state.updateWorkoutFullTime, state.isPaused, state.setIsPaused]); const [autoRestartonReset, preferredLanguage] = useStore((state) => [state.autoRestartonReset, state.preferredLanguage]); + const { releaseScreenWake } = useScreenWake(); + function handleStart() { if (isPaused) setIsPaused(false); @@ -37,6 +40,7 @@ export default function MenuButtons() { function handleReset() { timer?.stop(); resetTimer(); + releaseScreenWake(); if (autoRestartonReset) { setTimeout(() => { handleStart(); diff --git a/src/utils/useScreenWake.ts b/src/utils/useScreenWake.ts index 99143cd..3dd5cbe 100644 --- a/src/utils/useScreenWake.ts +++ b/src/utils/useScreenWake.ts @@ -1,34 +1,32 @@ -import { useEffect } from "react"; +import { useRef, useCallback } from "react"; export default function useScreenWake() { - let wakeLock: WakeLockSentinel | null = null; + const wakeLockRef = useRef(null); - async function enableScreenWake() { - try { - wakeLock = await navigator.wakeLock.request("screen"); - console.log("Screen wake lock activated"); - } catch (error) { - console.error("Error requesting screen wake lock:", error); + const enableScreenWake = useCallback(async () => { + if (!wakeLockRef.current) { + try { + wakeLockRef.current = await navigator.wakeLock.request("screen"); + console.log("Screen wake lock activated"); + } catch (error) { + console.error("Error requesting screen wake lock:", error); + } } - } + }, []); - function releaseScreenWake() { - if (wakeLock) { - wakeLock.release(); - console.log("Screen wake lock released"); + const releaseScreenWake = useCallback(() => { + if (wakeLockRef.current) { + wakeLockRef.current + .release() + .then(() => { + wakeLockRef.current = null; + console.log("Screen wake lock released"); + }) + .catch((error) => { + console.error("Error releasing screen wake lock:", error); + }); } - } + }, []); - useEffect(() => { - // Request wake lock when the component mounts - enableScreenWake(); - - // Release wake lock when the component unmounts - return () => { - releaseScreenWake(); - }; - }, []); // Empty dependency array ensures the effect runs only once - - // Return both functions for external use return { enableScreenWake, releaseScreenWake }; }