refactor

src/components/reader/DoublePage.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import makeStyles from '@mui/styles/makeStyles';
+import React from 'react';
+
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    image: {
+        display: 'block',
+        marginBottom: 0,
+        width: 'auto',
+        minHeight: '99vh',
+        height: 'auto',
+        maxHeight: '99vh',
+        objectFit: 'contain',
+    },
+    page: {
+        display: 'flex',
+        flexDirection: settings.readerType === 'DoubleLTR' ? 'row' : 'row-reverse',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: 'auto',
+        height: 'auto',
+        overflowX: 'scroll',
+    },
+});
+
+interface IProps {
+    index: number
+    image1src: string
+    image2src: string
+    settings: IReaderSettings
+}
+
+const DoublePage = React.forwardRef((props: IProps, ref: any) => {
+    const {
+        image1src, image2src, index, settings,
+    } = props;
+
+    const classes = useStyles(settings)();
+
+    return (
+        <div ref={ref} className={classes.page}>
+            <img
+                className={classes.image}
+                src={image1src}
+                alt={`Page #${index}`}
+            />
+            <img
+                className={classes.image}
+                src={image2src}
+                alt={`Page #${index + 1}`}
+            />
+        </div>
+    );
+});
+
+export default DoublePage;

src/components/reader/Page.tsx

@@ -0,0 +1,137 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import makeStyles from '@mui/styles/makeStyles';
+import React, { useEffect, useRef } from 'react';
+import SpinnerImage from 'components/util/SpinnerImage';
+import useLocalStorage from 'util/useLocalStorage';
+
+function imageStyle(settings: IReaderSettings): any {
+    const [dimensions, setDimensions] = React.useState({
+        height: window.innerHeight,
+        width: window.innerWidth,
+    });
+    React.useEffect(() => {
+        function handleResize() {
+            setDimensions({
+                height: window.innerHeight,
+                width: window.innerWidth,
+            });
+        }
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    if (settings.readerType === 'DoubleLTR'
+    || settings.readerType === 'DoubleRTL'
+    || settings.readerType === 'ContinuesHorizontalLTR'
+    || settings.readerType === 'ContinuesHorizontalRTL') {
+        return {
+            display: 'block',
+            marginLeft: '7px',
+            marginRight: '7px',
+            width: 'auto',
+            minHeight: '99vh',
+            height: 'auto',
+            maxHeight: '99vh',
+            objectFit: 'contain',
+            pointerEvents: 'none',
+        };
+    }
+
+    return {
+        display: 'block',
+        marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
+        minWidth: '50vw',
+        width: dimensions.width < dimensions.height ? '100vw' : '100%',
+        maxWidth: '100%',
+    };
+}
+
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    loading: {
+        margin: '100px auto',
+        height: '100vh',
+        width: '100vw',
+    },
+    loadingImage: {
+        height: '100vh',
+        width: '70vw',
+        padding: '50px calc(50% - 20px)',
+        backgroundColor: '#525252',
+        marginBottom: 10,
+    },
+    image: imageStyle(settings),
+});
+
+interface IProps {
+    src: string
+    index: number
+    onImageLoad: () => void
+    setCurPage: React.Dispatch<React.SetStateAction<number>>
+    settings: IReaderSettings
+}
+
+const Page = React.forwardRef((props: IProps, ref: any) => {
+    const {
+        src, index, onImageLoad, setCurPage, settings,
+    } = props;
+
+    const [useCache] = useLocalStorage<boolean>('useCache', true);
+
+    const classes = useStyles(settings)();
+    const imgRef = useRef<HTMLImageElement>(null);
+
+    const handleVerticalScroll = () => {
+        if (imgRef.current) {
+            const rect = imgRef.current.getBoundingClientRect();
+            if (rect.y < 0 && rect.y + rect.height > 0) {
+                setCurPage(index);
+            }
+        }
+    };
+
+    const handleHorizontalScroll = () => {
+        if (imgRef.current) {
+            const rect = imgRef.current.getBoundingClientRect();
+            if (rect.left <= window.innerWidth / 2 && rect.right > window.innerWidth / 2) {
+                setCurPage(index);
+            }
+        }
+    };
+
+    useEffect(() => {
+        switch (settings.readerType) {
+            case 'Webtoon':
+            case 'ContinuesVertical':
+                window.addEventListener('scroll', handleVerticalScroll);
+                return () => window.removeEventListener('scroll', handleVerticalScroll);
+            case 'ContinuesHorizontalLTR':
+            case 'ContinuesHorizontalRTL':
+                window.addEventListener('scroll', handleHorizontalScroll);
+                return () => window.removeEventListener('scroll', handleHorizontalScroll);
+            default:
+                return () => {};
+        }
+    }, [handleVerticalScroll]);
+
+    return (
+        <div ref={ref} style={{ margin: 'auto' }}>
+            <SpinnerImage
+                src={`${src}?useCache=${useCache}`}
+                onImageLoad={onImageLoad}
+                alt={`Page #${index}`}
+                imgRef={imgRef}
+                spinnerClassName={`${classes.image} ${classes.loadingImage}`}
+                imgClassName={classes.image}
+            />
+        </div>
+    );
+});
+
+export default Page;

src/components/reader/PageNumber.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import makeStyles from '@mui/styles/makeStyles';
+import React from 'react';
+
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    pageNumber: {
+        display: settings.showPageNumber ? 'block' : 'none',
+        position: 'fixed',
+        bottom: '50px',
+        right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
+        padding: '2px',
+        textAlign: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        borderRadius: '10px',
+    },
+});
+
+interface IProps {
+    settings: IReaderSettings
+    curPage: number
+    pageCount: number
+}
+
+export default function PageNumber(props: IProps) {
+    const { settings, curPage, pageCount } = props;
+    const classes = useStyles(settings)();
+
+    return (
+        <div className={classes.pageNumber}>
+            {`${curPage + 1} / ${pageCount}`}
+        </div>
+    );
+}

src/components/reader/pager/DoublePagedPager.tsx

@@ -0,0 +1,212 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import makeStyles from '@mui/styles/makeStyles';
+import React, { useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import Page from '../Page';
+import DoublePage from '../DoublePage';
+
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    preload: {
+        display: 'none',
+    },
+    reader: {
+        display: 'flex',
+        flexDirection: (settings.readerType === 'DoubleLTR') ? 'row' : 'row-reverse',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: 'auto',
+        height: 'auto',
+        overflowX: 'scroll',
+    },
+});
+
+export default function DoublePagedPager(props: IReaderProps) {
+    const {
+        pages, settings, setCurPage, curPage, nextChapter, prevChapter,
+    } = props;
+
+    const classes = useStyles(settings)();
+
+    const selfRef = useRef<HTMLDivElement>(null);
+    const pagesRef = useRef<HTMLImageElement[]>([]);
+
+    const pagesDisplayed = useRef<number>(0);
+    const pageLoaded = useRef<boolean[]>(Array(pages.length).fill(false));
+
+    function setPagesToDisplay() {
+        pagesDisplayed.current = 0;
+        if (curPage < pages.length && pagesRef.current[curPage]) {
+            if (pageLoaded.current[curPage]) {
+                pagesDisplayed.current = 1;
+                const imgElem = pagesRef.current[curPage];
+                const aspectRatio = imgElem.height / imgElem.width;
+                if (aspectRatio < 1) {
+                    return;
+                }
+            }
+        }
+        if (curPage + 1 < pages.length && pagesRef.current[curPage + 1]) {
+            if (pageLoaded.current[curPage + 1]) {
+                const imgElem = pagesRef.current[curPage + 1];
+                const aspectRatio = imgElem.height / imgElem.width;
+                if (aspectRatio < 1) {
+                    return;
+                }
+                pagesDisplayed.current = 2;
+            }
+        }
+    }
+
+    function displayPages() {
+        if (pagesDisplayed.current === 2) {
+            ReactDOM.render(
+                <DoublePage
+                    key={curPage}
+                    index={curPage}
+                    image1src={pages[curPage].src}
+                    image2src={pages[curPage + 1].src}
+                    settings={settings}
+                />,
+                document.getElementById('display'),
+            );
+        } else {
+            ReactDOM.render(
+                <Page
+                    key={curPage}
+                    index={curPage}
+                    src={(pagesDisplayed.current === 1) ? pages[curPage].src : ''}
+                    onImageLoad={() => {}}
+                    setCurPage={setCurPage}
+                    settings={settings}
+                />,
+                document.getElementById('display'),
+            );
+        }
+    }
+
+    function pagesToGoBack() {
+        for (let i = 1; i <= 2; i++) {
+            if (curPage - i > 0 && pagesRef.current[curPage - i]) {
+                if (pageLoaded.current[curPage - i]) {
+                    const imgElem = pagesRef.current[curPage - i];
+                    const aspectRatio = imgElem.height / imgElem.width;
+                    if (aspectRatio < 1) {
+                        return 1;
+                    }
+                }
+            }
+        }
+        return 2;
+    }
+
+    function nextPage() {
+        if (curPage < pages.length - 1) {
+            const nextCurPage = curPage + pagesDisplayed.current;
+            setCurPage((nextCurPage >= pages.length) ? pages.length - 1 : nextCurPage);
+        } else if (settings.loadNextonEnding) {
+            nextChapter();
+        }
+    }
+
+    function prevPage() {
+        if (curPage > 0) {
+            const nextCurPage = curPage - pagesToGoBack();
+            setCurPage((nextCurPage < 0) ? 0 : nextCurPage);
+        } else {
+            prevChapter();
+        }
+    }
+
+    function goLeft() {
+        if (settings.readerType === 'DoubleLTR') {
+            prevPage();
+        } else {
+            nextPage();
+        }
+    }
+
+    function goRight() {
+        if (settings.readerType === 'DoubleLTR') {
+            nextPage();
+        } else {
+            prevPage();
+        }
+    }
+
+    function keyboardControl(e:KeyboardEvent) {
+        switch (e.code) {
+            case 'Space':
+                e.preventDefault();
+                nextPage();
+                break;
+            case 'ArrowRight':
+                goRight();
+                break;
+            case 'ArrowLeft':
+                goLeft();
+                break;
+            default:
+                break;
+        }
+    }
+
+    function clickControl(e:MouseEvent) {
+        if (e.clientX > window.innerWidth / 2) {
+            goRight();
+        } else {
+            goLeft();
+        }
+    }
+
+    function handleImageLoad(index: number) {
+        return () => {
+            pageLoaded.current[index] = true;
+        };
+    }
+
+    useEffect(() => {
+        const retryDisplay = setInterval(() => {
+            const isLastPage = (curPage === pages.length - 1);
+            if ((!isLastPage && pageLoaded.current[curPage] && pageLoaded.current[curPage + 1])
+                || pageLoaded.current[curPage]) {
+                setPagesToDisplay();
+                displayPages();
+                clearInterval(retryDisplay);
+            }
+        }, 50);
+
+        document.addEventListener('keydown', keyboardControl);
+        selfRef.current?.addEventListener('click', clickControl);
+
+        return () => {
+            clearInterval(retryDisplay);
+            document.removeEventListener('keydown', keyboardControl);
+            selfRef.current?.removeEventListener('click', clickControl);
+        };
+    }, [selfRef, curPage, settings.readerType]);
+
+    return (
+        <div ref={selfRef}>
+            <div id="preload" className={classes.preload}>
+                {
+                    pages.map((page) => (
+                        <img
+                            ref={(e:HTMLImageElement) => { pagesRef.current[page.index] = e; }}
+                            key={`${page.index}`}
+                            src={page.src}
+                            onLoad={handleImageLoad(page.index)}
+                            alt={`${page.index}`}
+                        />
+                    ))
+                }
+            </div>
+            <div id="display" className={classes.reader} />
+        </div>
+    );
+}

src/components/reader/pager/HorizontalPager.tsx

@@ -0,0 +1,147 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import makeStyles from '@mui/styles/makeStyles';
+import React, { useEffect, useRef } from 'react';
+import Page from '../Page';
+
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: (settings.readerType === 'ContinuesHorizontalLTR') ? 'row' : 'row-reverse',
+        justifyContent: (settings.readerType === 'ContinuesHorizontalLTR') ? 'flex-start' : 'flex-end',
+        margin: '0 auto',
+        width: 'auto',
+        height: 'auto',
+        overflowX: 'visible',
+        userSelect: 'none',
+    },
+});
+
+export default function HorizontalPager(props: IReaderProps) {
+    const {
+        pages, curPage, settings, setCurPage, prevChapter, nextChapter,
+    } = props;
+
+    const classes = useStyles(settings)();
+
+    const selfRef = useRef<HTMLDivElement>(null);
+    const pagesRef = useRef<HTMLDivElement[]>([]);
+
+    function nextPage() {
+        if (curPage < pages.length - 1) {
+            pagesRef.current[curPage + 1]?.scrollIntoView({ inline: 'center' });
+            setCurPage((page) => page + 1);
+        } else if (settings.loadNextonEnding) {
+            nextChapter();
+        }
+    }
+
+    function prevPage() {
+        if (curPage > 0) {
+            pagesRef.current[curPage - 1]?.scrollIntoView({ inline: 'center' });
+            setCurPage(curPage - 1);
+        } else if (curPage === 0) {
+            prevChapter();
+        }
+    }
+
+    function goLeft() {
+        if (settings.readerType === 'ContinuesHorizontalLTR') {
+            prevPage();
+        } else {
+            nextPage();
+        }
+    }
+
+    function goRight() {
+        if (settings.readerType === 'ContinuesHorizontalLTR') {
+            nextPage();
+        } else {
+            prevPage();
+        }
+    }
+
+    const mouseXPos = useRef<number>(0);
+
+    function dragScreen(e: MouseEvent) {
+        window.scrollBy(mouseXPos.current - e.pageX, 0);
+    }
+
+    function dragControl(e:MouseEvent) {
+        mouseXPos.current = e.pageX;
+        selfRef.current?.addEventListener('mousemove', dragScreen);
+    }
+
+    function removeDragControl() {
+        selfRef.current?.removeEventListener('mousemove', dragScreen);
+    }
+
+    function clickControl(e:MouseEvent) {
+        if (e.clientX >= window.innerWidth * 0.85) {
+            goRight();
+        } else if (e.clientX <= window.innerWidth * 0.15) {
+            goLeft();
+        }
+    }
+
+    const handleLoadNextonEnding = () => {
+        if (settings.readerType === 'ContinuesHorizontalLTR') {
+            if (window.scrollX + window.innerWidth >= document.body.scrollWidth) {
+                nextChapter();
+            }
+        } else if (settings.readerType === 'ContinuesHorizontalRTL') {
+            if (window.scrollX <= window.innerWidth) {
+                nextChapter();
+            }
+        }
+    };
+
+    useEffect(() => {
+        pagesRef.current[curPage]?.scrollIntoView({ inline: 'center' });
+    }, [settings.readerType]);
+
+    useEffect(() => {
+        selfRef.current?.addEventListener('mousedown', dragControl);
+        selfRef.current?.addEventListener('mouseup', removeDragControl);
+
+        return () => {
+            selfRef.current?.removeEventListener('mousedown', dragControl);
+            selfRef.current?.removeEventListener('mouseup', removeDragControl);
+        };
+    }, [selfRef]);
+
+    useEffect(() => {
+        if (settings.loadNextonEnding) {
+            document.addEventListener('scroll', handleLoadNextonEnding);
+        }
+        selfRef.current?.addEventListener('mousedown', clickControl);
+
+        return () => {
+            document.removeEventListener('scroll', handleLoadNextonEnding);
+            selfRef.current?.removeEventListener('mousedown', clickControl);
+        };
+    }, [selfRef, curPage]);
+
+    return (
+        <div ref={selfRef} className={classes.reader}>
+            {
+                pages.map((page) => (
+                    <Page
+                        key={page.index}
+                        index={page.index}
+                        src={page.src}
+                        onImageLoad={() => {}}
+                        setCurPage={setCurPage}
+                        settings={settings}
+                        ref={(e:HTMLDivElement) => { pagesRef.current[page.index] = e; }}
+                    />
+                ))
+            }
+        </div>
+    );
+}

