feat: perf optim search

src/app/layout.tsx

@@ -15,7 +15,7 @@ export const metadata: Metadata = {
   manifest: "/manifest.json",
   keywords: ["comics", "manga", "bd", "reader", "komga", "stripstream"],
   authors: [{ name: "Julien Froidefond" }],
-  colorScheme: "dark light",
+  // colorScheme: "dark light",
   formatDetection: {
     telephone: false,
   },

src/app/settings/page.tsx

@@ -7,10 +7,6 @@ export const metadata: Metadata = {
   description: "Configurez vos préférences StripStream",
 };
 
-export const viewport = {
-  colorScheme: "dark light",
-};
-
 export default async function SettingsPage() {
   let config = null;
   let ttlConfig = null;

src/components/home/HeroSection.tsx

@@ -1,10 +1,14 @@
-"use client";
-
-import { KomgaSeries } from "@/types/komga";
 import { Cover } from "@/components/ui/cover";
 
+interface OptimizedHeroSeries {
+  id: string;
+  metadata: {
+    title: string;
+  };
+}
+
 interface HeroSectionProps {
-  series: KomgaSeries[];
+  series: OptimizedHeroSeries[];
 }
 
 export function HeroSection({ series }: HeroSectionProps) {

src/components/home/HomeContent.tsx

@@ -1,9 +1,6 @@
-"use client";
-
 import { HeroSection } from "./HeroSection";
 import { MediaRow } from "./MediaRow";
 import { KomgaBook, KomgaSeries } from "@/types/komga";
-import { useRouter } from "next/navigation";
 
 interface HomeData {
   ongoing: KomgaSeries[];
@@ -16,13 +13,6 @@ interface HomeContentProps {
 }
 
 export function HomeContent({ data }: HomeContentProps) {
-  const router = useRouter();
-
-  const handleItemClick = async (item: KomgaSeries | KomgaBook) => {
-    const path = "booksCount" in item ? `/series/${item.id}` : `/books/${item.id}`;
-    await router.push(path);
-  };
-
   // Vérification des données pour le debug
   // console.log("HomeContent - Données reçues:", {
   //   ongoingCount: data.ongoing?.length || 0,
@@ -30,31 +20,50 @@ export function HomeContent({ data }: HomeContentProps) {
   //   onDeckCount: data.onDeck?.length || 0,
   // });
 
+  const optimizeSeriesData = (series: KomgaSeries[]) => {
+    return series.map(({ id, metadata, booksCount }) => ({
+      id,
+      metadata: { title: metadata.title },
+      booksCount,
+    }));
+  };
+
+  const optimizeHeroSeriesData = (series: KomgaSeries[]) => {
+    return series.map(({ id, metadata }) => ({
+      id,
+      metadata: { title: metadata.title },
+    }));
+  };
+
+  const optimizeBookData = (books: KomgaBook[]) => {
+    return books.map(({ id, metadata }) => ({
+      id,
+      metadata: {
+        title: metadata.title,
+        number: metadata.number,
+      },
+    }));
+  };
+
   return (
     <main className="container mx-auto px-4 py-8 space-y-12">
       {/* Hero Section - Afficher uniquement si nous avons des séries en cours */}
-      {data.ongoing && data.ongoing.length > 0 && <HeroSection series={data.ongoing} />}
+      {data.ongoing && data.ongoing.length > 0 && (
+        <HeroSection series={optimizeHeroSeriesData(data.ongoing)} />
+      )}
 
       {/* Sections de contenu */}
       <div className="space-y-12">
         {data.ongoing && data.ongoing.length > 0 && (
-          <MediaRow
+          <MediaRow title="Continuer la lecture" items={optimizeSeriesData(data.ongoing)} />
-            title="Continuer la lecture"
-            items={data.ongoing}
-            onItemClick={handleItemClick}
-          />
         )}
 
         {data.onDeck && data.onDeck.length > 0 && (
-          <MediaRow title="À suivre" items={data.onDeck} onItemClick={handleItemClick} />
+          <MediaRow title="À suivre" items={optimizeBookData(data.onDeck)} />
         )}
 
         {data.recentlyRead && data.recentlyRead.length > 0 && (
-          <MediaRow
+          <MediaRow title="Ajouts récents" items={optimizeBookData(data.recentlyRead)} />
-            title="Ajouts récents"
-            items={data.recentlyRead}
-            onItemClick={handleItemClick}
-          />
         )}
       </div>
     </main>

src/components/home/MediaRow.tsx

@@ -1,20 +1,43 @@
 "use client";
 
-import { KomgaBook, KomgaSeries } from "@/types/komga";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useRef, useState } from "react";
 import { Cover } from "@/components/ui/cover";
+import { useRouter } from "next/navigation";
+
+interface BaseItem {
+  id: string;
+  metadata: {
+    title: string;
+  };
+}
+
+interface OptimizedSeries extends BaseItem {
+  booksCount: number;
+}
+
+interface OptimizedBook extends BaseItem {
+  metadata: {
+    title: string;
+    number?: string;
+  };
+}
 
 interface MediaRowProps {
   title: string;
-  items: (KomgaSeries | KomgaBook)[];
+  items: (OptimizedSeries | OptimizedBook)[];
-  onItemClick?: (item: KomgaSeries | KomgaBook) => void;
 }
 
-export function MediaRow({ title, items, onItemClick }: MediaRowProps) {
+export function MediaRow({ title, items }: MediaRowProps) {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [showLeftArrow, setShowLeftArrow] = useState(false);
   const [showRightArrow, setShowRightArrow] = useState(true);
+  const router = useRouter();
+
+  const onItemClick = (item: OptimizedSeries | OptimizedBook) => {
+    const path = "booksCount" in item ? `/series/${item.id}` : `/books/${item.id}`;
+    router.push(path);
+  };
 
   const handleScroll = () => {
     if (!scrollContainerRef.current) return;
@@ -75,12 +98,11 @@ export function MediaRow({ title, items, onItemClick }: MediaRowProps) {
 }
 
 interface MediaCardProps {
-  item: KomgaSeries | KomgaBook;
+  item: OptimizedSeries | OptimizedBook;
   onClick?: () => void;
 }
 
 function MediaCard({ item, onClick }: MediaCardProps) {
-  // Déterminer si c'est une série ou un livre
   const isSeries = "booksCount" in item;
   const title = isSeries
     ? item.metadata.title

src/components/series/SeriesHeader.tsx

@@ -102,7 +102,6 @@ export const SeriesHeader = ({ series }: SeriesHeaderProps) => {
           alt={`Couverture de ${series.metadata.title}`}
           className="blur-sm scale-105 brightness-50"
           quality={60}
-          priority
         />
       </div>
 
@@ -116,7 +115,6 @@ export const SeriesHeader = ({ series }: SeriesHeaderProps) => {
               id={series.id}
               alt={`Couverture de ${series.metadata.title}`}
               quality={90}
-              priority
             />
           </div>
 

src/components/ui/cover-client.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { ImageOff } from "lucide-react";
+import Image from "next/image";
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import { ImageLoader } from "@/components/ui/image-loader";
+
+interface CoverClientProps {
+  imageUrl: string;
+  alt: string;
+  className?: string;
+  quality?: number;
+  sizes?: string;
+  isCompleted?: boolean;
+}
+
+export const CoverClient = ({
+  imageUrl,
+  alt,
+  className,
+  quality = 80,
+  sizes = "100vw",
+  isCompleted = false,
+}: CoverClientProps) => {
+  const [imageError, setImageError] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  if (imageError) {
+    return (
+      <div className="w-full h-full flex items-center justify-center bg-muted rounded-lg">
+        <ImageOff className="w-12 h-12 text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative w-full h-full">
+      <ImageLoader isLoading={isLoading} />
+      <Image
+        src={imageUrl}
+        alt={alt}
+        fill
+        className={cn(
+          "object-cover transition-opacity duration-300 rounded-lg",
+          isLoading ? "opacity-0" : "opacity-100",
+          isCompleted && "opacity-50",
+          className
+        )}
+        sizes={sizes}
+        onError={() => setImageError(true)}
+        onLoad={() => setIsLoading(false)}
+        loading={"lazy"}
+        quality={quality}
+      />
+    </div>
+  );
+};

src/components/ui/cover.tsx

@@ -1,101 +1,41 @@
-"use client";
+import { CoverClient } from "./cover-client";
-
-import { ImageOff } from "lucide-react";
-import Image from "next/image";
-import { useState, useEffect, useRef, useCallback } from "react";
-import { cn } from "@/lib/utils";
-import { ImageLoader } from "@/components/ui/image-loader";
 
 interface CoverProps {
   type: "series" | "book";
   id: string;
   alt?: string;
   className?: string;
-  priority?: boolean;
   quality?: number;
   sizes?: string;
   isCompleted?: boolean;
 }
 
+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({
   type,
   id,
   alt = "Image de couverture",
   className,
-  priority = false,
   quality = 80,
   sizes = "100vw",
   isCompleted = false,
 }: CoverProps) {
-  const [imageError, setImageError] = useState(false);
+  const imageUrl = getImageUrl(type, id);
-  const [isLoading, setIsLoading] = useState(true);
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
-  const coverRef = useRef<HTMLDivElement>(null);
-
-  const getImageUrl = useCallback(() => {
-    if (type === "series") {
-      return `/api/komga/images/series/${id}/thumbnail`;
-    }
-    return `/api/komga/images/books/${id}/thumbnail`;
-  }, [type, id]);
-
-  // Observer pour détecter quand la cover est dans le viewport
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting && !imageUrl) {
-            setImageUrl(getImageUrl());
-          }
-        });
-      },
-      {
-        rootMargin: "50px", // Préchargement avant que l'élément soit visible
-      }
-    );
-
-    const element = coverRef.current;
-    if (element) {
-      observer.observe(element);
-    }
-
-    return () => {
-      if (element) {
-        observer.unobserve(element);
-      }
-    };
-  }, [id, imageUrl, getImageUrl]);
-
-  if (imageError) {
-    return (
-      <div className="w-full h-full flex items-center justify-center bg-muted rounded-lg">
-        <ImageOff className="w-12 h-12 text-muted-foreground" />
-      </div>
-    );
-  }
 
   return (
-    <div ref={coverRef} className="relative w-full h-full">
+    <CoverClient
-      <ImageLoader isLoading={isLoading} />
+      imageUrl={imageUrl}
-      {imageUrl && (
+      alt={alt}
-        <Image
+      className={className}
-          src={imageUrl}
+      quality={quality}
-          alt={alt}
+      sizes={sizes}
-          fill
+      isCompleted={isCompleted}
-          className={cn(
+    />
-            "object-cover transition-opacity duration-300 rounded-lg",
-            isLoading ? "opacity-0" : "opacity-100",
-            isCompleted && "opacity-50",
-            className
-          )}
-          sizes={sizes}
-          onError={() => setImageError(true)}
-          onLoad={() => setIsLoading(false)}
-          loading={priority ? "eager" : "lazy"}
-          quality={quality}
-          priority={priority}
-        />
-      )}
-    </div>
   );
 }

src/lib/services/base-api.service.ts

@@ -73,13 +73,29 @@ export abstract class BaseApiService {
     return url.toString();
   }
 
-  protected static async fetchFromApi<T>(url: string, headers: Headers): Promise<T> {
+  protected static async fetchFromApi<T>(
+    url: string,
+    headers: Headers,
+    isImage: boolean = false
+  ): Promise<T> {
+    // const startTime = Date.now(); // Capture le temps de début
+
     const response = await fetch(url, { headers });
 
+    // const endTime = Date.now(); // Capture le temps de fin
+    // const responseTime = endTime - startTime; // Calcule le temps de réponse
+
+    // // Log le temps de réponse en ms ou en s
+    // if (responseTime >= 1000) {
+    //   console.log(`Temps de réponse pour ${url}: ${(responseTime / 1000).toFixed(2)}s`);
+    // } else {
+    //   console.log(`Temps de réponse pour ${url}: ${responseTime}ms`);
+    // }
+
     if (!response.ok) {
       throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`);
     }
 
-    return response.json();
+    return isImage ? response : response.json();
   }
 }

src/lib/services/book.service.ts

@@ -5,6 +5,7 @@ import { PreferencesService } from "./preferences.service";
 
 export class BookService extends BaseApiService {
   static async getBook(bookId: string): Promise<{ book: KomgaBook; pages: number[] }> {
+    console.log("dzadaz");
     try {
       const config = await this.getKomgaConfig();
       const headers = this.getAuthHeaders(config);
@@ -13,20 +14,16 @@ export class BookService extends BaseApiService {
         `book-${bookId}`,
         async () => {
           // Récupération des détails du tome
-          const bookResponse = await fetch(this.buildUrl(config, `books/${bookId}`), { headers });
+          const book = await this.fetchFromApi<KomgaBook>(
-          if (!bookResponse.ok) {
+            this.buildUrl(config, `books/${bookId}`),
-            throw new Error("Erreur lors de la récupération des détails du tome");
+            headers
-          }
+          );
-          const book = await bookResponse.json();
 
           // Récupération des pages du tome
-          const pagesResponse = await fetch(this.buildUrl(config, `books/${bookId}/pages`), {
+          const pages = await this.fetchFromApi<{ number: number }[]>(
-            headers,
+            this.buildUrl(config, `books/${bookId}/pages`),
-          });
+            headers
-          if (!pagesResponse.ok) {
+          );
-            throw new Error("Erreur lors de la récupération des pages du tome");
-          }
-          const pages = await pagesResponse.json();
 
           return {
             book,

src/lib/services/image.service.ts

@@ -16,12 +16,7 @@ export class ImageService extends BaseApiService {
       return this.fetchWithCache<ImageResponse>(
         `image-${path}`,
         async () => {
-          const response = await fetch(url, { headers });
+          const response = await this.fetchFromApi<Response>(url, headers, true);
-
-          if (!response.ok) {
-            throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`);
-          }
-
           const contentType = response.headers.get("content-type");
           const arrayBuffer = await response.arrayBuffer();
           const buffer = Buffer.from(arrayBuffer);

src/lib/services/series.service.ts

@@ -57,12 +57,10 @@ export class SeriesService extends BaseApiService {
       return this.fetchWithCache<string>(
         `series-first-book-${seriesId}`,
         async () => {
-          const response = await fetch(`${url}?page=0&size=1`, { headers });
+          const data = await this.fetchFromApi<LibraryResponse<KomgaBook>>(
-          if (!response.ok) {
+            `series/${seriesId}/books?page=0&size=1`,
-            throw new Error(`Erreur HTTP: ${response.status}`);
+            headers
-          }
+          );
-
-          const data = await response.json();
           if (!data.content || data.content.length === 0) {
             throw new Error("Aucun livre trouvé dans la série");
           }