From 5a46f1fdefbcdb4e28c08b322125efcf60870c57 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 23 Sep 2024 15:05:47 +0200
Subject: [PATCH] Remove manual preloading of single/double mode images

With the changes from 83ce1caee631e73de16d2105b909d8c0bb9d3d5a 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
---
 .../reader/pager/DoublePagedPager.tsx         | 43 +++++--------------
 src/components/reader/pager/PagedPager.tsx    | 17 +-------
 2 files changed, 12 insertions(+), 48 deletions(-)

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<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}
                         />
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<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 });