glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Request scaled images

Browse Source
This commit is contained in:
glax 2024-10-31 21:40:01 +01:00
parent e58d3f8741
commit 1f8cacb668
2 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Website/modules/Manga.tsx
View File

@ -47,8 +47,8 @@ export default class Manga
}); });
} }
static GetMangaCoverUrl(apiUri: string, internalId: string): string { static GetMangaCoverUrl(apiUri: string, internalId: string, ref: HTMLElement): string {
//console.debug(`Getting Manga Cover-Url ${internalId}`); //console.debug(`Getting Manga Cover-Url ${internalId}`);
return `${apiUri}/v2/Manga/${internalId}/Cover`; return `${apiUri}/v2/Manga/${internalId}/Cover?dimensions=${ref.clientWidth}x${ref.clientHeight}`;
} }
} }

49
Website/modules/interfaces/IManga.tsx
View File

@ -1,7 +1,7 @@
import IMangaConnector from "./IMangaConnector"; import IMangaConnector from "./IMangaConnector";
import KeyValuePair from "./KeyValuePair"; import KeyValuePair from "./KeyValuePair";
import Manga from "../Manga"; import Manga from "../Manga";
import React, {ReactElement} from "react"; import React, {EventHandler, ReactElement, ReactEventHandler} from "react";
import Icon from '@mdi/react'; import Icon from '@mdi/react';
import { mdiTagTextOutline, mdiAccountEdit } from '@mdi/js'; import { mdiTagTextOutline, mdiAccountEdit } from '@mdi/js';
import MarkdownPreview from '@uiw/react-markdown-preview'; import MarkdownPreview from '@uiw/react-markdown-preview';
@ -42,10 +42,17 @@ export function ReleaseStatusFromNumber(n: number): string {
return ""; return "";
} }
export function CoverCard(apiUri: string, manga: IManga) : ReactElement { export function CoverCard(apiUri: string, manga: IManga) : ReactElement {
const MangaCover : ReactEventHandler<HTMLImageElement> = (e) => {
if(e.currentTarget.src != Manga.GetMangaCoverUrl(apiUri, manga.internalId, e.currentTarget))
e.currentTarget.src = Manga.GetMangaCoverUrl(apiUri, manga.internalId, e.currentTarget);
}
return( return(
<div className="Manga" key={manga.internalId}> <div className="Manga" key={manga.internalId}>
<img src={Manga.GetMangaCoverUrl(apiUri, manga.internalId)} alt="Manga Cover"></img> <img src="../../media/blahaj.png" onLoad={MangaCover} alt="Manga Cover"></img>
<div> <div>
<p className="pill connector-name">{manga.mangaConnector.name}</p> <p className="pill connector-name">{manga.mangaConnector.name}</p>
<div className="Manga-status" release-status={ReleaseStatusFromNumber(manga.releaseStatus)}></div> <div className="Manga-status" release-status={ReleaseStatusFromNumber(manga.releaseStatus)}></div>
@ -55,17 +62,26 @@ export function CoverCard(apiUri: string, manga: IManga) : ReactElement {
} }
export function SearchResult(apiUri: string, manga: IManga, interval: Date, onJobsChanged: (internalId: string) => void) : ReactElement { export function SearchResult(apiUri: string, manga: IManga, interval: Date, onJobsChanged: (internalId: string) => void) : ReactElement {
const MangaCover : ReactEventHandler<HTMLImageElement> = (e) => {
if(e.currentTarget.src != Manga.GetMangaCoverUrl(apiUri, manga.internalId, e.currentTarget))
e.currentTarget.src = Manga.GetMangaCoverUrl(apiUri, manga.internalId, e.currentTarget);
}
return( return(
<div className="SearchResult" key={manga.internalId}> <div className="SearchResult" key={manga.internalId}>
<img src={Manga.GetMangaCoverUrl(apiUri, manga.internalId)} alt="Manga Cover"></img> <img src="../../media/blahaj.png" onLoad={MangaCover} alt="Manga Cover"></img>
<p className="connector-name">{manga.mangaConnector.name}</p> <p className="connector-name">{manga.mangaConnector.name}</p>
<div className="Manga-status" release-status={ReleaseStatusFromNumber(manga.releaseStatus)}></div> <div className="Manga-status" release-status={ReleaseStatusFromNumber(manga.releaseStatus)}></div>
<p className="Manga-name"><a href={manga.websiteUrl}>{manga.sortName}<img src="../../media/link.svg" alt=""/></a></p> <p className="Manga-name"><a href={manga.websiteUrl}>{manga.sortName}<img src="../../media/link.svg"
alt=""/></a></p>
<div className="Manga-tags"> <div className="Manga-tags">
{manga.authors.map(author => <p className="Manga-author" key={manga.internalId + "-author-" + author}> <Icon path={mdiAccountEdit} size={0.5} /> {author}</p>)} {manga.authors.map(author => <p className="Manga-author" key={manga.internalId + "-author-" + author}>
{manga.tags.map(tag => <p className="Manga-tag" key={manga.internalId + "-tag-" + tag}><Icon path={mdiTagTextOutline} size={0.5} /> {tag}</p>)} <Icon path={mdiAccountEdit} size={0.5}/> {author}</p>)}
{manga.tags.map(tag => <p className="Manga-tag" key={manga.internalId + "-tag-" + tag}><Icon
path={mdiTagTextOutline} size={0.5}/> {tag}</p>)}
</div> </div>
<MarkdownPreview className="Manga-description" source={manga.description} style={{ backgroundColor: "transparent", color: "black" }} /> <MarkdownPreview className="Manga-description" source={manga.description}
style={{backgroundColor: "transparent", color: "black"}}/>
<button className="Manga-AddButton" onClick={() => { <button className="Manga-AddButton" onClick={() => {
Job.CreateJobDateInterval(apiUri, manga.internalId, "MonitorManga", interval).then(() => onJobsChanged(manga.internalId)); Job.CreateJobDateInterval(apiUri, manga.internalId, "MonitorManga", interval).then(() => onJobsChanged(manga.internalId));
}}>Monitor }}>Monitor
@ -82,19 +98,30 @@ function ToPercentString(n: number): string {
} }
export function QueueItem(apiUri: string, manga: IManga, job: IJob, triggerUpdate: () => void){ export function QueueItem(apiUri: string, manga: IManga, job: IJob, triggerUpdate: () => void){
const MangaCover : ReactEventHandler<HTMLImageElement> = (e) => {
if(e.currentTarget.src != Manga.GetMangaCoverUrl(apiUri, manga.internalId, e.currentTarget))
e.currentTarget.src = Manga.GetMangaCoverUrl(apiUri, manga.internalId, e.currentTarget);
}
return ( return (
<div className="QueueJob" key={"QueueJob-" + job.id}> <div className="QueueJob" key={"QueueJob-" + job.id}>
<img src={Manga.GetMangaCoverUrl(apiUri, manga.internalId)} alt="Manga Cover"/> <img src="../../media/blahaj.png" onLoad={MangaCover} alt="Manga Cover"></img>
<p className="QueueJob-Name">{manga.sortName}</p> <p className="QueueJob-Name">{manga.sortName}</p>
<p className="QueueJob-JobType">{JobTypeFromNumber(job.jobType)}</p> <p className="QueueJob-JobType">{JobTypeFromNumber(job.jobType)}</p>
<p className="QueueJob-additional">{job.jobType == 0 ? `Vol.${job.chapter?.volumeNumber} Ch.${job.chapter?.chapterNumber}` : ""}</p> <p className="QueueJob-additional">{job.jobType == 0 ? `Vol.${job.chapter?.volumeNumber} Ch.${job.chapter?.chapterNumber}` : ""}</p>
{job.progressToken.state === 0 {job.progressToken.state === 0
? <ProgressBar labelColor={"#000"} height={"10px"} labelAlignment={"outside"} className="QueueJob-Progressbar" completed={job.progressToken.progress} maxCompleted={1} customLabel={ProgressbarStr(job)}/> ? <ProgressBar labelColor={"#000"} height={"10px"} labelAlignment={"outside"}
className="QueueJob-Progressbar" completed={job.progressToken.progress} maxCompleted={1}
customLabel={ProgressbarStr(job)}/>
: <div className="QueueJob-Progressbar"></div>} : <div className="QueueJob-Progressbar"></div>}
<div className="QueueJob-actions"> <div className="QueueJob-actions">
<button className="QueueJob-Cancel" onClick={() => Job.CancelJob(apiUri, job.id).then(triggerUpdate)}>Cancel</button> <button className="QueueJob-Cancel"
onClick={() => Job.CancelJob(apiUri, job.id).then(triggerUpdate)}>Cancel
</button>
{job.parentJobId != null {job.parentJobId != null
? <button className="QueueJob-Cancel" onClick={() => Job.CancelJob(apiUri, job.parentJobId!).then(triggerUpdate)}>Cancel all related</button> ? <button className="QueueJob-Cancel"
onClick={() => Job.CancelJob(apiUri, job.parentJobId!).then(triggerUpdate)}>Cancel all
related</button>
: <></> : <></>
} }
</div> </div>