feat(config): add an option to toggle footbar by tapping on the footbar (#2891)

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

@@ -74,6 +74,8 @@ const ProgressInfoView: React.FC<PageInfoProps> = ({
   const [progressInfoMode, setProgressInfoMode] = useState(viewSettings.progressInfoMode);
 
   const cycleProgressInfoModes = () => {
+    if (!viewSettings.tapToToggleFooter) return;
+
     const hasRemainingInfo = viewSettings.showRemainingTime || viewSettings.showRemainingPages;
     const hasProgressInfo = viewSettings.showProgressInfo;
     const modeSequence: (typeof progressInfoMode)[] = ['all', 'remaining', 'progress', 'none'];

apps/readest-app/src/components/settings/LayoutPanel.tsx

@@ -70,6 +70,7 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
   const [showRemainingTime, setShowRemainingTime] = useState(viewSettings.showRemainingTime);
   const [showRemainingPages, setShowRemainingPages] = useState(viewSettings.showRemainingPages);
   const [showProgressInfo, setShowProgressInfo] = useState(viewSettings.showProgressInfo);
+  const [tapToToggleFooter, setTapToToggleFooter] = useState(viewSettings.tapToToggleFooter);
   const [progressStyle, setProgressStyle] = useState(viewSettings.progressStyle);
   const [screenOrientation, setScreenOrientation] = useState(viewSettings.screenOrientation);
   const resetToDefaults = useResetViewSettings();
@@ -104,6 +105,7 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
       showRemainingTime: setShowRemainingTime,
       showRemainingPages: setShowRemainingPages,
       showProgressInfo: setShowProgressInfo,
+      tapToToggleFooter: setTapToToggleFooter,
       showMarginsOnScroll: setShowMarginsOnScroll,
     });
   };
@@ -338,6 +340,11 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [progressStyle]);
 
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'tapToToggleFooter', tapToToggleFooter, false, false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tapToToggleFooter]);
+
   useEffect(() => {
     if (showHeader === viewSettings.showHeader) return;
     if (showHeader && !viewSettings.vertical) {
@@ -695,6 +702,16 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
                 disabled={!showProgressInfo}
               />
             </div>
+            <div className='config-item'>
+              <span className=''>{_('Tap to Toggle Footer')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={tapToToggleFooter}
+                disabled={!showFooter}
+                onChange={() => setTapToToggleFooter(!tapToToggleFooter)}
+              />
+            </div>
             <div className='config-item'>
               <span className=''>{_('Apply also in Scrolled Mode')}</span>
               <input

apps/readest-app/src/services/constants.ts

@@ -231,6 +231,7 @@ export const DEFAULT_VIEW_CONFIG: ViewConfig = {
   showRemainingTime: false,
   showRemainingPages: false,
   showProgressInfo: true,
+  tapToToggleFooter: false,
   showMarginsOnScroll: false,
   progressStyle: 'fraction',
   progressInfoMode: 'all',

apps/readest-app/src/types/book.ts

@@ -185,6 +185,7 @@ export interface ViewConfig {
   showRemainingTime: boolean;
   showRemainingPages: boolean;
   showProgressInfo: boolean;
+  tapToToggleFooter: boolean;
   showBarsOnScroll: boolean;
   showMarginsOnScroll: boolean;
   progressStyle: 'percentage' | 'fraction';