From 77bba7bd0c183f3b1b02135889d5b87e6fb5de6b Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Thu, 6 Mar 2025 18:22:06 +0800
Subject: [PATCH] fix: use section info for PDF progress bar, closes #158
 (#501)

---
 .../src/app/reader/components/BooksGrid.tsx   | 12 +++++++---
 .../src/app/reader/components/FooterBar.tsx   | 22 ++++++++++++++-----
 .../src/app/reader/components/PageInfo.tsx    |  4 ++--
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/BooksGrid.tsx b/apps/readest-app/src/app/reader/components/BooksGrid.tsx
index f090c3bd..10d1b2eb 100644
--- a/apps/readest-app/src/app/reader/components/BooksGrid.tsx
+++ b/apps/readest-app/src/app/reader/components/BooksGrid.tsx
@@ -85,14 +85,20 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
                 <HintInfo bookKey={bookKey} gapRight={marginGap} />
                 <PageInfoView
                   bookFormat={book.format}
-                  section={section ?? null}
-                  pageinfo={pageinfo ?? null}
+                  section={section}
+                  pageinfo={pageinfo}
                   gapRight={marginGap}
                 />
               </>
             )}
             <Annotator bookKey={bookKey} />
-            <FooterBar bookKey={bookKey} pageinfo={pageinfo} isHoveredAnim={false} />
+            <FooterBar
+              bookKey={bookKey}
+              bookFormat={book.format}
+              section={section}
+              pageinfo={pageinfo}
+              isHoveredAnim={false}
+            />
             {isFontLayoutSettingsDialogOpen && <SettingsDialog bookKey={bookKey} config={config} />}
           </div>
         );
diff --git a/apps/readest-app/src/app/reader/components/FooterBar.tsx b/apps/readest-app/src/app/reader/components/FooterBar.tsx
index 123bf91b..2b31f29f 100644
--- a/apps/readest-app/src/app/reader/components/FooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/FooterBar.tsx
@@ -9,15 +9,24 @@ import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { eventDispatcher } from '@/utils/event';
+import { PageInfo } from '@/types/book';
 import Button from '@/components/Button';
 
 interface FooterBarProps {
   bookKey: string;
-  pageinfo: { current: number; total: number } | undefined;
+  bookFormat: string;
+  section?: PageInfo;
+  pageinfo?: PageInfo;
   isHoveredAnim: boolean;
 }
 
-const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim }) => {
+const FooterBar: React.FC<FooterBarProps> = ({
+  bookKey,
+  bookFormat,
+  section,
+  pageinfo,
+  isHoveredAnim,
+}) => {
   const _ = useTranslation();
   const { appService } = useEnv();
   const { hoveredBookKey, setHoveredBookKey, getView, getProgress, getViewSettings } =
@@ -58,8 +67,9 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
     }
   };
 
-  const pageinfoValid = pageinfo && pageinfo.total > 0 && pageinfo.current >= 0;
-  const progressFraction = pageinfoValid ? pageinfo.current / pageinfo.total : 0;
+  const progressInfo = bookFormat === 'PDF' ? section : pageinfo;
+  const progressValid = !!progressInfo;
+  const progressFraction = progressValid ? (progressInfo!.current + 1) / progressInfo!.total : 0;
   return (
     <div
       className={clsx(
@@ -90,14 +100,14 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
         disabled={!view?.history.canGoForward}
       />
       <span className='mx-2 text-center text-sm'>
-        {pageinfoValid ? `${Math.round(progressFraction * 100)}%` : ''}
+        {progressValid ? `${Math.round(progressFraction * 100)}%` : ''}
       </span>
       <input
         type='range'
         className={clsx('text-base-content mx-2 w-full', viewSettings?.rtl && 'direction-rtl')}
         min={0}
         max={100}
-        value={pageinfoValid ? progressFraction * 100 : 0}
+        value={progressValid ? progressFraction * 100 : 0}
         onChange={(e) => handleProgressChange(e)}
       />
       <Button icon={<FaHeadphones />} onClick={handleSpeakText} tooltip={_('Speak')} />
diff --git a/apps/readest-app/src/app/reader/components/PageInfo.tsx b/apps/readest-app/src/app/reader/components/PageInfo.tsx
index 59dd5d28..51b29373 100644
--- a/apps/readest-app/src/app/reader/components/PageInfo.tsx
+++ b/apps/readest-app/src/app/reader/components/PageInfo.tsx
@@ -4,8 +4,8 @@ import { PageInfo } from '@/types/book';
 
 interface PageInfoProps {
   bookFormat: string;
-  section: PageInfo | null;
-  pageinfo: PageInfo | null;
+  section?: PageInfo;
+  pageinfo?: PageInfo;
   gapRight: string;
 }