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

Feature/add retry button for failed image requests (#550)

Browse Source 
* Improve img loading placeholder

Prevent showing a loading placeholder in case the image is already cached.

* Add failed img load retry button
This commit is contained in:
schroda
2024-01-15 00:32:39 +01:00
committed by GitHub
parent 9962e0713d
commit 199b62341f
6 changed files with 70 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useEffect, useRef, useState } from 'react';
import { MouseEvent, useEffect, useRef, useState } from 'react';
import { Box } from '@mui/material';
import { IReaderProps } from '@/typings';
import { Page } from '@/components/reader/Page';
@@ -134,11 +134,9 @@ export function DoublePagedPager(props: IReaderProps) {
useEffect(() => {
document.addEventListener('keydown', keyboardControl);
selfRef.current?.addEventListener('click', clickControl);
return () => {
document.removeEventListener('keydown', keyboardControl);
selfRef.current?.removeEventListener('click', clickControl);
};
}, [selfRef, curPage, settings.readerType, prevChapter, nextChapter, pagesLoadState, pagesToSpreadState]);
@@ -157,7 +155,7 @@ export function DoublePagedPager(props: IReaderProps) {
}, [settings.offsetFirstPage]);
return (
<Box ref={selfRef}>
<Box ref={selfRef} onClick={clickControl}>
<Box id="preload" sx={{ display: 'none' }}>
{pages.map((page) => (
<img

7
src/components/reader/pager/HorizontalPager.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useEffect, useRef } from 'react';
import { MouseEvent as ReactMouseEvent, useEffect, useRef } from 'react';
import { Box } from '@mui/material';
import { IReaderProps } from '@/typings';
import { Page } from '@/components/reader/Page';
@@ -87,7 +87,7 @@ export function HorizontalPager(props: IReaderProps) {
selfRef.current?.removeEventListener('mousemove', dragScreen);
}
function clickControl(e: MouseEvent) {
function clickControl(e: ReactMouseEvent) {
if (e.clientX >= window.innerWidth * 0.85) {
goRight();
} else if (e.clientX <= window.innerWidth * 0.15) {
@@ -129,11 +129,9 @@ export function HorizontalPager(props: IReaderProps) {
if (settings.loadNextOnEnding) {
document.addEventListener('scroll', handleLoadNextonEnding);
}
selfRef.current?.addEventListener('mousedown', clickControl);
return () => {
document.removeEventListener('scroll', handleLoadNextonEnding);
selfRef.current?.removeEventListener('mousedown', clickControl);
};
}, [selfRef, curPage, prevChapter, nextChapter]);
@@ -174,6 +172,7 @@ export function HorizontalPager(props: IReaderProps) {
overflowX: 'visible',
userSelect: 'none',
}}
onClick={clickControl}
>
{pages.map((page) => (
<Page

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

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useEffect, useRef } from 'react';
import { MouseEvent, useEffect, useRef } from 'react';
import { Box } from '@mui/material';
import { IReaderProps } from '@/typings';
import { Page } from '@/components/reader/Page';
@@ -80,11 +80,9 @@ export function PagedPager(props: IReaderProps) {
useEffect(() => {
document.addEventListener('keydown', keyboardControl);
selfRef.current?.addEventListener('click', clickControl);
return () => {
document.removeEventListener('keydown', keyboardControl);
selfRef.current?.removeEventListener('click', clickControl);
};
}, [selfRef, curPage, settings.readerType, prevChapter, nextChapter]);
@@ -107,6 +105,7 @@ export function PagedPager(props: IReaderProps) {
width: '100%',
height: '100vh',
}}
onClick={clickControl}
>
<Page key={curPage} index={curPage} onImageLoad={() => {}} src={pages[curPage].src} settings={settings} />
</Box>