78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
import { CoverClient } from "./cover-client";
|
|
import { ProgressBar } from "./progress-bar";
|
|
|
|
interface BaseCoverProps {
|
|
type: "series" | "book";
|
|
id: string;
|
|
alt?: string;
|
|
className?: string;
|
|
quality?: number;
|
|
sizes?: string;
|
|
isCompleted?: boolean;
|
|
}
|
|
|
|
interface BookCoverProps extends BaseCoverProps {
|
|
type: "book";
|
|
currentPage?: number;
|
|
totalPages?: number;
|
|
}
|
|
|
|
interface SeriesCoverProps extends BaseCoverProps {
|
|
type: "series";
|
|
readBooks?: number;
|
|
totalBooks?: number;
|
|
}
|
|
|
|
type CoverProps = BookCoverProps | SeriesCoverProps;
|
|
|
|
function getImageUrl(type: "series" | "book", id: string) {
|
|
if (type === "series") {
|
|
return `/api/komga/images/series/${id}/thumbnail`;
|
|
}
|
|
return `/api/komga/images/books/${id}/thumbnail`;
|
|
}
|
|
|
|
export function Cover(props: CoverProps) {
|
|
const {
|
|
type,
|
|
id,
|
|
alt = "Image de couverture",
|
|
className,
|
|
quality = 80,
|
|
sizes = "100vw",
|
|
isCompleted = false,
|
|
} = props;
|
|
|
|
const imageUrl = getImageUrl(type, id);
|
|
|
|
const showProgress = () => {
|
|
if (type === "book") {
|
|
const { currentPage, totalPages } = props;
|
|
return currentPage && totalPages && currentPage > 0 && !isCompleted ? (
|
|
<ProgressBar progress={currentPage} total={totalPages} type="book" />
|
|
) : null;
|
|
}
|
|
|
|
if (type === "series") {
|
|
const { readBooks, totalBooks } = props;
|
|
return readBooks && totalBooks && readBooks > 0 && !isCompleted ? (
|
|
<ProgressBar progress={readBooks} total={totalBooks} type="series" />
|
|
) : null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="relative w-full h-full">
|
|
<CoverClient
|
|
imageUrl={imageUrl}
|
|
alt={alt}
|
|
className={className}
|
|
quality={quality}
|
|
sizes={sizes}
|
|
isCompleted={isCompleted}
|
|
/>
|
|
{showProgress()}
|
|
</div>
|
|
);
|
|
}
|