fix(ui): show progress 100% at the last page, closes #3383 (#3390)

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

@@ -46,12 +46,13 @@ const ProgressInfoView: React.FC<PageInfoProps> = ({
         : '{current} / {total}'
       : '{percent}%';
 
+  const { page = 0, pages = 0, atEnd = false } = view?.renderer || {};
   const lang = localStorage?.getItem('i18nextLng') || '';
   const localize = isVertical && lang.toLowerCase().startsWith('zh');
   const pageInfo = bookData?.isFixedLayout ? section : pageinfo;
-  const progressInfo = formatProgress(pageInfo?.current, pageInfo?.total, template, localize, lang);
+  const currentPage = atEnd && pageInfo?.total ? pageInfo.total - 1 : pageInfo?.current;
+  const progressInfo = formatProgress(currentPage, pageInfo?.total, template, localize, lang);
 
-  const { page = 0, pages = 0 } = view?.renderer || {};
   const current = page;
   const total = pages;
   const pagesLeft = Math.max(total - current - 1, 0);

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

@@ -61,6 +61,8 @@ export interface FoliateView extends HTMLElement {
     end: number;
     page: number;
     pages: number;
+    atStart: boolean;
+    atEnd: boolean;
     containerPosition: number;
     sideProp: 'width' | 'height';
     setAttribute: (name: string, value: string | number) => void;

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

@@ -14,7 +14,12 @@ export function formatProgress(
     return template
       .replace('{current}', currentStr)
       .replace('{total}', totalStr)
-      .replace('{percent}', (((current + 1) / total) * 100).toFixed(fractionDigits));
+      .replace(
+        '{percent}',
+        (((current + 1) / total) * 100).toFixed(
+          current + 1 < total && total > 100 ? fractionDigits : 0,
+        ),
+      );
   } else {
     return '';
   }