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

Reader overlay desktop nav bar

Browse Source
This commit is contained in:
schroda
2024-10-03 04:02:59 +02:00
parent 671059c65c
commit 56684e405c
21 changed files with 928 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/locales/en.json
View File

@@ -757,9 +757,12 @@
"chapter_list": "Chapter list",
"close_menu": "Close menu",
"exit": "Exit reader",
"next_chapter": "Next Chapter",
"next_chapter": "Next chapter",
"next_page": "Next page",
"open_menu": "Open menu",
"previous_chapter": "Previous Chapter"
"previous_chapter": "Previous chapter",
"previous_page": "Previous page",
"retry_load_pages": "Retry errored pages"
},
"error": {
"label": {
@@ -771,7 +774,8 @@
"page_info": {
"label": {
"currently_on_page": "Currently on page",
"of_max_pages": "of {{maxPages}}"
"of_max_pages": "of {{maxPages}}",
"page": "Page"
}
},
"settings": {
@@ -784,7 +788,7 @@
"label": {
"fit_page_to_window": "Fit page to window",
"load_next_chapter": "Load next chapter at ending",
"offset_first_page": "Offset first page",
"offset_double_spread": "Offset double spreads",
"reader_type": "Reader type",
"reader_width": "Reader width",
"reading_direction": "Reading direction",
@@ -794,6 +798,13 @@
"skip_dup_chapters": "Skip duplicate chapters",
"static_navigation": "Static navigation"
},
"page_scale": {
"height": "Fit height",
"original": "Original size",
"screen": "Fit screen",
"stretch": "Stretch small pages",
"width": "Fit width"
},
"reader_type": {
"label": {
"continuous_horizontal": "Continuous horizontal",

40
src/modules/core/components/buttons/ValueRotationButton.tsx Normal file
View File

@@ -0,0 +1,40 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useTranslation } from 'react-i18next';
import { useMemo } from 'react';
import Button from '@mui/material/Button';
import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
export const ValueRotationButton = <Value extends string | number>({
value,
values,
setValue,
valueToDisplayData,
}: {
value: Value;
values: Value[];
setValue: (value: Value) => void;
valueToDisplayData: ValueToDisplayData<Value>;
}) => {
const { t } = useTranslation();
const indexOfValue = useMemo(() => values.indexOf(value), [value, values]);
return (
<Button
onClick={() => setValue(values[(indexOfValue + 1) % values.length])}
sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
variant="contained"
startIcon={valueToDisplayData[value].icon}
size="large"
>
{t(valueToDisplayData[value].title)}
</Button>
);
};

32
src/modules/metadata/Metadata.constants.ts
View File

@@ -7,7 +7,7 @@
*/
import { AppMetadataKeys, IMetadataMigration } from '@/modules/metadata/Metadata.types.ts';
import { ReadingMode } from '@/modules/reader/types/Reader.types.ts';
import { ReaderPageScaleMode, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
export const APP_METADATA_KEY_PREFIX = 'webUI_';
@@ -16,9 +16,6 @@ const APP_METADATA_OBJECT: Record<AppMetadataKeys, undefined> = {
showPageNumber: undefined,
loadNextOnEnding: undefined,
skipDupChapters: undefined,
fitPageToWindow: undefined,
scalePage: undefined,
offsetFirstPage: undefined,
migration: undefined,
deleteChaptersManuallyMarkedRead: undefined,
deleteChaptersWhileReading: undefined,
@@ -62,6 +59,9 @@ const APP_METADATA_OBJECT: Record<AppMetadataKeys, undefined> = {
progressBarSize: undefined,
progressBarPosition: undefined,
readingMode: undefined,
pageScaleMode: undefined,
shouldScalePage: undefined,
shouldOffsetDoubleSpreads: undefined,
};
export const VALID_APP_METADATA_KEYS = Object.keys(APP_METADATA_OBJECT);
@@ -193,6 +193,18 @@ export const METADATA_MIGRATIONS: IMetadataMigration[] = [
oldKey: 'readerType',
newKey: 'readingMode',
},
{
oldKey: 'offsetFirstPage',
newKey: 'shouldOffsetDoubleSpreads',
},
{
oldKey: 'fitPageToWindow',
newKey: 'pageScaleMode',
},
{
oldKey: 'scalePage',
newKey: 'shouldScalePage',
},
],
values: [
// START: readerType
@@ -237,6 +249,18 @@ export const METADATA_MIGRATIONS: IMetadataMigration[] = [
newValue: `${ReadingMode.CONTINUOUS_HORIZONTAL}`,
},
// END: readerType
// START: fitPageToWindow
{
key: 'fitPageToWindow',
oldValue: 'false',
newValue: `${ReaderPageScaleMode.ORIGINAL}`,
},
{
key: 'fitPageToWindow',
oldValue: 'true',
newValue: `${ReaderPageScaleMode.SCREEN}`,
},
// END: fitPageToWindow
],
},
];

8
src/modules/reader/components/overlay/navigation/ReaderChapterList.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { Virtuoso } from 'react-virtuoso';
import { Virtuoso, VirtuosoProps } from 'react-virtuoso';
import { useMemo } from 'react';
import { IChapterWithMeta } from '@/modules/chapter/components/ChapterList.tsx';
import { ChapterCard } from '@/modules/chapter/components/cards/ChapterCard.tsx';
@@ -16,7 +16,8 @@ import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
export const ReaderChapterList = ({
currentChapter,
chapters,
}: Required<Pick<ReaderStateChapters, 'chapters' | 'currentChapter'>>) => {
style,
}: Pick<ReaderStateChapters, 'chapters' | 'currentChapter'> & Pick<VirtuosoProps<any, any>, 'style'>) => {
const { data: downloaderData } = requestManager.useGetDownloadStatus();
const queue = downloaderData?.downloadStatus.queue ?? [];
@@ -43,8 +44,7 @@ export const ReaderChapterList = ({
<Virtuoso
style={{
height: `calc(${chaptersWithMeta.length} * 100px)`,
minHeight: '15vh',
maxHeight: '75vh',
...style,
}}
initialTopMostItemIndex={currentChapterIndex ?? 0}
totalCount={chaptersWithMeta.length}

155
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx Normal file
View File

@@ -0,0 +1,155 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { useTranslation } from 'react-i18next';
import IconButton from '@mui/material/IconButton';
import ArrowBack from '@mui/icons-material/ArrowBack';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import PushPinIcon from '@mui/icons-material/PushPin';
import Divider from '@mui/material/Divider';
import { useCallback, useLayoutEffect, useRef, useState } from 'react';
import Drawer from '@mui/material/Drawer';
import { useGetOptionForDirection } from '@/theme.tsx';
import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';
import { ReaderNavContainer } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavContainer.tsx';
import { ReaderNavBarDesktopMetadata } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopMetadata.tsx';
import { ReaderNavBarDesktopPageNavigation } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx';
import { ReaderNavBarDesktopChapterNavigation } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx';
import { ReaderNavBarDesktopQuickSettings } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx';
import { ReaderNavBarDesktopActions } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopActions.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
import { createUpdateReaderSettings } from '@/modules/reader/services/ReaderSettingsMetadata.ts';
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
const useGetPreviousNavBarStaticValue = (isVisible: boolean, staticNav: boolean) => {
const wasNavBarStaticRef = useRef(staticNav);
const wasNavBarStaticPreviousRef = useRef(staticNav);
const resetWasNavBarStaticValue = wasNavBarStaticPreviousRef.current !== wasNavBarStaticRef.current && !isVisible;
if (resetWasNavBarStaticValue) {
wasNavBarStaticRef.current = false;
}
const didNavBarStaticValueChange = wasNavBarStaticPreviousRef.current !== staticNav;
if (didNavBarStaticValueChange) {
wasNavBarStaticRef.current = wasNavBarStaticPreviousRef.current;
wasNavBarStaticPreviousRef.current = staticNav;
}
return wasNavBarStaticRef.current;
};
export const ReaderNavBarDesktop = ({ isVisible, openSettings }: ReaderNavBarDesktopProps) => {
const { t } = useTranslation();
const { setReaderNavBarWidth } = useNavBarContext();
const { manga } = useReaderStateMangaContext();
const { chapters, currentChapter, nextChapter, previousChapter } = useReaderStateChaptersContext();
const { pages, currentPageIndex, setCurrentPageIndex } = userReaderStatePagesContext();
const handleBack = useBackButton();
const getOptionForDirection = useGetOptionForDirection();
const updateReaderSettings = createUpdateReaderSettings(manga ?? { id: -1 }, () =>
makeToast(t('reader.settings.error.label.failed_to_save_settings')),
);
const settings = ReaderService.useSettings();
const [navBarElement, setNavBarElement] = useState<HTMLDivElement | null>();
useResizeObserver(
navBarElement,
useCallback(() => {
if (!settings?.staticNav) {
return;
}
setReaderNavBarWidth(navBarElement!.offsetWidth);
}, [navBarElement, settings?.staticNav]),
);
useLayoutEffect(() => () => setReaderNavBarWidth(0), []);
const wasNavBarStatic = useGetPreviousNavBarStaticValue(isVisible, settings.staticNav);
const changedNavBarStaticValue = wasNavBarStatic && isVisible;
const drawerTransitionDuration = changedNavBarStaticValue ? 0 : undefined;
return (
<Drawer
variant={settings.staticNav ? 'permanent' : 'persistent'}
open={isVisible || settings.staticNav}
transitionDuration={drawerTransitionDuration}
PaperProps={{
ref: (ref: HTMLDivElement | null) => setNavBarElement(ref),
}}
>
<ReaderNavContainer sx={{ backgroundColor: 'background.paper', pointerEvents: 'all' }}>
<Stack sx={{ p: 2, gap: 2, backgroundColor: 'action.hover' }}>
<Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<Tooltip title={t('reader.button.exit')}>
<IconButton onClick={handleBack} color="inherit">
{getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
</IconButton>
</Tooltip>
<Tooltip title={t('reader.settings.label.static_navigation')}>
<IconButton
onClick={() => {
setReaderNavBarWidth(0);
updateReaderSettings('staticNav', !settings.staticNav);
}}
color={settings.staticNav ? 'primary' : 'inherit'}
>
<PushPinIcon />
</IconButton>
</Tooltip>
</Stack>
{manga && currentChapter ? (
<>
<ReaderNavBarDesktopMetadata
mangaId={manga.id}
mangaTitle={manga.title}
chapterTitle={currentChapter.name}
/>
<ReaderNavBarDesktopActions currentChapter={currentChapter} />
</>
) : (
<LoadingPlaceholder />
)}
</Stack>
<Stack sx={{ p: 2, gap: 2 }}>
<Stack sx={{ gap: 1 }}>
<ReaderNavBarDesktopPageNavigation
currentPageIndex={currentPageIndex}
setCurrentPageIndex={setCurrentPageIndex}
pages={pages}
/>
<ReaderNavBarDesktopChapterNavigation
chapters={chapters}
currentChapter={currentChapter}
nextChapter={nextChapter}
previousChapter={previousChapter}
/>
</Stack>
<Divider />
<ReaderNavBarDesktopQuickSettings
settings={settings}
updateSetting={updateReaderSettings}
openSettings={openSettings}
/>
</Stack>
</ReaderNavContainer>
</Drawer>
);
};

98
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopActions.tsx Normal file
View File

@@ -0,0 +1,98 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { useTranslation } from 'react-i18next';
import IconButton from '@mui/material/IconButton';
import BookmarkIcon from '@mui/icons-material/Bookmark';
import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import DownloadIcon from '@mui/icons-material/Download';
import ReplayIcon from '@mui/icons-material/Replay';
import { useMemo } from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
import { DownloadStatusFieldsFragment } from '@/lib/graphql/generated/graphql.ts';
const DownloadButton = ({
currentChapter,
downloadChapter,
}: Required<Pick<ReaderStateChapters, 'currentChapter'>> & {
downloadChapter?: DownloadStatusFieldsFragment['queue'][number];
}) => {
const { t } = useTranslation();
if (currentChapter && Chapters.isDownloaded(currentChapter)) {
return (
<Tooltip title={t(actionToTranslationKey.delete.action.single)}>
<IconButton onClick={() => Chapters.performAction('delete', [currentChapter.id], {})} color="inherit">
<DeleteIcon />
</IconButton>
</Tooltip>
);
}
if (downloadChapter) {
return <DownloadStateIndicator download={downloadChapter} />;
}
return (
<Tooltip title={t(actionToTranslationKey.download.action.single)}>
<IconButton
disabled={!currentChapter}
onClick={() => Chapters.performAction('download', [currentChapter?.id ?? -1], {})}
color="inherit"
>
<DownloadIcon />
</IconButton>
</Tooltip>
);
};
export const ReaderNavBarDesktopActions = ({
currentChapter,
}: Required<Pick<ReaderStateChapters, 'currentChapter'>>) => {
const { id, isBookmarked, realUrl } = currentChapter ?? { id: -1, isBookmarked: false, realUrl: '' };
const { t } = useTranslation();
const { data: downloaderData } = requestManager.useGetDownloadStatus();
const queue = downloaderData?.downloadStatus.queue ?? [];
const downloadChapter = useMemo(
() => queue.find((queueItem) => queueItem.chapter.id === currentChapter?.id),
[queue, id],
);
const bookmarkAction: Extract<ChapterAction, 'unbookmark' | 'bookmark'> = isBookmarked ? 'unbookmark' : 'bookmark';
return (
<Stack sx={{ flexDirection: 'row', justifyContent: 'center', gap: 1 }}>
<Tooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
<IconButton onClick={() => Chapters.performAction(bookmarkAction, [id], {})} color="inherit">
{isBookmarked ? <BookmarkIcon /> : <BookmarkBorderIcon />}
</IconButton>
</Tooltip>
<Tooltip title={t('reader.button.retry_load_pages')}>
<IconButton color="inherit">
<ReplayIcon />
</IconButton>
</Tooltip>
<DownloadButton currentChapter={currentChapter} downloadChapter={downloadChapter} />
<Tooltip title={t('chapter.action.label.open_on_source')}>
<IconButton disabled={!realUrl} href={realUrl ?? ''} rel="noreferrer" target="_blank" color="inherit">
<OpenInNewIcon />
</IconButton>
</Tooltip>
</Stack>
);
};

118
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx Normal file
View File

@@ -0,0 +1,118 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import Box from '@mui/material/Box';
import MenuItem from '@mui/material/MenuItem';
import { ContextType, useLayoutEffect } from 'react';
import Popover from '@mui/material/Popover';
import { bindPopover, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import { Link } from 'react-router-dom';
import { Select } from '@/modules/core/components/inputs/Select.tsx';
import { Chapters } from '@/modules/chapter/services/Chapters.ts';
import { ReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
import { ReaderChapterList } from '@/modules/reader/components/overlay/navigation/ReaderChapterList.tsx';
import { ReaderNavBarDesktopNextPreviousButton } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx';
import { useGetOptionForDirection } from '@/theme.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
export const ReaderNavBarDesktopChapterNavigation = ({
currentChapter,
previousChapter,
nextChapter,
chapters = [],
}: Pick<
ContextType<typeof ReaderStateChaptersContext>,
'chapters' | 'currentChapter' | 'previousChapter' | 'nextChapter'
>) => {
const { t } = useTranslation();
const { readingDirection } = ReaderService.useSettings();
const getOptionForDirection = useGetOptionForDirection();
const popupState = usePopupState({ variant: 'popover', popupId: 'reader-nav-bar-desktop-chapter-list' });
const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];
useLayoutEffect(() => {
popupState.close();
}, [currentChapter?.id]);
return (
<Stack sx={{ flexDirection: 'row', gap: 1 }} dir="ltr">
<ReaderNavBarDesktopNextPreviousButton
component={Link}
type="previous"
title={t(
getOptionForDirection('reader.button.previous_chapter', 'reader.button.next_chapter', direction),
)}
disabled={getOptionForDirection(!previousChapter, !nextChapter, direction)}
to={getOptionForDirection(
previousChapter && Chapters.getReaderUrl(previousChapter),
nextChapter && Chapters.getReaderUrl(nextChapter),
direction,
)}
replace
/>
<FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}>
<InputLabel id="reader-nav-bar-desktop-chapter-select">{t('chapter.title_one')}</InputLabel>
<Select
{...bindTrigger(popupState)}
open={popupState.isOpen}
value={currentChapter?.id ?? 0}
// hide actual select menu
MenuProps={{ sx: { visibility: 'hidden' } }}
label={t('chapter.title_one')}
labelId="reader-nav-bar-desktop-chapter-select"
>
{/* hacky way to use the select component with a custom menu, the only possible value that is needed is the current chapter */}
<MenuItem key={currentChapter?.id} value={currentChapter?.id ?? 0}>
{currentChapter ? `#${currentChapter.chapterNumber} ${currentChapter.name}` : ''}
</MenuItem>
</Select>
</FormControl>
<ReaderNavBarDesktopNextPreviousButton
component={Link}
type="next"
title={t(
getOptionForDirection('reader.button.next_chapter', 'reader.button.previous_chapter', direction),
)}
disabled={getOptionForDirection(!nextChapter, !previousChapter, direction)}
to={getOptionForDirection(
nextChapter && Chapters.getReaderUrl(nextChapter),
previousChapter && Chapters.getReaderUrl(previousChapter),
direction,
)}
replace
/>
<Popover
{...bindPopover(popupState)}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
>
<Box sx={{ mb: 1 }}>
<ReaderChapterList
style={{
width: '500px',
maxWidth: '90vw',
minHeight: '150px',
maxHeight: '300px',
}}
currentChapter={currentChapter}
chapters={chapters}
/>
</Box>
</Popover>
</Stack>
);
};

39
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopMetadata.tsx Normal file
View File

@@ -0,0 +1,39 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Link from '@mui/material/Link';
import { Link as RouterLink } from 'react-router-dom';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines';
export const ReaderNavBarDesktopMetadata = ({
mangaId,
mangaTitle,
chapterTitle,
}: {
mangaId: number;
mangaTitle: string;
chapterTitle: string;
}) => (
<Stack>
<Tooltip title={mangaTitle} placement="right">
<TypographyMaxLines lines={3} variant="h6" component="h1" sx={{ textAlign: 'center' }}>
<Link component={RouterLink} to={`/manga/${mangaId}`} sx={{ textDecoration: 'none', color: 'inherit' }}>
{mangaTitle}
</Link>
</TypographyMaxLines>
</Tooltip>
<Tooltip title={chapterTitle} placement="right">
<TypographyMaxLines lines={4} variant="body1" component="h2" sx={{ textAlign: 'center' }}>
{chapterTitle}
</TypographyMaxLines>
</Tooltip>
</Stack>
);

28
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx Normal file
View File

@@ -0,0 +1,28 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Tooltip from '@mui/material/Tooltip';
import { ComponentProps } from 'react';
import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton';
export const ReaderNavBarDesktopNextPreviousButton = ({
title,
type,
...customIconButtonProps
}: Omit<ComponentProps<typeof CustomIconButton>, 'children'> & {
title: string;
type: 'previous' | 'next';
}) => (
<Tooltip title={title}>
<CustomIconButton sx={{ minWidth: 0, px: 1, flexBasis: '15%' }} variant="contained" {...customIconButtonProps}>
{type === 'previous' ? <KeyboardArrowLeftIcon /> : <KeyboardArrowRightIcon />}
</CustomIconButton>
</Tooltip>
);

76
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx Normal file
View File

@@ -0,0 +1,76 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import MenuItem from '@mui/material/MenuItem';
import { useMemo } from 'react';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import { Select } from '@/modules/core/components/inputs/Select.tsx';
import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
import { useGetOptionForDirection } from '@/theme.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { ReaderNavBarDesktopNextPreviousButton } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx';
import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
export const ReaderNavBarDesktopPageNavigation = ({
currentPageIndex,
setCurrentPageIndex,
pages,
}: Pick<ReaderStatePages, 'currentPageIndex' | 'setCurrentPageIndex' | 'pages'>) => {
const { t } = useTranslation();
const openPage = ReaderControls.useOpenPage();
const { readingDirection } = ReaderService.useSettings();
const getOptionForDirection = useGetOptionForDirection();
const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];
return (
<Stack sx={{ flexDirection: 'row', gap: 1 }} dir="ltr">
<ReaderNavBarDesktopNextPreviousButton
type="previous"
title={t(getOptionForDirection('reader.button.previous_page', 'reader.button.next_page', direction))}
disabled={getOptionForDirection(
!currentPageIndex,
currentPage.primary.index === pages.slice(-1)[0].primary.index,
direction,
)}
onClick={() => openPage('previous')}
/>
<FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}>
<InputLabel id="reader-nav-bar-desktop-page-select">{t('reader.page_info.label.page')}</InputLabel>
<Select
labelId="reader-nav-bar-desktop-page-select"
label={t('reader.page_info.label.page')}
value={currentPage.primary.index}
onChange={(e) => setCurrentPageIndex(e.target.value as number)}
>
{pages.map(({ primary: { index }, name }) => (
<MenuItem key={index} value={index}>
{name}
</MenuItem>
))}
</Select>
</FormControl>
<ReaderNavBarDesktopNextPreviousButton
type="next"
title={t(getOptionForDirection('reader.button.next_page', 'reader.button.previous_page', direction))}
disabled={getOptionForDirection(
currentPage.primary.index === pages.slice(-1)[0].primary.index,
!currentPageIndex,
direction,
)}
onClick={() => openPage('next')}
/>
</Stack>
);
};

18
src/modules/reader/components/overlay/navigation/desktop/ReaderNavContainer.tsx Normal file
View File

@@ -0,0 +1,18 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Stack from '@mui/material/Stack';
import { styled } from '@mui/material/styles';
export const ReaderNavContainer = styled(Stack)({
width: '400px',
minWidth: '400px',
maxWidth: '400px',
height: '100vh',
overflowY: 'auto',
});

39
src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopOffsetDoubleSpread.tsx Normal file
View File

@@ -0,0 +1,39 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
import { OffsetDoubleSpreadIcon } from '@/assets/icons/svg/OffsetDoubleSpreadIcon.tsx';
import { IReaderSettings, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
export const ReaderNavBarDesktopOffsetDoubleSpread = ({
readingMode,
shouldOffsetDoubleSpreads,
setShouldOffsetDoubleSpreads,
}: Pick<IReaderSettings, 'readingMode' | 'shouldOffsetDoubleSpreads'> & {
setShouldOffsetDoubleSpreads: (offset: boolean) => void;
}) => {
const { t } = useTranslation();
if (readingMode !== ReadingMode.DOUBLE_PAGE) {
return null;
}
return (
<Button
sx={{ justifyContent: 'start', textTransform: 'unset' }}
size="large"
onClick={() => setShouldOffsetDoubleSpreads(!shouldOffsetDoubleSpreads)}
color={shouldOffsetDoubleSpreads ? 'secondary' : 'primary'}
variant="contained"
startIcon={<OffsetDoubleSpreadIcon />}
>
{t('reader.settings.label.offset_double_spread')}
</Button>
);
};

78
src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopPageScale.tsx Normal file
View File

@@ -0,0 +1,78 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import { useTranslation } from 'react-i18next';
import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
import ExpandIcon from '@mui/icons-material/Expand';
import CropOriginalIcon from '@mui/icons-material/CropOriginal';
import FitScreenIcon from '@mui/icons-material/FitScreen';
import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton.tsx';
import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
import { IReaderSettings, ReaderPageScaleMode } from '@/modules/reader/types/Reader.types.ts';
import { ValueToDisplayData } from '@/modules/core/Core.types';
const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReaderPageScaleMode> = {
[ReaderPageScaleMode.WIDTH]: {
title: 'reader.settings.page_scale.width',
icon: <ExpandIcon sx={{ transform: 'rotate(90deg)' }} />,
},
[ReaderPageScaleMode.HEIGHT]: {
title: 'reader.settings.page_scale.height',
icon: <ExpandIcon />,
},
[ReaderPageScaleMode.SCREEN]: {
title: 'reader.settings.page_scale.screen',
icon: <ZoomOutMapIcon />,
},
[ReaderPageScaleMode.ORIGINAL]: {
title: 'reader.settings.page_scale.original',
icon: <CropOriginalIcon />,
},
};
const READER_PAGE_SCALE_MODE_VALUES = Object.values(ReaderPageScaleMode).filter((value) => typeof value === 'number');
export const ReaderNavBarDesktopPageScale = ({
pageScaleMode,
shouldScalePage,
updateSetting,
}: Pick<IReaderSettings, 'pageScaleMode' | 'shouldScalePage'> & {
updateSetting: <Setting extends keyof Pick<IReaderSettings, 'pageScaleMode' | 'shouldScalePage'>>(
setting: Setting,
value: IReaderSettings[Setting],
) => void;
}) => {
const { t } = useTranslation();
const isPageScalingPossible = pageScaleMode !== ReaderPageScaleMode.ORIGINAL;
return (
<Stack sx={{ flexDirection: 'row', gap: 1 }}>
<ValueRotationButton
value={pageScaleMode}
values={READER_PAGE_SCALE_MODE_VALUES}
setValue={(value) => updateSetting('pageScaleMode', value)}
valueToDisplayData={VALUE_TO_DISPLAY_DATA}
/>
{isPageScalingPossible && (
<Tooltip title={t('reader.settings.label.scale_page')}>
<CustomIconButton
onClick={() => updateSetting('shouldScalePage', !shouldScalePage)}
sx={{ minWidth: 0 }}
variant="contained"
color={shouldScalePage ? 'secondary' : 'primary'}
>
<FitScreenIcon />
</CustomIconButton>
</Tooltip>
)}
</Stack>
);
};

60
src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx Normal file
View File

@@ -0,0 +1,60 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
import SettingsIcon from '@mui/icons-material/Settings';
import { ReaderNavBarDesktopPageScale } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopPageScale.tsx';
import { ReaderNavBarDesktopReadingMode } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingMode.tsx';
import { ReaderNavBarDesktopOffsetDoubleSpread } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopOffsetDoubleSpread.tsx';
import { ReaderNavBarDesktopReadingDirection } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingDirection.tsx';
import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
export const ReaderNavBarDesktopQuickSettings = ({
settings: { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldScalePage, readingDirection },
updateSetting,
openSettings,
}: {
settings: IReaderSettings;
updateSetting: <Setting extends keyof IReaderSettings>(setting: Setting, value: IReaderSettings[Setting]) => void;
} & Pick<ReaderNavBarDesktopProps, 'openSettings'>) => {
const { t } = useTranslation();
return (
<Stack sx={{ gap: 1 }}>
<ReaderNavBarDesktopReadingMode
readingMode={readingMode}
setReadingMode={(value) => updateSetting('readingMode', value)}
/>
<ReaderNavBarDesktopOffsetDoubleSpread
shouldOffsetDoubleSpreads={shouldOffsetDoubleSpreads}
setShouldOffsetDoubleSpreads={(value) => updateSetting('shouldOffsetDoubleSpreads', value)}
/>
<ReaderNavBarDesktopPageScale
pageScaleMode={pageScaleMode}
shouldScalePage={shouldScalePage}
updateSetting={updateSetting}
/>
<ReaderNavBarDesktopReadingDirection
readingDirection={readingDirection}
setReadingDirection={(value) => updateSetting('readingDirection', value)}
/>
<Button
onClick={() => openSettings()}
size="large"
sx={{ justifyContent: 'start', textTransform: 'none' }}
variant="contained"
startIcon={<SettingsIcon />}
>
{t('reader.settings.title.reader_settings')}
</Button>
</Stack>
);
};

40
src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingDirection.tsx Normal file
View File

@@ -0,0 +1,40 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import ArrowCircleLeftIcon from '@mui/icons-material/ArrowCircleLeft';
import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
import { IReaderSettings, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
const READING_MODE_VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReadingDirection> = {
[ReadingDirection.LTR]: {
title: 'reader.settings.reading_direction.ltr',
icon: <ArrowCircleRightIcon />,
},
[ReadingDirection.RTL]: {
title: 'reader.settings.reading_direction.rtl',
icon: <ArrowCircleLeftIcon />,
},
};
const READING_DIRECTION_VALUES = Object.values(ReadingDirection).filter((value) => typeof value === 'number');
export const ReaderNavBarDesktopReadingDirection = ({
readingDirection,
setReadingDirection,
}: Pick<IReaderSettings, 'readingDirection'> & {
setReadingDirection: (readingDirection: ReadingDirection) => void;
}) => (
<ValueRotationButton
value={readingDirection}
values={READING_DIRECTION_VALUES}
setValue={setReadingDirection}
valueToDisplayData={READING_MODE_VALUE_TO_DISPLAY_DATA}
/>
);

50
src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingMode.tsx Normal file
View File

@@ -0,0 +1,50 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { SinglePageIcon } from '@/assets/icons/svg/SinglePageIcon.tsx';
import { DoublePageIcon } from '@/assets/icons/svg/DoublePageIcon.tsx';
import { ContinuousVerticalPageIcon } from '@/assets/icons/svg/ContinuousVerticalPageIcon.tsx';
import { ContinuousHorizontalPageIcon } from '@/assets/icons/svg/ContinuousHorizontalPageIcon.tsx';
import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
import { ValueToDisplayData } from '@/modules/core/Core.types.tsx';
import { IReaderSettings, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReadingMode> = {
[ReadingMode.SINGLE_PAGE]: {
title: 'reader.settings.reader_type.label.single_page',
icon: <SinglePageIcon />,
},
[ReadingMode.DOUBLE_PAGE]: {
title: 'reader.settings.reader_type.label.double_page',
icon: <DoublePageIcon />,
},
[ReadingMode.CONTINUOUS_VERTICAL]: {
title: 'reader.settings.reader_type.label.continuous_vertical',
icon: <ContinuousVerticalPageIcon />,
},
[ReadingMode.CONTINUOUS_HORIZONTAL]: {
title: 'reader.settings.reader_type.label.continuous_horizontal',
icon: <ContinuousHorizontalPageIcon />,
},
};
const READING_MODE_VALUES = Object.values(ReadingMode).filter((value) => typeof value === 'number');
export const ReaderNavBarDesktopReadingMode = ({
readingMode,
setReadingMode,
}: Pick<IReaderSettings, 'readingMode'> & {
setReadingMode: (mode: ReadingMode) => void;
}) => (
<ValueRotationButton
value={readingMode}
values={READING_MODE_VALUES}
setValue={setReadingMode}
valueToDisplayData={VALUE_TO_DISPLAY_DATA}
/>
);

9
src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
View File

@@ -90,7 +90,14 @@ export const ReaderBottomBarMobile = ({ openSettings, isVisible }: ReaderBottomB
{chapterListPopupState.isOpen && (
<Dialog {...bindDialog(chapterListPopupState)} fullWidth maxWidth="md" scroll="paper">
<DialogContent sx={{ p: 0, pb: 1 }}>
<ReaderChapterList currentChapter={currentChapter} chapters={chapters} />
<ReaderChapterList
style={{
minHeight: '15vh',
maxHeight: '75vh',
}}
currentChapter={currentChapter}
chapters={chapters}
/>
</DialogContent>
</Dialog>
)}

7
src/modules/reader/constants/Reader.constants.ts
View File

@@ -10,6 +10,7 @@ import {
IReaderSettings,
ProgressBarPosition,
ProgressBarType,
ReaderPageScaleMode,
ReadingDirection,
ReadingMode,
} from '@/modules/reader/types/Reader.types.ts';
@@ -20,15 +21,15 @@ export const DEFAULT_READER_SETTINGS: IReaderSettings = {
showPageNumber: true,
loadNextOnEnding: false,
skipDupChapters: true,
fitPageToWindow: true,
scalePage: false,
offsetFirstPage: false,
readerWidth: 50,
tapZoneLayout: TapZoneLayouts.RIGHT_LEFT,
tapZoneInvertMode: { vertical: false, horizontal: false },
progressBarType: ProgressBarType.STANDARD,
progressBarSize: 4,
progressBarPosition: ProgressBarPosition.BOTTOM,
pageScaleMode: ReaderPageScaleMode.ORIGINAL,
shouldScalePage: false,
shouldOffsetDoubleSpreads: false,
readingDirection: ReadingDirection.LTR,
readingMode: ReadingMode.SINGLE_PAGE,
};

15
src/modules/reader/constants/ReaderSettings.constants.tsx Normal file
View File

@@ -0,0 +1,15 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { Direction } from '@mui/material/styles';
import { ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
export const READING_DIRECTION_TO_THEME_DIRECTION: Record<ReadingDirection, Direction> = {
[ReadingDirection.LTR]: 'ltr',
[ReadingDirection.RTL]: 'rtl',
};

13
src/modules/reader/types/Reader.types.ts
View File

@@ -32,6 +32,13 @@ export enum ReadingMode {
CONTINUOUS_HORIZONTAL,
}
export enum ReaderPageScaleMode {
WIDTH,
HEIGHT,
SCREEN,
ORIGINAL,
}
export interface ReaderStateChapters {
chapters: TChapterReader[];
currentChapter?: TChapterReader | null;
@@ -45,15 +52,15 @@ export interface IReaderSettings {
showPageNumber: boolean;
loadNextOnEnding: boolean;
skipDupChapters: boolean;
fitPageToWindow: boolean;
scalePage: boolean;
offsetFirstPage: boolean;
readerWidth: number;
tapZoneLayout: TapZoneLayouts;
tapZoneInvertMode: TapZoneInvertMode;
progressBarType: ProgressBarType;
progressBarSize: number;
progressBarPosition: ProgressBarPosition;
pageScaleMode: ReaderPageScaleMode;
shouldScalePage: boolean;
shouldOffsetDoubleSpreads: boolean;
readingDirection: ReadingDirection;
readingMode: ReadingMode;
}

6
src/modules/reader/types/ReaderOverlay.types.ts
View File

@@ -12,6 +12,10 @@ export interface BaseReaderOverlayProps {
export interface MobileHeaderProps extends BaseReaderOverlayProps {}
export interface ReaderBottomBarMobileProps extends BaseReaderOverlayProps {
interface ReaderNavBarBaseProps extends BaseReaderOverlayProps {
openSettings: () => void;
}
export interface ReaderBottomBarMobileProps extends ReaderNavBarBaseProps {}
export interface ReaderNavBarDesktopProps extends ReaderNavBarBaseProps {}