feat: ✨ 进入阅读模式后将不再自动熄屏

Author: hymbz

src/components/Manga/hooks/useInit.ts

@@ -70,11 +70,11 @@ export const useInit = (props: MangaProps) => {
       state.prop.onExit = (isEnd?: boolean | Event) => {
         playAnimation(refs.exit);
         props.onExit?.(Boolean(isEnd));
-        document.exitFullscreen();
         setState((draftState) => {
           if (isEnd) draftState.activePageIndex = 0;
           draftState.show.endPage = undefined;
         });
+        if (document.fullscreenElement) document.exitFullscreen();
       };
     },
     onPrev(state) {

src/helper/other.ts

@@ -615,3 +615,31 @@ export abstract class AnimationFrame {
     this.animationId = 0;
   };
 }
+
+/** 锁定屏幕禁止自动熄屏 */
+export class WakeLock {
+  isSupported = false;
+
+  lock: WakeLockSentinel | null = null;
+
+  constructor() {
+    if (!('wakeLock' in navigator)) return;
+    this.isSupported = true;
+  }
+
+  on = async () => {
+    if (!this.isSupported) return null;
+    try {
+      this.lock = await navigator.wakeLock.request('screen');
+      return this.lock.released;
+    } catch {
+      return false;
+    }
+  };
+
+  off = async () => {
+    if (!this.lock) return;
+    await this.lock.release();
+    this.lock = null;
+  };
+}

src/userscript/useComponents/Manga.tsx

@@ -8,6 +8,7 @@ import {
   createRootMemo,
   mountComponents,
   querySelector,
+  WakeLock,
 } from 'helper';
 
 import { DownloadButton } from '../../components/DownloadButton';
@@ -68,6 +69,8 @@ export const useManga = async (initProps?: Partial<MangaProps>) => {
   const htmlStyle = document.documentElement.style;
   let lastOverflow = htmlStyle.overflow;
 
+  const wakeLock = new WakeLock();
+
   createEffectOn(
     createRootMemo(() => props.show && props.imgList.length > 0),
     (show) => {
@@ -77,10 +80,12 @@ export const useManga = async (initProps?: Partial<MangaProps>) => {
         htmlStyle.setProperty('overflow', 'hidden', 'important');
         htmlStyle.setProperty('scrollbar-width', 'none', 'important');
         if (store.option.autoFullscreen) refs.root.requestFullscreen();
+        wakeLock.on();
       } else {
         dom.removeAttribute('show');
         htmlStyle.overflow = lastOverflow;
         htmlStyle.removeProperty('scrollbar-width');
+        wakeLock.off();
       }
     },
     { defer: true },