263 lines
8.6 KiB
TypeScript
263 lines
8.6 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { ImageOff, Book, BookOpen, BookMarked, Star, StarOff } from "lucide-react";
|
|
import { KomgaSeries } from "@/types/komga";
|
|
import { useState, useEffect } from "react";
|
|
import { Button } from "../ui/button";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface SeriesHeaderProps {
|
|
series: KomgaSeries;
|
|
onSeriesUpdate?: (series: KomgaSeries) => void;
|
|
}
|
|
|
|
interface ReadingStatusInfo {
|
|
label: string;
|
|
className: string;
|
|
icon: React.ElementType;
|
|
}
|
|
|
|
// Fonction utilitaire pour obtenir les informations de lecture d'une série
|
|
const getReadingStatusInfo = (series: KomgaSeries): ReadingStatusInfo => {
|
|
const { booksCount, booksReadCount, booksUnreadCount } = series;
|
|
const booksInProgressCount = booksCount - (booksReadCount + booksUnreadCount);
|
|
|
|
if (booksReadCount === booksCount) {
|
|
return {
|
|
label: "Lu",
|
|
className: "bg-green-500/10 text-green-500",
|
|
icon: BookOpen,
|
|
};
|
|
}
|
|
|
|
if (booksInProgressCount > 0 || (booksReadCount > 0 && booksReadCount < booksCount)) {
|
|
return {
|
|
label: `${booksReadCount}/${booksCount}`,
|
|
className: "bg-blue-500/10 text-blue-500",
|
|
icon: BookMarked,
|
|
};
|
|
}
|
|
|
|
return {
|
|
label: "Non lu",
|
|
className: "bg-yellow-500/10 text-yellow-500",
|
|
icon: Book,
|
|
};
|
|
};
|
|
|
|
export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
|
|
const { toast } = useToast();
|
|
const [languageDisplay, setLanguageDisplay] = useState<string>(series.metadata.language);
|
|
const [imageError, setImageError] = useState(false);
|
|
const [readingStatus, setReadingStatus] = useState<ReadingStatusInfo>(
|
|
getReadingStatusInfo(series)
|
|
);
|
|
const [isFavorite, setIsFavorite] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
// Vérifier si la série est dans les favoris au chargement
|
|
useEffect(() => {
|
|
const checkFavorite = async () => {
|
|
try {
|
|
const response = await fetch("/api/komga/favorites");
|
|
if (response.ok) {
|
|
const favoriteIds = await response.json();
|
|
setIsFavorite(favoriteIds.includes(series.id));
|
|
}
|
|
} catch (error) {
|
|
console.error("Erreur lors de la vérification des favoris:", error);
|
|
}
|
|
};
|
|
|
|
checkFavorite();
|
|
setMounted(true);
|
|
}, [series.id]);
|
|
|
|
useEffect(() => {
|
|
setReadingStatus(getReadingStatusInfo(series));
|
|
}, [series]);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
if (series.metadata.language) {
|
|
const displayNames = new Intl.DisplayNames([navigator.language || "fr-FR"], {
|
|
type: "language",
|
|
});
|
|
setLanguageDisplay(displayNames.of(series.metadata.language) || series.metadata.language);
|
|
}
|
|
} catch (error) {
|
|
console.error("Erreur lors de la traduction de la langue:", error);
|
|
setLanguageDisplay(series.metadata.language);
|
|
}
|
|
}, [series.metadata.language]);
|
|
|
|
const handleToggleFavorite = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await fetch("/api/komga/favorites", {
|
|
method: isFavorite ? "DELETE" : "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ seriesId: series.id }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Erreur lors de la modification des favoris");
|
|
}
|
|
|
|
setIsFavorite(!isFavorite);
|
|
if (onSeriesUpdate) {
|
|
onSeriesUpdate({ ...series, favorite: !isFavorite });
|
|
}
|
|
|
|
// Dispatch l'événement pour notifier les autres composants
|
|
window.dispatchEvent(new Event("favoritesChanged"));
|
|
|
|
toast({
|
|
title: isFavorite ? "Retiré des favoris" : "Ajouté aux favoris",
|
|
variant: "default",
|
|
});
|
|
} catch (error) {
|
|
toast({
|
|
title: "Une erreur est survenue",
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const StatusIcon = readingStatus.icon;
|
|
|
|
return (
|
|
<div className="relative w-full min-h-[300px]">
|
|
{/* Fond flou */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
{!imageError && (
|
|
<div className="relative w-full h-full">
|
|
<Image
|
|
src={`/api/komga/images/series/${series.id}/thumbnail`}
|
|
alt=""
|
|
fill
|
|
className="object-cover opacity-10 blur-2xl scale-110"
|
|
priority
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Contenu */}
|
|
<div className="relative container mx-auto px-4 py-8">
|
|
<div className="flex flex-col md:flex-row gap-8 items-center md:items-start">
|
|
{/* Image de couverture */}
|
|
<div className="shrink-0">
|
|
{!imageError ? (
|
|
<div className="relative">
|
|
<Image
|
|
src={`/api/komga/images/series/${series.id}/thumbnail`}
|
|
alt={series.name}
|
|
width={200}
|
|
height={300}
|
|
className="rounded-lg shadow-xl hover:shadow-2xl transition-shadow duration-200"
|
|
onError={() => setImageError(true)}
|
|
priority
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="w-[200px] h-[300px] bg-muted rounded-lg flex items-center justify-center">
|
|
<ImageOff className="w-12 h-12" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Informations */}
|
|
<div className="flex-1 text-center md:text-left space-y-4">
|
|
<div className="flex flex-col md:flex-row items-center gap-4">
|
|
<h1 className="text-4xl font-bold">{series.name}</h1>
|
|
{mounted && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={handleToggleFavorite}
|
|
disabled={isLoading}
|
|
className={cn(
|
|
"hover:bg-primary/20",
|
|
isFavorite && "bg-yellow-500/10 hover:bg-yellow-500/20"
|
|
)}
|
|
aria-label={isFavorite ? "Retirer des favoris" : "Ajouter aux favoris"}
|
|
>
|
|
{isFavorite ? (
|
|
<Star className="w-6 h-6 text-yellow-400 fill-yellow-400" />
|
|
) : (
|
|
<StarOff className="w-6 h-6" />
|
|
)}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Métadonnées */}
|
|
<div className="flex flex-wrap gap-4 items-center justify-center md:justify-start text-sm">
|
|
{series.metadata.publisher && (
|
|
<span className="text-muted-foreground">{series.metadata.publisher}</span>
|
|
)}
|
|
{languageDisplay && (
|
|
<span className="text-muted-foreground capitalize">{languageDisplay}</span>
|
|
)}
|
|
{series.metadata.status && (
|
|
<span className="text-muted-foreground capitalize">
|
|
{series.metadata.status.toLowerCase()}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="flex flex-wrap gap-4 items-center justify-center md:justify-start">
|
|
<div
|
|
className={cn(
|
|
"px-3 py-1.5 rounded-full flex items-center gap-2",
|
|
readingStatus.className
|
|
)}
|
|
>
|
|
<StatusIcon className="w-4 h-4" />
|
|
<span className="text-sm font-medium">{readingStatus.label}</span>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
|
<span>{series.booksCount} tomes</span>
|
|
<span>{series.booksReadCount} lus</span>
|
|
<span>{series.booksInProgressCount} en cours</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
{series.metadata.summary && (
|
|
<p className="text-muted-foreground line-clamp-3 max-w-2xl">
|
|
{series.metadata.summary}
|
|
</p>
|
|
)}
|
|
|
|
{/* Tags et genres */}
|
|
{(series.metadata.tags?.length > 0 || series.metadata.genres?.length > 0) && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{[...(series.metadata.genres || []), ...(series.metadata.tags || [])].map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="px-2 py-1 text-xs rounded-full bg-primary/10 text-primary-foreground"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|