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

MangaPopup Badge Icon

Browse Source
This commit is contained in:
glax 2025-05-18 22:38:40 +02:00
parent 181d591344
commit 5c5f810127
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,6 @@ import {ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
import {SxProps} from "@mui/joy/styles/types";
import MangaPopup from "./MangaPopup.tsx";
import {MangaConnectorContext} from "../api/Contexts/MangaConnectorContext.tsx";
import IMangaConnector from "../api/types/IMangaConnector.ts";
export function MangaFromId({mangaId, children} : { mangaId: string, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
const [manga, setManga] = useState<IManga>();
@ -42,15 +41,13 @@ export function Manga({manga: manga, children} : { manga: IManga, children?: Rea
const CoverRef = useRef<HTMLImageElement>(null);
const apiUri = useContext(ApiUriContext);
const mangaConnectors = useContext(MangaConnectorContext);
const mangaConnector = useContext(MangaConnectorContext).find(all => all.name == manga.mangaConnectorName);
const [expanded, setExpanded] = useState(false);
const [mangaConnector, setMangaConnector] = useState<IMangaConnector>();
useEffect(() => {
LoadMangaCover();
setMangaConnector(mangaConnectors.find(all => all.name == manga.mangaConnectorName));
}, [manga]);
}, [manga, apiUri]);
const LoadMangaCover = useCallback(() => {
if(CoverRef.current == null)

5
tranga-website/src/Components/MangaPopup.tsx
View File

@ -9,6 +9,7 @@ import MarkdownPreview from "@uiw/react-markdown-preview";
import {CardHeight} from "./Manga.tsx";
import IChapter from "../api/types/IChapter.ts";
import {MangaReleaseStatus, ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
import {MangaConnectorContext} from "../api/Contexts/MangaConnectorContext.tsx";
export default function MangaPopup({manga, open, children} : {manga: IManga | null, open: boolean, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined}) {
@ -56,12 +57,14 @@ export default function MangaPopup({manga, open, children} : {manga: IManga | nu
SetIgnoreThreshold(apiUri, manga.mangaId, value).finally(() => setUpdatingThreshold(false));
},[manga, apiUri])
const mangaConnector = useContext(MangaConnectorContext).find(all => all.name == manga?.mangaConnectorName);
return (
<Drawer anchor="bottom" size="lg" open={open}>
<Stack direction="column" spacing={2} margin={"10px"}>
{ /* Cover and Description */ }
<Stack direction="row" spacing={2} margin={"10px"}>
<Badge sx={{margin:"8px !important"}} badgeContent={manga?.mangaConnectorName} color={ReleaseStatusToPalette(manga?.releaseStatus??MangaReleaseStatus.Unreleased)} size={"lg"}>
<Badge sx={{margin:"8px !important"}} badgeContent={mangaConnector ? <img width={"24pt"} height={"24pt"} src={mangaConnector.iconUrl} /> : manga?.mangaConnectorName} color={ReleaseStatusToPalette(manga?.releaseStatus??MangaReleaseStatus.Unreleased)} size={"lg"}>
<img src="/blahaj.png" alt="Manga Cover"
ref={CoverRef}
onLoad={LoadMangaCover}/>