keep phone awake on timer

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

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * A custom hook to manage a screen wake lock.
+ *
+ * @returns An object with an `isLocked` boolean and `request`/`release` functions.
+ */
+export const useWakeLock = () => {
+  const wakeLock = useRef<WakeLockSentinel | null>(null);
+  const shouldHoldLock = useRef(false);
+  const [isLocked, setIsLocked] = useState(false);
+
+  const request = useCallback(async () => {
+    if (!("wakeLock" in navigator)) {
+      console.warn("Screen Wake Lock API not supported");
+      return;
+    }
+
+    shouldHoldLock.current = true;
+
+    try {
+      const sentinel = await navigator.wakeLock.request("screen");
+      wakeLock.current = sentinel;
+      setIsLocked(true);
+
+      sentinel.addEventListener(
+        "release",
+        () => {
+          if (wakeLock.current === sentinel) {
+            wakeLock.current = null;
+          }
+          setIsLocked(false);
+        },
+        { once: true }
+      );
+    } catch (err) {
+      console.error(`Wake Lock request failed: ${err}`);
+      setIsLocked(false);
+    }
+  }, []);
+
+  const release = useCallback(async () => {
+    shouldHoldLock.current = false;
+
+    if (!wakeLock.current) {
+      setIsLocked(false);
+      return;
+    }
+
+    try {
+      await wakeLock.current.release();
+    } catch {
+      // ignore (it may have already been released by the browser)
+    } finally {
+      wakeLock.current = null;
+      setIsLocked(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (
+        shouldHoldLock.current &&
+        !isLocked &&
+        document.visibilityState === "visible"
+      ) {
+        void request();
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    document.addEventListener("fullscreenchange", handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      document.removeEventListener("fullscreenchange", handleVisibilityChange);
+      release();
+    };
+  }, [request, release, isLocked]);
+
+  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) => {