src/components/reader/pager/PagedPager.tsx

@@ -0,0 +1,111 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import makeStyles from '@mui/styles/makeStyles';
+import React, { useEffect, useRef } from 'react';
+import Page from '../Page';
+
+const useStyles = makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: '100%',
+        height: '100vh',
+    },
+});
+
+export default function PagedReader(props: IReaderProps) {
+    const {
+        pages, settings, setCurPage, curPage, nextChapter, prevChapter,
+    } = props;
+
+    const classes = useStyles();
+
+    const selfRef = useRef<HTMLDivElement>(null);
+
+    function nextPage() {
+        if (curPage < pages.length - 1) {
+            setCurPage(curPage + 1);
+        } else if (settings.loadNextonEnding) {
+            nextChapter();
+        }
+    }
+
+    function prevPage() {
+        if (curPage > 0) {
+            setCurPage(curPage - 1);
+        } else {
+            prevChapter();
+        }
+    }
+
+    function goLeft() {
+        if (settings.readerType === 'SingleLTR') {
+            prevPage();
+        } else if (settings.readerType === 'SingleRTL') {
+            nextPage();
+        }
+    }
+
+    function goRight() {
+        if (settings.readerType === 'SingleLTR') {
+            nextPage();
+        } else if (settings.readerType === 'SingleRTL') {
+            prevPage();
+        }
+    }
+
+    function keyboardControl(e:KeyboardEvent) {
+        switch (e.code) {
+            case 'Space':
+                e.preventDefault();
+                nextPage();
+                break;
+            case 'ArrowRight':
+                goRight();
+                break;
+            case 'ArrowLeft':
+                goLeft();
+                break;
+            default:
+                break;
+        }
+    }
+
+    function clickControl(e:MouseEvent) {
+        if (e.clientX > window.innerWidth / 2) {
+            goRight();
+        } else {
+            goLeft();
+        }
+    }
+
+    useEffect(() => {
+        document.addEventListener('keydown', keyboardControl);
+        selfRef.current?.addEventListener('click', clickControl);
+
+        return () => {
+            document.removeEventListener('keydown', keyboardControl);
+            selfRef.current?.removeEventListener('click', clickControl);
+        };
+    }, [selfRef, curPage, settings.readerType]);
+
+    return (
+        <div ref={selfRef} className={classes.reader}>
+            <Page
+                key={curPage}
+                index={curPage}
+                onImageLoad={() => {}}
+                src={pages[curPage].src}
+                setCurPage={setCurPage}
+                settings={settings}
+            />
+        </div>
+    );
+}

