add releaseScreenWake on reset

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 (
     <>

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();

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<WakeLockSentinel | null>(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 };
 }