From e9ad55d5d97cbbf38c997ad60a836db3412d7e74 Mon Sep 17 00:00:00 2001
From: huanghuang358 <178640467+huanghuang358@users.noreply.github.com>
Date: Sun, 27 Jul 2025 22:03:35 +0800
Subject: [PATCH] feat(webapp): add wake lock

---
 webapp/app.tsx                    |  1 -
 webapp/components/use/wakeLock.ts | 38 +++++++++++++++++++++++++++++++
 webapp/pages/meeting.tsx          | 11 +++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 webapp/components/use/wakeLock.ts

diff --git a/webapp/app.tsx b/webapp/app.tsx
index 5863641..c6cb573 100644
--- a/webapp/app.tsx
+++ b/webapp/app.tsx
@@ -5,7 +5,6 @@ import { meetingIdAtom } from './store/atom'
 
 export default function WOOM() {
   const [meetingId] = useAtom(meetingIdAtom)
-
   return (
     <div
       className="min-h-screen">
diff --git a/webapp/components/use/wakeLock.ts b/webapp/components/use/wakeLock.ts
new file mode 100644
index 0000000..3db0aba
--- /dev/null
+++ b/webapp/components/use/wakeLock.ts
@@ -0,0 +1,38 @@
+export default class WakeLock {
+  private lock: WakeLockSentinel | null
+  private onRelease: () => void
+
+  constructor(handleRelease?: () => void) {
+    this.lock = null
+    this.onRelease = handleRelease ?? (() => {})
+  }
+
+  private handleVisibilityChange = () => {
+    if (this.lock !== null && document.visibilityState === 'visible') {
+      this.request()
+    }
+  }
+
+  public request = async () => {
+    if (this.lock == null) {
+      document.addEventListener('visibilitychange', this.handleVisibilityChange)
+    }
+    try {
+      this.lock = await navigator.wakeLock.request('screen')
+      this.lock.addEventListener('release', this.onRelease)
+    } catch (err) {
+      console.error('Failed to request wake lock:', err)
+    }
+  }
+
+  public release = async () => {
+    try {
+      await this.lock?.release()
+    } catch (err) {
+      console.error('Failed to release wake lock:', err)
+    } finally {
+      this.lock = null
+      document.removeEventListener('visibilitychange', this.handleVisibilityChange)
+    }
+  }
+}
diff --git a/webapp/pages/meeting.tsx b/webapp/pages/meeting.tsx
index 50bf1e2..828fa09 100644
--- a/webapp/pages/meeting.tsx
+++ b/webapp/pages/meeting.tsx
@@ -2,9 +2,20 @@ import { useAtom } from 'jotai'
 import { meetingJoinedAtom } from '../store/atom'
 import Layout from '../components/layout'
 import Prepare from '../components/prepare'
+import { useEffect } from 'react'
+import WakeLock from '../components/use/wakeLock'
 
 export default function Meeting(props: { meetingId: string }) {
   const [meetingJoined] = useAtom(meetingJoinedAtom)
+  useEffect(() => {
+    const lock = new WakeLock()
+    if (meetingJoined) {
+      lock.request()
+    }
+    return () => {
+      lock.release()
+    }
+  }, [meetingJoined])
   return (
     <div className="flex flex-col justify-around min-h-screen">
       {meetingJoined