ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature/reader setting add scale small pages (#615)

Browse Source 
* 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
This commit is contained in:
schroda
2024-02-21 02:42:07 +01:00
committed by GitHub
parent 9531825bab
commit ceec260d14
8 changed files with 54 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/navbar/ReaderNavBar.tsx
View File

@@ -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}

8
src/components/reader/DoublePage.tsx
View File

@@ -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' }}
/>
<SpinnerImage
src={image2src}
@@ -66,7 +70,7 @@ export const DoublePage = forwardRef((props: IProps, ref: any) => {
width: 'calc(50% - 5px)',
marginLeft: '5px',
}}
imgStyle={imgStyle}
imgStyle={{ ...imgStyle, objectPosition: settings.readerType === 'DoubleLTR' ? 'left' : 'right' }}
/>
</Box>
);

49
src/components/reader/Page.tsx
View File

@@ -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),
};
}

11
src/components/reader/ReaderSettingsOptions.tsx
View File

@@ -26,6 +26,7 @@ export function ReaderSettingsOptions({
skipDupChapters,
setSettingValue,
fitPageToWindow,
scalePage,
offsetFirstPage,
readerWidth,
}: IProps) {
@@ -75,6 +76,16 @@ export function ReaderSettingsOptions({
/>
</ListItem>
)}
{fitPageToWindowEligible && fitPageToWindow && (
<ListItem>
<ListItemText primary={t('reader.settings.label.scale_page')} />
<Switch
edge="end"
checked={scalePage}
onChange={(e) => setSettingValue('scalePage', e.target.checked)}
/>
</ListItem>
)}
{(readerType === 'DoubleLTR' || readerType === 'DoubleRTL') && (
<ListItem>
<ListItemText primary={t('reader.settings.label.offset_first_page')} />

1
src/i18n/locale/en.json
View File

@@ -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"

1
src/screens/settings/DefaultReaderSettings.tsx
View File

@@ -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}

1
src/typings.ts
View File

@@ -207,6 +207,7 @@ export interface IReaderSettings {
loadNextOnEnding: boolean;
skipDupChapters: boolean;
fitPageToWindow: boolean;
scalePage: boolean;
readerType: ReaderType;
offsetFirstPage: boolean;
readerWidth: number;

2
src/util/readerSettings.ts
View File

@@ -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,