feat: add option to toggle Parallel Reading on/off when viewing multiple books, closes #1496 (#1504)

2025-07-01 01:06:59 +08:00
parent bb759597e9
commit 49e6877810
23 changed files with 146 additions and 69 deletions
@@ -67,7 +67,6 @@
  "Page": "الصفحة",
  "Paging Animation": "رسوم متحركةعند الانتقال إلى صفحة جديدة",
  "Paragraph": "فقرة",
-  "Parallel Read": "قراءة متوازية",
  "Published:": "تاريخ النشر:",
  "Publisher:": "الناشر:",
  "Reading Progress Synced": "تمت مزامنة تقدم القراءة",
@@ -415,5 +414,8 @@
  "DeepL Pro Access (200K characters/day)": "وصول احترافي إلى DeepL (200 ألف حرف يوميًا)",
  "Complete Your Subscription": "أكمل اشتراكك",
  "{{percentage}}% of Cloud Sync Space Used.": "تم استخدام {{percentage}}% من مساحة المزامنة السحابية.",
-  "Cloud Sync Storage": "مساحة المزامنة السحابية"
+  "Cloud Sync Storage": "مساحة المزامنة السحابية",
+  "Parallel Read": "القراءة المتزامنة",
+  "Disable": "تعطيل",
+  "Enable": "تمكين"
 }
@@ -67,7 +67,6 @@
  "Page": "Seite",
  "Paging Animation": "Blätter-Animation",
  "Paragraph": "Absatz",
-  "Parallel Read": "Paralleles Lesen",
  "Published:": "Veröffentlicht:",
  "Publisher:": "Verlag:",
  "Reading Progress Synced": "Lesevorgang synchronisiert",
@@ -399,5 +398,8 @@
  "DeepL Pro Access (200K characters/day)": "DeepL Pro-Zugang (200.000 Zeichen/Tag)",
  "Complete Your Subscription": "Abschließen Sie Ihr Abonnement",
  "{{percentage}}% of Cloud Sync Space Used.": "{{percentage}}% des Cloud-Synchronisierungsspeichers verwendet.",
-  "Cloud Sync Storage": "Cloud-Speicher"
+  "Cloud Sync Storage": "Cloud-Speicher",
+  "Parallel Read": "Paralleles Lesen",
+  "Disable": "Deaktivieren",
+  "Enable": "Aktivieren"
 }
@@ -399,5 +399,7 @@
  "DeepL Pro Access (200K characters/day)": "Pro πρόσβαση στο DeepL (200.000 χαρακτήρες/ημέρα)",
  "Complete Your Subscription": "Ολοκληρώστε τη συνδρομή σας",
  "{{percentage}}% of Cloud Sync Space Used.": "{{percentage}}% του χώρου συγχρονισμού στο cloud χρησιμοποιήθηκε.",
-  "Cloud Sync Storage": "Χώρος συγχρονισμού cloud"
+  "Cloud Sync Storage": "Χώρος συγχρονισμού cloud",
+  "Disable": "Απενεργοποίηση",
+  "Enable": "Ενεργοποίηση"
 }
@@ -403,5 +403,7 @@
  "Your payment is being processed. This usually takes a few moments.": "Tu pago se está procesando. Normalmente tarda unos momentos.",
  "Complete Your Subscription": "Completa tu suscripción",
  "{{percentage}}% of Cloud Sync Space Used.": "{{percentage}}% del espacio de sincronización en la nube utilizado.",
-  "Cloud Sync Storage": "Almacenamiento en la nube"
+  "Cloud Sync Storage": "Almacenamiento en la nube",
+  "Disable": "Desactivar",
+  "Enable": "Activar"
 }
@@ -403,5 +403,7 @@
  "DeepL Pro Access (200K characters/day)": "Accès Pro à DeepL (200 000 caractères/jour)",
  "Complete Your Subscription": "Complétez votre abonnement",
  "{{percentage}}% of Cloud Sync Space Used.": "{{percentage}}% de l’espace de synchronisation cloud utilisé.",
-  "Cloud Sync Storage": "Stockage de synchronisation cloud"
+  "Cloud Sync Storage": "Stockage de synchronisation cloud",
+  "Disable": "Désactiver",
+  "Enable": "Activer"
 }
