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: