From 57d17a1fa605084e00bb32ba73ef5b170be7b2fb Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Tue, 11 Oct 2022 16:12:45 +0200
Subject: [PATCH] Requesting a wake lock so that the screen is not
 dimmedwhileusing the app.

---
 src/App.tsx | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index ae55bf4..a85fa8a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,11 +28,39 @@ import Map from './components/map/map';
 
 setupIonicReact();
 
+// See https://stackoverflow.com/questions/71538643/property-wakelock-does-not-exist-on-type-navigator
+const requestWakeLock = async () => {
+  const anyNav: any = navigator;
+  if ('wakeLock' in navigator) {
+    try {
+      const wakeLock = await anyNav['wakeLock'].request('screen');
+    } catch (err: any) {
+      // The wake lock request fails - usually system-related, such as low battery.
+      console.log(`Wake lock request failed: ${err.name}, ${err.message}`);
+    }
+  } else {
+    console.log('No wake lock support here...');
+  }
+};
+
+const handleVisibilityChange = () => {
+  if (document.hidden) {
+    console.log('Application hidden');
+  } else {
+    console.log('Application visible');
+    requestWakeLock();
+  }
+};
+
+// See https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
+document.addEventListener('visibilitychange', handleVisibilityChange, false);
+requestWakeLock();
+
 const App: React.FC = () => {
   return (
     <IonApp>
       <Provider store={store}>
-        <PouchDB name='dyomedea' auto_compaction={true} revs_limit={10} >
+        <PouchDB name='dyomedea' auto_compaction={true} revs_limit={10}>
           <Suspense fallback='loading...'>
             <Map />
           </Suspense>