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

* Improve img loading placeholder

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

* Add failed img load retry button

src/components/reader/Page.tsx

@@ -82,9 +82,7 @@ export const Page = forwardRef((props: IProps, ref: any) => {
                     ...imgStyle,
                     height: '100vh',
                     width: '70vw',
-                    padding: '50px calc(50% - 20px)',
                     backgroundColor: '#525252',
-                    marginBottom: 10,
                 }}
                 imgStyle={imgStyle}
             />

src/components/reader/pager/DoublePagedPager.tsx

@@ -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

src/components/reader/pager/HorizontalPager.tsx

@@ -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

src/components/reader/pager/PagedPager.tsx

@@ -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>