Merged in feat/LOY-197-screen-wake-dtmc (pull request #1996)

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

Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useState } from "react"
 import { Button } from "react-aria-components"
 import { useIntl } from "react-intl"
 
@@ -7,6 +8,7 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Modal from "@/components/Modal"
+import useWakeLock from "@/hooks/useWakeLock"
 
 import styles from "./digitalTeamMemberCard.module.css"
 
@@ -20,11 +22,24 @@ export default function DigitalTeamMemberCardClient({
   user,
 }: DigitalTeamMemberCardClientProps) {
   const intl = useIntl()
+  const [isOpen, setIsOpen] = useState(false)
+
+  const { release, request } = useWakeLock({
+    reacquireOnPageVisible: true,
+  })
+
+  function onToggle(modalState: boolean) {
+    setIsOpen(modalState)
+    if (modalState) {
+      request()
+    } else {
+      release()
+    }
+  }
 
   return (
-    <Modal
+    <>
-      trigger={
+      <Button className={styles.button} onPress={() => onToggle(true)}>
-        <Button className={styles.button}>
         <Typography variant="Body/Paragraph/mdBold">
           <span className={styles.text}>
             {/* @ts-expect-error Icon is supported in font, just not in React Material Symbols package */}
@@ -35,9 +50,7 @@ export default function DigitalTeamMemberCardClient({
           </span>
         </Typography>
       </Button>
-      }
+      <Modal onToggle={onToggle} isOpen={isOpen} className={styles.modal}>
-      className={styles.modal}
-    >
         <Typography variant="Title/xs">
           <h2 className={styles.title}>
             {intl.formatMessage({ defaultMessage: "Scandic Family" })}
@@ -112,5 +125,6 @@ export default function DigitalTeamMemberCardClient({
           </div>
         </Typography>
       </Modal>
+    </>
   )
 }

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 }
+}