Add logic to retry all errored pages

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx

@@ -57,7 +57,8 @@ export const ReaderNavBarDesktop = ({ isVisible, openSettings }: ReaderNavBarDes
     const { setReaderNavBarWidth } = useNavBarContext();
     const { manga } = useReaderStateMangaContext();
     const { chapters, currentChapter, nextChapter, previousChapter } = useReaderStateChaptersContext();
-    const { pages, currentPageIndex } = userReaderStatePagesContext();
+    const { pages, currentPageIndex, pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } =
+        userReaderStatePagesContext();
 
     const getOptionForDirection = useGetOptionForDirection();
 
@@ -118,7 +119,12 @@ export const ReaderNavBarDesktop = ({ isVisible, openSettings }: ReaderNavBarDes
                                 mangaTitle={manga.title}
                                 chapterTitle={currentChapter.name}
                             />
-                            <ReaderNavBarDesktopActions currentChapter={currentChapter} />
+                            <ReaderNavBarDesktopActions
+                                currentChapter={currentChapter}
+                                pageLoadStates={pageLoadStates}
+                                setPageLoadStates={setPageLoadStates}
+                                setRetryFailedPagesKeyPrefix={setRetryFailedPagesKeyPrefix}
+                            />
                         </>
                     ) : (
                         <LoadingPlaceholder />

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopActions.tsx

@@ -15,13 +15,14 @@ import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import DownloadIcon from '@mui/icons-material/Download';
 import ReplayIcon from '@mui/icons-material/Replay';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
 import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
 import { DownloadStatusFieldsFragment } from '@/lib/graphql/generated/graphql.ts';
+import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 
 const DownloadButton = ({
     currentChapter,
@@ -60,11 +61,17 @@ const DownloadButton = ({
 
 export const ReaderNavBarDesktopActions = ({
     currentChapter,
-}: Required<Pick<ReaderStateChapters, 'currentChapter'>>) => {
+    pageLoadStates,
+    setPageLoadStates,
+    setRetryFailedPagesKeyPrefix,
+}: Required<Pick<ReaderStateChapters, 'currentChapter'>> &
+    Pick<ReaderStatePages, 'pageLoadStates' | 'setPageLoadStates' | 'setRetryFailedPagesKeyPrefix'>) => {
     const { id, isBookmarked, realUrl } = currentChapter ?? { id: -1, isBookmarked: false, realUrl: '' };
 
     const { t } = useTranslation();
 
+    const pageRetryKeyPrefix = useRef<number>(0);
+
     const { data: downloaderData } = requestManager.useGetDownloadStatus();
     const queue = downloaderData?.downloadStatus.queue ?? [];
 
@@ -73,6 +80,11 @@ export const ReaderNavBarDesktopActions = ({
         [queue, id],
     );
 
+    const haveSomePagesFailedToLoad = useMemo(
+        () => pageLoadStates.some((pageLoadState) => pageLoadState.error),
+        [pageLoadStates],
+    );
+
     const bookmarkAction: Extract<ChapterAction, 'unbookmark' | 'bookmark'> = isBookmarked ? 'unbookmark' : 'bookmark';
 
     return (
@@ -83,7 +95,17 @@ export const ReaderNavBarDesktopActions = ({
                 </IconButton>
             </Tooltip>
             <Tooltip title={t('reader.button.retry_load_pages')}>
-                <IconButton color="inherit">
+                <IconButton
+                    onClick={() => {
+                        setPageLoadStates((statePageLoadStates) =>
+                            statePageLoadStates.map((pageLoadState) => ({ loaded: pageLoadState.loaded })),
+                        );
+                        setRetryFailedPagesKeyPrefix(`${pageRetryKeyPrefix.current}`);
+                        pageRetryKeyPrefix.current = (pageRetryKeyPrefix.current + 1) % 1000;
+                    }}
+                    disabled={!haveSomePagesFailedToLoad}
+                    color="inherit"
+                >
                     <ReplayIcon />
                 </IconButton>
             </Tooltip>