diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx index d02bc2fd..427de85b 100644 --- a/src/components/navbar/ReaderNavBar.tsx +++ b/src/components/navbar/ReaderNavBar.tsx @@ -26,7 +26,11 @@ import { useTranslation } from 'react-i18next'; import { AllowedMetadataValueTypes, ChapterOffset, IReaderSettings, TChapter, TManga } from '@/typings'; import { ReaderSettingsOptions } from '@/components/reader/ReaderSettingsOptions'; -const Root = styled('div')(({ theme }) => ({ +const Root = styled('div')({ + zIndex: 10, +}); + +const NavContainer = styled('div')(({ theme }) => ({ top: 0, left: 0, width: '300px', @@ -198,9 +202,9 @@ export function ReaderNavBar(props: IProps) { }; return ( - <> + - - + @@ -392,6 +396,6 @@ export function ReaderNavBar(props: IProps) { - + ); } diff --git a/src/components/reader/DoublePage.tsx b/src/components/reader/DoublePage.tsx index 41fd1671..a87784ac 100644 --- a/src/components/reader/DoublePage.tsx +++ b/src/components/reader/DoublePage.tsx @@ -6,26 +6,11 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { CSSProperties, forwardRef, useRef } from 'react'; +import { forwardRef, useRef } from 'react'; import { Box, SxProps, Theme } from '@mui/material'; import { IReaderSettings } from '@/typings'; import { SpinnerImage } from '@/components/util/SpinnerImage'; - -const imgStyles: CSSProperties = { - display: 'block', - marginBottom: 0, - width: 'auto', - minHeight: '99vh', - height: 'auto', - maxHeight: '99vh', - objectFit: 'contain', -}; - -const spinnerStyle: SxProps = { - ...imgStyles, - width: 'calc((100vw - 300px) * 0.5)', - backgroundColor: '#525252', -}; +import { imageStyle } from '@/components/reader/Page'; interface IProps { index: number; @@ -39,18 +24,26 @@ export const DoublePage = forwardRef((props: IProps, ref: any) => { const { image1src, image2src, index, onImageLoad, settings } = props; const imgRef = useRef(null); + const baseImgStyle = imageStyle(settings); + const imgStyle = { + ...baseImgStyle, + width: settings.fitPageToWindow ? baseImgStyle.width : `calc(${baseImgStyle.width} * 0.5)`, + }; + + const spinnerStyle: SxProps = { + ...imgStyle, + height: '100vh', + width: '50%', + backgroundColor: '#525252', + }; return ( { alt={`Page #${index}`} imgRef={imgRef} spinnerStyle={spinnerStyle} - imgStyle={imgStyles} + imgStyle={imgStyle} /> { imgRef={imgRef} spinnerStyle={{ ...spinnerStyle, - width: 'calc((100vw - 300px - 5px) * 0.5)', + width: 'calc(50% - 5px)', marginLeft: '5px', }} - imgStyle={imgStyles} + imgStyle={imgStyle} /> ); diff --git a/src/components/reader/Page.tsx b/src/components/reader/Page.tsx index f02eb25f..e6deeb5e 100644 --- a/src/components/reader/Page.tsx +++ b/src/components/reader/Page.tsx @@ -8,13 +8,15 @@ import { useState, useEffect, forwardRef, useRef } from 'react'; import Box from '@mui/material/Box'; +import { useTheme } from '@mui/material/styles'; +import { useMediaQuery } from '@mui/material'; import { IReaderSettings, ReaderType } from '@/typings'; import { SpinnerImage } from '@/components/util/SpinnerImage'; -export const isFillsPageReaderType = (readerType: ReaderType): boolean => - ['DoubleRTL', 'DoubleLTR', 'ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType); +export const isHorizontalReaderType = (readerType: ReaderType): boolean => + ['ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType); -function imageStyle(settings: IReaderSettings): any { +export function imageStyle(settings: IReaderSettings): any { const [dimensions, setDimensions] = useState({ height: window.innerHeight, width: window.innerWidth, @@ -32,27 +34,26 @@ function imageStyle(settings: IReaderSettings): any { window.removeEventListener('resize', handleResize); }; }, []); - if (settings.fitPageToWindow || isFillsPageReaderType(settings.readerType)) { + + const isHorizontal = isHorizontalReaderType(settings.readerType); + if (settings.fitPageToWindow || isHorizontal) { return { - display: 'block', - marginLeft: '7px', - marginRight: '7px', + marginLeft: isHorizontal ? '7px' : 0, + marginRight: isHorizontal ? '7px' : 0, width: 'auto', - minHeight: '99vh', + minHeight: '100vh', height: 'auto', - maxHeight: '99vh', + maxHeight: '100vh', objectFit: 'contain', }; } return { - display: 'block', marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0, minWidth: '10vw', width: dimensions.width < dimensions.height ? '100vw' : `${settings.readerWidth}%`, maxWidth: '100%', - marginLeft: 'auto', - marginRight: 'auto', + objectFit: 'contain', }; } @@ -66,12 +67,19 @@ interface IProps { export const Page = forwardRef((props: IProps, ref: any) => { const { src, index, onImageLoad, settings } = props; + const theme = useTheme(); + const isMobileWidth = useMediaQuery(theme.breakpoints.down('md')); + const imgRef = useRef(null); const imgStyle = imageStyle(settings); + const isDoublePageReader = ['DoubleRTL', 'DoubleLTR'].includes(settings.readerType); return ( - + { spinnerStyle={{ ...imgStyle, height: '100vh', - width: '70vw', + width: isMobileWidth ? '100vw' : 'calc(100% * 0.5)', backgroundColor: '#525252', }} imgStyle={imgStyle} diff --git a/src/components/reader/ReaderSettingsOptions.tsx b/src/components/reader/ReaderSettingsOptions.tsx index 9c7cd232..b6da06a0 100644 --- a/src/components/reader/ReaderSettingsOptions.tsx +++ b/src/components/reader/ReaderSettingsOptions.tsx @@ -12,7 +12,7 @@ import MenuItem from '@mui/material/MenuItem'; import { useTranslation } from 'react-i18next'; import { AllowedMetadataValueTypes, IReaderSettings } from '@/typings'; import { NumberSetting } from '@/components/settings/NumberSetting.tsx'; -import { isFillsPageReaderType } from '@/components/reader/Page.tsx'; +import { isHorizontalReaderType } from '@/components/reader/Page.tsx'; interface IProps extends IReaderSettings { setSettingValue: (key: keyof IReaderSettings, value: AllowedMetadataValueTypes) => void; @@ -30,7 +30,7 @@ export function ReaderSettingsOptions({ readerWidth, }: IProps) { const { t } = useTranslation(); - const fitPageToWindowEligible = !isFillsPageReaderType(readerType); + const fitPageToWindowEligible = !isHorizontalReaderType(readerType); return ( diff --git a/src/components/reader/pager/DoublePagedPager.tsx b/src/components/reader/pager/DoublePagedPager.tsx index dc640a7c..eff27f87 100644 --- a/src/components/reader/pager/DoublePagedPager.tsx +++ b/src/components/reader/pager/DoublePagedPager.tsx @@ -175,10 +175,8 @@ export function DoublePagedPager(props: IReaderProps) { display: 'flex', flexDirection: settings.readerType === 'DoubleLTR' ? 'row' : 'row-reverse', justifyContent: 'center', - margin: '0 auto', width: 'auto', height: 'auto', - overflowX: 'scroll', }} > {getPagesToDisplay() === 2 ? ( diff --git a/src/components/reader/pager/HorizontalPager.tsx b/src/components/reader/pager/HorizontalPager.tsx index 4b6c8e45..cc854dc2 100644 --- a/src/components/reader/pager/HorizontalPager.tsx +++ b/src/components/reader/pager/HorizontalPager.tsx @@ -166,7 +166,6 @@ export function HorizontalPager(props: IReaderProps) { display: 'flex', flexDirection: settings.readerType === 'ContinuesHorizontalLTR' ? 'row' : 'row-reverse', justifyContent: settings.readerType === 'ContinuesHorizontalLTR' ? 'flex-start' : 'flex-end', - margin: '0 auto', width: 'auto', height: 'auto', overflowX: 'visible', diff --git a/src/components/reader/pager/PagedPager.tsx b/src/components/reader/pager/PagedPager.tsx index ddc073bd..cb193cb2 100644 --- a/src/components/reader/pager/PagedPager.tsx +++ b/src/components/reader/pager/PagedPager.tsx @@ -99,11 +99,10 @@ export function PagedPager(props: IReaderProps) { ref={selfRef} sx={{ display: 'flex', - flexDirection: 'row', + flexDirection: 'column', justifyContent: 'center', - margin: '0 auto', - width: '100%', - height: '100vh', + width: 'auto', + height: 'auto', }} onClick={clickControl} > diff --git a/src/components/reader/pager/VerticalPager.tsx b/src/components/reader/pager/VerticalPager.tsx index 200e6966..c60aa513 100644 --- a/src/components/reader/pager/VerticalPager.tsx +++ b/src/components/reader/pager/VerticalPager.tsx @@ -173,8 +173,8 @@ export function VerticalPager(props: IReaderProps) { display: 'flex', flexDirection: 'column', justifyContent: 'center', - margin: '0 auto', - width: '100%', + width: 'auto', + height: 'auto', userSelect: 'none', }} onClick={(e) => { diff --git a/src/screens/Reader.tsx b/src/screens/Reader.tsx index 98082e58..5d145476 100644 --- a/src/screens/Reader.tsx +++ b/src/screens/Reader.tsx @@ -400,7 +400,12 @@ export function Reader() { return ( diff --git a/src/util/readerSettings.ts b/src/util/readerSettings.ts index c7bfaefe..bd9b9856 100644 --- a/src/util/readerSettings.ts +++ b/src/util/readerSettings.ts @@ -25,7 +25,7 @@ export const getDefaultSettings = (): IReaderSettings => ({ showPageNumber: true, loadNextOnEnding: false, skipDupChapters: true, - fitPageToWindow: false, + fitPageToWindow: true, readerType: 'ContinuesVertical', offsetFirstPage: false, readerWidth: 100,