feat: add option to swap click-to-flip area, closes #719 (#727)

apps/readest-app/public/locales/ar/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "تم النسخ إلى الحافظة",
   "Export Annotations": "تصدير التعليقات",
   "Auto Import on File Open": "استيراد تلقائي عند فتح الملف",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "تبديل منطقة التقليب بالنقر"
 }

apps/readest-app/public/locales/de/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "In die Zwischenablage kopiert",
   "Export Annotations": "Anmerkungen exportieren",
   "Auto Import on File Open": "Automatischer Import beim Öffnen einer Datei",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "Klick-zu-Blättern-Bereich tauschen"
 }

apps/readest-app/public/locales/el/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "Αντιγράφηκε στο πρόχειρο",
   "Export Annotations": "Εξαγωγή σχολιασμών",
   "Auto Import on File Open": "Αυτόματη εισαγωγή κατά το άνοιγμα αρχείου",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "Ανταλλαγή περιοχής κλικ για γύρισμα σελίδας"
 }

apps/readest-app/public/locales/es/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "Copiado al portapapeles",
   "Export Annotations": "Exportar anotaciones",
   "Auto Import on File Open": "Importación automática al abrir archivo",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "Intercambiar área de clic para voltear"
 }

apps/readest-app/public/locales/fr/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "Copié dans le presse-papiers",
   "Export Annotations": "Exporter les annotations",
   "Auto Import on File Open": "Importation automatique à l'ouverture du fichier",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "Échanger la zone de clic pour tourner"
 }

apps/readest-app/public/locales/hi/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "क्लिपबोर्ड पर कॉपी किया गया",
   "Export Annotations": "टिप्पणियाँ निर्यात करें",
   "Auto Import on File Open": "फ़ाइल खोलने पर स्वचालित आयात",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "क्लिक-टू-फ्लिप क्षेत्र स्वैप करें"
 }

apps/readest-app/public/locales/id/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "Disalin ke papan klip",
   "Export Annotations": "Ekspor Anotasi",
   "Auto Import on File Open": "Impor Otomatis saat File Dibuka",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "Tukar Area Klik untuk Membalik"
 }

apps/readest-app/public/locales/it/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "Copiato negli appunti",
   "Export Annotations": "Esporta annotazioni",
   "Auto Import on File Open": "Importazione automatica all'apertura del file",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "Scambia area click per voltare pagina"
 }

apps/readest-app/public/locales/ja/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "クリップボードにコピー",
   "Export Annotations": "注釈をエクスポート",
   "Auto Import on File Open": "ファイルを開くと自動インポート",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "クリックめくりエリアを入れ替え"
 }

apps/readest-app/public/locales/ko/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "클립보드에 복사",
   "Export Annotations": "주석 내보내기",
   "Auto Import on File Open": "파일 열 때 자동 가져오기",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "클릭-뒤집기 영역 교환"
 }

apps/readest-app/public/locales/pl/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "Skopiowano do schowka",
   "Export Annotations": "Eksportuj adnotacje",
   "Auto Import on File Open": "Automatyczne importowanie przy otwieraniu pliku",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "Zamień obszar kliknięcia na przewracanie"
 }

apps/readest-app/public/locales/pt/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "Copiado para a área de transferência",
   "Export Annotations": "Exportar Anotações",
   "Auto Import on File Open": "Importação Automática ao Abrir Arquivo",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "Trocar Área de Clique para Virar"
 }

apps/readest-app/public/locales/ru/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "Скопировано в буфер обмена",
   "Export Annotations": "Экспортировать аннотации",
   "Auto Import on File Open": "Автоматический импорт при открытии файла",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "Переключить область клика для переворота"
 }

apps/readest-app/public/locales/tr/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "Panoya kopyalandı",
   "Export Annotations": "Notları Dışa Aktar",
   "Auto Import on File Open": "Dosya Açıldığında Otomatik İçe Aktar",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "Tıkla-Çevir Alanını Değiştir"
 }

apps/readest-app/public/locales/uk/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "Скопійовано в буфер обміну",
   "Export Annotations": "Експортувати анотації",
   "Auto Import on File Open": "Автоматичний імпорт при відкритті файлу",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "Поміняти місцями область кліку для перевороту"
 }

apps/readest-app/public/locales/vi/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "Đã sao chép vào bảng ghi",
   "Export Annotations": "Xuất chú thích",
   "Auto Import on File Open": "Tự động nhập khi mở tệp",
