From 065f16902188a69b576270a1c77d387ac35f0ca5 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Wed, 21 Feb 2024 00:25:15 +0100 Subject: [PATCH 1/2] 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 --- src/components/navbar/ReaderNavBar.tsx | 1 + src/components/reader/DoublePage.tsx | 8 ++++++-- src/components/reader/Page.tsx | 3 ++- src/components/reader/ReaderSettingsOptions.tsx | 11 +++++++++++ src/i18n/locale/en.json | 1 + src/screens/settings/DefaultReaderSettings.tsx | 1 + src/typings.ts | 1 + src/util/readerSettings.ts | 2 ++ 8 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx index dcd2d23883..a7cdfdcef0 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 ee321fe23b..da2c5189db 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 6083b47b34..0dd419dfdb 100644 --- a/src/components/reader/Page.tsx +++ b/src/components/reader/Page.tsx @@ -24,9 +24,10 @@ export function imageStyle(settings: IReaderSettings): any { marginRight: isHorizontal ? '7px' : 0, marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0, width: 'auto', + minWidth: settings.fitPageToWindow && settings.scalePage ? 'calc(100vw - (100vw - 100%))' : undefined, maxWidth: settings.fitPageToWindow && !isHorizontal ? 'calc(100vw - (100vw - 100%))' : undefined, height: 'auto', - minHeight: isHorizontal ? '100vh' : undefined, + minHeight: (settings.fitPageToWindow && settings.scalePage) || isHorizontal ? '100vh' : undefined, maxHeight: '100vh', objectFit: 'contain', }; diff --git a/src/components/reader/ReaderSettingsOptions.tsx b/src/components/reader/ReaderSettingsOptions.tsx index aaf4c887ab..38e82fc1ef 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 ce766e8918..b2f9cb8a55 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 8992a9fd83..72a2effb12 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 9d441894e5..946df35b77 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 ee0b5753c2..244343e6b2 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, From 0cb69edc8cfd9f68b5db59cfa32f38b4785b806d Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Wed, 21 Feb 2024 02:04:31 +0100 Subject: [PATCH 2/2] Cleanup "imageStyle" function --- src/components/reader/Page.tsx | 50 +++++++++++++++++++++------------- 1 file changed, 31 insertions(+), 19 deletions(-) diff --git a/src/components/reader/Page.tsx b/src/components/reader/Page.tsx index 0dd419dfdb..74f1e7537e 100644 --- a/src/components/reader/Page.tsx +++ b/src/components/reader/Page.tsx @@ -17,29 +17,41 @@ 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', - minWidth: settings.fitPageToWindow && settings.scalePage ? 'calc(100vw - (100vw - 100%))' : undefined, - maxWidth: settings.fitPageToWindow && !isHorizontal ? 'calc(100vw - (100vw - 100%))' : undefined, - height: 'auto', - minHeight: (settings.fitPageToWindow && settings.scalePage) || isHorizontal ? '100vh' : undefined, - maxHeight: '100vh', - objectFit: 'contain', - }; - } - - return { - marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0, - minWidth: '10vw', + const baseStyling = { + margin: 0, width: `${settings.readerWidth}%`, - maxWidth: '100%', 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 { + ...baseStyling, + ...(isHorizontal ? continuesHorizontalStyling : undefined), + ...(isVertical ? continuesVerticalStyling : undefined), + ...(settings.fitPageToWindow && !isHorizontal ? fitToPageStyling : undefined), + }; } interface IProps {