feat: apply progress style to footerbar progress (#2556)

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

@@ -6,7 +6,9 @@ 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 Button from '@/components/Button';
 
 const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
@@ -18,15 +20,24 @@ const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
   onSpeakText,
 }) => {
   const _ = useTranslation();
-  const { hoveredBookKey, getView, getViewState, getViewSettings } = useReaderStore();
+  const { hoveredBookKey, getView, getViewState, getProgress, getViewSettings } = useReaderStore();
+  const { getBookData } = useBookDataStore();
   const view = getView(bookKey);
+  const bookData = getBookData(bookKey);
+  const progress = getProgress(bookKey);
   const viewState = getViewState(bookKey);
   const viewSettings = getViewSettings(bookKey);
+  const progressStyle = viewSettings?.progressStyle || 'percentage';
 
   const [progressValue, setProgressValue] = React.useState(
     progressValid ? progressFraction * 100 : 0,
   );
 
+  const { section, pageinfo } = progress || {};
+  const template = progressStyle === 'fraction' ? '{current} / {total}' : '{percent}%';
+  const pageInfo = bookData?.isFixedLayout ? section : pageinfo;
+  const progressInfo = formatProgress(pageInfo?.current, pageInfo?.total, template, false, 'en', 0);
+
   const rangeInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -99,7 +110,7 @@ const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
           aria-label={`${_('Reading Progress')}: ${Math.round(progressFraction * 100)}%`}
           className='mx-2 text-center text-sm'
         >
-          <span aria-hidden='true'>{`${Math.round(progressFraction * 100)}%`}</span>
+          <span aria-hidden='true'>{progressInfo}</span>
         </span>
       )}
       <input

apps/readest-app/src/utils/progress.ts

@@ -6,6 +6,7 @@ export function formatProgress(
   template: string,
   localize: boolean = false,
   language: string = 'en',
+  fractionDigits: number = 1,
 ): string {
   if (current !== undefined && total !== undefined && total > 0 && current >= 0) {
     const currentStr = localize ? localizeNumber(current + 1, language, true) : String(current + 1);
@@ -13,7 +14,7 @@ export function formatProgress(
     return template
       .replace('{current}', currentStr)
       .replace('{total}', totalStr)
-      .replace('{percent}', (((current + 1) / total) * 100).toFixed(1));
+      .replace('{percent}', (((current + 1) / total) * 100).toFixed(fractionDigits));
   } else {
     return '';
   }