Move "ReaderTransitionPage" to "ReaderViewer"

src/modules/reader/components/viewer/ReaderViewer.tsx

@@ -25,6 +25,8 @@ import {
     IReaderSettings,
     PageInViewportType,
     ReaderPageSpreadState,
+    ReaderTransitionPageMode,
+    ReadingDirection,
     ReadingMode,
     TReaderScrollbarContext,
 } from '@/modules/reader/types/Reader.types.ts';
@@ -56,6 +58,7 @@ import { useReaderHideCursorOnInactivity } from '@/modules/reader/hooks/useReade
 import { useReaderScrollToStartOnPageChange } from '@/modules/reader/hooks/useReaderScrollToStartOnPageChange.ts';
 import { useReaderHandlePageSelection } from '@/modules/reader/hooks/useReaderHandlePageSelection.ts';
 import { useReaderConvertPagesForReadingMode } from '@/modules/reader/hooks/useReaderConvertPagesForReadingMode.ts';
+import { ReaderTransitionPage } from '@/modules/reader/components/viewer/ReaderTransitionPage.tsx';
 
 const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
     [ReadingMode.SINGLE_PAGE]: PageInViewportType.X,
@@ -170,6 +173,7 @@ const BaseReaderViewer = forwardRef(
 
         const Pager = useMemo(() => getPagerForReadingMode(readingMode), [readingMode]);
         const inViewportType = READING_MODE_TO_IN_VIEWPORT_TYPE[readingMode];
+        const isLtrReadingDirection = readingDirection === ReadingDirection.LTR;
 
         const onLoad = useMemo(
             () =>
@@ -248,11 +252,20 @@ const BaseReaderViewer = forwardRef(
                     width: '100%',
                     height: '100%',
                     overflow: 'auto',
+                    flexWrap: 'nowrap',
                     ...applyStyles(
                         isContinuousVerticalReadingMode(readingMode) &&
                             shouldApplyReaderWidth(readerWidth, pageScaleMode),
                         { alignItems: 'center' },
                     ),
+                    ...applyStyles(readingMode === ReadingMode.CONTINUOUS_HORIZONTAL, {
+                        ...applyStyles(themeDirection === 'ltr', {
+                            flexDirection: isLtrReadingDirection ? 'row' : 'row-reverse',
+                        }),
+                        ...applyStyles(themeDirection === 'rtl', {
+                            flexDirection: isLtrReadingDirection ? 'row-reverse' : 'row',
+                        }),
+                    }),
                 }}
                 onClick={(e) => !isDragging && handleClick(e)}
                 onScroll={() =>
@@ -265,6 +278,7 @@ const BaseReaderViewer = forwardRef(
                     )
                 }
             >
+                <ReaderTransitionPage type={ReaderTransitionPageMode.PREVIOUS} />
                 <Pager
                     totalPages={totalPages}
                     currentPageIndex={currentPageIndex}
@@ -276,6 +290,7 @@ const BaseReaderViewer = forwardRef(
                     onLoad={onLoad}
                     onError={onError}
                 />
+                <ReaderTransitionPage type={ReaderTransitionPageMode.NEXT} />
             </Stack>
         );
     },

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

@@ -12,7 +12,6 @@ import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { getPageIndexesToLoad } from '@/modules/reader/utils/ReaderPager.utils.tsx';
 import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { IReaderSettings, ReaderPagerProps, ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
-import { ReaderTransitionPage } from '@/modules/reader/components/viewer/ReaderTransitionPage.tsx';
 import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
 const BaseBasePager = ({
@@ -62,9 +61,11 @@ const BaseBasePager = ({
     return (
         <Box
             {...slots?.boxProps}
-            sx={[...(Array.isArray(slots?.boxProps?.sx) ? (slots?.boxProps?.sx ?? []) : [slots?.boxProps?.sx])]}
+            sx={[
+                { width: 'fit-content', height: 'fit-content' },
+                ...(Array.isArray(slots?.boxProps?.sx) ? (slots?.boxProps?.sx ?? []) : [slots?.boxProps?.sx]),
+            ]}
         >
-            <ReaderTransitionPage type={ReaderTransitionPageMode.PREVIOUS} />
             {pages.map((page, pagesIndex) =>
                 createPage(
                     page,
@@ -74,7 +75,6 @@ const BaseBasePager = ({
                     setRef,
                 ),
             )}
-            <ReaderTransitionPage type={ReaderTransitionPageMode.NEXT} />
         </Box>
     );
 };

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

@@ -49,6 +49,7 @@ const BaseReaderVerticalPager = ({
                     setRef,
                 )
             }
+            slots={{ boxProps: { sx: { margin: 'auto' } } }}
         />
     );
 };