Add Wake Lock to transcription page to keep screen on

Author: Copilot

src/public/transcription/TranscriptionApp.tsx

@@ -5,6 +5,7 @@ import { usePasswordProtectedEvent } from '../hooks/usePasswordProtectedEvent'
 import { useTalkSelection } from './useTalkSelection'
 import { useAutoAdvanceAfterTalk } from './useAutoAdvanceAfterTalk'
 import { LiveTranscriptionView } from './LiveTranscriptionView'
+import { useWakeLock } from './useWakeLock'
 import { DateTime } from 'luxon'
 
 export type PublicEventTranscriptionProps = {
@@ -16,6 +17,8 @@ export const TranscriptionApp = ({ eventId }: PublicEventTranscriptionProps) =>
     const [selectedTrack, setSelectedTrack] = useLocalStorage<string>('selectedTrack', '')
     const [tempPagePassword, saveTempPagePassword] = useState<string>('')
 
+    useWakeLock()
+
     const { reply, eventData, isLoading, error } = usePasswordProtectedEvent(eventId, pagePassword)
     const gladiaAPIKey = reply?.gladiaAPIKey
 

src/public/transcription/useWakeLock.ts

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from 'react'
+
+/**
+ * Requests a screen wake lock so the display stays on while the component is mounted.
+ * The lock is automatically released when the component unmounts or when the page
+ * becomes hidden, and re-acquired when the page becomes visible again.
+ */
+export const useWakeLock = () => {
+    const wakeLockRef = useRef<WakeLockSentinel | null>(null)
+
+    useEffect(() => {
+        if (!('wakeLock' in navigator)) return
+
+        const acquire = async () => {
+            try {
+                wakeLockRef.current = await navigator.wakeLock.request('screen')
+            } catch {
+                // Wake lock request may fail if the document is not visible or the
+                // browser / OS denies the request. Fail silently.
+            }
+        }
+
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'visible') {
+                acquire()
+            }
+        }
+
+        acquire()
+        document.addEventListener('visibilitychange', handleVisibilityChange)
+
+        return () => {
+            document.removeEventListener('visibilitychange', handleVisibilityChange)
+            wakeLockRef.current?.release()
+            wakeLockRef.current = null
+        }
+    }, [])
+}