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

Reader settings

Browse Source
This commit is contained in:
schroda
2024-11-04 18:00:35 +01:00
parent 9c57ace973
commit a607f7f368
70 changed files with 2813 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/modules/reader/components/overlay/ReaderOverlay.tsx
View File

@@ -7,36 +7,39 @@
*/
import Box from '@mui/material/Box';
import { useState } from 'react';
import { BaseReaderOverlayProps, MobileHeaderProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
import { ReaderSettings } from '@/modules/reader/components/settings/ReaderSettings.tsx';
import { ReaderPageNumber } from '@/modules/reader/components/ReaderPageNumber.tsx';
import { StandardReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx';
import { ReaderNavBarDesktop } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx';
import { ReaderOverlayHeaderMobile } from '@/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx';
import { ReaderBottomBarMobile } from '@/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
export const ReaderOverlay = ({ isVisible }: BaseReaderOverlayProps & MobileHeaderProps) => {
const isTouchDevice = MediaQuery.useIsTouchDevice();
const { isDesktop, isMobile } = ReaderService.useOverlayMode();
const isDesktop = !isTouchDevice;
const isMobile = isTouchDevice;
const [areSettingsOpen, setAreSettingsOpen] = useState(false);
return (
<Box sx={{ position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none', zIndex: 1 }}>
{isDesktop && (
<>
<StandardReaderProgressBar />
<ReaderNavBarDesktop isVisible={isVisible} openSettings={() => {}} />
<ReaderNavBarDesktop isVisible={isVisible} openSettings={() => setAreSettingsOpen(true)} />
</>
)}
{isMobile && (
<>
<ReaderOverlayHeaderMobile isVisible={isVisible} />
<ReaderBottomBarMobile openSettings={() => {}} isVisible={isVisible} />
<ReaderBottomBarMobile openSettings={() => setAreSettingsOpen(true)} isVisible={isVisible} />
</>
)}
<ReaderSettings isOpen={areSettingsOpen} close={() => setAreSettingsOpen(false)} />
<ReaderPageNumber />
</Box>
);