From 8594a7b1781c27d88d6a1889dd303c422d945e45 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Tue, 31 Dec 2024 04:34:46 +0100
Subject: [PATCH] Increase reserved "current page" text for double pager

For the double pager the current page text needs more reserved space since two pages are displayed at once which changes the current page text to "<page1>-<page2>" instead of just "<page1>"
---
 .../overlay/progress-bar/ReaderProgressBar.tsx  | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx
index 158fa53d..a17c0719 100644
--- a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx
+++ b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx
@@ -7,7 +7,7 @@
  */
 
 import { BoxProps } from '@mui/material/Box';
-import { memo, ReactNode, useCallback, useMemo, useRef, ComponentProps, useState } from 'react';
+import { ComponentProps, memo, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { TypographyProps } from '@mui/material/Typography';
 import { StackProps } from '@mui/material/Stack';
@@ -33,6 +33,7 @@ import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderPro
 import { ReaderProgressBarSlotWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlotWrapper.tsx';
 import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
+import { IReaderSettings, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
 
 const BaseReaderProgressBar = ({
     totalPages,
@@ -43,12 +44,14 @@ const BaseReaderProgressBar = ({
     slots,
     createProgressBarSlot,
     progressBarPosition,
+    readingMode,
     isDragging,
     setIsDragging,
     openPage,
     direction,
     fullSegmentClicks,
 }: ReaderProgressBarProps &
+    Pick<IReaderSettings, 'readingMode'> &
     Pick<TReaderProgressBarContext, 'isDragging' | 'setIsDragging'> &
     Pick<ComponentProps<typeof ReaderProgressBarSlotWrapper>, 'createProgressBarSlot'> & {
         slotProps?: {
@@ -87,8 +90,15 @@ const BaseReaderProgressBar = ({
 
             const { paddingLeft, paddingRight } = getComputedStyle(element);
 
-            setTotalPagesTextWidth(element.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight));
-        }, []),
+            const PAGE_NAME_SEPARATOR_LENGTH = 6; // <primaryPage>-<secondaryPage>
+            const widthOfTotalPageText = element.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
+            const newWidth =
+                readingMode === ReadingMode.DOUBLE_PAGE
+                    ? widthOfTotalPageText * 2 + PAGE_NAME_SEPARATOR_LENGTH
+                    : widthOfTotalPageText;
+
+            setTotalPagesTextWidth(newWidth);
+        }, [readingMode]),
     );
 
     const currentPagesIndex = useMemo(() => getPage(currentPageIndex, pages).pagesIndex, [currentPageIndex, pages]);
@@ -254,5 +264,6 @@ export const ReaderProgressBar = withPropsFrom(
         'totalPages',
         'currentPageIndex',
         'progressBarPosition',
+        'readingMode',
     ],
 );