feat(LOY-197): add screen wake lock to dtmc

apps/scandic-web/hooks/useWakeLock.ts

@@ -0,0 +1,72 @@
+"use client"
+
+import { useCallback, useEffect, useRef } from "react"
+
+let isSupported = false
+
+if ("wakeLock" in navigator) {
+  isSupported = true
+}
+
+interface Options {
+  reacquireOnPageVisible?: boolean
+  onRequest?: () => void
+  onRelease?: () => void
+}
+
+/**
+ * Uses the Wake Lock API to keep the screen from dimming or locking.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API
+ */
+export default function useWakeLock({
+  reacquireOnPageVisible = false,
+  onRequest = () => undefined,
+  onRelease = () => undefined,
+}: Options = {}) {
+  const wakeLock = useRef<WakeLockSentinel | null>(null)
+
+  const request = useCallback(async () => {
+    if (!isSupported) {
+      return
+    }
+
+    try {
+      wakeLock.current = await navigator.wakeLock.request("screen")
+
+      onRequest()
+
+      wakeLock.current.onrelease = () => {
+        onRelease()
+      }
+    } catch (_err) {
+      // ignore
+    }
+  }, [onRelease, onRequest])
+
+  const release = useCallback(() => {
+    if (!isSupported) {
+      return
+    }
+    wakeLock.current?.release().then(() => {
+      wakeLock.current = null
+    })
+  }, [])
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (wakeLock.current !== null && document.visibilityState === "visible") {
+        request()
+      }
+    }
+
+    if (reacquireOnPageVisible) {
+      document.addEventListener("visibilitychange", handleVisibilityChange)
+    }
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange)
+    }
+  }, [reacquireOnPageVisible, request])
+
+  return { isSupported, request, release }
+}