fix: use section info for PDF progress bar, closes #158 (#501)

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>
         );

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')} />

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;
 }