glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-05-15 10:53:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

Reload Cover/Latest available on load

Browse Source
This commit is contained in:
glax 2025-05-08 02:13:58 +02:00
parent cc14c5adad
commit 6109bb678a
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
tranga-website/src/Components/Manga.tsx
View File

@ -12,7 +12,7 @@ import {
Typography Typography
} from "@mui/joy"; } from "@mui/joy";
import IManga, {DefaultManga} from "../api/types/IManga.ts"; 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 {GetLatestChapterAvailable, GetMangaById, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx";
import {ApiUriContext} from "../api/fetchApi.tsx"; import {ApiUriContext} from "../api/fetchApi.tsx";
import AuthorTag from "./AuthorTag.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}) { export function Manga({manga, children, loading} : { manga: IManga | undefined, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined, loading?: boolean}) {
const useManga = manga ?? DefaultManga; const useManga = manga ?? DefaultManga;
loading = loading ?? false; loading = loading ?? false;
const CoverRef = useRef<HTMLImageElement>(null);
console.log(useManga); console.log(useManga);
console.log(manga); console.log(manga);
@ -52,7 +53,7 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
const [mangaMaxChapter, setMangaMaxChapter] = useState<IChapter>(); const [mangaMaxChapter, setMangaMaxChapter] = useState<IChapter>();
const [maxChapterLoading, setMaxChapterLoading] = useState<boolean>(true); const [maxChapterLoading, setMaxChapterLoading] = useState<boolean>(true);
const loadMaxChapter = useCallback(() => { const LoadMaxChapter = useCallback(() => {
setMaxChapterLoading(true); setMaxChapterLoading(true);
GetLatestChapterAvailable(apiUri, useManga.mangaId) GetLatestChapterAvailable(apiUri, useManga.mangaId)
.then(setMangaMaxChapter) .then(setMangaMaxChapter)
@ -66,12 +67,17 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
},[useManga, apiUri]) },[useManga, apiUri])
useEffect(() => { useEffect(() => {
loadMaxChapter(); LoadMaxChapter();
}, []); LoadMangaCover();
}, [useManga]);
const LoadMangaCover = useCallback((e : EventTarget & HTMLImageElement) => { const LoadMangaCover = useCallback(() => {
if(e.src != GetMangaCoverImageUrl(apiUri, useManga.mangaId, e)) if(CoverRef.current == null)
e.src = GetMangaCoverImageUrl(apiUri, useManga.mangaId, e); 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]) }, [useManga, apiUri])
const sideSx : SxProps = { const sideSx : SxProps = {
@ -91,8 +97,9 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
}> }>
<CardCover sx={{margin: "var(--Card-padding)"}}> <CardCover sx={{margin: "var(--Card-padding)"}}>
<img style={{maxHeight:"100%",height:"400px",width:"300px"}} src="/blahaj.png" alt="Manga Cover" <img style={{maxHeight:"100%",height:"400px",width:"300px"}} src="/blahaj.png" alt="Manga Cover"
onLoad={(e) => LoadMangaCover(e.currentTarget)} ref={CoverRef}
onResize={(e) => LoadMangaCover(e.currentTarget)}/> onLoad={LoadMangaCover}
onResize={LoadMangaCover}/>
</CardCover> </CardCover>
<CardCover sx={{ <CardCover sx={{
background: background: