Reader progress bars

src/modules/reader/components/overlay/progress-bar/ProgressBarHighlightReadPages.tsx

@@ -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 Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { shouldForwardProp } from '@/modules/core/utils/ShouldForwardProp.ts';
+import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
+import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
+import { getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
+
+type ProgressBarHighlightReadPagesProps = Pick<IReaderSettings, 'progressBarPosition'> & {
+    currentPagesIndex: number;
+    pagesLength: number;
+};
+export const ProgressBarHighlightReadPages = styled(Box, {
+    shouldForwardProp: shouldForwardProp<ProgressBarHighlightReadPagesProps>([
+        'currentPagesIndex',
+        'pagesLength',
+        'progressBarPosition',
+    ]),
+})<ProgressBarHighlightReadPagesProps>(({ currentPagesIndex, pagesLength, progressBarPosition }) => ({
+    position: 'absolute',
+    pointerEvents: 'none',
+    ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isHorizontal, {
+        left: 0,
+        width: `${((currentPagesIndex + 1) / pagesLength) * 100}%`,
+        height: '100%',
+    }),
+    ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isVertical, {
+        top: 0,
+        width: '100%',
+        height: `${((currentPagesIndex + 1) / pagesLength) * 100}%`,
+    }),
+}));