refacto(images): component cover dans refacto services and routes

src/components/series/BookGrid.tsx

@@ -1,12 +1,8 @@
 "use client";
 
 import { KomgaBook } from "@/types/komga";
-import { ImageOff, Loader2 } from "lucide-react";
-import Image from "next/image";
-import { useState } from "react";
 import { formatDate } from "@/lib/utils";
-import { ImageLoader } from "@/components/ui/image-loader";
-import { cn } from "@/lib/utils";
+import { Cover } from "@/components/ui/cover";
 
 interface BookGridProps {
   books: KomgaBook[];
@@ -62,7 +58,12 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
             onClick={() => onBookClick(book)}
             className="group relative aspect-[2/3] overflow-hidden rounded-lg bg-muted hover:opacity-100 transition-all"
           >
-            <BookImage book={book} isCompleted={book.readProgress?.completed} />
+            <Cover
+              type="book"
+              id={book.id}
+              alt={`Couverture de ${book.metadata.title || `Tome ${book.metadata.number}`}`}
+              isCompleted={book.readProgress?.completed}
+            />
             <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-4 space-y-2 translate-y-full group-hover:translate-y-0 transition-transform duration-200">
               <p className="text-sm font-medium text-white text-left line-clamp-2">
                 {book.metadata.title || `Tome ${book.metadata.number}`}
@@ -79,131 +80,3 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
     </div>
   );
 }
