Add screen lock

package.json

@@ -32,6 +32,7 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
+    "react-screen-wake-lock": "^3.0.2",
     "react-speech-recognition": "^3.10.0"
   },
   "@parcel/transformer-css": {

src/ts/Views/ExerciseRunner.tsx

@@ -13,7 +13,7 @@ import type { DirectoryConfiguration } from "../types";
 import { useGlobalContext } from "../GlobalContext";
 import { ExerciseItem } from "../components/ExerciseItem";
 import { getDirectoryConfig } from "../helpers/directoryFunctions";
-import { useVoiceCommands, useKeyboardControls } from "../helpers/hooks";
+import { useVoiceCommands, useKeyboardControls, useRefreshingWakeLock } from "../helpers/hooks";
 import { VoiceControlledTimer } from "../components/Timer/VoiceControlledTimer";
 import { ControlsModal } from "../components/ControlsModal";
 
@@ -23,6 +23,7 @@ const BASE_PATH = process.env.BASE_PATH;
 export function ExerciseRunner() {
   useKeyboardControls({ ArrowLeft: prev, ArrowRight: next });
   const [config] = useDirectoryConfiguration();
+  useRefreshingWakeLock()
   const [currentExerciseIndex, setCurrentExerciseIndex] = React.useState(0);
   const [lastCommand, resetLastCommand] = useVoiceCommands([
     "next",

src/ts/helpers/hooks.ts

@@ -2,6 +2,7 @@ import React from "react";
 import SpeechRecognition, {
   useSpeechRecognition,
 } from "react-speech-recognition";
+import { useWakeLock } from "react-screen-wake-lock";
 
 export function useVoiceCommands(command: string[]) {
   const [lastCommand, setLastCommand] = React.useState("");
@@ -51,12 +52,59 @@ export function useKeyboardControls(
     const listener = (e: KeyboardEvent) => {
       const callback = listeners[e.code];
       if (callback) {
-        e.preventDefault()
-        callback()
+        e.preventDefault();
+        callback();
       }
     };
     window.addEventListener("keydown", listener);
 
     return () => window.removeEventListener("keydown", listener);
   }, [listeners]);
 }
+
+export function useRefreshingWakeLock() {
+  const locked = React.useRef(false);
+  const { request, release } = useWakeLock({
+    onRelease: () => {
+      console.log("release");
+      locked.current = false;
+    },
+  });
+
+  const lock = () => {
+    console.log("lock");
+    if (locked.current !== true) {
+      request().then(() => {
+        locked.current = true;
+      });
+    }
+  };
+
+  /* Lock/unlock on component mount/unmount */
+  React.useEffect(() => {
+    lock();
+
+    return () => {
+      if (locked.current) {
+        release().then(() => {
+          console.log("release (hook)");
+          locked.current = false;
+        });
+      }
+    };
+  }, []);
+
+  /* Re-lock after visibility change */
+  React.useEffect(() => {
+    const listener = () => {
+      if (document.visibilityState === "visible" && locked.current === false) {
+        lock();
+      }
+    };
+    window.addEventListener("visibilitychange", listener);
+
+    return () => {
+      window.removeEventListener("visibilitychange", listener);
+    };
+  }, []);
+}