@@ -399,5 +399,7 @@
  "DeepL Pro Access (200K characters/day)": "DeepL प्रो एक्सेस (200,000 अक्षर/दिन)",
  "Complete Your Subscription": "अपनी सदस्यता पूरी करें",
  "{{percentage}}% of Cloud Sync Space Used.": "{{percentage}}% क्लाउड सिंक स्पेस का उपयोग किया गया है।",
-  "Cloud Sync Storage": "क्लाउड सिंक स्टोरेज"
+  "Cloud Sync Storage": "क्लाउड सिंक स्टोरेज",
+  "Disable": "अक्षम करें",
+  "Enable": "सक्षम करें"
 }
@@ -395,5 +395,7 @@
  "DeepL Pro Access (200K characters/day)": "Akses DeepL Pro (200.000 karakter/hari)",
  "Complete Your Subscription": "Selesaikan Langganan Anda",
  "{{percentage}}% of Cloud Sync Space Used.": "{{percentage}}% ruang sinkronisasi cloud terpakai",
-  "Cloud Sync Storage": "Ruang cloud"
+  "Cloud Sync Storage": "Ruang cloud",
+  "Disable": "Nonaktifkan",
+  "Enable": "Aktifkan"
 }
@@ -403,5 +403,7 @@
  "DeepL Pro Access (200K characters/day)": "Accesso DeepL Pro (200.000 caratteri/giorno)",
  "Complete Your Subscription": "Completa l'abbonamento",
  "{{percentage}}% of Cloud Sync Space Used.": "{{percentage}}% dello spazio cloud usato",
-  "Cloud Sync Storage": "Spazio cloud"
+  "Cloud Sync Storage": "Spazio cloud",
+  "Disable": "Disabilita",
+  "Enable": "Abilita"
 }
@@ -395,5 +395,7 @@
  "DeepL Pro Access (200K characters/day)": "DeepL Proアクセス（1日20万文字）",
  "Complete Your Subscription": "サブスクリプションを完了する",
  "{{percentage}}% of Cloud Sync Space Used.": "クラウド同期スペースの使用量は{{percentage}}%です。",
-  "Cloud Sync Storage": "クラウド同期容量"
+  "Cloud Sync Storage": "クラウド同期容量",
+  "Disable": "無効にする",
+  "Enable": "有効にする"
 }
@@ -395,5 +395,7 @@
  "DeepL Pro Access (200K characters/day)": "DeepL Pro 액세스 (일 20만자)",
  "Complete Your Subscription": "구독 완료",
  "{{percentage}}% of Cloud Sync Space Used.": "{{percentage}}%의 클라우드 동기화 공간 사용됨.",
-  "Cloud Sync Storage": "클라우드 저장 공간"
+  "Cloud Sync Storage": "클라우드 저장 공간",
+  "Disable": "비활성화",
+  "Enable": "활성화"
 }
@@ -399,5 +399,7 @@
  "Thank you for your subscription! Your payment has been processed successfully.": "Bedankt voor je abonnement! Je betaling is succesvol verwerkt.",
  "Complete Your Subscription": "Voltooi uw abonnement",
  "{{percentage}}% of Cloud Sync Space Used.": "{{percentage}}% van de cloud-synchronisatie ruimte gebruikt.",
-  "Cloud Sync Storage": "Cloud Sync Opslag"
+  "Cloud Sync Storage": "Cloud Sync Opslag",
+  "Disable": "Uitschakelen",
+  "Enable": "Inschakelen"
 }
@@ -407,5 +407,7 @@
  "DeepL Pro Access (200K characters/day)": "DeepL Pro (200 tys. znaków/dzień)",
  "Complete Your Subscription": "Ukończ subskrypcję",
  "{{percentage}}% of Cloud Sync Space Used.": "Użyto {{percentage}}% przestrzeni synchronizacji w chmurze.",
-  "Cloud Sync Storage": "Miejsce w chmurze"
+  "Cloud Sync Storage": "Miejsce w chmurze",
+  "Disable": "Wyłącz",
+  "Enable": "Włącz"
 }
@@ -403,5 +403,7 @@
  "DeepL Pro Access (200K characters/day)": "Acesso ao DeepL Pro (200 mil caracteres/dia)",
  "Complete Your Subscription": "Complete sua assinatura",
  "{{percentage}}% of Cloud Sync Space Used.": "{{percentage}}% do espaço de sincronização na nuvem utilizado.",
