fix(rtl): fix page navigation for Arabic books (#3817)

* fix(rtl): fix page navigation for Arabic books

* fix(rtl): unified navigation handlers for rtl and ltr

---------

Co-authored-by: Huang Xin <chrox.huang@gmail.com>

apps/readest-app/.claude/skills/gstack

@@ -1 +1 @@
-Subproject commit 6169273d16b7ab8690943241fa802e5a1ca85305
+Subproject commit dbd7aee5b6b5bb41b17ae7747568e2fda8a91d77

apps/readest-app/src/app/reader/components/footerbar/DesktopFooterBar.tsx

@@ -4,12 +4,12 @@ import { FaHeadphones } from 'react-icons/fa6';
 import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
 import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
 import { RiArrowLeftDoubleLine, RiArrowRightDoubleLine } from 'react-icons/ri';
-import { getNavigationIcon, getNavigationLabel, getNavigationHandler } from './utils';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useBookDataStore } from '@/store/bookDataStore';
-import { FooterBarChildProps } from './types';
 import { formatProgress } from '@/utils/progress';
+import { FooterBarChildProps } from './types';
+import { getNavigationIcon } from './utils';
 import Button from '@/components/Button';
 
 const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
@@ -86,23 +86,15 @@ const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
             <RiArrowLeftDoubleLine />,
             <RiArrowRightDoubleLine />,
           )}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onPrevSection,
-            navigationHandlers.onNextSection,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Previous Section'), _('Next Section'))}
+          onClick={navigationHandlers.onPrevSection}
+          label={_('Previous Section')}
         />
       )}
       {!viewSettings?.showPaginationButtons && (
         <Button
           icon={getNavigationIcon(viewSettings?.rtl, <RiArrowLeftSLine />, <RiArrowRightSLine />)}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onPrevPage,
-            navigationHandlers.onNextPage,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Previous Page'), _('Next Page'))}
+          onClick={navigationHandlers.onPrevPage}
+          label={_('Previous Page')}
         />
       )}
       <Button
@@ -144,12 +136,8 @@ const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
       {!viewSettings?.showPaginationButtons && (
         <Button
           icon={getNavigationIcon(viewSettings?.rtl, <RiArrowRightSLine />, <RiArrowLeftSLine />)}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onNextPage,
-            navigationHandlers.onPrevPage,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Next Page'), _('Previous Page'))}
+          onClick={navigationHandlers.onNextPage}
+          label={_('Next Page')}
         />
       )}
       {!viewSettings?.showPaginationButtons && (
@@ -159,12 +147,8 @@ const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
             <RiArrowRightDoubleLine />,
             <RiArrowLeftDoubleLine />,
           )}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onNextSection,
-            navigationHandlers.onPrevSection,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Next Section'), _('Previous Section'))}
+          onClick={navigationHandlers.onNextSection}
+          label={_('Next Section')}
         />
       )}
     </div>

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

@@ -10,7 +10,6 @@ import { useDeviceControlStore } from '@/store/deviceStore';
 import { eventDispatcher } from '@/utils/event';
 import { FooterBarProps, NavigationHandlers, FooterBarChildProps } from './types';
 import { debounce } from '@/utils/debounce';
-import { viewPagination } from '../../hooks/usePagination';
 import { RSVPControl } from '../rsvp';
 import MobileFooterBar from './MobileFooterBar';
 import DesktopFooterBar from './DesktopFooterBar';
