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..74f1e7537e 100644 --- a/src/components/reader/Page.tsx +++ b/src/components/reader/Page.tsx @@ -17,28 +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', - maxWidth: settings.fitPageToWindow && !isHorizontal ? 'calc(100vw - (100vw - 100%))' : undefined, - height: 'auto', - minHeight: 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 { 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,