From ceec260d14d4c48d0c5f8b093af7039e849cd304 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Wed, 21 Feb 2024 02:42:07 +0100 Subject: [PATCH] Feature/reader setting add scale small pages (#615) * Add option to stretch small pages In case "fit page to window" is enabled, small pages can be scaled up to the available width and height, while maintaining the aspect ratio * Cleanup "imageStyle" function --- src/components/navbar/ReaderNavBar.tsx | 1 + src/components/reader/DoublePage.tsx | 8 ++- src/components/reader/Page.tsx | 49 ++++++++++++------- .../reader/ReaderSettingsOptions.tsx | 11 +++++ src/i18n/locale/en.json | 1 + .../settings/DefaultReaderSettings.tsx | 1 + src/typings.ts | 1 + src/util/readerSettings.ts | 2 + 8 files changed, 54 insertions(+), 20 deletions(-) diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx index dcd2d238..a7cdfdce 100644 --- a/src/components/navbar/ReaderNavBar.tsx +++ b/src/components/navbar/ReaderNavBar.tsx @@ -271,6 +271,7 @@ export function ReaderNavBar(props: IProps) { loadNextOnEnding={settings.loadNextOnEnding} skipDupChapters={settings.skipDupChapters} fitPageToWindow={settings.fitPageToWindow} + scalePage={settings.scalePage} readerType={settings.readerType} offsetFirstPage={settings.offsetFirstPage} readerWidth={settings.readerWidth} diff --git a/src/components/reader/DoublePage.tsx b/src/components/reader/DoublePage.tsx index ee321fe2..da2c5189 100644 --- a/src/components/reader/DoublePage.tsx +++ b/src/components/reader/DoublePage.tsx @@ -28,6 +28,10 @@ export const DoublePage = forwardRef((props: IProps, ref: any) => { const imgStyle = { ...baseImgStyle, width: settings.fitPageToWindow ? baseImgStyle.width : `calc(${baseImgStyle.width} * 0.5)`, + minWidth: + settings.fitPageToWindow && settings.scalePage + ? `calc(${baseImgStyle.minWidth} * 0.5)` + : baseImgStyle.minWidth, maxWidth: settings.fitPageToWindow ? `calc(${baseImgStyle.maxWidth} * 0.5)` : baseImgStyle.maxWidth, }; @@ -54,7 +58,7 @@ export const DoublePage = forwardRef((props: IProps, ref: any) => { alt={`Page #${index}`} imgRef={imgRef} spinnerStyle={spinnerStyle} - imgStyle={imgStyle} + imgStyle={{ ...imgStyle, objectPosition: settings.readerType === 'DoubleLTR' ? 'right' : 'left' }} /> { width: 'calc(50% - 5px)', marginLeft: '5px', }} - imgStyle={imgStyle} + imgStyle={{ ...imgStyle, objectPosition: settings.readerType === 'DoubleLTR' ? 'left' : 'right' }} /> ); diff --git a/src/components/reader/Page.tsx b/src/components/reader/Page.tsx index 6083b47b..74f1e753 100644 --- a/src/components/reader/Page.tsx +++ b/src/components/reader/Page.tsx @@ -17,27 +17,40 @@ export const isHorizontalReaderType = (readerType: ReaderType): boolean => ['ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType); export function imageStyle(settings: IReaderSettings): any { + const isVertical = settings.readerType === 'ContinuesVertical'; const isHorizontal = isHorizontalReaderType(settings.readerType); - if (settings.fitPageToWindow || isHorizontal) { - return { - marginLeft: isHorizontal ? '7px' : 0, - marginRight: isHorizontal ? '7px' : 0, - marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0, - width: 'auto', - maxWidth: settings.fitPageToWindow && !isHorizontal ? 'calc(100vw - (100vw - 100%))' : undefined, - height: 'auto', - minHeight: isHorizontal ? '100vh' : undefined, - maxHeight: '100vh', - objectFit: 'contain', - }; - } + const baseStyling = { + margin: 0, + width: `${settings.readerWidth}%`, + objectFit: 'contain', + }; + + const continuesVerticalStyling = { + marginBottom: '15px', + }; + + const continuesHorizontalStyling = { + width: undefined, + minHeight: '100vh', + maxHeight: '100vh', + marginLeft: '7px', + marginRight: '7px', + }; + + const fitToPageStyling = { + width: undefined, + height: undefined, + minWidth: settings.scalePage ? 'calc(100vw - (100vw - 100%))' : undefined, + maxWidth: 'calc(100vw - (100vw - 100%))', + minHeight: settings.scalePage ? '100vh' : undefined, + maxHeight: '100vh', + }; return { - marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0, - minWidth: '10vw', - width: `${settings.readerWidth}%`, - maxWidth: '100%', - objectFit: 'contain', + ...baseStyling, + ...(isHorizontal ? continuesHorizontalStyling : undefined), + ...(isVertical ? continuesVerticalStyling : undefined), + ...(settings.fitPageToWindow && !isHorizontal ? fitToPageStyling : undefined), }; } diff --git a/src/components/reader/ReaderSettingsOptions.tsx b/src/components/reader/ReaderSettingsOptions.tsx index aaf4c887..38e82fc1 100644 --- a/src/components/reader/ReaderSettingsOptions.tsx +++ b/src/components/reader/ReaderSettingsOptions.tsx @@ -26,6 +26,7 @@ export function ReaderSettingsOptions({ skipDupChapters, setSettingValue, fitPageToWindow, + scalePage, offsetFirstPage, readerWidth, }: IProps) { @@ -75,6 +76,16 @@ export function ReaderSettingsOptions({ /> )} + {fitPageToWindowEligible && fitPageToWindow && ( + + + setSettingValue('scalePage', e.target.checked)} + /> + + )} {(readerType === 'DoubleLTR' || readerType === 'DoubleRTL') && ( diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json index ce766e89..b2f9cb8a 100644 --- a/src/i18n/locale/en.json +++ b/src/i18n/locale/en.json @@ -647,6 +647,7 @@ "offset_first_page": "Offset first page", "reader_type": "Reader type", "reader_width": "Reader width", + "scale_page": "Scale small pages", "show_page_number": "Show page number", "skip_dup_chapters": "Skip duplicate chapters", "static_navigation": "Static navigation" diff --git a/src/screens/settings/DefaultReaderSettings.tsx b/src/screens/settings/DefaultReaderSettings.tsx index 8992a9fd..72a2effb 100644 --- a/src/screens/settings/DefaultReaderSettings.tsx +++ b/src/screens/settings/DefaultReaderSettings.tsx @@ -74,6 +74,7 @@ export function DefaultReaderSettings() { loadNextOnEnding={settings.loadNextOnEnding} skipDupChapters={settings.skipDupChapters} fitPageToWindow={settings.fitPageToWindow} + scalePage={settings.scalePage} readerType={settings.readerType} offsetFirstPage={settings.offsetFirstPage} readerWidth={settings.readerWidth} diff --git a/src/typings.ts b/src/typings.ts index 9d441894..946df35b 100644 --- a/src/typings.ts +++ b/src/typings.ts @@ -207,6 +207,7 @@ export interface IReaderSettings { loadNextOnEnding: boolean; skipDupChapters: boolean; fitPageToWindow: boolean; + scalePage: boolean; readerType: ReaderType; offsetFirstPage: boolean; readerWidth: number; diff --git a/src/util/readerSettings.ts b/src/util/readerSettings.ts index ee0b5753..244343e6 100644 --- a/src/util/readerSettings.ts +++ b/src/util/readerSettings.ts @@ -26,6 +26,7 @@ export const getDefaultSettings = (): IReaderSettings => ({ loadNextOnEnding: false, skipDupChapters: true, fitPageToWindow: true, + scalePage: false, readerType: 'ContinuesVertical', offsetFirstPage: false, readerWidth: 50, @@ -83,6 +84,7 @@ export const checkAndHandleMissingStoredReaderSettings = async ( loadNextOnEnding: undefined, skipDupChapters: undefined, fitPageToWindow: undefined, + scalePage: undefined, readerType: undefined, offsetFirstPage: undefined, readerWidth: undefined,