too persistent!

dhonus · Jan 6, 2024 · 9d7c5ce · 9d7c5ce
1 parent 533c2b5
commit 9d7c5ce
Showing 1 changed file with 93 additions and 78 deletions.
diff --git a/static/js/screen.js b/static/js/screen.js
@@ -1,7 +1,5 @@
 // This magical script can prevent the screen from sleeping so you can cook in peace.
 
-const recipeDiv = document.querySelector('div.recipe');
-
 /*
 <span class="cooking-mode">
     <label class="switch">
@@ -13,6 +11,7 @@ const recipeDiv = document.querySelector('div.recipe');
 <div id="statusDiv"></div>
 */
 try {
+    const recipeDiv = document.querySelector('div.recipe');
     const cookingModeSpan = document.createElement('span');
     cookingModeSpan.classList.add('cooking-mode');
         const cookingModeLabel = document.createElement('label');
@@ -33,84 +32,100 @@ try {
     cookingModeSpan.appendChild(cookingModeText);
     recipeDiv.prepend(cookingModeStatus);
     recipeDiv.prepend(cookingModeSpan);
-} catch (e) {
-    console.log(e);
-}
 
-const wakeLockCheckbox = document.querySelector('#wakeLockCheckbox');
-const statusDiv = document.querySelector('#statusDiv');
+    const wakeLockCheckbox = document.querySelector('#wakeLockCheckbox');
+    const statusDiv = document.querySelector('#statusDiv');
 
-if ('WakeLock' in window && 'request' in window.WakeLock) {  
-  let wakeLock = null;
-
-  const requestWakeLock = () => {
-    const controller = new AbortController();
-    const signal = controller.signal;
-    window.WakeLock.request('screen', {signal})
-    .catch((e) => {      
-      if (e.name === 'AbortError') {
-        wakeLockCheckbox.checked = false;
-        statusDiv.textContent = 'Wake Lock was aborted';
-        console.log('Wake Lock was aborted');
-      } else {
-        statusDiv.textContent = `${e.name}, ${e.message}`;
-        console.error(`${e.name}, ${e.message}`);
-      }
-    });
-    wakeLockCheckbox.checked = true;
-    statusDiv.textContent = 'Wake Lock is active';
-    console.log('Wake Lock is active');
-    return controller;
-  };
-
-  wakeLockCheckbox.addEventListener('change', () => {
-    console.log(wakeLockCheckbox.checked);
-    if (wakeLockCheckbox.checked) {
-      wakeLock = requestWakeLock();
-    } else {
-      wakeLock.abort();
-      wakeLock = null;
-    }
-  });
+    if ('WakeLock' in window && 'request' in window.WakeLock) {  
+        let wakeLock = null;
+        
+        const requestWakeLock = () => {
+            const controller = new AbortController();
+            const signal = controller.signal;
+            window.WakeLock.request('screen', {signal})
+            .catch((e) => {      
+                if (e.name === 'AbortError') {
+                    wakeLockCheckbox.checked = false;
+                    statusDiv.textContent = 'Wake Lock was aborted';
+                    console.log('Wake Lock was aborted');
+                } else {
+                    statusDiv.textContent = `${e.name}, ${e.message}`;
+                    console.error(`${e.name}, ${e.message}`);
+                }
+            });
+            wakeLockCheckbox.checked = true;
+            statusDiv.textContent = 'Wake Lock is active';
+            console.log('Wake Lock is active');
+            return controller;
+        };
+        
+        wakeLockCheckbox.addEventListener('change', () => {
+            console.log(wakeLockCheckbox.checked);
+            if (wakeLockCheckbox.checked) {
+                wakeLock = requestWakeLock();
+            } else {
+                wakeLock.abort();
+                wakeLock = null;
+            }
+        });
 
-  document.addEventListener('visibilitychange', handleVisibilityChange);
-
-  const handleVisibilityChange = () => {    
-    if (wakeLock !== null && document.visibilityState === 'visible') {
-      wakeLock = requestWakeLock();
-    }
-  };
-} else if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {  
-  let wakeLock = null;
-
-  const requestWakeLock = async () => {
-    try {
-      wakeLock = await navigator.wakeLock.request('screen');
-      wakeLock.addEventListener('release', (e) => {
-        console.log(e);
-        wakeLockCheckbox.checked = false;
-        statusDiv.textContent = 'Wake Lock released';
-        console.log('Wake Lock was released');                    
-      });
-      wakeLockCheckbox.checked = true;
-      statusDiv.textContent = 'Your screen will not sleep';
-      console.log('Wake Lock is active');      
-    } catch (e) {      
-      wakeLockCheckbox.checked = false;
-      statusDiv.textContent = `${e.name}, ${e.message}`;
-      console.error(`${e.name}, ${e.message}`);
-    } 
-  };
-
-  wakeLockCheckbox.addEventListener('change', () => {
-    if (wakeLockCheckbox.checked) {
-      requestWakeLock();
-    } else {
-      wakeLock.release();
-      wakeLock = null;
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+
+        const handleVisibilityChange = () => {    
+            if (wakeLock !== null && document.visibilityState === 'visible') {
+                wakeLock = requestWakeLock();
+            }
+        };
+    } else if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {  
+    let wakeLock = null;
+
+    const requestWakeLock = async () => {
+        try {
+            wakeLock = await navigator.wakeLock.request('screen');
+            wakeLock.addEventListener('release', (e) => {
+                console.log(e);
+                wakeLockCheckbox.checked = false;
+                statusDiv.textContent = 'Wake Lock released';
+                console.log('Wake Lock was released');                    
+            });
+            wakeLockCheckbox.checked = true;
+            statusDiv.textContent = 'Your screen will not sleep';
+            console.log('Wake Lock is active');      
+        } catch (e) {      
+            wakeLockCheckbox.checked = false;
+            statusDiv.textContent = `${e.name}, ${e.message}`;
+            console.error(`${e.name}, ${e.message}`);
+        } 
+    };
+
+    // release if exists, we don't want it to persist
+    navigator.wakeLock.request('screen').then((wakeLock) => {
+        if (wakeLock !== null) {
+            wakeLock.release();
+            wakeLock = null;
+        }
+    });
+
+    wakeLockCheckbox.addEventListener('change', () => {
+        if (wakeLockCheckbox.checked) {
+            requestWakeLock();
+        } else {
+            wakeLock.release();
+            wakeLock = null;
+        }
+    });
+    } else {  
+        statusDiv.textContent = 'Wake Lock API not supported.';
+        console.error('Wake Lock API not supported.');
     }
-  });
-} else {  
-  statusDiv.textContent = 'Wake Lock API not supported.';
-  console.error('Wake Lock API not supported.');
+} catch (e) {
+    console.log('Not a recipe page');
+    // release wakeLock if exists
+    const wakeLock = navigator.wakeLock.request('screen').then((wakeLock) => {
+        if (wakeLock !== null) {
+            wakeLock.release();
+            wakeLock = null;
+            console.log('Wake Lock was released');
+        }
+    });
 }