-  "Cloud Sync Storage": "Armazenamento na Nuvem"
+  "Cloud Sync Storage": "Armazenamento na Nuvem",
+  "Disable": "Desativar",
+  "Enable": "Ativar"
 }
@@ -407,5 +407,7 @@
  "DeepL Pro Access (200K characters/day)": "Доступ к DeepL Pro (200 тыс. символов/день)",
  "Complete Your Subscription": "Завершите подписку",
  "{{percentage}}% of Cloud Sync Space Used.": "Использовано {{percentage}}% облачного пространства для синхронизации.",
-  "Cloud Sync Storage": "Облачное хранилище"
+  "Cloud Sync Storage": "Облачное хранилище",
+  "Disable": "Отключить",
+  "Enable": "Включить"
 }
@@ -399,5 +399,7 @@
  "DeepL Pro Access (200K characters/day)": "DeepL Pro Erişim (Günde 200K karakter)",
  "Complete Your Subscription": "Aboneliğinizi Tamamlayın",
  "{{percentage}}% of Cloud Sync Space Used.": "Bulut Senkronizasyon Alanının %{{percentage}}'si Kullanıldı.",
-  "Cloud Sync Storage": "Bulut Senkronizasyon Depolama"
+  "Cloud Sync Storage": "Bulut Senkronizasyon Depolama",
+  "Disable": "Devre Dışı Bırak",
+  "Enable": "Etkinleştir"
 }
@@ -407,5 +407,7 @@
  "DeepL Pro Access (200K characters/day)": "DeepL Pro доступ (200 тис. символів/день)",
  "Complete Your Subscription": "Завершіть підписку",
  "{{percentage}}% of Cloud Sync Space Used.": "Використано {{percentage}}% хмарного сховища.",
-  "Cloud Sync Storage": "Облачне хранилище"
+  "Cloud Sync Storage": "Облачне хранилище",
+  "Disable": "Вимкнути",
+  "Enable": "Увімкнути"
 }
@@ -395,5 +395,7 @@
  "DeepL Pro Access (200K characters/day)": "Truy cập DeepL Pro (200.000 ký tự/ngày)",
  "Complete Your Subscription": "Hoàn tất đăng ký của bạn",
  "{{percentage}}% of Cloud Sync Space Used.": "Đã sử dụng {{percentage}}% không gian đồng bộ đám mây.",
-  "Cloud Sync Storage": "Lưu trữ đồng bộ đám mây"
+  "Cloud Sync Storage": "Lưu trữ đồng bộ đám mây",
+  "Disable": "Tắt",
+  "Enable": "Bật"
 }
@@ -395,5 +395,7 @@
  "DeepL Pro Access (200K characters/day)": "DeepL Pro（每日20万字符）",
  "Complete Your Subscription": "完成您的订阅",
  "{{percentage}}% of Cloud Sync Space Used.": "已使用 {{percentage}}% 的云同步空间。",
-  "Cloud Sync Storage": "云同步空间"
+  "Cloud Sync Storage": "云同步空间",
+  "Disable": "禁用",
+  "Enable": "启用"
 }
@@ -395,5 +395,7 @@
  "DeepL Pro Access (200K characters/day)": "DeepL Pro（每日20萬字）",
  "Complete Your Subscription": "完成您的訂閱",
  "{{percentage}}% of Cloud Sync Space Used.": "已使用 {{percentage}}% 的雲同步空間。",
-  "Cloud Sync Storage": "雲同步空間"
+  "Cloud Sync Storage": "雲同步空間",
+  "Disable": "禁用",
+  "Enable": "啟用"
 }
@@ -30,7 +30,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
  const { appService } = useEnv();
  const { getConfig, getBookData } = useBookDataStore();
  const { getProgress, getViewState, getViewSettings } = useReaderStore();
-  const { getGridInsets, setGridInsets, hoveredBookKey } = useReaderStore();
+  const { setGridInsets, hoveredBookKey } = useReaderStore();
  const { isSideBarVisible, sideBarBookKey } = useSidebarStore();
  const { isFontLayoutSettingsDialogOpen, setFontLayoutSettingsDialogOpen } = useSettingsStore();

@@ -46,16 +46,21 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sideBarBookKey]);

