feat: add an option to show remaining pages in chapter (#1478)

2025-06-26 17:19:30 +08:00
parent 7bd1b03652
commit 3875c8f239
26 changed files with 136 additions and 26 deletions
@@ -383,5 +383,12 @@
  "Book Covers": "أغلفة الكتب",
  "Fit": "ملاءمة",
  "Reset {{settings}}": "إعادة تعيين {{settings}}",
-  "Reset Settings": "إعادة تعيين الإعدادات"
+  "Reset Settings": "إعادة تعيين الإعدادات",
+  "{{count}} pages left in chapter_zero": "لم يتبق أي صفحات في هذا الفصل",
+  "{{count}} pages left in chapter_one": "تبقّت صفحة واحدة في هذا الفصل",
+  "{{count}} pages left in chapter_two": "تبقّت صفحتان في هذا الفصل",
+  "{{count}} pages left in chapter_few": "تبقّت {{count}} صفحات في هذا الفصل",
+  "{{count}} pages left in chapter_many": "تبقّت {{count}} صفحة في هذا الفصل",
+  "{{count}} pages left in chapter_other": "تبقّى {{count}} صفحة في هذا الفصل",
+  "Show Remaining Pages": "عرض الصفحات المتبقية"
 }
@@ -371,5 +371,8 @@
  "Book Covers": "Buchcover",
  "Fit": "Anpassen",
  "Reset {{settings}}": "{{settings}} zurücksetzen",
-  "Reset Settings": "Einstellungen zurücksetzen"
+  "Reset Settings": "Einstellungen zurücksetzen",
+  "{{count}} pages left in chapter_one": "{{count}} Seite verbleibend im Kapitel",
+  "{{count}} pages left in chapter_other": "{{count}} Seiten verbleibend im Kapitel",
+  "Show Remaining Pages": "Verbleibende Seiten anzeigen"
 }
@@ -371,5 +371,8 @@
  "Book Covers": "Εξώφυλλα βιβλίων",
  "Fit": "Προσαρμογή",
  "Reset {{settings}}": "Επαναφορά {{settings}}",
-  "Reset Settings": "Επαναφορά ρυθμίσεων"
+  "Reset Settings": "Επαναφορά ρυθμίσεων",
+  "{{count}} pages left in chapter_one": "Μένει {{count}} σελίδα",
+  "{{count}} pages left in chapter_other": "Μένουν {{count}} σελίδες",
+  "Show Remaining Pages": "Εμφάνιση υπολοίπων"
 }
@@ -4,5 +4,7 @@
  "Are you sure to delete {{count}} selected book(s)?_one": "Are you sure to delete {{count}} selected book?",
  "Are you sure to delete {{count}} selected book(s)?_other": "Are you sure to delete {{count}} selected books?",
  "Search in {{count}} Book(s)..._one": "Search in {{count}} book...",
-  "Search in {{count}} Book(s)..._other": "Search in {{count}} books..."
+  "Search in {{count}} Book(s)..._other": "Search in {{count}} books...",
+  "{{count}} pages left in chapter_one": "{{count}} page left in chapter",
+  "{{count}} pages left in chapter_other": "{{count}} pages left in chapter"
 }
@@ -374,5 +374,9 @@
  "Book Covers": "Portadas de libros",
  "Fit": "Encajar",
  "Reset {{settings}}": "Restablecer {{settings}}",
-  "Reset Settings": "Restablecer configuración"
+  "Reset Settings": "Restablecer configuración",
+  "{{count}} pages left in chapter_one": "{{count}} página restante en el capítulo",
+  "{{count}} pages left in chapter_many": "{{count}} páginas restantes en el capítulo",
+  "{{count}} pages left in chapter_other": "{{count}} páginas restantes en el capítulo",
+  "Show Remaining Pages": "Mostrar resto"
 }
@@ -374,5 +374,9 @@
  "Book Covers": "Couvertures de livres",
  "Fit": "Adapter",
  "Reset {{settings}}": "Réinitialiser {{settings}}",
-  "Reset Settings": "Réinitialiser les paramètres"
+  "Reset Settings": "Réinitialiser les paramètres",
+  "{{count}} pages left in chapter_one": "{{count}} page restant dans le chapitre",
+  "{{count}} pages left in chapter_many": "{{count}} pages restantes dans le chapitre",
+  "{{count}} pages left in chapter_other": "{{count}} pages restantes dans le chapitre",
+  "Show Remaining Pages": "Voir restantes"
 }
