Feature Wake Lock Screen while reading (#1126)

* Feature wakeLock

* Fix style

* Fix

* Fix

* Fix

---------

Co-authored-by: Vicente <vicente@per>

CHANGELOG.md

@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - (**Migration**) Add "in library" indicator
 - (**Settings/WebView**) Add setting to enable/disable WebView
 - (**Settings/Sync**) Add sync settings
+- (**Reader**) Add Wake lock screen while reading
 - (**Extension**) Support installing external JARs
 - (**Reader**) Add auto background color setting
 

src/features/metadata/Metadata.constants.ts

@@ -332,6 +332,9 @@ export const APP_METADATA: Record<
     shouldInformAboutScanlatorChange: {
         convert: convertToBoolean,
     },
+    shouldWakeLockScreen: {
+        convert: convertToBoolean,
+    },
     hideHistory: {
         convert: convertToBoolean,
     },

src/features/reader/Reader.types.ts

@@ -175,6 +175,7 @@ export interface IReaderSettingsGlobal {
     shouldShowTapZoneLayoutPreview: boolean;
     shouldInformAboutMissingChapter: boolean;
     shouldInformAboutScanlatorChange: boolean;
+    shouldWakeLockScreen: boolean;
     scrollAmount: ReaderScrollAmount;
     shouldUseInfiniteScroll: boolean;
     shouldShowTransitionPage: boolean;

src/features/reader/screens/Reader.tsx

@@ -28,6 +28,7 @@ import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import type { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useReaderResetStates } from '@/features/reader/hooks/useReaderResetStates.ts';
+import { useReaderWakeLock } from '@/features/reader/wake-lock/useReaderWakeLock.ts';
 import { useReaderSetSettingsState } from '@/features/reader/hooks/useReaderSetSettingsState.ts';
 import { useReaderShowSettingPreviewOnChange } from '@/features/reader/hooks/useReaderShowSettingPreviewOnChange.ts';
 import { useReaderSetChaptersState } from '@/features/reader/hooks/useReaderSetChaptersState.ts';
@@ -69,6 +70,7 @@ const BaseReader = ({
         backgroundColor,
         shouldShowReadingModePreview,
         shouldShowTapZoneLayoutPreview,
+        shouldWakeLockScreen,
         useAutoBackgroundColorContinuousMode,
     } = useReaderSettingsStore(
         'shouldSkipDupChapters',
@@ -76,6 +78,7 @@ const BaseReader = ({
         'backgroundColor',
         'shouldShowReadingModePreview',
         'shouldShowTapZoneLayoutPreview',
+        'shouldWakeLockScreen',
         'useAutoBackgroundColorContinuousMode',
     );
     const readingMode = useReaderSettingsStore('readingMode');
@@ -157,6 +160,7 @@ const BaseReader = ({
     }, [mangaResponse.data?.manga]);
 
     useReaderResetStates();
+    useReaderWakeLock(shouldWakeLockScreen);
     useReaderSetSettingsState(
         mangaResponse,
         defaultSettingsResponse,

src/features/reader/settings/ReaderSettings.constants.tsx

@@ -153,6 +153,7 @@ const GLOBAL_READER_SETTING_OBJECT: Record<keyof IReaderSettingsGlobal, undefine
     shouldShowTapZoneLayoutPreview: undefined,
     shouldInformAboutMissingChapter: undefined,
     shouldInformAboutScanlatorChange: undefined,
+    shouldWakeLockScreen: undefined,
     scrollAmount: undefined,
     shouldUseInfiniteScroll: undefined,
     shouldShowTransitionPage: undefined,
@@ -242,6 +243,7 @@ export const DEFAULT_READER_SETTINGS: IReaderSettings = {
     shouldShowTapZoneLayoutPreview: true,
     shouldInformAboutMissingChapter: true,
     shouldInformAboutScanlatorChange: true,
+    shouldWakeLockScreen: true,
     scrollAmount: ReaderScrollAmount.LARGE,
     shouldUseInfiniteScroll: true,
     shouldShowTransitionPage: true,

src/features/reader/settings/behaviour/ReaderBehaviourSettings.tsx

@@ -136,6 +136,11 @@ export const ReaderBehaviourSettings = ({
                 checked={settings.shouldInformAboutScanlatorChange}
                 onChange={(_, checked) => updateSetting('shouldInformAboutScanlatorChange', checked)}
             />
+            <CheckboxInput
+                label={t`Keep screen on`}
+                checked={settings.shouldWakeLockScreen}
+                onChange={(_, checked) => updateSetting('shouldWakeLockScreen', checked)}
+            />
             <ReaderSettingAutoScroll
                 autoScroll={settings.autoScroll}
                 setAutoScroll={(...args) => updateSetting('autoScroll', ...args)}

src/features/reader/wake-lock/useReaderWakeLock.ts

@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useEffect, useRef } from 'react';
+
+export function useReaderWakeLock(shouldLock: boolean) {
+    const wakeLockSentinelRef = useRef<WakeLockSentinel | null>(null);
+    useEffect(() => {
+        if (!('wakeLock' in navigator)) {
+            return;
+        }
+        const requestWakeLock = async () => {
+            try {
+                if (wakeLockSentinelRef.current) {
+                    return;
+                }
+                wakeLockSentinelRef.current = await navigator.wakeLock.request('screen');
+                wakeLockSentinelRef.current.addEventListener('release', () => {
+                    wakeLockSentinelRef.current = null;
+                });
+            } catch {
+                wakeLockSentinelRef.current = null;
+            }
+        };
+
+        const releaseWakeLock = async () => {
+            if (wakeLockSentinelRef.current) {
+                await wakeLockSentinelRef.current.release();
+                wakeLockSentinelRef.current = null;
+            }
+        };
+
+        const handleVisibilityChange = async () => {
+            if (document.visibilityState === 'visible' && shouldLock) {
+                await requestWakeLock();
+            }
+        };
+
+        if (shouldLock) {
+            requestWakeLock();
+            document.addEventListener('visibilitychange', handleVisibilityChange);
+        } else {
+            releaseWakeLock();
+        }
+
+        return () => {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+            releaseWakeLock();
+        };
+    }, [shouldLock]);
+}

src/i18n/locales/en.po

@@ -2166,6 +2166,10 @@ msgstr "Keep previous and upcoming chapters visible while reading in continuous
 msgid "Keep remote"
 msgstr "Keep remote"
 
+#: src/features/reader/settings/behaviour/ReaderBehaviourSettings.tsx
+msgid "Keep screen on"
+msgstr "Keep screen on"
+
 #: src/features/reader/settings/ReaderSettings.constants.tsx
 msgid "Keybinds"
 msgstr "Keybinds"