Skip to content

Commit

Permalink
Add option to offset first page in double page reader (#418)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
rickymcmuffin authored Sep 27, 2023
1 parent 9daf71d commit 3155c1d
Show file tree
Hide file tree
Showing 7 changed files with 36 additions and 7 deletions.
1 change: 1 addition & 0 deletions src/components/navbar/ReaderNavBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }} />
Expand Down
13 changes: 13 additions & 0 deletions src/components/reader/ReaderSettingsOptions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default function ReaderSettingsOptions({
skipDupChapters,
setSettingValue,
fitPageToWindow,
offsetFirstPage,
}: IProps) {
const { t } = useTranslation();
const fitPageToWindowEligible = [
Expand Down Expand Up @@ -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
Expand Down
20 changes: 15 additions & 5 deletions src/components/reader/pager/DoublePagedPager.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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' }}>
Expand Down
5 changes: 3 additions & 2 deletions src/i18n/locale/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -470,4 +471,4 @@
},
"title": "Updates"
}
}
}
1 change: 1 addition & 0 deletions src/screens/settings/DefaultReaderSettings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export default function DefaultReaderSettings() {
skipDupChapters={settings.skipDupChapters}
fitPageToWindow={settings.fitPageToWindow}
readerType={settings.readerType}
offsetFirstPage={settings.offsetFirstPage}
/>
);
}
1 change: 1 addition & 0 deletions src/typings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,7 @@ export interface IReaderSettings {
skipDupChapters: boolean;
fitPageToWindow: boolean;
readerType: ReaderType;
offsetFirstPage: boolean;
}

export enum ChapterOffset {
Expand Down
2 changes: 2 additions & 0 deletions src/util/readerSettings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export const getDefaultSettings = (): IReaderSettings => ({
skipDupChapters: true,
fitPageToWindow: false,
readerType: 'ContinuesVertical',
offsetFirstPage: false,
});

const getReaderSettingsWithDefaultValueFallback = <DefaultSettings extends IReaderSettings | UndefinedReaderSettings>(
Expand Down Expand Up @@ -74,6 +75,7 @@ export const checkAndHandleMissingStoredReaderSettings = async (
skipDupChapters: undefined,
fitPageToWindow: undefined,
readerType: undefined,
offsetFirstPage: undefined,
},
false,
);
Expand Down

0 comments on commit 3155c1d

Please sign in to comment.