From 459a8c96f92648c082401ac34b771616ea470124 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Thu, 3 Apr 2025 10:21:43 +0200
Subject: [PATCH] feat: Image is always an unoptimized original

---
 src/components/home/MediaRow.tsx       |  7 +------
 src/components/library/SeriesGrid.tsx  |  2 --
 src/components/series/SeriesHeader.tsx |  2 --
 src/components/ui/book-cover.tsx       |  4 ----
 src/components/ui/cover-client.tsx     | 10 ++--------
 src/components/ui/series-cover.tsx     | 11 +----------
 6 files changed, 4 insertions(+), 32 deletions(-)

diff --git a/src/components/home/MediaRow.tsx b/src/components/home/MediaRow.tsx
index 0e85ab6..f5bed16 100644
--- a/src/components/home/MediaRow.tsx
+++ b/src/components/home/MediaRow.tsx
@@ -129,11 +129,7 @@ function MediaCard({ item, onClick }: MediaCardProps) {
       <div className="relative aspect-[2/3] bg-muted">
         {isSeries ? (
           <>
-            <SeriesCover
-              series={item as KomgaSeries}
-              alt={`Couverture de ${title}`}
-              quality={100}
-            />
+            <SeriesCover series={item as KomgaSeries} alt={`Couverture de ${title}`} />
             <div className="absolute inset-0 bg-black/60 opacity-0 hover:opacity-100 transition-opacity duration-200 flex flex-col justify-end p-3">
               <h3 className="font-medium text-sm text-white line-clamp-2">{title}</h3>
               <p className="text-xs text-white/80 mt-1">
@@ -146,7 +142,6 @@ function MediaCard({ item, onClick }: MediaCardProps) {
             <BookCover
               book={item as KomgaBook}
               alt={`Couverture de ${title}`}
-              quality={100}
               showControls={false}
               overlayVariant="home"
             />
diff --git a/src/components/library/SeriesGrid.tsx b/src/components/library/SeriesGrid.tsx
index cc521a2..b877d0d 100644
--- a/src/components/library/SeriesGrid.tsx
+++ b/src/components/library/SeriesGrid.tsx
@@ -77,8 +77,6 @@ export function SeriesGrid({ series, isCompact = false }: SeriesGridProps) {
           <SeriesCover
             series={series as KomgaSeries}
             alt={t("series.coverAlt", { title: series.metadata.title })}
-            quality={25}
-            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
           />
           <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">
             <h3 className="font-medium text-sm text-white line-clamp-2">{series.metadata.title}</h3>
diff --git a/src/components/series/SeriesHeader.tsx b/src/components/series/SeriesHeader.tsx
index c100855..0d558b4 100644
--- a/src/components/series/SeriesHeader.tsx
+++ b/src/components/series/SeriesHeader.tsx
@@ -126,7 +126,6 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
           series={series as KomgaSeries}
           alt={t("series.header.coverAlt", { title: series.metadata.title })}
           className="blur-sm scale-105 brightness-50"
-          quality={60}
           showProgressUi={false}
         />
       </div>
@@ -139,7 +138,6 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
             <SeriesCover
               series={series as KomgaSeries}
               alt={t("series.header.coverAlt", { title: series.metadata.title })}
-              quality={90}
               showProgressUi={false}
             />
           </div>
diff --git a/src/components/ui/book-cover.tsx b/src/components/ui/book-cover.tsx
index df5ddba..658cc37 100644
--- a/src/components/ui/book-cover.tsx
+++ b/src/components/ui/book-cover.tsx
@@ -51,8 +51,6 @@ export function BookCover({
   book,
   alt = "Image de couverture",
   className,
-  quality = 80,
-  sizes = "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
   showProgressUi = true,
   onSuccess,
   showControls = true,
@@ -88,8 +86,6 @@ export function BookCover({
           imageUrl={imageUrl}
           alt={alt}
           className={className}
-          quality={quality}
-          sizes={sizes}
           isCompleted={isCompleted}
         />
         {showProgress && <ProgressBar progress={currentPage} total={totalPages} type="book" />}
diff --git a/src/components/ui/cover-client.tsx b/src/components/ui/cover-client.tsx
index 64d07dc..682e308 100644
--- a/src/components/ui/cover-client.tsx
+++ b/src/components/ui/cover-client.tsx
@@ -10,8 +10,6 @@ interface CoverClientProps {
   imageUrl: string;
   alt: string;
   className?: string;
-  quality?: number;
-  sizes?: string;
   isCompleted?: boolean;
 }
 
@@ -19,8 +17,6 @@ export const CoverClient = ({
   imageUrl,
   alt,
   className,
-  quality = 80,
-  sizes = "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
   isCompleted = false,
 }: CoverClientProps) => {
   const [imageError, setImageError] = useState(false);
@@ -43,15 +39,13 @@ export const CoverClient = ({
         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}
+        loading="lazy"
+        unoptimized
       />
     </div>
   );
diff --git a/src/components/ui/series-cover.tsx b/src/components/ui/series-cover.tsx
index 6544bd3..04720ba 100644
--- a/src/components/ui/series-cover.tsx
+++ b/src/components/ui/series-cover.tsx
@@ -9,8 +9,6 @@ export function SeriesCover({
   series,
   alt = "Image de couverture",
   className,
-  quality = 80,
-  sizes = "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
   showProgressUi = true,
 }: SeriesCoverProps) {
   const imageUrl = getImageUrl("series", series.id);
@@ -22,14 +20,7 @@ export function SeriesCover({
 
   return (
     <div className="relative w-full h-full">
-      <CoverClient
-        imageUrl={imageUrl}
-        alt={alt}
-        className={className}
-        quality={quality}
-        sizes={sizes}
-        isCompleted={isCompleted}
-      />
+      <CoverClient imageUrl={imageUrl} alt={alt} className={className} isCompleted={isCompleted} />
       {showProgress && <ProgressBar progress={readBooks} total={totalBooks} type="series" />}
     </div>
   );