From 9962e0713d4753782dad65b56c34c3ea4a81977c Mon Sep 17 00:00:00 2001 From: Robert Perez <39390006+rickymcmuffin@users.noreply.github.com> Date: Sun, 14 Jan 2024 18:29:51 -0500 Subject: [PATCH] Adding page loading with Double Page Mode. (#480) * page loading works and looks good now to make double page work with it * Update double page spinner styling * Render pages everytime the component gets rendered - remove refs because they do not trigger a rerender - remove initial render interval - remove page rendering via portal During the initial render nothing got rendered (pages or placeholder) because for that to happen, the images had to be loaded. Thus, the loading placeholder never got shown. * Enable skipping forward while pages are loading --------- Co-authored-by: schroda <50052685+schroda@users.noreply.github.com> --- src/components/reader/DoublePage.tsx | 43 ++++++-- .../reader/pager/DoublePagedPager.tsx | 98 +++++++------------ 2 files changed, 74 insertions(+), 67 deletions(-) diff --git a/src/components/reader/DoublePage.tsx b/src/components/reader/DoublePage.tsx index 8bd67034..41fd1671 100644 --- a/src/components/reader/DoublePage.tsx +++ b/src/components/reader/DoublePage.tsx @@ -6,28 +6,39 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { forwardRef } from 'react'; -import { Box, styled } from '@mui/material'; +import { CSSProperties, forwardRef, useRef } from 'react'; +import { Box, SxProps, Theme } from '@mui/material'; import { IReaderSettings } from '@/typings'; +import { SpinnerImage } from '@/components/util/SpinnerImage'; -const Image = styled('img')({ +const imgStyles: CSSProperties = { + display: 'block', marginBottom: 0, width: 'auto', minHeight: '99vh', height: 'auto', maxHeight: '99vh', objectFit: 'contain', -}); +}; + +const spinnerStyle: SxProps = { + ...imgStyles, + width: 'calc((100vw - 300px) * 0.5)', + backgroundColor: '#525252', +}; interface IProps { index: number; image1src: string; image2src: string; + onImageLoad?: () => void; settings: IReaderSettings; } export const DoublePage = forwardRef((props: IProps, ref: any) => { - const { image1src, image2src, index, settings } = props; + const { image1src, image2src, index, onImageLoad, settings } = props; + + const imgRef = useRef(null); return ( { overflowX: 'scroll', }} > - {`Page - {`Page + + ); }); diff --git a/src/components/reader/pager/DoublePagedPager.tsx b/src/components/reader/pager/DoublePagedPager.tsx index 5d6be26e..5436e9a2 100644 --- a/src/components/reader/pager/DoublePagedPager.tsx +++ b/src/components/reader/pager/DoublePagedPager.tsx @@ -6,9 +6,8 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { useEffect, useRef } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { Box } from '@mui/material'; -import { createRoot } from 'react-dom/client'; import { IReaderProps } from '@/typings'; import { Page } from '@/components/reader/Page'; import { DoublePage } from '@/components/reader/DoublePage'; @@ -35,56 +34,30 @@ export function DoublePagedPager(props: IReaderProps) { const selfRef = useRef(null); const pagesRef = useRef([]); - const pagesDisplayed = useRef(0); - const pageLoaded = useRef(Array(pages.length).fill(false)); - const spreadPage = useRef(Array(pages.length).fill(false)); + const [pagesToSpreadState, setPagesToSpreadState] = useState(Array(pages.length).fill(false)); + const [pagesLoadState, setPagesLoadState] = useState(Array(pages.length).fill(false)); - function setPagesToDisplay() { - pagesDisplayed.current = 0; + function getPagesToDisplay(): number { + let pagesToDisplay = 1; // has to be at least one so skipping forward while pages are still loading is possible if (curPage < pages.length && pagesRef.current[curPage]) { - if (pageLoaded.current[curPage]) { - pagesDisplayed.current = 1; - if (spreadPage.current[curPage]) return; + if (pagesLoadState[curPage]) { + pagesToDisplay = 1; + if (pagesToSpreadState[curPage]) return pagesToDisplay; } } if (curPage + 1 < pages.length && pagesRef.current[curPage + 1]) { - if (pageLoaded.current[curPage + 1]) { - if (isSinglePage(curPage, spreadPage.current, settings.offsetFirstPage)) return; - pagesDisplayed.current = 2; + if (pagesLoadState[curPage + 1]) { + if (isSinglePage(curPage, pagesToSpreadState, settings.offsetFirstPage)) return pagesToDisplay; + pagesToDisplay = 2; } } - } - function displayPages() { - const container = document.getElementById('display'); - const root = createRoot(container!); - - if (pagesDisplayed.current === 2) { - root.render( - , - ); - } else { - root.render( - {}} - settings={settings} - />, - ); - } + return pagesToDisplay; } function pagesToGoBack() { // If previous page is single page, go only one page pack - if (isSinglePage(curPage - 2, spreadPage.current, settings.offsetFirstPage)) { + if (isSinglePage(curPage - 2, pagesToSpreadState, settings.offsetFirstPage)) { return 1; } @@ -94,7 +67,7 @@ export function DoublePagedPager(props: IReaderProps) { function nextPage() { if (curPage < pages.length - 1) { - const nextCurPage = curPage + pagesDisplayed.current; + const nextCurPage = curPage + getPagesToDisplay(); setCurPage(nextCurPage >= pages.length ? pages.length - 1 : nextCurPage); } else if (settings.loadNextOnEnding) { nextChapter(); @@ -153,34 +126,21 @@ export function DoublePagedPager(props: IReaderProps) { function handleImageLoad(index: number) { return () => { - pageLoaded.current[index] = true; + setPagesLoadState((prevState) => prevState.toSpliced(index, 1, true)); const image = pagesRef.current[index]; - spreadPage.current[index] = isSpreadPage(image); + setPagesToSpreadState((prevState) => prevState.toSpliced(index, 1, isSpreadPage(image))); }; } 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, prevChapter, nextChapter]); + }, [selfRef, curPage, settings.readerType, prevChapter, nextChapter, pagesLoadState, pagesToSpreadState]); useEffect(() => { setCurPage(initialPage); @@ -188,10 +148,10 @@ export function DoublePagedPager(props: IReaderProps) { useEffect(() => { if (settings.offsetFirstPage) { - if (pagesDisplayed.current === 2) { + if (getPagesToDisplay() === 2) { setCurPage(curPage + 1); } - } else if (curPage > 0 && !isSinglePage(curPage - 1, spreadPage.current, settings.offsetFirstPage)) { + } else if (curPage > 0 && !isSinglePage(curPage - 1, pagesToSpreadState, settings.offsetFirstPage)) { setCurPage(curPage - 1); } }, [settings.offsetFirstPage]); @@ -222,7 +182,25 @@ export function DoublePagedPager(props: IReaderProps) { height: 'auto', overflowX: 'scroll', }} - /> + > + {getPagesToDisplay() === 2 ? ( + + ) : ( + {}} + settings={settings} + /> + )} + ); }