diff --git a/webUI/react/src/components/manga/reader/pager/DoublePagedPager.tsx b/webUI/react/src/components/manga/reader/pager/DoublePagedPager.tsx index 0c19d18..90f1002 100644 --- a/webUI/react/src/components/manga/reader/pager/DoublePagedPager.tsx +++ b/webUI/react/src/components/manga/reader/pager/DoublePagedPager.tsx @@ -12,6 +12,9 @@ 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', @@ -31,16 +34,67 @@ export default function DoublePagedPager(props: IReaderProps) { const classes = useStyles(settings)(); const selfRef = useRef(null); - const pagesRef = useRef([]); + const pagesRef = useRef([]); const pagesDisplayed = useRef(0); const pageLoaded = useRef(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( + , + document.getElementById('display'), + ); + } else { + ReactDOM.render( + {}} + 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 (pagesRef.current[curPage - i].children[0] instanceof HTMLImageElement) { - const imgElem = pagesRef.current[curPage - i].children[0] as HTMLImageElement; + if (pageLoaded.current[curPage - i]) { + const imgElem = pagesRef.current[curPage - i]; const aspectRatio = imgElem.height / imgElem.width; if (aspectRatio < 1) { return 1; @@ -85,62 +139,6 @@ export default function DoublePagedPager(props: IReaderProps) { } } - function setPagesToDisplay() { - pagesDisplayed.current = 0; - if (curPage < pages.length && pagesRef.current[curPage]) { - if (pagesRef.current[curPage].children[0] instanceof HTMLImageElement) { - pagesDisplayed.current = 1; - const imgElem = pagesRef.current[curPage].children[0] as HTMLImageElement; - const aspectRatio = imgElem.height / imgElem.width; - if (aspectRatio < 1) { - return; - } - } - } - if (curPage + 1 < pages.length && pagesRef.current[curPage + 1]) { - if (pagesRef.current[curPage + 1].children[0] instanceof HTMLImageElement) { - const imgElem = pagesRef.current[curPage + 1].children[0] as HTMLImageElement; - const aspectRatio = imgElem.height / imgElem.width; - if (aspectRatio < 1) { - return; - } - pagesDisplayed.current = 2; - } - } - } - - function showPages() { - if (pagesDisplayed.current === 2) { - ReactDOM.render( - , - document.getElementById('display'), - ); - } else if (pagesDisplayed.current === 1) { - ReactDOM.render( - {}} - setCurPage={setCurPage} - settings={settings} - />, - document.getElementById('display'), - ); - } else { - ReactDOM.render( -
, - document.getElementById('display'), - ); - } - } - function keyboardControl(e:KeyboardEvent) { switch (e.code) { case 'Space': @@ -172,20 +170,13 @@ export default function DoublePagedPager(props: IReaderProps) { }; } - useEffect(() => { - pagesRef.current.forEach((e) => { - const pageRef = e; - pageRef.style.display = 'none'; - }); - }, []); - useEffect(() => { const retryDisplay = setInterval(() => { const isLastPage = (curPage === pages.length - 1); if ((!isLastPage && pageLoaded.current[curPage] && pageLoaded.current[curPage + 1]) || pageLoaded.current[curPage]) { setPagesToDisplay(); - showPages(); + displayPages(); clearInterval(retryDisplay); } }, 50); @@ -202,17 +193,15 @@ export default function DoublePagedPager(props: IReaderProps) { return (
-
+
{ pages.map((page) => ( - { pagesRef.current[page.index] = e; }} + key={`${page.index}`} src={page.src} - onImageLoad={handleImageLoad(page.index)} - setCurPage={setCurPage} - settings={settings} - ref={(e:HTMLDivElement) => { pagesRef.current[page.index] = e; }} + onLoad={handleImageLoad(page.index)} + alt={`${page.index}`} /> )) }