feat: ✨ 增加全屏按钮

#209
hymbz · Dec 24, 2024 · 8cf5069 · 8cf5069
1 parent 7acaa9d
commit 8cf5069
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 0 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -14,6 +14,8 @@
     "download_completed": "Download completed",
     "downloading": "Downloading",
     "exit": "Exit",
+    "fullscreen": "Fullscreen",
+    "fullscreen_exit": "Exit Fullscreen",
     "grid_mode": "Grid mode",
     "packaging": "Packaging",
     "page_fill": "Page fill",

diff --git a/locales/ru.json b/locales/ru.json
@@ -14,6 +14,8 @@
     "download_completed": "Загрузка завершена",
     "downloading": "Скачивание",
     "exit": "Выход",
+    "fullscreen": "полноэкранный",
+    "fullscreen_exit": "выйти из полноэкранного режима",
     "grid_mode": "Режим сетки",
     "packaging": "Упаковка",
     "page_fill": "Заполнить страницу",

diff --git a/locales/zh.json b/locales/zh.json
@@ -14,6 +14,8 @@
     "download_completed": "下载完成",
     "downloading": "下载中",
     "exit": "退出",
+    "fullscreen": "全屏",
+    "fullscreen_exit": "退出全屏",
     "grid_mode": "网格模式",
     "packaging": "打包中",
     "page_fill": "页面填充",

diff --git a/src/components/Manga/actions/switch.ts b/src/components/Manga/actions/switch.ts
@@ -79,3 +79,9 @@ export const switchFitToWidth = () => {
   });
   jump();
 };
+
+/** 切换全屏 */
+export const switchFullscreen = () => {
+  if (document.fullscreenElement) document.exitFullscreen();
+  else refs.root.requestFullscreen();
+};
diff --git a/src/components/Manga/defaultButtonList.tsx b/src/components/Manga/defaultButtonList.tsx
@@ -7,6 +7,8 @@ import MdTranslate from '@material-design-icons/svg/round/translate.svg';
 import MdGrid from '@material-design-icons/svg/round/grid_4x4.svg';
 import MdZoomIn from '@material-design-icons/svg/round/zoom_in.svg';
 import MdZoomOut from '@material-design-icons/svg/round/zoom_out.svg';
+import MdFullscreen from '@material-design-icons/svg/round/fullscreen.svg';
+import MdFullscreenExit from '@material-design-icons/svg/round/fullscreen_exit.svg';
 import { createMemo, type Component, createSignal, Show } from 'solid-js';
 import { createEffectOn, t } from 'helper';
 
@@ -26,6 +28,7 @@ import {
   isTranslatingImage,
   isOnePageMode,
   isScrollMode,
+  switchFullscreen,
 } from './actions';
 import classes from './index.module.css';
 
@@ -116,6 +119,17 @@ export const defaultButtonList: ToolbarButtonList = [
       />
     </Show>
   ),
+  // 全屏
+  () => (
+    <IconButton
+      tip={
+        store.fullscreen ? t('button.fullscreen_exit') : t('button.fullscreen')
+      }
+      hidden={!refs.root.requestFullscreen}
+      onClick={switchFullscreen}
+      children={store.fullscreen ? <MdFullscreenExit /> : <MdFullscreen />}
+    />
+  ),
   // 翻译设置
   () => (
     <IconButton

diff --git a/src/components/Manga/hooks/useInit.ts b/src/components/Manga/hooks/useInit.ts
@@ -21,6 +21,7 @@ import {
 } from '../actions';
 import { defaultOption, type Option } from '../store/option';
 import { playAnimation } from '../helper';
+import classes from '../index.module.css';
 
 const createComicImg = (src: string): ComicImg => ({
   src,
@@ -232,5 +233,14 @@ export const useInit = (props: MangaProps) => {
     _setState('supportWorker', Boolean(new Worker(codeUrl)));
   }, 0);
 
+  refs.root.addEventListener('fullscreenchange', () => {
+    if (!document.fullscreenElement) return _setState('fullscreen', false);
+    if (
+      document.fullscreenElement.id === 'comicRead' ||
+      document.fullscreenElement.classList.contains(classes.root)
+    )
+      _setState('fullscreen', true);
+  });
+
   focus();
 };
diff --git a/src/components/Manga/store/other.ts b/src/components/Manga/store/other.ts
@@ -7,6 +7,8 @@ export const otherState = {
    * - 在首次触发结束页时开启，一段时间关闭。开启时禁止触发结束页的上下话切换功能。
    */
   scrollLock: false,
+  /** 当前是否处于全屏状态 */
+  fullscreen: false,
 
   rootSize: { width: 0, height: 0 },
   scrollbarSize: { width: 0, height: 0 },