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>
     );
 };