Add recipe mode on the page

src/lib/wakeLock.js

@@ -0,0 +1,31 @@
+let sentinel = null;
+
+export async function enableRecipeMode(){
+    if(typeof navigator === "undefined" || !("wakeLock" in navigator)) return false;
+
+    try{
+        sentinel = await navigator.wakeLock.request("screen");
+        sentinel.addEventListener("release", ()=>{sentinel = null});
+        return true;
+    }catch{
+        return false;
+    }
+}
+
+export async function disableRecipeMode(){
+    await sentinel?.release();
+    sentinel = null;
+}
+
+export function attachVisibilityReacquire(enabled){
+    if(typeof document === "undefined") return () => {};
+
+    async function onVis(){
+        const isEnabled = typeof enabled === "function" ? enabled() : enabled;
+        if(document.visibilityState === "visible" && isEnabled){
+            await enableRecipeMode();
+        }
+    }
+    document.addEventListener("visibilitychange", onVis);
+    return () => document.removeEventListener("visibilitychange", onVis);
+}

src/routes/recipe/[recipeId]/+page.svelte

@@ -1,5 +1,26 @@
 <script>
+    import {onMount} from "svelte";
+    import {enableRecipeMode, disableRecipeMode, attachVisibilityReacquire} from "$lib/wakeLock.js";
+
     let {data} = $props();
+    let on = $state(false);
+
+    async function toggle(){
+        if(on){
+            await disableRecipeMode();
+            on = false;
+            return;
+        }
+        on = await enableRecipeMode();
+    }
+
+    onMount(()=>{
+        const stop = attachVisibilityReacquire(()=>on);
+        return ()=>{
+            stop();
+            disableRecipeMode();
+        };
+    });
 </script>
 
 <div class="container">
@@ -33,6 +54,7 @@
         <a class="button" href="/recipe/{data.recipe.id}/edit">Edit</a>
         <button>Printable PDF</button>
         <button>Link</button>
+        <button onclick={toggle}>{on ? "Recipe Mode On" : "Recipe Mode Off"}</button>
     </div>
 </div>