@@ -68,12 +67,12 @@ const FooterBar: React.FC<FooterBarProps> = ({
   );
 
   const handleGoPrevPage = useCallback(() => {
-    viewPagination(view, viewSettings, 'left', 'page');
-  }, [view, viewSettings]);
+    view?.renderer.prev();
+  }, [view]);
 
   const handleGoNextPage = useCallback(() => {
-    viewPagination(view, viewSettings, 'right', 'page');
-  }, [view, viewSettings]);
+    view?.renderer.next();
+  }, [view]);
 
   const handleGoPrevSection = useCallback(() => {
     view?.renderer.prevSection?.();

apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx

@@ -3,12 +3,11 @@ import React, { useCallback, useEffect } from 'react';
 import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
 import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
 import { RiArrowLeftDoubleLine, RiArrowRightDoubleLine } from 'react-icons/ri';
-import { getNavigationIcon, getNavigationLabel, getNavigationHandler } from './utils';
 import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
-import { ViewSettings } from '@/types/book';
 import { NavigationHandlers } from './types';
+import { getNavigationIcon } from './utils';
 import Button from '@/components/Button';
 import Slider from '@/components/Slider';
 
@@ -18,7 +17,6 @@ interface NavigationPanelProps {
   progressFraction: number;
   progressValid: boolean;
   navigationHandlers: NavigationHandlers;
-  viewSettings?: ViewSettings;
   bottomOffset: string;
   sliderHeight: number;
   forceMobileLayout: boolean;
@@ -30,15 +28,15 @@ export const NavigationPanel: React.FC<NavigationPanelProps> = ({
   progressFraction,
   progressValid,
   navigationHandlers,
-  viewSettings,
   bottomOffset,
   sliderHeight,
   forceMobileLayout,
 }) => {
   const _ = useTranslation();
   const { appService } = useEnv();
-  const { getView } = useReaderStore();
+  const { getView, getViewSettings } = useReaderStore();
   const view = getView(bookKey);
+  const viewSettings = getViewSettings(bookKey);
 
   const [progressValue, setProgressValue] = React.useState(
     progressValid ? progressFraction * 100 : 0,
@@ -92,21 +90,13 @@ export const NavigationPanel: React.FC<NavigationPanelProps> = ({
             <RiArrowLeftDoubleLine />,
             <RiArrowRightDoubleLine />,
           )}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onPrevSection,
-            navigationHandlers.onNextSection,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Previous Section'), _('Next Section'))}
+          onClick={navigationHandlers.onPrevSection}
+          label={_('Previous Section')}
         />
         <Button
           icon={getNavigationIcon(viewSettings?.rtl, <RiArrowLeftSLine />, <RiArrowRightSLine />)}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onPrevPage,
-            navigationHandlers.onNextPage,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Previous Page'), _('Next Page'))}
+          onClick={navigationHandlers.onPrevPage}
+          label={_('Previous Page')}
         />
         <Button
           icon={getNavigationIcon(
@@ -130,12 +120,8 @@ export const NavigationPanel: React.FC<NavigationPanelProps> = ({
         />
         <Button
           icon={getNavigationIcon(viewSettings?.rtl, <RiArrowRightSLine />, <RiArrowLeftSLine />)}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onNextPage,
-            navigationHandlers.onPrevPage,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Next Page'), _('Previous Page'))}
+          onClick={navigationHandlers.onNextPage}
+          label={_('Next Page')}
         />
         <Button
           icon={getNavigationIcon(
@@ -143,12 +129,8 @@ export const NavigationPanel: React.FC<NavigationPanelProps> = ({
             <RiArrowRightDoubleLine />,
             <RiArrowLeftDoubleLine />,
           )}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onNextSection,
-            navigationHandlers.onPrevSection,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Next Section'), _('Previous Section'))}
+          onClick={navigationHandlers.onNextSection}
+          label={_('Next Section')}
         />
       </div>
     </div>

apps/readest-app/src/app/reader/hooks/usePagination.ts

@@ -55,7 +55,7 @@ export const viewPagination = (
 ) => {
   if (!view || !viewSettings) return;
   const renderer = view.renderer;
-  if (view.book.dir === 'rtl') {
+  if (viewSettings.rtl) {
     side = swapLeftRight(side);
   }
   if (renderer.scrolled) {

packages/foliate-js

@@ -1 +1 @@
-Subproject commit ec7e16aa483429701c7f4f19ab909ecae79dfd58
+Subproject commit 183f296aaf1484e143edd6c3eb55fb77673df3de