From 052625a013298cc923a975798a7ecc8f120e6f94 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Fri, 27 Dec 2024 17:01:34 +0100 Subject: [PATCH] Adjust "MobileReaderProgressBar" styling In case the current page is the first one, there will be now no visible progress shown anymore. The progress slider will now be exactly at the start of the progress bar. --- .../ReaderProgressBarCurrentPageSlot.tsx | 8 +- .../mobile/ReaderProgressBarSlotMobile.tsx | 75 ++++++++++++++----- .../variants/MobileReaderProgressBar.tsx | 54 ++++++++----- 3 files changed, 94 insertions(+), 43 deletions(-) diff --git a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx index f2124039..86578a3a 100644 --- a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx +++ b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx @@ -37,14 +37,14 @@ export const ReaderProgressBarCurrentPageSlot = ({ position: 'absolute', cursor: isDragging ? 'grabbing' : 'grab', ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isHorizontal, { - left: `${(Math.max(0, currentPagesIndex) / pagesLength) * 100}%`, - width: `calc(100% / ${pagesLength})`, + left: `${(Math.max(0, currentPagesIndex - 1) / (pagesLength - 1)) * 100}%`, + width: `calc(100% / ${pagesLength - 1})`, height: '100%', }), ...applyStyles(getProgressBarPositionInfo(progressBarPosition).isVertical, { - top: `${(Math.max(0, currentPagesIndex) / pagesLength) * 100}%`, + top: `${(Math.max(0, currentPagesIndex - 1) / pagesLength - 1) * 100}%`, width: '100%', - height: `calc(100% / ${pagesLength})`, + height: `calc(100% / ${pagesLength - 1})`, }), ...boxProps?.sx, }} diff --git a/src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx b/src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx index 18076f24..346dc717 100644 --- a/src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx +++ b/src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx @@ -20,33 +20,68 @@ const SLOT_SX_PROP: NonNullable ( - -)); +const START_END_GAP = '4px'; +const POINT_SIZE = '3px'; +const ProgressBarPagePoint = memo( + ({ + isTrailingPage, + pagesIndex, + totalPages, + }: { + isTrailingPage: boolean; + pagesIndex: number; + totalPages: number; + }) => { + const isFirstPage = pagesIndex === 0; + const isLastPage = pagesIndex === totalPages - 1; + + const left = `${(pagesIndex / (totalPages - 1)) * 100}%`; + + return ( + + ); + }, +); export const ReaderProgressBarSlotMobile = memo( - ({ pageName, isTrailingPage }: { pageName: string; isTrailingPage: boolean }) => ( + ({ + pageName, + isTrailingPage, + pagesIndex, + totalPages, + }: { + pageName: string; + isTrailingPage: boolean; + pagesIndex: number; + totalPages: number; + }) => ( - + ), ); 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 e2a27443..6f3ec8fe 100644 --- a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx +++ b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx @@ -12,7 +12,7 @@ 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 { ComponentProps, memo, useCallback, useLayoutEffect } from 'react'; +import { ComponentProps, memo, useCallback, useLayoutEffect, useMemo } from 'react'; import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx'; import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx'; import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; @@ -27,6 +27,7 @@ import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.type import { ReaderProgressBarProps, TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts'; import { ReaderProgressBarSlotMobile } from '@/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx'; import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx'; +import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts'; const PROGRESS_BAR_SLOT_PROPS: ComponentProps['slotProps'] = { container: { @@ -59,6 +60,7 @@ const PROGRESS_BAR_SLOT_PROPS: ComponentProps['slotPro progressBarSlotsContainer: { sx: { borderRadius: 100, + backgroundColor: 'background.default', }, }, progressBarSlot: { @@ -69,7 +71,6 @@ const PROGRESS_BAR_SLOT_PROPS: ComponentProps['slotPro progressBarCurrentPageSlot: { sx: { display: 'flex', - justifyContent: 'end', alignItems: 'center', zIndex: 1, pointer: 'default', @@ -80,19 +81,6 @@ const PROGRESS_BAR_SLOT_PROPS: ComponentProps['slotPro }, }; -const PROGRESS_BAR_SLOTS: ComponentProps['slots'] = { - progressBarCurrentPage: ( - - ), -}; - const BaseMobileReaderProgressBar = ({ previousChapter, nextChapter, @@ -110,6 +98,29 @@ const BaseMobileReaderProgressBar = ({ const openNextChapter = ReaderService.useNavigateToChapter(nextChapter, ReaderResumeMode.START); const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter, ReaderResumeMode.END); + const currentPagesIndex = useMemo(() => getPage(currentPageIndex, pages).pagesIndex, [currentPageIndex, pages]); + + const progressBarCurrentPage = useMemo( + () => ({ + progressBarCurrentPage: ( + + ), + }), + [currentPagesIndex, pages.length], + ); + useLayoutEffect(() => { setIsMaximized(isVisible); @@ -135,8 +146,13 @@ const BaseMobileReaderProgressBar = ({ ( - + (page, pagesIndex, _2, _3, _4, _5, isTrailingPage, totalPages) => ( + ), [], )} @@ -147,11 +163,11 @@ const BaseMobileReaderProgressBar = ({ 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})`, + width: `${(Math.max(0, getPage(currentPageIndex, pages).pagesIndex) / (pages.length - 1)) * 100}%`, }, }, }} - slots={PROGRESS_BAR_SLOTS} + slots={progressBarCurrentPage} />