ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove manual preloading of single/double mode images

Browse Source 
With the changes from 83ce1caee6 all pages are rendered and therefore also loaded

In case of the double page mode this caused the spread page detection to be delayed due to the manual preloaded images being at the end of the image queue and thus, causing the image to be already rendered while being unable to detect the spread status of the image
This commit is contained in:
schroda
2024-09-23 15:05:47 +02:00
parent 0b9acb1b4e
commit 5a46f1fdef
2 changed files with 12 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/reader/pager/DoublePagedPager.tsx
View File

@@ -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<HTMLDivElement>(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 (
<Box ref={selfRef} onClick={clickControl}>
<Box
@@ -209,7 +179,16 @@ export function DoublePagedPager(props: IReaderProps) {
key={src}
index={index}
src={src}
onImageLoad={() => {}}
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}
/>

17
src/components/reader/pager/PagedPager.tsx
View File

@@ -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<HTMLDivElement>(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 });