@@ -371,5 +371,8 @@
  "Book Covers": "पुस्तक कवर",
  "Fit": "फिट",
  "Reset {{settings}}": "रीसेट {{settings}}",
-  "Reset Settings": "सेटिंग्स रीसेट करें"
+  "Reset Settings": "सेटिंग्स रीसेट करें",
+  "{{count}} pages left in chapter_one": "इस अध्याय में {{count}} पृष्ठ शेष हैं",
+  "{{count}} pages left in chapter_other": "इस अध्याय में {{count}} पृष्ठ शेष हैं",
+  "Show Remaining Pages": "शेष पृष्ठ दिखाएँ"
 }
@@ -368,5 +368,7 @@
  "Book Covers": "Sampul Buku",
  "Fit": "Pas",
  "Reset {{settings}}": "Atur Ulang {{settings}}",
-  "Reset Settings": "Atur Ulang Pengaturan"
+  "Reset Settings": "Atur Ulang Pengaturan",
+  "{{count}} pages left in chapter_other": "{{count}} halaman tersisa di bab ini",
+  "Show Remaining Pages": "Tampilkan halaman tersisa"
 }
@@ -374,5 +374,9 @@
  "Book Covers": "Copertine libri",
  "Fit": "Adatta",
  "Reset {{settings}}": "Reimposta {{settings}}",
-  "Reset Settings": "Reimposta impostazioni"
+  "Reset Settings": "Reimposta impostazioni",
+  "{{count}} pages left in chapter_one": "{{count}} pagina rimasta nel capitolo",
+  "{{count}} pages left in chapter_many": "{{count}} pagine rimaste nel capitolo",
+  "{{count}} pages left in chapter_other": "{{count}} pagine rimaste nel capitolo",
+  "Show Remaining Pages": "Mostra pagine rimanenti"
 }
@@ -368,5 +368,7 @@
  "Book Covers": "書籍の表紙",
  "Fit": "フィット",
  "Reset {{settings}}": "{{settings}}をリセット",
-  "Reset Settings": "設定をリセット"
+  "Reset Settings": "設定をリセット",
+  "{{count}} pages left in chapter_other": "{{count}} ページ残り",
+  "Show Remaining Pages": "残りを表示"
 }
@@ -368,5 +368,7 @@
  "Book Covers": "책 표지",
  "Fit": "맞춤",
  "Reset {{settings}}": "{{settings}} 재설정",
-  "Reset Settings": "설정 재설정"
+  "Reset Settings": "설정 재설정",
+  "{{count}} pages left in chapter_other": "남은 페이지 {{count}}장",
+  "Show Remaining Pages": "남은 페이지 보기"
 }
@@ -371,5 +371,8 @@
  "Book Covers": "Boekomslagen",
  "Fit": "Passend maken",
  "Reset {{settings}}": "Reset {{settings}}",
-  "Reset Settings": "Instellingen resetten"
+  "Reset Settings": "Instellingen resetten",
+  "{{count}} pages left in chapter_one": "Nog {{count}} pagina in hoofdstuk",
+  "{{count}} pages left in chapter_other": "Nog {{count}} pagina’s in hoofdstuk",
+  "Show Remaining Pages": "Toon resterende pagina’s"
 }
@@ -377,5 +377,10 @@
  "Book Covers": "Okładki książek",
  "Fit": "Pasuje",
  "Reset {{settings}}": "Zresetuj {{settings}}",
-  "Reset Settings": "Zresetuj ustawienia"
+  "Reset Settings": "Zresetuj ustawienia",
+  "{{count}} pages left in chapter_one": "Pozostała {{count}} strona w rozdziale",
+  "{{count}} pages left in chapter_few": "Pozostały {{count}} strony w rozdziale",
+  "{{count}} pages left in chapter_many": "Pozostało {{count}} stron w rozdziale",
+  "{{count}} pages left in chapter_other": "Pozostało {{count}} stron w rozdziale",
+  "Show Remaining Pages": "Pokaż pozostałe strony"
 }
@@ -374,5 +374,9 @@
  "Book Covers": "Capas de Livros",
  "Fit": "Encaixar",
  "Reset {{settings}}": "Redefinir {{settings}}",
-  "Reset Settings": "Redefinir Configurações"
+  "Reset Settings": "Redefinir Configurações",
+  "{{count}} pages left in chapter_one": "Falta {{count}} página neste capítulo",
+  "{{count}} pages left in chapter_many": "Faltam {{count}} páginas neste capítulo",
+  "{{count}} pages left in chapter_other": "Faltam {{count}} páginas neste capítulo",
+  "Show Remaining Pages": "Mostrar páginas restantes"
 }
