Reader progress bars

2024-09-28 03:24:16 +02:00
parent 51fb660c7b
commit 7434ed0152
42 changed files with 1587 additions and 34 deletions
--- a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
@@ -0,0 +1,179 @@
+/*
+ * 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 SkipPreviousIcon from '@mui/icons-material/SkipPrevious';
+import SkipNextIcon from '@mui/icons-material/SkipNext';
+import Stack from '@mui/material/Stack';
+import { alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { useLayoutEffect } from 'react';
+import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
+import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx';
+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 { getOptionForDirection } from '@/theme.tsx';
+import { ProgressBarPosition } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
+import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
+import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
+
+export const MobileReaderProgressBar = () => {
+    const { nextChapter, previousChapter } = useReaderStateChaptersContext();
+    const { isVisible } = useReaderOverlayContext();
+    const { setIsMaximized } = useReaderProgressBarContext();
+    const pagesState = userReaderStatePagesContext();
+    const { currentPageIndex, pages } = pagesState;
+
+    const direction = ReaderService.useGetThemeDirection();
+
+    const openNextChapter = ReaderService.useNavigateToChapter(nextChapter);
+    const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter);
+
+    useLayoutEffect(() => {
+        setIsMaximized(isVisible);
+
+        return () => setIsMaximized(false);
+    }, [isVisible]);
+
+    return (
+        <ReaderProgressBarDirectionWrapper>
+            <Stack
+                sx={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    px: 2,
+                    gap: 1,
+                }}
+            >
+                <IconButton
+                    onClick={openPreviousChapter}
+                    disabled={!previousChapter}
+                    sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85) }}
+                >
+                    {getOptionForDirection(<SkipPreviousIcon />, <SkipNextIcon />, direction)}
+                </IconButton>
+                <ReaderProgressBar
+                    progressBarPosition={ProgressBarPosition.BOTTOM}
+                    {...pagesState}
+                    createProgressBarSlot={({ name }) => (
+                        <ReaderProgressBarSlot
+                            pageName={name}
+                            progressBarPosition={ProgressBarPosition.BOTTOM}
+                            slotProps={{
+                                box: {
+                                    sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'end',
+                                        position: 'relative',
+                                        backgroundColor: 'background.default',
+                                    },
+                                },
+                            }}
+                        >
+                            <Box
+                                sx={{
+                                    position: 'absolute',
+                                    top: 'calc(50% - 2px)',
+                                    right: '2px',
+                                    width: '2px',
+                                    height: '2px',
+                                    borderRadius: 100,
+                                    backgroundColor: 'background.paper',
+                                    zIndex: 1,
+                                }}
+                            />
+                        </ReaderProgressBarSlot>
+                    )}
+                    slotProps={{
+                        container: {
+                            sx: {
+                                flexGrow: 1,
+                                position: 'relative',
+                                display: 'flex',
+                                justifyItems: 'center',
+                                alignItems: 'stretch',
+                                backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
+                                borderRadius: 100,
+                            },
+                        },
+                        progressBarRoot: {
+                            sx: {
+                                flexGrow: 1,
+                                alignItems: 'stretch',
+                                gap: 0,
+                            },
+                        },
+                        progressBarSlotsActionArea: {
+                            sx: {
+                                height: '100%',
+                                alignItems: 'center',
+                                py: 2,
+                                cursor: 'pointer',
+                            },
+                        },
+
+                        progressBarSlotsContainer: {
+                            sx: {
+                                borderRadius: 100,
+                            },
+                        },
+
+                        progressBarSlot: {
+                            sx: {
+                                height: '20px',
+                            },
+                        },
+                        progressBarReadPages: {
+                            sx: {
+                                height: '20px',
+                                backgroundColor: 'primary.main',
+                                borderRadius: '400px 0 0 400px',
+                                width: `calc(${(Math.max(0, getPage(currentPageIndex, pages).pagesIndex) / pages.length) * 100}% + 100% / ${pages.length})`,
+                            },
+                        },
+                        progressBarCurrentPageSlot: {
+                            sx: {
+                                display: 'flex',
+                                justifyContent: 'end',
+                                alignItems: 'center',
+                                zIndex: 1,
+                                pointer: 'default',
+                            },
+                        },
+                        progressBarPageTexts: {
+                            base: { px: 1 },
+                        },
+                    }}
+                    slots={{
+                        progressBarCurrentPage: (
+                            <Box
+                                sx={{
+                                    minWidth: '5px',
+                                    height: '75%',
+                                    backgroundColor: 'primary.main',
+                                    borderRadius: 100,
+                                }}
+                            />
+                        ),
+                    }}
+                />
+                <IconButton
+                    onClick={openNextChapter}
+                    disabled={!nextChapter}
+                    sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85) }}
+                >
+                    {getOptionForDirection(<SkipNextIcon />, <SkipPreviousIcon />, direction)}
+                </IconButton>
+            </Stack>
+        </ReaderProgressBarDirectionWrapper>
+    );
+};