+  const calcGridInsets = (index: number, count: number) => {
+    if (!screenInsets) return { top: 0, right: 0, bottom: 0, left: 0 };
+    const { top, right, bottom, left } = getInsetEdges(index, count, aspectRatio);
+    return {
+      top: top ? screenInsets.top : 0,
+      right: right ? screenInsets.right : 0,
+      bottom: bottom ? screenInsets.bottom : 0,
+      left: left ? screenInsets.left : 0,
+    };
+  };
+
  useEffect(() => {
    if (!screenInsets) return;
    bookKeys.forEach((bookKey, index) => {
-      const { top, right, bottom, left } = getInsetEdges(index, bookKeys.length, aspectRatio);
-      const gridInsets = {
-        top: top ? screenInsets.top : 0,
-        right: right ? screenInsets.right : 0,
-        bottom: bottom ? screenInsets.bottom : 0,
-        left: left ? screenInsets.left : 0,
-      };
+      const gridInsets = calcGridInsets(index, bookKeys.length);
      setGridInsets(bookKey, gridInsets);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -76,9 +81,9 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
        const config = getConfig(bookKey);
        const progress = getProgress(bookKey);
        const viewSettings = getViewSettings(bookKey);
-        const gridInsets = getGridInsets(bookKey);
+        const gridInsets = calcGridInsets(index, bookKeys.length);
        const { book, bookDoc } = bookData || {};
-        if (!book || !config || !bookDoc || !viewSettings || !gridInsets) return null;
+        if (!book || !config || !bookDoc || !viewSettings) return null;

        const { section, pageinfo, timeinfo, sectionLabel } = progress || {};
        const isBookmarked = getViewState(bookKey)?.ribbonVisible;
@@ -13,6 +13,7 @@ import { eventDispatcher } from '@/utils/event';
 import { DOWNLOAD_READEST_URL } from '@/services/constants';
 import useBooksManager from '../../hooks/useBooksManager';
 import MenuItem from '@/components/MenuItem';
+import { useParallelViewStore } from '@/store/parallelViewStore';

 interface BookMenuProps {
  menuClassName?: string;
@@ -21,10 +22,11 @@ interface BookMenuProps {

 const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen }) => {
  const _ = useTranslation();
-  const { getViewSettings, setViewSettings } = useReaderStore();
+  const { bookKeys, getViewSettings, setViewSettings } = useReaderStore();
  const { getVisibleLibrary } = useLibraryStore();
  const { openParallelView } = useBooksManager();
  const { sideBarBookKey } = useSidebarStore();
+  const { parallelViews, setParallel, unsetParallel } = useParallelViewStore();
  const viewSettings = getViewSettings(sideBarBookKey!);

  const [isSortedTOC, setIsSortedTOC] = React.useState(viewSettings?.sortedTOC || false);
@@ -59,6 +61,14 @@ const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen })
    }
    setTimeout(() => window.location.reload(), 100);
  };
+  const handleSetParallel = () => {
+    setParallel(bookKeys);
+    setIsDropdownOpen?.(false);
+  };
+  const handleUnsetParallel = () => {
+    unsetParallel(bookKeys);
+    setIsDropdownOpen?.(false);
+  };

  const isWebApp = isWebAppPlatform();

@@ -67,7 +77,19 @@ const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen })
      tabIndex={0}
      className={clsx('book-menu dropdown-content border-base-100 z-20 shadow-2xl', menuClassName)}
    >
-      <MenuItem label={_('Parallel Read')}>
+      <MenuItem
+        label={_('Parallel Read')}
+        buttonClass={bookKeys.length > 1 ? 'lg:tooltip lg:tooltip-bottom' : ''}
+        tooltip={parallelViews.length > 0 ? _('Disable') : bookKeys.length > 1 ? _('Enable') : ''}
+        Icon={parallelViews.length > 0 && bookKeys.length > 1 ? MdCheck : undefined}
+        onClick={
+          parallelViews.length > 0
+            ? handleUnsetParallel
+            : bookKeys.length > 1
+              ? handleSetParallel
+              : undefined
+        }
+      >
        <ul className='max-h-60 overflow-y-auto'>
          {getVisibleLibrary()
            .filter((book) => book.format !== 'PDF' && book.format !== 'CBZ')
@@ -94,6 +116,7 @@ const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen })
            ))}
        </ul>
      </MenuItem>
+      <hr className='border-base-200 my-1' />
      <MenuItem label={_('Export Annotations')} onClick={handleExportAnnotations} />
      <MenuItem
        label={_('Sort TOC by Page')}
@@ -36,7 +36,7 @@ const useBooksManager = () => {
      const updatedKeys = [...bookKeys, newKey];
      setBookKeys(updatedKeys);
    }
