keep phone awake on timer

client/src/hooks/use-wake-lock.ts

@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * A custom hook to manage a screen wake lock.
+ *
+ * @returns {Object} An object with a `wakeLockEnabled` boolean and a `toggleWakeLock` function.
+ */
+export const useWakeLock = () => {
+  const wakeLock = useRef<WakeLockSentinel | null>(null);
+  const [isLocked, setIsLocked] = useState(false);
+
+  const request = useCallback(async () => {
+    if (!("wakeLock" in navigator)) {
+      console.warn("Screen Wake Lock API not supported");
+      return;
+    }
+    try {
+      wakeLock.current = await navigator.wakeLock.request("screen");
+      setIsLocked(true);
+      wakeLock.current.addEventListener("release", () => {
+        setIsLocked(false);
+      });
+    } catch (err) {
+      console.error(`Wake Lock request failed: ${err}`);
+      setIsLocked(false);
+    }
+  }, []);
+
+  const release = useCallback(async () => {
+    if (wakeLock.current) {
+      await wakeLock.current.release();
+      wakeLock.current = null;
+      setIsLocked(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (wakeLock.current && document.visibilityState === "visible") {
+        request();
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    document.addEventListener("fullscreenchange", handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      document.removeEventListener("fullscreenchange", handleVisibilityChange);
+      release();
+    };
+  }, [request, release]);
+
+  return { isLocked, request, release };
+};

client/src/pages/tools/timer.tsx

@@ -31,6 +31,7 @@ import {
 } from "@/lib/time-tools";
 import { getParam, updateURL, copyShareableURL } from "@/lib/url-sharing";
 import { useToast } from "@/hooks/use-toast";
+import { useWakeLock } from "@/hooks/use-wake-lock";
 import {
   ToolButton,
   ResetButton,
@@ -68,6 +69,21 @@ export default function Timer() {
   const audioContextRef = useRef<AudioContext | null>(null);
   const alarmIntervalsRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
   const { toast } = useToast();
+  const {
+    isLocked,
+    request: requestWakeLock,
+    release: releaseWakeLock,
+  } = useWakeLock();
+
+  // Effect to manage the wake lock
+  useEffect(() => {
+    const hasRunningTimers = timers.some(timer => timer.isRunning);
+    if (hasRunningTimers && !isLocked) {
+      requestWakeLock();
+    } else if (!hasRunningTimers && isLocked) {
+      releaseWakeLock();
+    }
+  }, [timers, isLocked, requestWakeLock, releaseWakeLock]);
 
   // Clear any alarm handle (interval or timeout) robustly
   const clearAlarmHandle = useCallback((handle: NodeJS.Timeout) => {