@@ -377,5 +377,10 @@
  "Book Covers": "Обложки книг",
  "Fit": "Подогнать",
  "Reset {{settings}}": "Сбросить {{settings}}",
-  "Reset Settings": "Сбросить настройки"
+  "Reset Settings": "Сбросить настройки",
+  "{{count}} pages left in chapter_one": "Осталась {{count}} страница в главе",
+  "{{count}} pages left in chapter_few": "Осталось {{count}} страницы в главе",
+  "{{count}} pages left in chapter_many": "Осталось {{count}} страниц в главе",
+  "{{count}} pages left in chapter_other": "Осталось {{count}} страниц в главе",
+  "Show Remaining Pages": "Показать оставшиеся страницы"
 }
@@ -371,5 +371,8 @@
  "Book Covers": "Kitap Kapağı",
  "Fit": "Uygun",
  "Reset {{settings}}": "{{settings}}'i Sıfırla",
-  "Reset Settings": "Ayarları Sıfırla"
+  "Reset Settings": "Ayarları Sıfırla",
+  "{{count}} pages left in chapter_one": "Bu bölümde {{count}} sayfa kaldı",
+  "{{count}} pages left in chapter_other": "Bu bölümde {{count}} sayfa kaldı",
+  "Show Remaining Pages": "Kalan sayfaları göster"
 }
@@ -377,5 +377,10 @@
  "Book Covers": "Обкладинки книг",
  "Fit": "Вписати",
  "Reset {{settings}}": "Скинути {{settings}}",
-  "Reset Settings": "Скинути налаштування"
+  "Reset Settings": "Скинути налаштування",
+  "{{count}} pages left in chapter_one": "Залишилася {{count}} сторінка у розділі",
+  "{{count}} pages left in chapter_few": "Залишилось {{count}} сторінки у розділі",
+  "{{count}} pages left in chapter_many": "Залишилось {{count}} сторінок у розділі",
+  "{{count}} pages left in chapter_other": "Залишилось {{count}} сторінок у розділі",
+  "Show Remaining Pages": "Показати залишок сторінок"
 }
@@ -368,5 +368,7 @@
  "Book Covers": "Bìa sách",
  "Fit": "Vừa vặn",
  "Reset {{settings}}": "Đặt lại {{settings}}",
-  "Reset Settings": "Đặt lại cài đặt"
+  "Reset Settings": "Đặt lại cài đặt",
+  "{{count}} pages left in chapter_other": "Còn {{count}} trang trong chương",
+  "Show Remaining Pages": "Hiển thị trang còn lại"
 }
@@ -368,5 +368,7 @@
  "Book Covers": "书籍封面",
  "Fit": "适应",
  "Reset {{settings}}": "重置{{settings}}",
-  "Reset Settings": "重置设置"
+  "Reset Settings": "重置设置",
+  "{{count}} pages left in chapter_other": "本章剩余 {{count}} 页",
+  "Show Remaining Pages": "显示剩余页数"
 }
@@ -368,5 +368,7 @@
  "Book Covers": "書籍封面",
  "Fit": "適應",
  "Reset {{settings}}": "重置{{settings}}",
-  "Reset Settings": "重置設置"
+  "Reset Settings": "重置設置",
+  "{{count}} pages left in chapter_other": "本章剩餘 {{count}} 頁",
+  "Show Remaining Pages": "顯示剩餘頁數"
 }
