lock wake for all browsers but firefox

www/app/lib/wakeLock.ts

@@ -0,0 +1,28 @@
+// Not possible yet in firefox
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1589554
+
+const canWakeLock = () => "wakeLock" in navigator;
+
+let wakelock: WakeLockSentinel | undefined;
+async function lockWakeState() {
+  if (!canWakeLock()) return;
+  try {
+    wakelock = await navigator.wakeLock.request();
+    wakelock.addEventListener("release", () => {
+      console.log(
+        "Screen Wake State Locked:",
+        wakelock ? !wakelock?.released : false,
+      );
+    });
+    console.log("Screen Wake State Locked:", !wakelock.released);
+  } catch (e) {
+    console.error("Failed to lock wake state with reason:", e.message);
+  }
+}
+
+function releaseWakeState() {
+  if (wakelock) wakelock.release();
+  wakelock = undefined;
+}
+
+export { lockWakeState, releaseWakeState };

www/app/transcripts/new/page.tsx

@@ -15,6 +15,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGear } from "@fortawesome/free-solid-svg-icons";
 import About from "../../(aboutAndPrivacy)/about";
 import Privacy from "../../(aboutAndPrivacy)/privacy";
+import { lockWakeState, releaseWakeState } from "../../lib/wakeLock";
 
 const TranscriptCreate = () => {
   const [stream, setStream] = useState<MediaStream | null>(null);
@@ -45,6 +46,13 @@ const TranscriptCreate = () => {
   } = useAudioDevice();
   const [hasRecorded, setHasRecorded] = useState(false);
 
+  useEffect(() => {
+    lockWakeState();
+    return () => {
+      releaseWakeState();
+    };
+  }, []);
+
   return (
     <>
       {permissionOk ? (