Reader overlay mobile bottom bar

2024-10-03 04:03:04 +02:00
parent c1eb631422
commit 671059c65c
22 changed files with 719 additions and 99 deletions
--- a/src/modules/reader/components/overlay/navigation/ReaderChapterList.tsx
+++ b/src/modules/reader/components/overlay/navigation/ReaderChapterList.tsx
@@ -0,0 +1,69 @@
+/*
+ * 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 { Virtuoso } from 'react-virtuoso';
+import { useMemo } from 'react';
+import { IChapterWithMeta } from '@/modules/chapter/components/ChapterList.tsx';
+import { ChapterCard } from '@/modules/chapter/components/cards/ChapterCard.tsx';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
+
+export const ReaderChapterList = ({
+    currentChapter,
+    chapters,
+}: Required<Pick<ReaderStateChapters, 'chapters' | 'currentChapter'>>) => {
+    const { data: downloaderData } = requestManager.useGetDownloadStatus();
+    const queue = downloaderData?.downloadStatus.queue ?? [];
+
+    const currentChapterIndex = useMemo(
+        () => currentChapter && chapters.findIndex((chapter) => chapter.id === currentChapter.id),
+        [currentChapter, chapters],
+    );
+
+    const chaptersWithMeta: IChapterWithMeta[] = useMemo(
+        () =>
+            chapters.map((chapter) => {
+                const downloadChapter = queue?.find((cd) => cd.chapter.id === chapter.id);
+
+                return {
+                    chapter,
+                    downloadChapter,
+                    selected: null,
+                };
+            }),
+        [queue, chapters],
+    );
+
+    return (
+        <Virtuoso
+            style={{
+                height: `calc(${chaptersWithMeta.length} * 100px)`,
+                minHeight: '15vh',
+                maxHeight: '75vh',
+            }}
+            initialTopMostItemIndex={currentChapterIndex ?? 0}
+            totalCount={chaptersWithMeta.length}
+            computeItemKey={(index) => chaptersWithMeta[index].chapter.id}
+            itemContent={(index) => (
+                <ChapterCard
+                    key={chaptersWithMeta[index].chapter.id}
+                    mode="reader"
+                    chapter={chaptersWithMeta[index].chapter}
+                    downloadChapter={chaptersWithMeta[index].downloadChapter}
+                    allChapters={chapters}
+                    showChapterNumber={false}
+                    selected={null}
+                    onSelect={() => undefined}
+                    selectable={false}
+                    isActiveChapter={index === currentChapterIndex}
+                />
+            )}
+            increaseViewportBy={400}
+        />
+    );
+};
--- a/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
+++ b/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
@@ -0,0 +1,106 @@
+/*
+ * 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 IconButton from '@mui/material/IconButton';
+import SettingsIcon from '@mui/icons-material/Settings';
+import Stack from '@mui/material/Stack';
+import AppSettingsAltIcon from '@mui/icons-material/AppSettingsAlt';
+import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
+import { alpha } from '@mui/material/styles';
+import { bindDialog, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import Tooltip from '@mui/material/Tooltip';
+import { useTranslation } from 'react-i18next';
+import Slide from '@mui/material/Slide';
+import { useLayoutEffect } from 'react';
+import { ReaderBottomBarMobileProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
+import { MobileReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx';
+import { ReaderChapterList } from '@/modules/reader/components/overlay/navigation/ReaderChapterList.tsx';
+import { ReaderBottomBarMobileQuickSettings } from '@/modules/reader/components/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx';
+import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
+import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
+
+export const ReaderBottomBarMobile = ({ openSettings, isVisible }: ReaderBottomBarMobileProps) => {
+    const { t } = useTranslation();
+    const { currentChapter, chapters } = useReaderStateChaptersContext();
+    const { scrollbarXSize, scrollbarYSize } = useReaderScrollbarContext();
+
+    const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' });
+    const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-dialog' });
+
+    useLayoutEffect(() => {
+        chapterListPopupState.close();
+    }, [currentChapter?.id]);
+
+    return (
+        <>
+            <Slide direction="up" in={isVisible} mountOnEnter unmountOnExit>
+                <Stack
+                    sx={{
+                        position: 'fixed',
+                        right: `${scrollbarYSize}px`,
+                        bottom: `${scrollbarXSize}px`,
+                        left: 0,
+                        gap: 2,
+                        pointerEvents: 'all',
+                    }}
+                >
+                    <MobileReaderProgressBar />
+                    <Stack
+                        sx={{
+                            alignItems: 'center',
+                            backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
+                        }}
+                    >
+                        <Stack
+                            sx={{
+                                width: '50%',
+                                flexDirection: 'row',
+                                p: 2,
+                                gap: 1,
+                                justifyContent: 'space-evenly',
+                                alignItems: 'center',
+                            }}
+                        >
+                            <Tooltip title={t('reader.button.chapter_list')}>
+                                <IconButton {...bindTrigger(chapterListPopupState)} size="large" color="inherit">
+                                    <FormatListBulletedIcon />
+                                </IconButton>
+                            </Tooltip>
+                            <Tooltip title={t('reader.settings.label.reader_type')}>
+                                <IconButton {...bindTrigger(quickSettingsPopupState)} size="large" color="inherit">
+                                    <AppSettingsAltIcon />
+                                </IconButton>
+                            </Tooltip>
+                            <Tooltip title={t('settings.title')}>
+                                <IconButton onClick={openSettings} size="large" color="inherit">
+                                    <SettingsIcon />
+                                </IconButton>
+                            </Tooltip>
+                        </Stack>
+                    </Stack>
+                </Stack>
+            </Slide>
+            {chapterListPopupState.isOpen && (
+                <Dialog {...bindDialog(chapterListPopupState)} fullWidth maxWidth="md" scroll="paper">
+                    <DialogContent sx={{ p: 0, pb: 1 }}>
+                        <ReaderChapterList currentChapter={currentChapter} chapters={chapters} />
+                    </DialogContent>
+                </Dialog>
+            )}
+            {quickSettingsPopupState.isOpen && (
+                <Dialog {...bindDialog(quickSettingsPopupState)} fullWidth maxWidth="md" scroll="paper">
+                    <DialogContent>
+                        <ReaderBottomBarMobileQuickSettings />
+                    </DialogContent>
+                </Dialog>
+            )}
+        </>
+    );
+};
--- a/src/modules/reader/components/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx
+++ b/src/modules/reader/components/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx
@@ -0,0 +1,45 @@
+/*
+ * 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 { ReaderBottomBarMobileReadingMode } from '@/modules/reader/components/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileReadingMode.tsx';
+import { ReaderBottomBarMobileReadingDirection } from '@/modules/reader/components/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileReadingDirection.tsx';
+import { createUpdateReaderSettings } from '@/modules/reader/services/ReaderSettingsMetadata.ts';
+import { makeToast } from '@/modules/core/utils/Toast.ts';
+import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
+
+export const ReaderBottomBarMobileQuickSettings = () => {
+    const { t } = useTranslation();
+
+    const { manga } = useReaderStateMangaContext();
+    const { readingMode, readingDirection } = ReaderService.useSettings();
+
+    const updateReaderSettings = createUpdateReaderSettings<
+        keyof Pick<IReaderSettings, 'readingMode' | 'readingDirection'>
+    >(manga ?? { id: -1 }, () => makeToast(t('reader.settings.error.label.failed_to_save_settings')));
+
+    if (!manga) {
+        return null;
+    }
+
+    return (
+        <Stack sx={{ gap: 2 }}>
+            <ReaderBottomBarMobileReadingMode
+                readingMode={readingMode}
+                setReadingMode={(value) => updateReaderSettings('readingMode', value)}
+            />
+            <ReaderBottomBarMobileReadingDirection
+                readingDirection={readingDirection}
+                setReadingDirection={(value) => updateReaderSettings('readingDirection', value)}
+            />
+        </Stack>
+    );
+};
--- a/src/modules/reader/components/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileReadingDirection.tsx
+++ b/src/modules/reader/components/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileReadingDirection.tsx
@@ -0,0 +1,46 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { IReaderSettings, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
+import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
+import { ButtonSelectInput } from '@/modules/core/components/inputs/ButtonSelectInput.tsx';
+
+const 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 ReaderBottomBarMobileReadingDirection = ({
+    readingDirection,
+    setReadingDirection,
+}: Pick<IReaderSettings, 'readingDirection'> & {
+    setReadingDirection: (readingDirection: ReadingDirection) => void;
+}) => {
+    const { t } = useTranslation();
+
+    return (
+        <ButtonSelectInput
+            label={t('reader.settings.label.reading_direction')}
+            value={readingDirection}
+            values={READING_DIRECTION_VALUES}
+            setValue={setReadingDirection}
+            valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+        />
+    );
+};
--- a/src/modules/reader/components/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileReadingMode.tsx
+++ b/src/modules/reader/components/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileReadingMode.tsx
@@ -0,0 +1,56 @@
+/*
+ * 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 { IReaderSettings, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
+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 { ValueToDisplayData } from '@/modules/core/Core.types.ts';
+import { ButtonSelectInput } from '@/modules/core/components/inputs/ButtonSelectInput.tsx';
+
+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 ReaderBottomBarMobileReadingMode = ({
+    readingMode,
+    setReadingMode,
+}: Pick<IReaderSettings, 'readingMode'> & {
+    setReadingMode: (mode: ReadingMode) => void;
+}) => {
+    const { t } = useTranslation();
+
+    return (
+        <ButtonSelectInput
+            label={t('reader.settings.label.reading_mode')}
+            value={readingMode}
+            values={READING_MODE_VALUES}
+            setValue={setReadingMode}
+            valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+        />
+    );
+};
--- a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
@@ -18,7 +18,7 @@ import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progr
 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 { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils';
+import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
 import { getOptionForDirection } from '@/theme.tsx';
 import { ProgressBarPosition } from '@/modules/reader/types/Reader.types.ts';
 import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';