src/components/reader/pager/VerticalPager.tsx

@@ -0,0 +1,130 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import makeStyles from '@mui/styles/makeStyles';
+import React, { useEffect, useRef } from 'react';
+import Page from '../Page';
+
+const useStyles = makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: '100%',
+    },
+});
+
+export default function VerticalReader(props: IReaderProps) {
+    const {
+        pages, settings, setCurPage, curPage, chapter, nextChapter, prevChapter,
+    } = props;
+
+    const classes = useStyles();
+
+    const selfRef = useRef<HTMLDivElement>(null);
+    const pagesRef = useRef<HTMLDivElement[]>([]);
+
+    useEffect(() => {
+        pagesRef.current = pagesRef.current.slice(0, pages.length);
+    }, [pages.length]);
+
+    function nextPage() {
+        if (curPage < pages.length - 1) {
+            pagesRef.current[curPage + 1]?.scrollIntoView();
+            setCurPage((page) => page + 1);
+        } else if (settings.loadNextonEnding) {
+            nextChapter();
+        }
+    }
+
+    function prevPage() {
+        if (curPage > 0) {
+            const rect = pagesRef.current[curPage].getBoundingClientRect();
+            if (rect.y < 0 && rect.y + rect.height > 0) {
+                pagesRef.current[curPage]?.scrollIntoView();
+            } else {
+                pagesRef.current[curPage - 1]?.scrollIntoView();
+                setCurPage(curPage - 1);
+            }
+        } else if (curPage === 0) {
+            prevChapter();
+        }
+    }
+
+    function keyboardControl(e:KeyboardEvent) {
+        switch (e.code) {
+            case 'Space':
+                e.preventDefault();
+                nextPage();
+                break;
+            case 'ArrowRight':
+                nextPage();
+                break;
+            case 'ArrowLeft':
+                prevPage();
+                break;
+            default:
+                break;
+        }
+    }
+
+    function clickControl(e:MouseEvent) {
+        if (e.clientX > window.innerWidth / 2) {
+            nextPage();
+        } else {
+            prevPage();
+        }
+    }
+
+    const handleLoadNextonEnding = () => {
+        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
+            nextChapter();
+        }
+    };
+
+    useEffect(() => {
+        if (settings.loadNextonEnding) { document.addEventListener('scroll', handleLoadNextonEnding); }
+        document.addEventListener('keydown', keyboardControl, false);
+        selfRef.current?.addEventListener('click', clickControl);
+
+        return () => {
+            document.removeEventListener('scroll', handleLoadNextonEnding);
+            document.removeEventListener('keydown', keyboardControl);
+            selfRef.current?.removeEventListener('click', clickControl);
+        };
+    }, [selfRef, curPage]);
+
+    useEffect(() => {
+        // scroll last read page into view
+        let initialPage = (chapter as IChapter).lastPageRead;
+        if (initialPage > pages.length - 1) {
+            initialPage = pages.length - 1;
+        }
+        if (initialPage > -1) {
+            pagesRef.current[initialPage].scrollIntoView();
+        }
+    }, [pagesRef.current.length]);
+
+    return (
+        <div ref={selfRef} className={classes.reader}>
+            {
+                pages.map((page) => (
+                    <Page
+                        key={page.index}
+                        index={page.index}
+                        src={page.src}
+                        onImageLoad={() => {}}
+                        setCurPage={setCurPage}
+                        settings={settings}
+                        ref={(e:HTMLDivElement) => { pagesRef.current[page.index] = e; }}
+                    />
+                ))
+            }
+        </div>
+    );
+}