feat: add screen lock option (#367)

* feat: add screen lock option

apps/web/src/lib/components/book-reader/book-reader.svelte

@@ -22,10 +22,12 @@
   import { iffBrowser } from '$lib/functions/rxjs/iff-browser';
   import { reduceToEmptyString } from '$lib/functions/rxjs/reduce-to-empty-string';
   import { writableSubject } from '$lib/functions/svelte/store';
+  import { logger } from '$lib/data/logger';
   import { imageLoadingState } from './image-loading-state';
   import { reactiveElements } from './reactive-elements';
   import type { AutoScroller, BookmarkManager, PageManager } from './types';
   import BookReaderPaginated from './book-reader-paginated/book-reader-paginated.svelte';
+  import { enableReaderWakeLock$ } from '$lib/data/store';
   import { onDestroy } from 'svelte';
 
   export let htmlContent: string;
@@ -102,6 +104,10 @@
 
   let showBlurMessage = false;
 
+  let wakeLock: WakeLockSentinel | undefined;
+
+  let visibilityState: DocumentVisibilityState;
+
   const mutationObserver: MutationObserver = new MutationObserver(handleMutation);
 
   const width$ = new Subject<number>();
@@ -115,7 +121,15 @@
       ? firstDimensionMargin * 2
       : 0;
 
-  onDestroy(() => mutationObserver.disconnect());
+  $: if ($enableReaderWakeLock$ && visibilityState === 'visible') {
+    setTimeout(requestWakeLock, 500);
+  }
+
+  onDestroy(() => {
+    mutationObserver.disconnect();
+
+    releaseWakeLock();
+  });
 
   const computedStyle$ = combineLatest([
     containerEl$.pipe(filter((el): el is HTMLElement => !!el)),
@@ -193,6 +207,32 @@
 
     showBlurMessage = mutation.target.style.filter.includes('blur');
   }
+
+  async function requestWakeLock() {
+    if (wakeLock && !wakeLock.released) {
+      return;
+    }
+
+    wakeLock = await navigator.wakeLock.request().catch(({ message }) => {
+      logger.error(`failed to request wakelock: ${message}`);
+
+      return undefined;
+    });
+
+    if (wakeLock) {
+      wakeLock.addEventListener('release', releaseWakeLock, false);
+    }
+  }
+
+  async function releaseWakeLock() {
+    if (wakeLock && !wakeLock.released) {
+      await wakeLock.release().catch(() => {
+        // no-op
+      });
+    }
+
+    wakeLock = undefined;
+  }
 </script>
 
 {#if showBlurMessage}
@@ -282,3 +322,4 @@
 </div>
 {$blurListener$ ?? ''}
 {$reactiveElements$ ?? ''}
+<svelte:document bind:visibilityState />

apps/web/src/lib/components/settings/settings-content.svelte

@@ -72,6 +72,8 @@
 
   export let writingMode: WritingMode;
 
+  export let enableReaderWakeLock: boolean;
+
   export let showCharacterCounter: boolean;
 
   export let secondDimensionMaxValue: number;
@@ -304,6 +306,7 @@
   let autoReplicationTypeTooltip = '';
   let trackerAutoPauseTooltip = '';
 
+  $: wakeLockSupported = browser && 'wakeLock' in navigator;
   $: verticalMode = writingMode === 'vertical-rl';
   $: fontCacheSupported = browser && 'caches' in window;
   $: switch (furiganaStyle) {
@@ -562,6 +565,17 @@
     <SettingsItemGroup title="Writing mode">
       <ButtonToggleGroup options={optionsForWritingMode} bind:selectedOptionId={writingMode} />
     </SettingsItemGroup>
+    {#if wakeLockSupported}
+      <SettingsItemGroup
+        title="Enable Screen Lock"
+        tooltip={'When enabled the reader site attempts to request a WakeLock that prevents device screens from dimming or locking'}
+      >
+        <ButtonToggleGroup
+          options={optionsForToggle}
+          bind:selectedOptionId={enableReaderWakeLock}
+        />
+      </SettingsItemGroup>
+    {/if}
     <SettingsItemGroup title="Show Character Counter">
       <ButtonToggleGroup options={optionsForToggle} bind:selectedOptionId={showCharacterCounter} />
     </SettingsItemGroup>

apps/web/src/lib/data/store.ts

@@ -82,6 +82,10 @@ export const writingMode$ = writableStringLocalStorageSubject<WritingMode>()(
   'writingMode',
   'vertical-rl'
 );
+export const enableReaderWakeLock$ = writableBooleanLocalStorageSubject()(
+  'enableReaderWakeLock',
+  false
+);
 export const verticalMode$ = writingMode$.pipe(map((writingMode) => writingMode === 'vertical-rl'));
 export const showCharacterCounter$ = writableBooleanLocalStorageSubject()(
   'showCharacterCounter',

apps/web/src/routes/settings/+page.svelte

@@ -16,6 +16,7 @@
     confirmClose$,
     customReadingPointEnabled$,
     disableWheelNavigation$,
+    enableReaderWakeLock$,
     firstDimensionMargin$,
     fontFamilyGroupOne$,
     fontFamilyGroupTwo$,
@@ -117,6 +118,7 @@
       bind:hideFurigana={$hideFurigana$}
       bind:furiganaStyle={$furiganaStyle$}
       bind:writingMode={$writingMode$}
+      bind:enableReaderWakeLock={$enableReaderWakeLock$}
       bind:showCharacterCounter={$showCharacterCounter$}
       bind:viewMode={$viewMode$}
       bind:secondDimensionMaxValue={$secondDimensionMaxValue$}