fix: reacquire wakelock when getting focus again

sivertschou · Nov 29, 2024 · 83cf2dc · 83cf2dc
1 parent c99b481
commit 83cf2dc
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/apps/frontend/src/context/WakeLockContext.tsx b/apps/frontend/src/context/WakeLockContext.tsx
@@ -11,6 +11,16 @@ export const WakeLockContextProvider = ({
   const { isRunning } = useData();
   const [wakeLock, setWakeLock] = React.useState<WakeLockSentinel | null>(null);
 
+  const documentVisibility = React.useSyncExternalStore(
+    (callback) => {
+      document.addEventListener('visibilitychange', callback);
+      return () => {
+        document.removeEventListener('visibilitychange', callback);
+      };
+    },
+    () => document.visibilityState
+  );
+
   const acquireWakeLock = async () => {
     const wl = await navigator.wakeLock.request('screen');
     setWakeLock(wl);
@@ -19,14 +29,14 @@ export const WakeLockContextProvider = ({
     });
   };
   React.useEffect(() => {
-    if (isRunning) {
+    if (isRunning && documentVisibility === 'visible') {
       acquireWakeLock().catch(() => console.warn('Could not acquire wakeLock'));
     } else if (wakeLock) {
       wakeLock
         .release()
         .catch(() => console.warn('Could not release wakeLock'));
     }
-  }, [isRunning]);
+  }, [isRunning, documentVisibility]);
 
   return (
     <WakeLockContext.Provider value={null}>{children}</WakeLockContext.Provider>