Add option to offset first page in double page reader (#418)

* added toggle for doublespreads

* changing pages works as intended

* undid package.json changes

* deleted packege lock json

* curPage changes when changing invertDoublePage

* changed yarn.lock

* it switches better now

* fixed formatting

* changed it to offset first page

* fixed flipping when switching

* offset first page hides when double page is not enabled

* removed uncreachable line

src/components/navbar/ReaderNavBar.tsx

@@ -267,6 +267,7 @@ export default function ReaderNavBar(props: IProps) {
                             skipDupChapters={settings.skipDupChapters}
                             fitPageToWindow={settings.fitPageToWindow}
                             readerType={settings.readerType}
+                            offsetFirstPage={settings.offsetFirstPage}
                         />
                     </Collapse>
                     <Divider sx={{ my: 1, mx: 2 }} />

src/components/reader/ReaderSettingsOptions.tsx

@@ -25,6 +25,7 @@ export default function ReaderSettingsOptions({
     skipDupChapters,
     setSettingValue,
     fitPageToWindow,
+    offsetFirstPage,
 }: IProps) {
     const { t } = useTranslation();
     const fitPageToWindowEligible = [
@@ -88,6 +89,18 @@ export default function ReaderSettingsOptions({
                     </ListItemSecondaryAction>
                 </ListItem>
             ) : null}
+            {readerType === 'DoubleLTR' || readerType === 'DoubleRTL' ? (
+                <ListItem>
+                    <ListItemText primary={t('reader.settings.label.offset_first_page')} />
+                    <ListItemSecondaryAction>
+                        <Switch
+                            edge="end"
+                            checked={offsetFirstPage}
+                            onChange={(e) => setSettingValue('offsetFirstPage', e.target.checked)}
+                        />
+                    </ListItemSecondaryAction>
+                </ListItem>
+            ) : null}
             <ListItem>
                 <ListItemText primary={t('reader.settings.label.reader_type')} />
                 <Select

src/components/reader/pager/DoublePagedPager.tsx

@@ -18,15 +18,15 @@ const isSpreadPage = (image: HTMLImageElement): boolean => {
     return aspectRatio < 1;
 };
 
-const isSinglePage = (index: number, spreadPages: boolean[]): boolean => {
+const isSinglePage = (index: number, spreadPages: boolean[], offsetFirstPage: boolean): boolean => {
     // Page is single if it is spread page
-    if (spreadPages[index]) return true;
+    if (spreadPages[index] || spreadPages[index + 1]) return true;
     // Page is single if it is last page
     if (index === spreadPages.length - 1) return true;
     // Page is single if number of single pages since last spread is odd
     const previousSpreadIndex = spreadPages.lastIndexOf(true, index - 1);
     const numberOfNonSpreads = index - (previousSpreadIndex + 1);
-    return numberOfNonSpreads % 2 === 0;
+    return offsetFirstPage ? numberOfNonSpreads % 2 === 0 : numberOfNonSpreads % 2 === 1;
 };
 
 export default function DoublePagedPager(props: IReaderProps) {
@@ -49,7 +49,7 @@ export default function DoublePagedPager(props: IReaderProps) {
         }
         if (curPage + 1 < pages.length && pagesRef.current[curPage + 1]) {
             if (pageLoaded.current[curPage + 1]) {
-                if (spreadPage.current[curPage + 1]) return;
+                if (isSinglePage(curPage, spreadPage.current, settings.offsetFirstPage)) return;
                 pagesDisplayed.current = 2;
             }
         }
@@ -84,7 +84,7 @@ export default function DoublePagedPager(props: IReaderProps) {
 
     function pagesToGoBack() {
         // If previous page is single page, go only one page pack
-        if (isSinglePage(curPage - 1, spreadPage.current)) {
+        if (isSinglePage(curPage - 2, spreadPage.current, settings.offsetFirstPage)) {
             return 1;
         }
 
@@ -186,6 +186,16 @@ export default function DoublePagedPager(props: IReaderProps) {
         setCurPage(initialPage);
     }, [initialPage]);
 
+    useEffect(() => {
+        if (settings.offsetFirstPage) {
+            if (pagesDisplayed.current === 2) {
+                setCurPage(curPage + 1);
+            }
+        } else if (curPage > 0 && !isSinglePage(curPage - 1, spreadPage.current, settings.offsetFirstPage)) {
+            setCurPage(curPage - 1);
+        }
+    }, [settings.offsetFirstPage]);
+
     return (
         <Box ref={selfRef}>
             <Box id="preload" sx={{ display: 'none' }}>

src/i18n/locale/en.json

@@ -362,7 +362,8 @@
         "show_page_number": "Show page number",
         "skip_dup_chapters": "Skip duplicate chapters",
         "static_navigation": "Static navigation",
-        "fit_page_to_window": "Fit page to window"
+        "fit_page_to_window": "Fit page to window",
+        "offset_first_page": "Offset first page"
       },
       "reader_type": {
         "label": {
@@ -470,4 +471,4 @@
     },
     "title": "Updates"
   }
-}
+}

src/screens/settings/DefaultReaderSettings.tsx

@@ -65,6 +65,7 @@ export default function DefaultReaderSettings() {
             skipDupChapters={settings.skipDupChapters}
             fitPageToWindow={settings.fitPageToWindow}
             readerType={settings.readerType}
+            offsetFirstPage={settings.offsetFirstPage}
         />
     );
 }

src/typings.ts

@@ -223,6 +223,7 @@ export interface IReaderSettings {
     skipDupChapters: boolean;
     fitPageToWindow: boolean;
     readerType: ReaderType;
+    offsetFirstPage: boolean;
 }
 
 export enum ChapterOffset {

src/util/readerSettings.ts

@@ -21,6 +21,7 @@ export const getDefaultSettings = (): IReaderSettings => ({
     skipDupChapters: true,
     fitPageToWindow: false,
     readerType: 'ContinuesVertical',
+    offsetFirstPage: false,
 });
 
 const getReaderSettingsWithDefaultValueFallback = <DefaultSettings extends IReaderSettings | UndefinedReaderSettings>(
@@ -74,6 +75,7 @@ export const checkAndHandleMissingStoredReaderSettings = async (
             skipDupChapters: undefined,
             fitPageToWindow: undefined,
             readerType: undefined,
+            offsetFirstPage: undefined,
         },
         false,
     );