-  "LXGW WenKai GB Screen": "LXGW WenKai"
+  "LXGW WenKai GB Screen": "LXGW WenKai",
+  "Swap Click-to-Flip Area": "Hoán đổi khu vực nhấp để lật trang"
 }

apps/readest-app/public/locales/zh-CN/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "已复制到剪贴板",
   "Export Annotations": "导出笔记",
   "Auto Import on File Open": "打开文件时自动导入",
-  "LXGW WenKai GB Screen": "霞鹜文楷"
+  "LXGW WenKai GB Screen": "霞鹜文楷",
+  "Swap Click-to-Flip Area": "交换点击翻页区域"
 }

apps/readest-app/public/locales/zh-TW/translation.json

@@ -260,5 +260,6 @@
   "Copied to clipboard": "已複製到剪貼板",
   "Export Annotations": "匯出筆記",
   "Auto Import on File Open": "打開文件時自動導入",
-  "LXGW WenKai GB Screen": "霞鶩文楷"
+  "LXGW WenKai GB Screen": "霞鶩文楷",
+  "Swap Click-to-Flip Area": "交換點擊翻頁區域"
 }

apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx

@@ -21,6 +21,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   const [animated, setAnimated] = useState(viewSettings.animated!);
   const [isDisableClick, setIsDisableClick] = useState(viewSettings.disableClick!);
+  const [swapClickArea, setSwapClickArea] = useState(viewSettings.swapClickArea!);
   const [isContinuousScroll, setIsContinuousScroll] = useState(viewSettings.continuousScroll!);
   const [draftStylesheet, setDraftStylesheet] = useState(viewSettings.userStylesheet!);
   const [draftStylesheetSaved, setDraftStylesheetSaved] = useState(true);
@@ -133,6 +134,11 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isDisableClick]);
 
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'swapClickArea', swapClickArea);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [swapClickArea]);
+
   useEffect(() => {
     saveViewSettings(envConfig, bookKey, 'continuousScroll', isContinuousScroll);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -197,6 +203,16 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                 onChange={() => setIsDisableClick(!isDisableClick)}
               />
             </div>
+            <div className='config-item'>
+              <span className=''>{_('Swap Click-to-Flip Area')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={swapClickArea}
+                disabled={isDisableClick}
+                onChange={() => setSwapClickArea(!swapClickArea)}
+              />
+            </div>
           </div>
         </div>
       </div>

apps/readest-app/src/app/reader/hooks/useIframeEvents.ts

@@ -51,9 +51,17 @@ export const useClickEvent = (
                   setHoveredBookKey(null);
                 }
                 if (!viewSettings.disableClick! && screenX >= viewCenterX) {
-                  viewRef.current?.goRight();
+                  if (viewSettings.swapClickArea) {
+                    viewRef.current?.goLeft();
+                  } else {
+                    viewRef.current?.goRight();
+                  }
                 } else if (!viewSettings.disableClick! && screenX < viewCenterX) {
-                  viewRef.current?.goLeft();
+                  if (viewSettings.swapClickArea) {
+                    viewRef.current?.goRight();
+                  } else {
+                    viewRef.current?.goLeft();
+                  }
                 }
               }
             }

apps/readest-app/src/services/constants.ts

@@ -75,6 +75,7 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {
   gapPercent: 5,
   scrolled: false,
   disableClick: false,
+  swapClickArea: false,
   continuousScroll: false,
   maxColumnCount: 2,
   maxInlineSize: getDefaultMaxInlineSize(),

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

@@ -67,6 +67,7 @@ export interface BookLayout {
   gapPercent: number;
   scrolled: boolean;
   disableClick: boolean;
+  swapClickArea: boolean;
   continuousScroll: boolean;
   maxColumnCount: number;
   maxInlineSize: number;

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

@@ -27,7 +27,13 @@ const getFontStyles = (
   fontWeight: number,
   overrideFont: boolean,
 ) => {
-  const serifFonts = [serif, ...SERIF_FONTS.filter((font) => font !== serif), ...FALLBACK_FONTS];
+  const lastSerifFonts = ['Georgia', 'Times New Roman'];
+  const serifFonts = [
+    serif,
+    ...SERIF_FONTS.filter((font) => font !== serif && !lastSerifFonts.includes(font)),
+    ...lastSerifFonts.filter((font) => SERIF_FONTS.includes(font)),
+    ...FALLBACK_FONTS,
+  ];
   const sansSerifFonts = [
     sansSerif,
     ...SANS_SERIF_FONTS.filter((font) => font !== sansSerif),