Reader transition page

src/modules/reader/components/viewer/pager/BasePager.tsx

@@ -13,11 +13,13 @@ import { getImageWidthStyling, getPageIndexesToLoad } from '@/modules/reader/uti
 import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { isContinuousReadingMode, isReaderWidthEditable } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
-import { ReaderPagerProps } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderPagerProps, ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderTransitionPage } from '@/modules/reader/components/viewer/ReaderTransitionPage.tsx';
 
 export const BasePager = ({
     currentPageIndex,
     pages,
+    transitionPageMode,
     imageRefs,
     createPage,
     slots,
@@ -26,6 +28,7 @@ export const BasePager = ({
         page: ReaderStatePages['pages'][number],
         pagesIndex: number,
         shouldLoad: boolean,
+        shouldDisplay: boolean,
         setRef: (element: HTMLElement | null) => void,
     ) => ReactNode;
     slots?: { stackProps?: StackProps };
@@ -64,12 +67,30 @@ export const BasePager = ({
                 }),
             ]}
         >
+            <ReaderTransitionPage
+                type={ReaderTransitionPageMode.PREVIOUS}
+                mode={transitionPageMode}
+                readingMode={readingMode.value}
+                pageScaleMode={pageScaleMode.value}
+            />
             {pages.map((page, pagesIndex) =>
-                createPage(page, pagesIndex, pagesIndexesToRender.includes(pagesIndex), (element) => {
-                    // eslint-disable-next-line no-param-reassign
-                    imageRefs.current[pagesIndex] = element;
-                }),
+                createPage(
+                    page,
+                    pagesIndex,
+                    pagesIndexesToRender.includes(pagesIndex),
+                    [ReaderTransitionPageMode.NONE, ReaderTransitionPageMode.BOTH].includes(transitionPageMode),
+                    (element) => {
+                        // eslint-disable-next-line no-param-reassign
+                        imageRefs.current[pagesIndex] = element;
+                    },
+                ),
             )}
+            <ReaderTransitionPage
+                type={ReaderTransitionPageMode.NEXT}
+                mode={transitionPageMode}
+                readingMode={readingMode.value}
+                pageScaleMode={pageScaleMode.value}
+            />
         </Stack>
     );
 };

src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx

@@ -49,7 +49,7 @@ export const ReaderDoublePagedPager = ({ onLoad, ...props }: ReaderPagerProps) =
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad) => {
+            createPage={(page, pagesIndex, shouldLoad, shouldDisplay) => {
                 const { primary, secondary } = page;
 
                 const currentSecondaryPageIndex = currentPage.secondary?.index ?? currentPage.primary.index;
@@ -64,7 +64,7 @@ export const ReaderDoublePagedPager = ({ onLoad, ...props }: ReaderPagerProps) =
                             page,
                             () => onLoad?.(pagesIndex),
                             shouldLoad,
-                            isPrimaryPage,
+                            shouldDisplay && isPrimaryPage,
                             currentPage.primary.index,
                             totalPages,
                             hasSecondaryPage
@@ -77,7 +77,7 @@ export const ReaderDoublePagedPager = ({ onLoad, ...props }: ReaderPagerProps) =
                                 { ...page, primary: { ...page.secondary! } },
                                 () => onLoad?.(pagesIndex, false),
                                 shouldLoad,
-                                isSecondaryPage,
+                                shouldDisplay && isSecondaryPage,
                                 currentSecondaryPageIndex,
                                 totalPages,
                                 getPagePosition('second', themeDirection, readingDirection.value),

src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx

@@ -24,7 +24,7 @@ export const ReaderHorizontalPager = ({ onLoad, ...props }: ReaderPagerProps) =>
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad, setRef) =>
+            createPage={(page, pagesIndex, shouldLoad, _, setRef) =>
                 createReaderPage(
                     page,
                     () => onLoad?.(pagesIndex),

src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx

@@ -16,12 +16,12 @@ export const ReaderPagedPager = ({ onLoad, ...props }: ReaderPagerProps) => {
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad) =>
+            createPage={(page, pagesIndex, shouldLoad, shouldDisplay) =>
                 createReaderPage(
                     page,
                     () => onLoad?.(pagesIndex),
                     shouldLoad,
-                    currentPageIndex === page.primary.index,
+                    shouldDisplay && currentPageIndex === page.primary.index,
                     currentPageIndex,
                     totalPages,
                 )

src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx

@@ -19,7 +19,7 @@ export const ReaderVerticalPager = ({ onLoad, ...props }: ReaderPagerProps) => {
     return (
         <BasePager
             {...props}
-            createPage={(page, pagesIndex, shouldLoad, setRef) =>
+            createPage={(page, pagesIndex, shouldLoad, _, setRef) =>
                 createReaderPage(
                     page,
                     () => onLoad?.(pagesIndex),