-    if (isParallel) setParallel(sideBarBookKey!, newKey);
+    if (isParallel) setParallel([sideBarBookKey!, newKey]);
    setSideBarBookKey(newKey);
    setShouldUpdateSearchParams(true);
  };
@@ -2,8 +2,8 @@ import { create } from 'zustand';

 interface ParallelViewState {
  parallelViews: Set<string>[];
-  setParallel: (bookKey1: string, bookKey2: string) => void;
-  unsetParallel: (bookKey1: string, bookKey2: string) => void;
+  setParallel: (bookKeys: string[]) => void;
+  unsetParallel: (bookKeys: string[]) => void;
  areParallels: (bookKey1: string, bookKey2: string) => boolean;
  getParallels: (bookKey: string) => Set<string> | null;
 }
@@ -11,48 +11,59 @@ interface ParallelViewState {
 export const useParallelViewStore = create<ParallelViewState>((set, get) => ({
  parallelViews: [],

-  setParallel: (bookKey1: string, bookKey2: string) => {
+  setParallel: (bookKeys: string[]) => {
    set((state) => {
-      const newGroups = [...state.parallelViews];
-      const group1 = newGroups.find((group) => group.has(bookKey1));
-      const group2 = newGroups.find((group) => group.has(bookKey2));
-
-      if (group1 && group2) {
-        if (group1 !== group2) {
-          group1.forEach((key) => group2.add(key));
-          newGroups.splice(newGroups.indexOf(group1), 1);
-        }
-      } else if (group1) {
-        group1.add(bookKey2);
-      } else if (group2) {
-        group2.add(bookKey1);
-      } else {
-        // Neither book is in a group, create a new group
-        newGroups.push(new Set([bookKey1, bookKey2]));
+      const uniqueKeys = [...new Set(bookKeys.filter((key) => key.trim() !== ''))];
+      if (uniqueKeys.length < 2) {
+        return state;
      }

+      const newGroups = [...state.parallelViews];
+      const existingGroups = newGroups.filter((group) => uniqueKeys.some((key) => group.has(key)));
+
+      let targetGroup: Set<string>;
+      if (existingGroups.length === 0) {
+        targetGroup = new Set(uniqueKeys);
+        newGroups.push(targetGroup);
+      } else if (existingGroups.length === 1) {
+        targetGroup = existingGroups[0]!;
+        uniqueKeys.forEach((key) => targetGroup.add(key));
+      } else {
+        targetGroup = existingGroups[0]!;
+        existingGroups.slice(1).forEach((group) => {
+          group.forEach((key) => targetGroup.add(key));
+          const index = newGroups.indexOf(group);
+          if (index > -1) {
+            newGroups.splice(index, 1);
+          }
+        });
+        uniqueKeys.forEach((key) => targetGroup.add(key));
+      }
+
+      console.log('Set parallel groups:', newGroups);
      return { parallelViews: newGroups };
    });
  },
-  unsetParallel: (bookKey1: string, bookKey2: string) => {
+  unsetParallel: (bookKeys: string[]) => {
    set((state) => {
-      const newGroups = [...state.parallelViews];
-      const group = newGroups.find((group) => group.has(bookKey1) && group.has(bookKey2));
-
-      if (group) {
-        group.delete(bookKey1);
-        group.delete(bookKey2);
-
-        // If the group becomes disjointed, split into separate groups
-        const remainingKeys = Array.from(group);
-        if (remainingKeys.length > 0) {
-          newGroups.push(new Set(remainingKeys));
-        }
-
-        // Remove the original group
-        newGroups.splice(newGroups.indexOf(group), 1);
+      const uniqueKeys = [...new Set(bookKeys.filter((key) => key.trim() !== ''))];
+      if (uniqueKeys.length === 0) {
+        return state;
      }

+      const newGroups = [...state.parallelViews];
+      const affectedGroups = newGroups.filter((group) => uniqueKeys.some((key) => group.has(key)));
+      affectedGroups.forEach((group) => {
+        uniqueKeys.forEach((key) => group.delete(key));
+        if (group.size <= 1) {
+          const index = newGroups.indexOf(group);
+          if (index > -1) {
+            newGroups.splice(index, 1);
+          }
+        }
+      });
+
+      console.log('Unset parallel groups:', newGroups);
      return { parallelViews: newGroups };
    });
  },