From 6cec8da8e2b8640f996995c785310e824fef14f1 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Wed, 12 Feb 2025 10:13:16 +0100
Subject: [PATCH] fix: correction des URLs des images et nettoyage du code

---
 src/components/series/SeriesHeader.tsx | 24 ++++++++++++++++++------
 src/lib/services/image.service.ts      |  2 +-
 src/lib/services/series.service.ts     |  4 ++--
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/series/SeriesHeader.tsx b/src/components/series/SeriesHeader.tsx
index 0e019cf..1e234ad 100644
--- a/src/components/series/SeriesHeader.tsx
+++ b/src/components/series/SeriesHeader.tsx
@@ -12,6 +12,7 @@ interface SeriesHeaderProps {
 
 export function SeriesHeader({ series, serverUrl }: SeriesHeaderProps) {
   const [languageDisplay, setLanguageDisplay] = useState<string>(series.metadata.language);
+  const [imageError, setImageError] = useState(false);
 
   useEffect(() => {
     try {
@@ -27,17 +28,28 @@ export function SeriesHeader({ series, serverUrl }: SeriesHeaderProps) {
     }
   }, [series.metadata.language]);
 
+  const getSeriesThumbnailUrl = (seriesId: string) => {
+    return `/api/komga/images/series/${seriesId}/thumbnail`;
+  };
+
   return (
     <div className="flex flex-col md:flex-row gap-8">
       {/* Couverture */}
       <div className="w-48 shrink-0">
         <div className="relative aspect-[2/3] rounded-lg overflow-hidden bg-muted">
-          <Image
-            src={`/api/komga/images/series/${series.id}/thumbnail`}
-            alt={`Couverture de ${series.metadata.title}`}
-            fill
-            className="object-cover"
-          />
+          {!imageError ? (
+            <Image
+              src={getSeriesThumbnailUrl(series.id)}
+              alt={`Couverture de ${series.metadata.title}`}
+              fill
+              className="object-cover"
+              onError={() => setImageError(true)}
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center">
+              <ImageOff className="w-12 h-12" />
+            </div>
+          )}
         </div>
       </div>
 
diff --git a/src/lib/services/image.service.ts b/src/lib/services/image.service.ts
index 6242887..1482a1e 100644
--- a/src/lib/services/image.service.ts
+++ b/src/lib/services/image.service.ts
@@ -9,7 +9,7 @@ export class ImageService extends BaseApiService {
   static async getImage(path: string): Promise<ImageResponse> {
     try {
       const config = await this.getKomgaConfig();
-      const url = this.buildUrl(config, path);
+      const url = `${config.serverUrl}${path}`;
       const headers = this.getAuthHeaders(config);
 
       // Ajout des headers pour accepter les images
diff --git a/src/lib/services/series.service.ts b/src/lib/services/series.service.ts
index 2a6626a..d3b7872 100644
--- a/src/lib/services/series.service.ts
+++ b/src/lib/services/series.service.ts
@@ -13,7 +13,7 @@ export class SeriesService extends BaseApiService {
       return this.fetchWithCache<Series>(
         `series-${seriesId}`,
         async () => this.fetchFromApi<Series>(url, headers),
-        5 * 60 // Cache de 5 minutes
+        "SERIES"
       );
     } catch (error) {
       return this.handleError(error, "Impossible de récupérer la série");
@@ -39,7 +39,7 @@ export class SeriesService extends BaseApiService {
       return this.fetchWithCache<LibraryResponse<KomgaBook>>(
         `series-${seriesId}-books-${page}-${size}-${unreadOnly}`,
         async () => this.fetchFromApi<LibraryResponse<KomgaBook>>(url, headers),
-        5 * 60 // Cache de 5 minutes
+        "BOOKS"
       );
     } catch (error) {
       return this.handleError(error, "Impossible de récupérer les tomes");