From 294a6f45a428827ca6b75b4fdc83b435fb8685d4 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sat, 21 Dec 2024 16:01:42 +0100
Subject: [PATCH] Extract "ReaderProgressBarSlot" from
 "StandardReaderProgressBar"

---
 .../desktop/ReaderProgressBarSlotDesktop.tsx  | 116 ++++++++++++++++++
 .../variants/StandardReaderProgressBar.tsx    |  91 +++-----------
 2 files changed, 134 insertions(+), 73 deletions(-)
 create mode 100644 src/modules/reader/components/overlay/progress-bar/desktop/ReaderProgressBarSlotDesktop.tsx

diff --git a/src/modules/reader/components/overlay/progress-bar/desktop/ReaderProgressBarSlotDesktop.tsx b/src/modules/reader/components/overlay/progress-bar/desktop/ReaderProgressBarSlotDesktop.tsx
new file mode 100644
index 00000000..bad88fa5
--- /dev/null
+++ b/src/modules/reader/components/overlay/progress-bar/desktop/ReaderProgressBarSlotDesktop.tsx
@@ -0,0 +1,116 @@
+/*
+ * 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 { alpha, darken, lighten, useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { memo } from 'react';
+import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
+import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx';
+import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
+import { getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
+
+export const ReaderProgressBarSlotDesktop = memo(
+    ({
+        pageName,
+        pageUrl,
+        primaryPageLoadState,
+        secondaryPageLoadState,
+        isHorizontal,
+        isVertical,
+        progressBarPosition,
+        isCurrentPage,
+        isFirstPage,
+        isLastPage,
+        isLeadingPage,
+        isDragging,
+    }: Pick<IReaderSettings, 'progressBarPosition'> &
+        Pick<ReturnType<typeof getProgressBarPositionInfo>, 'isHorizontal' | 'isVertical'> & {
+            pageName: string;
+            pageUrl: string;
+            primaryPageLoadState: boolean;
+            secondaryPageLoadState?: boolean;
+            isCurrentPage: boolean;
+            isFirstPage: boolean;
+            isLastPage: boolean;
+            isLeadingPage: boolean;
+            isDragging: boolean;
+        }) => {
+        const theme = useTheme();
+
+        return (
+            <ReaderProgressBarSlot
+                key={pageUrl}
+                pageName={pageName}
+                progressBarPosition={progressBarPosition}
+                slotProps={{
+                    box: {
+                        sx: {
+                            cursor: 'pointer',
+                            backgroundColor: darken(theme.palette.background.paper, 0.2),
+                            ...applyStyles(isHorizontal, {
+                                borderLeftWidth: 2,
+                                borderLeftColor: 'background.paper',
+                                borderLeftStyle: 'solid',
+                            }),
+                            ...applyStyles(isVertical, {
+                                borderTopWidth: 2,
+                                borderTopColor: 'background.paper',
+                                borderTopStyle: 'solid',
+                            }),
+                            ...theme.applyStyles('dark', {
+                                backgroundColor: lighten(theme.palette.background.paper, 0.1),
+                            }),
+                            ...applyStyles(
+                                primaryPageLoadState && (secondaryPageLoadState == null || secondaryPageLoadState),
+                                {
+                                    backgroundColor: darken(theme.palette.background.paper, 0.35),
+                                    ...theme.applyStyles('dark', {
+                                        backgroundColor: lighten(theme.palette.background.paper, 0.25),
+                                    }),
+                                },
+                            ),
+                            borderLeftWidth: isFirstPage ? 0 : undefined,
+                            borderRightWidth: isLastPage ? 0 : undefined,
+                        },
+                    },
+                    tooltip: {
+                        slotProps: isCurrentPage
+                            ? {
+                                  tooltip: {
+                                      sx: {
+                                          backgroundColor: 'primary.main',
+                                          color: 'primary.contrastText',
+                                      },
+                                  },
+                              }
+                            : undefined,
+                    },
+                }}
+            >
+                <Box
+                    sx={{
+                        width: '100%',
+                        height: '100%',
+                        ...applyStyles(isLeadingPage, {
+                            backgroundColor: alpha(theme.palette.primary.main, 0.5),
+                        }),
+                        ...applyStyles(isCurrentPage, {
+                            cursor: isDragging ? 'grabbing' : 'grab',
+                            pointer: 'grabbing',
+                            borderRadius: 2,
+                            backgroundColor: 'primary.dark',
+                            ...theme.applyStyles('dark', {
+                                backgroundColor: 'primary.light',
+                            }),
+                        }),
+                    }}
+                />
+            </ReaderProgressBarSlot>
+        );
+    },
+);
diff --git a/src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx
index 8941af7b..c8a0f8cb 100644
--- a/src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx
@@ -6,11 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { alpha, darken, lighten, useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
 import { memo } 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 { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { IReaderSettings, ProgressBarType, TReaderScrollbarContext } from '@/modules/reader/types/Reader.types.ts';
@@ -23,6 +21,7 @@ import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
 import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
+import { ReaderProgressBarSlotDesktop } from '@/modules/reader/components/overlay/progress-bar/desktop/ReaderProgressBarSlotDesktop.tsx';
 
 const BaseStandardReaderProgressBar = ({
     readerNavBarWidth,
@@ -63,77 +62,23 @@ const BaseStandardReaderProgressBar = ({
             <ReaderProgressBar
                 {...pagesState}
                 progressBarPosition={progressBarPosition}
-                createProgressBarSlot={({ name, primary, secondary }, pageLoadStates, pagesIndex) => (
-                    <ReaderProgressBarSlot
-                        key={primary.url}
-                        pageName={name}
+                createProgressBarSlot={(page, pageLoadStates, pagesIndex) => (
+                    <ReaderProgressBarSlotDesktop
+                        pageName={page.name}
+                        pageUrl={page.primary.url}
+                        primaryPageLoadState={pageLoadStates[page.primary.index].loaded}
+                        secondaryPageLoadState={
+                            page.secondary ? pageLoadStates[page.secondary.index].loaded : undefined
+                        }
+                        isHorizontal={isHorizontal}
+                        isVertical={isVertical}
                         progressBarPosition={progressBarPosition}
-                        slotProps={{
-                            box: {
-                                sx: {
-                                    cursor: 'pointer',
-                                    backgroundColor: darken(theme.palette.background.paper, 0.2),
-                                    ...applyStyles(isHorizontal, {
-                                        borderLeftWidth: 2,
-                                        borderLeftColor: 'background.paper',
-                                        borderLeftStyle: 'solid',
-                                    }),
-                                    ...applyStyles(isVertical, {
-                                        borderTopWidth: 2,
-                                        borderTopColor: 'background.paper',
-                                        borderTopStyle: 'solid',
-                                    }),
-                                    ...theme.applyStyles('dark', {
-                                        backgroundColor: lighten(theme.palette.background.paper, 0.1),
-                                    }),
-                                    ...applyStyles(
-                                        pageLoadStates[primary.index]?.loaded &&
-                                            (!secondary || pageLoadStates[secondary.index]?.loaded),
-                                        {
-                                            backgroundColor: darken(theme.palette.background.paper, 0.35),
-                                            ...theme.applyStyles('dark', {
-                                                backgroundColor: lighten(theme.palette.background.paper, 0.25),
-                                            }),
-                                        },
-                                    ),
-                                    borderLeftWidth: pagesIndex === 0 ? 0 : undefined,
-                                    borderRightWidth: pagesIndex === pages.length - 1 ? 0 : undefined,
-                                },
-                            },
-                            tooltip: {
-                                slotProps:
-                                    pagesIndex === currentPagesIndex
-                                        ? {
-                                              tooltip: {
-                                                  sx: {
-                                                      backgroundColor: 'primary.main',
-                                                      color: 'primary.contrastText',
-                                                  },
-                                              },
-                                          }
-                                        : undefined,
-                            },
-                        }}
-                    >
-                        <Box
-                            sx={{
-                                width: '100%',
-                                height: '100%',
-                                ...applyStyles(pagesIndex < currentPagesIndex, {
-                                    backgroundColor: alpha(theme.palette.primary.main, 0.5),
-                                }),
-                                ...applyStyles(pagesIndex === currentPagesIndex, {
-                                    cursor: isDragging ? 'grabbing' : 'grab',
-                                    pointer: 'grabbing',
-                                    borderRadius: 2,
-                                    backgroundColor: 'primary.dark',
-                                    ...theme.applyStyles('dark', {
-                                        backgroundColor: 'primary.light',
-                                    }),
-                                }),
-                            }}
-                        />
-                    </ReaderProgressBarSlot>
+                        isCurrentPage={currentPagesIndex === pagesIndex}
+                        isFirstPage={pagesIndex === 0}
+                        isLastPage={pagesIndex === pages.length - 1}
+                        isLeadingPage={pagesIndex < currentPagesIndex}
+                        isDragging={isDragging}
+                    />
                 )}
                 slotProps={{
                     container: {