@@ -29,7 +29,8 @@ const ProgressInfoView: React.FC<PageInfoProps> = ({
 }) => {
  const _ = useTranslation();
  const { appService } = useEnv();
-  const { getViewSettings } = useReaderStore();
+  const { getView, getViewSettings } = useReaderStore();
+  const view = getView(bookKey);
  const viewSettings = getViewSettings(bookKey)!;

  const showDoubleBorder = viewSettings.vertical && viewSettings.doubleBorder;
@@ -47,9 +48,12 @@ const ProgressInfoView: React.FC<PageInfoProps> = ({
          totalPage: pageinfo.total,
        })
      : '';
-  const timeInfo = timeinfo
+  const timeLeft = timeinfo
    ? _('{{time}} min left in chapter', { time: Math.round(timeinfo.section) })
    : '';
+  const { page = 0, pages = 0 } = view?.renderer || {};
+  const pageLeft =
+    pages - 1 > page ? _('{{count}} pages left in chapter', { count: pages - 1 - page }) : '';

  return (
    <div
@@ -76,7 +80,11 @@ const ProgressInfoView: React.FC<PageInfoProps> = ({
            }
      }
    >
-      {viewSettings.showRemainingTime && <span className='text-start'>{timeInfo}</span>}
+      {viewSettings.showRemainingTime ? (
+        <span className='text-start'>{timeLeft}</span>
+      ) : viewSettings.showRemainingPages ? (
+        <span className='text-start'>{pageLeft}</span>
+      ) : null}
      {viewSettings.showPageNumber && <span className='ms-auto text-end'>{pageInfo}</span>}
    </div>
  );
@@ -64,6 +64,7 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
  const [showFooter, setShowFooter] = useState(viewSettings.showFooter!);
  const [showBarsOnScroll, setShowBarsOnScroll] = useState(viewSettings.showBarsOnScroll!);
  const [showRemainingTime, setShowRemainingTime] = useState(viewSettings.showRemainingTime!);
+  const [showRemainingPages, setShowRemainingPages] = useState(viewSettings.showRemainingPages!);
  const [showPageNumber, setShowPageNumber] = useState(viewSettings.showPageNumber!);
  const [screenOrientation, setScreenOrientation] = useState(viewSettings.screenOrientation!);

@@ -97,6 +98,7 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
      showFooter: setShowFooter,
      showBarsOnScroll: setShowBarsOnScroll,
      showRemainingTime: setShowRemainingTime,
+      showRemainingPages: setShowRemainingPages,
      showPageNumber: setShowPageNumber,
    });
  };
@@ -310,6 +312,11 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [showRemainingTime]);

+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'showRemainingPages', showRemainingPages, false, false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showRemainingPages]);
+
  useEffect(() => {
    saveViewSettings(envConfig, bookKey, 'showPageNumber', showPageNumber, false, false);
    // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -618,7 +625,31 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
                className='toggle'
                checked={showRemainingTime}
                disabled={!showFooter}
-                onChange={() => setShowRemainingTime(!showRemainingTime)}
+                onChange={() => {
+                  if (!showRemainingTime) {
+                    setShowRemainingTime(true);
+                    setShowRemainingPages(false);
+                  } else {
+                    setShowRemainingTime(false);
+                  }
+                }}
+              />
+            </div>
+            <div className='config-item'>
+              <span className=''>{_('Show Remaining Pages')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={showRemainingPages}
+                disabled={!showFooter}
+                onChange={() => {
+                  if (!showRemainingPages) {
+                    setShowRemainingPages(true);
+                    setShowRemainingTime(false);
+                  } else {
+                    setShowRemainingPages(false);
+                  }
+                }}
              />
            </div>
            <div className='config-item'>
@@ -67,7 +67,7 @@ const NumberInput: React.FC<NumberInputProps> = ({

  return (
    <div className={clsx('config-item', className)}>
-      <span className='text-base-content'>{label}</span>
+      <span className='text-base-content line-clamp-2'>{label}</span>
      <div className='text-base-content flex items-center gap-2'>
        <input
          type='text'
@@ -75,7 +75,7 @@ const NumberInput: React.FC<NumberInputProps> = ({
          value={localValue}
          onChange={handleChange}
          onBlur={handleOnBlur}
-          className='input input-ghost settings-content text-base-content w-20 max-w-xs rounded border-0 bg-transparent px-3 py-1 text-right !outline-none'
+          className='input input-ghost settings-content text-base-content w-16 max-w-xs rounded border-0 bg-transparent py-1 pe-3 ps-1 text-right !outline-none'
          onFocus={(e) => e.target.select()}
        />
        <button
@@ -158,6 +158,7 @@ export const DEFAULT_VIEW_CONFIG: ViewConfig = {
  showFooter: true,
  showBarsOnScroll: false,
  showRemainingTime: false,
+  showRemainingPages: false,
  showPageNumber: true,
 };

@@ -141,6 +141,7 @@ export interface ViewConfig {
  showHeader: boolean;
  showFooter: boolean;
  showRemainingTime: boolean;
+  showRemainingPages: boolean;
  showPageNumber: boolean;
  showBarsOnScroll: boolean;
 }
@@ -40,6 +40,8 @@ export interface FoliateView extends HTMLElement {
    viewSize: number; // whole document view height
    start: number;
    end: number;
+    page: number;
+    pages: number;
    containerPosition: number;
    sideProp: 'width' | 'height';
    setAttribute: (name: string, value: string | number) => void;