-
-interface BookImageProps {
-  book: KomgaBook;
-  isCompleted?: boolean;
-}
-
-function BookImage({ book, isCompleted }: BookImageProps) {
-  const [imageError, setImageError] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-
-  if (imageError) {
-    return (
-      <div className="w-full h-full flex items-center justify-center">
-        <ImageOff className="w-12 h-12 text-muted-foreground" />
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <ImageLoader isLoading={isLoading} />
-      <Image
-        src={`/api/komga/images/books/${book.id}/pages/1`}
-        alt={`Couverture de ${book.metadata.title || `Tome ${book.metadata.number}`}`}
-        fill
-        className={cn(
-          "object-cover transition-opacity duration-300",
-          isLoading ? "opacity-0" : "opacity-100",
-          isCompleted && "opacity-50"
-        )}
-        sizes="(max-width: 640px) 33vw, (max-width: 1024px) 20vw, 20vw"
-        onError={() => setImageError(true)}
-        onLoad={() => setIsLoading(false)}
-        loading="lazy"
-        quality={80}
-        unoptimized
-        priority={false}
-        fetchPriority="low"
-      />
-    </>
-  );
-}
-
-interface BookCardProps {
-  book: KomgaBook;
-  onClick?: () => void;
-  getBookThumbnailUrl: (bookId: string) => string;
-}
-
-function BookCard({ book, onClick, getBookThumbnailUrl }: BookCardProps) {
-  const [imageError, setImageError] = useState(false);
-
-  const getReadingStatusInfo = () => {
-    if (!book.readProgress) {
-      return {
-        label: "Non lu",
-        className: "bg-yellow-500/10 text-yellow-500",
-      };
-    }
-
-    if (book.readProgress.completed) {
-      const readDate = book.readProgress.readDate ? formatDate(book.readProgress.readDate) : null;
-      return {
-        label: readDate ? `Lu le ${readDate}` : "Lu",
-        className: "bg-green-500/10 text-green-500",
-      };
-    }
-
-    if (book.readProgress.page > 0) {
-      return {
-        label: `Page ${book.readProgress.page}/${book.media.pagesCount}`,
-        className: "bg-blue-500/10 text-blue-500",
-      };
-    }
-
-    return {
-      label: "Non lu",
-      className: "bg-yellow-500/10 text-yellow-500",
-    };
-  };
-
-  const statusInfo = getReadingStatusInfo();
-
-  return (
-    <button
-      onClick={onClick}
-      className="group relative flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors overflow-hidden"
-    >
-      {/* Image de couverture */}
-      <div className="relative aspect-[2/3] bg-muted">
-        {!imageError ? (
-          <Image
-            src={getBookThumbnailUrl(book.id)}
-            alt={`Couverture de ${book.metadata.title}`}
-            fill
-            className="object-cover"
-            sizes="(max-width: 640px) 33vw, (max-width: 1024px) 16.666vw, 16.666vw"
-            onError={() => setImageError(true)}
-            loading="lazy"
-            quality={100}
-          />
-        ) : (
-          <div className="w-full h-full flex items-center justify-center">
-            <ImageOff className="w-12 w-12" />
-          </div>
-        )}
-      </div>
-
-      {/* Contenu */}
-      <div className="flex flex-col p-2">
-        <h3 className="font-medium line-clamp-2 text-sm">
-          {book.metadata.title || `Tome ${book.metadata.number}`}
-        </h3>
-        <div className="mt-1 text-xs text-muted-foreground space-y-1">
-          {book.metadata.releaseDate && (
-            <div>{new Date(book.metadata.releaseDate).toLocaleDateString()}</div>
-          )}
-          <div className="flex items-center">
-            <span className={`px-1.5 py-0.5 rounded-full text-[10px] ${statusInfo.className}`}>
-              {statusInfo.label}
-            </span>
-          </div>
-          {book.size && <div className="text-[10px]">{book.size}</div>}
-        </div>
-      </div>
-    </button>
-  );
-}

src/components/series/SeriesHeader.tsx

@@ -1,70 +1,30 @@
 "use client";
 
-import Image from "next/image";
-import { ImageOff, Book, BookOpen, BookMarked, Star, StarOff } from "lucide-react";
+import { 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";
-import { ImageLoader } from "@/components/ui/image-loader";
+import { Cover } from "@/components/ui/cover";
 
 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 [isLoading, setIsLoading] = useState(true);
   const [isFavorite, setIsFavorite] = useState(false);
-  const [mounted, setMounted] = useState(false);
-  const statusInfo = getReadingStatusInfo(series);
 
-  // Vérifier si la série est dans les favoris au chargement
   useEffect(() => {
+    // Vérifier si la série est dans les favoris
     const checkFavorite = async () => {
       try {
-        const response = await fetch("/api/komga/favorites");
+        const response = await fetch(`/api/komga/series/${series.id}/favorite`);
         if (response.ok) {
-          const favoriteIds = await response.json();
-          setIsFavorite(favoriteIds.includes(series.id));
+          const data = await response.json();
+          setIsFavorite(data.favorite);
         }
       } catch (error) {
         console.error("Erreur lors de la vérification des favoris:", error);
@@ -72,117 +32,94 @@ export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
     };
 
     checkFavorite();
-    setMounted(true);
   }, [series.id]);
 
-  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",
+      const response = await fetch(`/api/komga/series/${series.id}/favorite`, {
+        method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ seriesId: series.id }),
+        body: JSON.stringify({ favorite: !isFavorite }),
       });
 
-      if (!response.ok) {
+      if (response.ok) {
+        setIsFavorite(!isFavorite);
+        toast({
+          title: !isFavorite ? "Ajouté aux favoris" : "Retiré des favoris",
+          description: series.metadata.title,
+        });
+      } else {
         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) {
+      console.error("Erreur lors de la modification des favoris:", error);
       toast({
-        title: "Une erreur est survenue",
+        title: "Erreur",
+        description: "Impossible de modifier les favoris",
         variant: "destructive",
       });
-    } finally {
-      setIsLoading(false);
     }
   };
 
+  const getReadingStatusInfo = () => {
+    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: BookMarked,
+      };
+    }
+
+    if (booksInProgressCount > 0 || (booksReadCount > 0 && booksReadCount < booksCount)) {
+      return {
+        label: `${booksReadCount}/${booksCount}`,
+        className: "bg-blue-500/10 text-blue-500",
+        icon: BookOpen,
+      };
+    }
+
+    return {
+      label: "Non lu",
+      className: "bg-yellow-500/10 text-yellow-500",
+      icon: Book,
+    };
+  };
+
+  const statusInfo = getReadingStatusInfo();
+
   return (
     <div className="relative min-h-[300px] md:h-[300px] w-screen -ml-[calc((100vw-100%)/2)] overflow-hidden">
       {/* Image de fond */}
-      {!imageError ? (
-        <>
-          <ImageLoader isLoading={isLoading} />
-          <Image
-            src={`/api/komga/images/series/${series.id}/first-page`}
-            alt={`Couverture de ${series.metadata.title}`}
-            fill
-            className={cn(
-              "object-cover blur-sm scale-105 brightness-50 transition-opacity duration-300",
-              isLoading ? "opacity-0" : "opacity-100"
-            )}
-            sizes="100vw"
-            onError={() => setImageError(true)}
-            onLoad={() => setIsLoading(false)}
-            quality={60}
-            priority
-            unoptimized
-          />
-        </>
-      ) : (
-        <div className="absolute inset-0 bg-muted flex items-center justify-center">
-          <ImageOff className="w-12 h-12 text-muted-foreground" />
-        </div>
-      )}
+      <div className="absolute inset-0">
+        <Cover
+          type="series"
+          id={series.id}
+          alt={`Couverture de ${series.metadata.title}`}
+          className="blur-sm scale-105 brightness-50"
+          sizes="100vw"
+          quality={60}
+          priority
+        />
+      </div>
 
       {/* Contenu */}
       <div className="relative container mx-auto px-4 py-8">
         <div className="flex flex-col md:flex-row gap-6 items-center md:items-start w-full">
           {/* Image principale */}
           <div className="relative w-[180px] aspect-[2/3] rounded-lg overflow-hidden shadow-lg bg-muted flex-shrink-0">
-            {!imageError ? (
-              <>
-                <ImageLoader isLoading={isLoading} />
-                <Image
-                  src={`/api/komga/images/series/${series.id}/first-page`}
-                  alt={`Couverture de ${series.metadata.title}`}
-                  fill
-                  className={cn(
-                    "object-cover transition-opacity duration-300",
-                    isLoading ? "opacity-0" : "opacity-100"
-                  )}
-                  sizes="180px"
-                  onError={() => setImageError(true)}
-                  onLoad={() => setIsLoading(false)}
-                  quality={90}
-                  priority
-                  unoptimized
-                />
-              </>
-            ) : (
-              <div className="w-full h-full flex items-center justify-center">
-                <ImageOff className="w-12 h-12 text-muted-foreground" />
-              </div>
-            )}
+            <Cover
+              type="series"
+              id={series.id}
+              alt={`Couverture de ${series.metadata.title}`}
+              sizes="180px"
+              quality={90}
+              priority
+            />
           </div>
 
           {/* Informations */}