From 635f294184f459a619b681bc4fb064c18555303a Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Thu, 26 Dec 2024 01:09:33 +0100
Subject: [PATCH] Extract "ReaderProgressBarSlot" from
 "MobileReaderProgressBar"

---
 .../mobile/ReaderProgressBarSlotMobile.tsx    | 53 +++++++++++++++++++
 .../variants/MobileReaderProgressBar.tsx      | 50 ++++-------------
 2 files changed, 63 insertions(+), 40 deletions(-)
 create mode 100644 src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx

diff --git a/src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx b/src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx
new file mode 100644
index 00000000..14df79ea
--- /dev/null
+++ b/src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx
@@ -0,0 +1,53 @@
+/*
+ * 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 Box from '@mui/material/Box';
+import { ProgressBarPosition } from '@/modules/reader/types/Reader.types.ts';
+import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
+import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot';
+
+export const ReaderProgressBarSlotMobile = ({
+    pageName,
+    isTrailingPage,
+}: {
+    pageName: string;
+    isTrailingPage: boolean;
+}) => (
+    <ReaderProgressBarSlot
+        pageName={pageName}
+        progressBarPosition={ProgressBarPosition.BOTTOM}
+        slotProps={{
+            box: {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'end',
+                    position: 'relative',
+                    backgroundColor: 'background.default',
+                },
+            },
+        }}
+    >
+        <Box
+            sx={{
+                position: 'absolute',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                right: '2px',
+                width: '2px',
+                height: '2px',
+                borderRadius: 100,
+                backgroundColor: 'background.paper',
+                ...applyStyles(isTrailingPage, {
+                    backgroundColor: 'primary.main',
+                }),
+                zIndex: 1,
+            }}
+        />
+    </ReaderProgressBarSlot>
+);
diff --git a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
index 7996b2a8..b566dd56 100644
--- a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
@@ -12,9 +12,8 @@ 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 { memo, useCallback, useLayoutEffect } from 'react';
+import { ComponentProps, memo, useCallback, 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';
@@ -27,7 +26,7 @@ import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlay
 import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.types.ts';
 import { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
-import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
+import { ReaderProgressBarSlotMobile } from '@/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx';
 
 const BaseMobileReaderProgressBar = ({
     previousChapter,
@@ -45,6 +44,13 @@ const BaseMobileReaderProgressBar = ({
     const openNextChapter = ReaderService.useNavigateToChapter(nextChapter, ReaderResumeMode.START);
     const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter, ReaderResumeMode.END);
 
+    const createProgressBarSlot: ComponentProps<typeof ReaderProgressBar>['createProgressBarSlot'] = useCallback(
+        (page, _1, _2, _3, _4, _5, isTrailingPage) => (
+            <ReaderProgressBarSlotMobile pageName={page.name} isTrailingPage={isTrailingPage} />
+        ),
+        [],
+    );
+
     useLayoutEffect(() => {
         setIsMaximized(isVisible);
 
@@ -75,43 +81,7 @@ const BaseMobileReaderProgressBar = ({
                 <ReaderProgressBar
                     progressBarPosition={ProgressBarPosition.BOTTOM}
                     {...pagesState}
-                    createProgressBarSlot={useCallback(
-                        (page, pagesIndex, _, __, ___, ____, isTrailingPage) => (
-                            <ReaderProgressBarSlot
-                                pageName={page.name}
-                                progressBarPosition={ProgressBarPosition.BOTTOM}
-                                slotProps={{
-                                    box: {
-                                        sx: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'end',
-                                            position: 'relative',
-                                            backgroundColor: 'background.default',
-                                        },
-                                    },
-                                }}
-                            >
-                                <Box
-                                    sx={{
-                                        position: 'absolute',
-                                        top: '50%',
-                                        transform: 'translateY(-50%)',
-                                        right: '2px',
-                                        width: '2px',
-                                        height: '2px',
-                                        borderRadius: 100,
-                                        backgroundColor: 'background.paper',
-                                        ...applyStyles(isTrailingPage, {
-                                            backgroundColor: 'primary.main',
-                                        }),
-                                        zIndex: 1,
-                                    }}
-                                />
-                            </ReaderProgressBarSlot>
-                        ),
-                        [],
-                    )}
+                    createProgressBarSlot={createProgressBarSlot}
                     slotProps={{
                         container: {
                             sx: {