feat: add volume keys for page turning, closes #471 (#982)

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -6,6 +6,7 @@ import { useThemeStore } from '@/store/themeStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useParallelViewStore } from '@/store/parallelViewStore';
 import { useClickEvent, useTouchEvent } from '../hooks/useIframeEvents';
+import { usePageFlip } from '../hooks/usePageFlip';
 import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { useProgressSync } from '../hooks/useProgressSync';
 import { useProgressAutoSave } from '../hooks/useProgressAutoSave';
@@ -138,8 +139,9 @@ const FoliateViewer: React.FC<{
     }
   };
 
+  const { handlePageFlip } = usePageFlip(bookKey, viewRef, containerRef);
   useTouchEvent(bookKey, viewRef);
-  const { handleTurnPage } = useClickEvent(bookKey, viewRef, containerRef);
+  useClickEvent(bookKey, handlePageFlip);
 
   useFoliateEvents(viewRef.current, {
     onLoad: docLoadHandler,
@@ -223,7 +225,7 @@ const FoliateViewer: React.FC<{
     <>
       <div
         className='foliate-viewer h-[100%] w-[100%]'
-        onClick={(event) => handleTurnPage(event)}
+        onClick={(event) => handlePageFlip(event)}
         ref={containerRef}
       />
     </>

apps/readest-app/src/app/reader/components/FooterBar.tsx

@@ -103,7 +103,6 @@ const FooterBar: React.FC<FooterBarProps> = ({
   };
 
   const handleSetActionTab = (tab: string) => {
-    console.log('handleSetActionTab', tab);
     setActionTab(actionTab === tab ? '' : tab);
     if (tab === 'tts') {
       setHoveredBookKey('');
@@ -130,9 +129,10 @@ const FooterBar: React.FC<FooterBarProps> = ({
   const isVisible = hoveredBookKey === bookKey;
   const progressInfo = bookFormat === 'PDF' ? section : pageinfo;
   const progressValid = !!progressInfo;
-  const progressFraction = progressValid
-    ? ((progressInfo!.next ?? progressInfo!.current) + 1) / progressInfo!.total
-    : 0;
+  const progressFraction =
+    progressValid && progressInfo?.total > 0
+      ? ((progressInfo!.next ?? progressInfo!.current) + 1) / progressInfo!.total || 0
+      : 0;
 
   return (
     <>

apps/readest-app/src/app/reader/components/NotebookToggler.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { LuNotebookPen } from 'react-icons/lu';
 
+import { useEnv } from '@/context/EnvContext';
+import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { useNotebookStore } from '@/store/notebookStore';
 import { useTranslation } from '@/hooks/useTranslation';
@@ -13,11 +15,16 @@ interface NotebookTogglerProps {
 
 const NotebookToggler: React.FC<NotebookTogglerProps> = ({ bookKey }) => {
   const _ = useTranslation();
+  const { appService } = useEnv();
+  const { setHoveredBookKey } = useReaderStore();
   const { sideBarBookKey, setSideBarBookKey } = useSidebarStore();
   const { isNotebookVisible, toggleNotebook } = useNotebookStore();
   const iconSize16 = useResponsiveSize(16);
 
   const handleToggleSidebar = () => {
+    if (appService?.isMobile) {
+      setHoveredBookKey('');
+    }
     if (sideBarBookKey === bookKey) {
       toggleNotebook();
     } else {

apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx

@@ -5,6 +5,7 @@ import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useDeviceControlStore } from '@/store/deviceStore';
 import { getStyles } from '@/utils/style';
 import { saveViewSettings } from '../../utils/viewSettingsHelper';
 import { TRANSLATED_LANGS } from '@/services/constants';
@@ -16,12 +17,14 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const _ = useTranslation();
   const { envConfig, appService } = useEnv();
   const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
+  const { acquireVolumeKeyInterception, releaseVolumeKeyInterception } = useDeviceControlStore();
   const { getView, getViewSettings, setViewSettings } = useReaderStore();
   const viewSettings = getViewSettings(bookKey)!;
 
   const [animated, setAnimated] = useState(viewSettings.animated!);
   const [isDisableClick, setIsDisableClick] = useState(viewSettings.disableClick!);
   const [swapClickArea, setSwapClickArea] = useState(viewSettings.swapClickArea!);
+  const [volumeKeysToFlip, setVolumeKeysToFlip] = useState(viewSettings.volumeKeysToFlip!);
   const [isContinuousScroll, setIsContinuousScroll] = useState(viewSettings.continuousScroll!);
   const [draftStylesheet, setDraftStylesheet] = useState(viewSettings.userStylesheet!);
   const [draftStylesheetSaved, setDraftStylesheetSaved] = useState(true);
@@ -140,6 +143,18 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [swapClickArea]);
 
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'volumeKeysToFlip', volumeKeysToFlip, false, false);
+    if (appService?.isMobileApp) {
+      if (volumeKeysToFlip) {
+        acquireVolumeKeyInterception();
+      } else {
+        releaseVolumeKeyInterception();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [volumeKeysToFlip]);
+
   useEffect(() => {
     saveViewSettings(envConfig, bookKey, 'continuousScroll', isContinuousScroll, false, false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -198,17 +213,28 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                 onChange={() => setIsContinuousScroll(!isContinuousScroll)}
               />
             </div>
+            {appService?.isMobileApp && (
+              <div className='config-item'>
+                <span className=''>{_('Volume Keys for Page Flip')}</span>
+                <input
+                  type='checkbox'
+                  className='toggle'
+                  checked={volumeKeysToFlip}
+                  onChange={() => setVolumeKeysToFlip(!volumeKeysToFlip)}
+                />
+              </div>
+            )}
             <div className='config-item'>
-              <span className=''>{_('Disable Click-to-Flip')}</span>
+              <span className=''>{_('Clicks for Page Flip')}</span>
               <input
                 type='checkbox'
                 className='toggle'
-                checked={isDisableClick}
+                checked={!isDisableClick}
                 onChange={() => setIsDisableClick(!isDisableClick)}
               />
             </div>
             <div className='config-item'>
-              <span className=''>{_('Swap Click-to-Flip Area')}</span>
+              <span className=''>{_('Swap Clicks Area')}</span>
               <input
                 type='checkbox'
                 className='toggle'