From 6109bb678a7a8473696741215f72a3414011bd0e Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Thu, 8 May 2025 02:13:58 +0200
Subject: [PATCH] Reload Cover/Latest available on load
---
tranga-website/src/Components/Manga.tsx | 25 ++++++++++++++++---------
1 file changed, 16 insertions(+), 9 deletions(-)
diff --git a/tranga-website/src/Components/Manga.tsx b/tranga-website/src/Components/Manga.tsx
index 14ce697..2d8a92a 100644
--- a/tranga-website/src/Components/Manga.tsx
+++ b/tranga-website/src/Components/Manga.tsx
@@ -12,7 +12,7 @@ import {
Typography
} from "@mui/joy";
import IManga, {DefaultManga} from "../api/types/IManga.ts";
-import {ReactElement, useCallback, useContext, useEffect, useState} from "react";
+import {ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
import {GetLatestChapterAvailable, GetMangaById, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx";
import {ApiUriContext} from "../api/fetchApi.tsx";
import AuthorTag from "./AuthorTag.tsx";
@@ -43,6 +43,7 @@ export function MangaFromId({mangaId, children} : { mangaId: string, children?:
export function Manga({manga, children, loading} : { manga: IManga | undefined, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined, loading?: boolean}) {
const useManga = manga ?? DefaultManga;
loading = loading ?? false;
+ const CoverRef = useRef<HTMLImageElement>(null);
console.log(useManga);
console.log(manga);
@@ -52,7 +53,7 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
const [mangaMaxChapter, setMangaMaxChapter] = useState<IChapter>();
const [maxChapterLoading, setMaxChapterLoading] = useState<boolean>(true);
- const loadMaxChapter = useCallback(() => {
+ const LoadMaxChapter = useCallback(() => {
setMaxChapterLoading(true);
GetLatestChapterAvailable(apiUri, useManga.mangaId)
.then(setMangaMaxChapter)
@@ -66,12 +67,17 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
},[useManga, apiUri])
useEffect(() => {
- loadMaxChapter();
- }, []);
+ LoadMaxChapter();
+ LoadMangaCover();
+ }, [useManga]);
- const LoadMangaCover = useCallback((e : EventTarget & HTMLImageElement) => {
- if(e.src != GetMangaCoverImageUrl(apiUri, useManga.mangaId, e))
- e.src = GetMangaCoverImageUrl(apiUri, useManga.mangaId, e);
+ const LoadMangaCover = useCallback(() => {
+ if(CoverRef.current == null)
+ return;
+ const coverUrl = GetMangaCoverImageUrl(apiUri, useManga.mangaId, CoverRef.current);
+ if(CoverRef.current.src == coverUrl)
+ return;
+ CoverRef.current.src = GetMangaCoverImageUrl(apiUri, useManga.mangaId, CoverRef.current);
}, [useManga, apiUri])
const sideSx : SxProps = {
@@ -91,8 +97,9 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
}>
<CardCover sx={{margin: "var(--Card-padding)"}}>
<img style={{maxHeight:"100%",height:"400px",width:"300px"}} src="/blahaj.png" alt="Manga Cover"
- onLoad={(e) => LoadMangaCover(e.currentTarget)}
- onResize={(e) => LoadMangaCover(e.currentTarget)}/>
+ ref={CoverRef}
+ onLoad={LoadMangaCover}
+ onResize={LoadMangaCover}/>
</CardCover>
<CardCover sx={{
background: