diff --git a/src/components/reader/pager/DoublePagedPager.tsx b/src/components/reader/pager/DoublePagedPager.tsx index fcb4ec54..0b0c88c1 100644 --- a/src/components/reader/pager/DoublePagedPager.tsx +++ b/src/components/reader/pager/DoublePagedPager.tsx @@ -10,7 +10,6 @@ import { MouseEvent, useEffect, useRef, useState } from 'react'; import Box from '@mui/material/Box'; import { IReaderProps } from '@/typings'; import { Page } from '@/components/reader/Page'; -import { requestManager } from '@/lib/requests/RequestManager.ts'; const isSpreadPage = (image: HTMLImageElement): boolean => { const aspectRatio = image.height / image.width; @@ -18,7 +17,7 @@ const isSpreadPage = (image: HTMLImageElement): boolean => { }; export function DoublePagedPager(props: IReaderProps) { - const { pages, settings, setCurPage, initialPage, curPage, chapter, nextChapter, prevChapter } = props; + const { pages, settings, setCurPage, initialPage, curPage, nextChapter, prevChapter } = props; const selfRef = useRef(null); @@ -119,35 +118,6 @@ export function DoublePagedPager(props: IReaderProps) { setCurPage(initialPage); }, [initialPage]); - useEffect(() => { - const imageRequests: [number, ReturnType<(typeof requestManager)['requestImage']>][] = pages.map((page) => [ - page.index, - requestManager.requestImage(page.src), - ]); - - imageRequests.forEach(async ([index, imageRequest]) => { - try { - const imageUrl = await imageRequest.response; - const img = new Image(); - img.onload = () => { - URL.revokeObjectURL(imageUrl); - - setPagesLoadState((prevState) => prevState.toSpliced(index, 1, true)); - setPagesToSpreadState((prevState) => prevState.toSpliced(index, 1, isSpreadPage(img))); - }; - img.src = imageUrl; - } catch (e) { - // ignore - } - }); - - return () => { - imageRequests.forEach(([index, imageRequest]) => - imageRequest.abortRequest(new Error(`DoublePagedPager::preload(${index}): chapter changed`)), - ); - }; - }, [chapter.id]); - return ( {}} + onImageLoad={() => { + const img = new Image(); + img.onload = () => { + setPagesLoadState((prevState) => prevState.toSpliced(index, 1, true)); + setPagesToSpreadState((prevState) => + prevState.toSpliced(index, 1, isSpreadPage(img)), + ); + }; + img.src = src; + }} settings={settings} display={displayPage} /> diff --git a/src/components/reader/pager/PagedPager.tsx b/src/components/reader/pager/PagedPager.tsx index 7d54182e..b5e5aee2 100644 --- a/src/components/reader/pager/PagedPager.tsx +++ b/src/components/reader/pager/PagedPager.tsx @@ -10,27 +10,12 @@ import { MouseEvent, useEffect, useRef } from 'react'; import Box from '@mui/material/Box'; import { IReaderProps } from '@/typings'; import { Page } from '@/components/reader/Page'; -import { requestManager } from '@/lib/requests/RequestManager.ts'; export function PagedPager(props: IReaderProps) { - const { pages, settings, setCurPage, initialPage, curPage, nextChapter, prevChapter, chapter } = props; + const { pages, settings, setCurPage, initialPage, curPage, nextChapter, prevChapter } = props; const selfRef = useRef(null); - useEffect(() => { - const imageRequests = pages.map((page) => { - const imageRequest = requestManager.requestImage(page.src); - imageRequest.response.catch(() => {}); - return imageRequest; - }); - - return () => { - imageRequests.forEach((imageRequest) => - imageRequest.abortRequest(new Error(`PagedPager::preload: chapter changed`)), - ); - }; - }, [chapter.id]); - const changePage = (newPage: number) => { setCurPage(newPage); window.scroll({ top: 0 });