julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reacto(bookreader): split and correct bug in thumbnails

Browse Source
This commit is contained in:
Julien Froidefond
2025-02-16 14:29:16 +01:00
parent e2232fc405
commit 9b27c19f52
9 changed files with 640 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

613
src/components/reader/BookReader.tsx
View File

@@ -1,224 +1,43 @@
"use client";
import { KomgaBook } from "@/types/komga";
import {
ChevronLeft,
ChevronRight,
ImageOff,
Loader2,
LayoutTemplate,
SplitSquareVertical,
ChevronUp,
} from "lucide-react";
import Image from "next/image";
import { useEffect, useState, useCallback, useRef } from "react";
import { cn } from "@/lib/utils";
import { BookReaderProps } from "./types";
import { useOrientation } from "./hooks/useOrientation";
import { usePageNavigation } from "./hooks/usePageNavigation";
import { usePageCache } from "./hooks/usePageCache";
import { useState, useEffect, useCallback } from "react";
import { NavigationBar } from "./components/NavigationBar";
import { ControlButtons } from "./components/ControlButtons";
import { ImageLoader } from "@/components/ui/image-loader";
interface PageCache {
[pageNumber: number]: {
blob: Blob;
url: string;
timestamp: number;
loading?: Promise<void>;
};
}
interface BookReaderProps {
book: KomgaBook;
pages: number[];
onClose?: () => void;
}
// Ajout du hook pour détecter l'orientation
const useOrientation = () => {
const [isLandscape, setIsLandscape] = useState(false);
useEffect(() => {
const checkOrientation = () => {
// Vérifier si la fenêtre est plus large que haute
setIsLandscape(window.innerWidth > window.innerHeight);
};
// Vérification initiale
checkOrientation();
// Écouter les changements de taille de fenêtre
window.addEventListener("resize", checkOrientation);
return () => {
window.removeEventListener("resize", checkOrientation);
};
}, []);
return isLandscape;
};
import { cn } from "@/lib/utils";
export function BookReader({ book, pages, onClose }: BookReaderProps) {
const [currentPage, setCurrentPage] = useState(book.readProgress?.page || 1);
const [isLoading, setIsLoading] = useState(true);
const [secondPageLoading, setSecondPageLoading] = useState(true);
const [imageError, setImageError] = useState(false);
const [isDoublePage, setIsDoublePage] = useState(false);
const [showNavigation, setShowNavigation] = useState(false);
const [showControls, setShowControls] = useState(false);
const pageCache = useRef<PageCache>({});
const isLandscape = useOrientation();
// Ajout d'un état pour le chargement des miniatures
const [loadedThumbnails, setLoadedThumbnails] = useState<{ [key: number]: boolean }>({});
// Ajout d'un état pour les miniatures visibles
const [visibleThumbnails, setVisibleThumbnails] = useState<number[]>([]);
const thumbnailObserver = useRef<IntersectionObserver | null>(null);
const thumbnailRefs = useRef<{ [key: number]: HTMLButtonElement | null }>({});
// Effet pour synchroniser la progression initiale
useEffect(() => {
if (book.readProgress?.page) {
syncReadProgress(book.readProgress.page);
}
}, []);
// Fonction pour synchroniser la progression
const syncReadProgress = useCallback(
async (page: number) => {
try {
const completed = page === pages.length;
await fetch(`/api/komga/books/${book.id}/read-progress`, {
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ page, completed }),
});
} catch (error) {
console.error("Erreur lors de la synchronisation de la progression:", error);
}
},
[book.id, pages.length]
);
// Fonction pour déterminer si on doit afficher une ou deux pages
const shouldShowDoublePage = useCallback(
(pageNumber: number) => {
if (!isDoublePage) return false;
// Toujours afficher la première page seule (couverture)
if (pageNumber === 1) return false;
// Vérifier si on a une page suivante disponible
return pageNumber < pages.length;
},
[isDoublePage, pages.length]
);
const handlePreviousPage = useCallback(() => {
if (currentPage > 1) {
const newPage = isDoublePage && currentPage > 2 ? currentPage - 2 : currentPage - 1;
setCurrentPage(newPage);
setIsLoading(true);
setSecondPageLoading(true);
setImageError(false);
// Synchroniser la progression après un court délai
const timer = setTimeout(() => {
syncReadProgress(newPage);
}, 300);
return () => clearTimeout(timer);
}
}, [currentPage, isDoublePage, syncReadProgress]);
const handleNextPage = useCallback(() => {
if (currentPage < pages.length) {
const newPage = isDoublePage ? Math.min(currentPage + 2, pages.length) : currentPage + 1;
setCurrentPage(newPage);
setIsLoading(true);
setSecondPageLoading(true);
setImageError(false);
// Synchroniser la progression après un court délai
const timer = setTimeout(() => {
syncReadProgress(newPage);
}, 300);
return () => clearTimeout(timer);
}
}, [currentPage, pages.length, isDoublePage, syncReadProgress]);
// Réinitialiser l'état de chargement lors du changement de mode double page
useEffect(() => {
setIsLoading(true);
setSecondPageLoading(true);
}, [isDoublePage]);
// Fonction pour précharger une page
const preloadPage = useCallback(
async (pageNumber: number) => {
if (pageNumber > pages.length || pageNumber < 1) return;
// Si la page est déjà en cache, on ne fait rien
if (pageCache.current[pageNumber]?.url) return;
// Si la page est en cours de chargement, on attend
if (pageCache.current[pageNumber]?.loading) {
await pageCache.current[pageNumber].loading;
return;
}
// On crée une promesse pour le chargement
let resolveLoading: () => void;
const loadingPromise = new Promise<void>((resolve) => {
resolveLoading = resolve;
const {
currentPage,
setCurrentPage,
isLoading,
setIsLoading,
secondPageLoading,
setSecondPageLoading,
imageError,
setImageError,
handlePreviousPage,
handleNextPage,
shouldShowDoublePage,
syncReadProgress,
} = usePageNavigation({
book,
pages,
isDoublePage,
});
// On initialise l'entrée dans le cache avec la promesse de chargement
pageCache.current[pageNumber] = {
...pageCache.current[pageNumber],
loading: loadingPromise,
};
try {
const response = await fetch(`/api/komga/books/${book.id}/pages/${pageNumber}`);
const blob = await response.blob();
const url = URL.createObjectURL(blob);
pageCache.current[pageNumber] = {
blob,
url,
timestamp: Date.now(),
};
resolveLoading!();
} catch (error) {
console.error(`Erreur lors du préchargement de la page ${pageNumber}:`, error);
delete pageCache.current[pageNumber];
resolveLoading!();
}
},
[book.id, pages.length]
);
// Fonction pour obtenir l'URL d'une page
const getPageUrl = useCallback(
async (pageNumber: number) => {
// Si la page est dans le cache, utiliser l'URL du cache
if (pageCache.current[pageNumber]?.url) {
return pageCache.current[pageNumber].url;
}
// Si la page est en cours de chargement, attendre
if (pageCache.current[pageNumber]?.loading) {
await pageCache.current[pageNumber].loading;
return pageCache.current[pageNumber].url;
}
// Sinon, lancer le préchargement et attendre
await preloadPage(pageNumber);
return (
pageCache.current[pageNumber]?.url ||
`/api/komga/images/books/${book.id}/pages/${pageNumber}`
);
},
[book.id, preloadPage]
);
const { preloadPage, getPageUrl, cleanCache } = usePageCache({
book,
pages,
});
// État pour stocker les URLs des images
const [currentPageUrl, setCurrentPageUrl] = useState<string>("");
@@ -258,32 +77,6 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
};
}, [currentPage, isDoublePage, shouldShowDoublePage, getPageUrl]);
// Fonction pour obtenir l'URL d'une miniature
const getThumbnailUrl = useCallback(
(pageNumber: number) => {
return `/api/komga/images/books/${book.id}/pages/${pageNumber}/thumbnail`;
},
[book.id]
);
// Nettoyer le cache des pages trop anciennes
const cleanCache = useCallback(
(currentPageNumber: number) => {
const maxDistance = 8; // On garde plus de pages en cache
const minPage = Math.max(1, currentPageNumber - maxDistance);
const maxPage = Math.min(pages.length, currentPageNumber + maxDistance);
Object.entries(pageCache.current).forEach(([pageNum, cache]) => {
const page = parseInt(pageNum);
if (page < minPage || page > maxPage) {
URL.revokeObjectURL(cache.url);
delete pageCache.current[page];
}
});
},
[pages.length]
);
// Effet pour précharger la page courante et les pages adjacentes
useEffect(() => {
let isMounted = true;
@@ -291,32 +84,26 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
const preloadCurrentPages = async () => {
if (!isMounted) return;
// Précharger la page courante
await preloadPage(currentPage);
if (!isMounted) return;
// En mode double page, précharger la page suivante si nécessaire
if (isDoublePage && shouldShowDoublePage(currentPage)) {
await preloadPage(currentPage + 1);
}
if (!isMounted) return;
// Précharger les pages suivantes et précédentes
const pagesToPreload = [];
// Pages suivantes (max 4)
for (let i = 1; i <= 4 && currentPage + i <= pages.length; i++) {
pagesToPreload.push(currentPage + i);
}
// Pages précédentes (max 2)
for (let i = 1; i <= 2 && currentPage - i >= 1; i++) {
pagesToPreload.push(currentPage - i);
}
// Précharger en séquence pour éviter de surcharger
for (const page of pagesToPreload) {
if (!isMounted) break;
await preloadPage(page);
@@ -331,190 +118,50 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
};
}, [currentPage, isDoublePage, shouldShowDoublePage, preloadPage, cleanCache, pages.length]);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "ArrowLeft") {
handlePreviousPage();
} else if (event.key === "ArrowRight") {
handleNextPage();
} else if (event.key === "Escape" && onClose) {
onClose();
}
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [handlePreviousPage, handleNextPage, onClose]);
// Fonction pour marquer une miniature comme chargée
const handleThumbnailLoad = (pageNumber: number) => {
setLoadedThumbnails((prev) => ({ ...prev, [pageNumber]: true }));
};
// Effet pour scroller jusqu'à la miniature active
const scrollToActiveThumbnail = useCallback(() => {
const thumbnail = document.getElementById(`thumbnail-${currentPage}`);
if (thumbnail) {
thumbnail.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center",
});
}
}, [currentPage]);
// Effet pour centrer la miniature active quand les contrôles deviennent visibles
useEffect(() => {
if (showControls) {
scrollToActiveThumbnail();
}
}, [showControls, scrollToActiveThumbnail]);
// Effet pour centrer la miniature active au changement de page
useEffect(() => {
if (showControls) {
scrollToActiveThumbnail();
}
}, [currentPage, showControls, scrollToActiveThumbnail]);
// Fonction pour calculer les miniatures à afficher autour de la page courante
const updateVisibleThumbnails = useCallback(() => {
const windowSize = 20; // Nombre de miniatures à charger de chaque côté
const start = Math.max(1, currentPage - windowSize);
const end = Math.min(pages.length, currentPage + windowSize);
const visibleRange = Array.from({ length: end - start + 1 }, (_, i) => start + i);
setVisibleThumbnails(visibleRange);
}, [currentPage, pages.length]);
// Effet pour mettre à jour les miniatures visibles lors du changement de page
useEffect(() => {
updateVisibleThumbnails();
}, [currentPage, updateVisibleThumbnails]);
// Fonction pour observer les miniatures
const observeThumbnail = useCallback(
(pageNumber: number) => {
if (!thumbnailRefs.current[pageNumber]) return;
if (!thumbnailObserver.current) {
thumbnailObserver.current = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
const pageNumber = parseInt(entry.target.getAttribute("data-page") || "0");
if (entry.isIntersecting && !loadedThumbnails[pageNumber]) {
// Charger la miniature uniquement si elle devient visible
setLoadedThumbnails((prev) => ({ ...prev, [pageNumber]: false }));
}
});
},
{
root: document.getElementById("thumbnails-container"),
rootMargin: "50px",
threshold: 0.1,
}
);
}
thumbnailObserver.current.observe(thumbnailRefs.current[pageNumber]);
},
[loadedThumbnails]
);
// Nettoyer l'observer
useEffect(() => {
return () => {
if (thumbnailObserver.current) {
thumbnailObserver.current.disconnect();
}
};
}, []);
const [touchStart, setTouchStart] = useState<number | null>(null);
const [touchEnd, setTouchEnd] = useState<number | null>(null);
// Seuil minimum de déplacement pour déclencher un swipe
const minSwipeDistance = 50;
const onTouchStart = (e: React.TouchEvent) => {
setTouchEnd(null);
setTouchStart(e.targetTouches[0].clientX);
};
const onTouchMove = (e: React.TouchEvent) => {
setTouchEnd(e.targetTouches[0].clientX);
};
const onTouchEnd = () => {
if (!touchStart || !touchEnd) return;
const distance = touchStart - touchEnd;
const isLeftSwipe = distance > minSwipeDistance;
const isRightSwipe = distance < -minSwipeDistance;
if (isLeftSwipe && currentPage < pages.length) {
handleNextPage();
}
if (isRightSwipe && currentPage > 1) {
handlePreviousPage();
}
};
// Effet pour gérer le mode double page automatiquement en paysage
useEffect(() => {
setIsDoublePage(isLandscape);
}, [isLandscape]);
const handleThumbnailLoad = useCallback(
(pageNumber: number) => {
if (pageNumber === currentPage) {
setIsLoading(false);
} else if (pageNumber === currentPage + 1) {
setSecondPageLoading(false);
}
},
[currentPage]
);
const handlePageChange = useCallback(
(page: number) => {
setCurrentPage(page);
setIsLoading(true);
setImageError(false);
syncReadProgress(page);
},
[setCurrentPage, setIsLoading, setImageError, syncReadProgress]
);
return (
<div className="fixed inset-0 bg-background/95 backdrop-blur-sm z-50">
<div
className="relative h-full flex flex-col items-center justify-center"
onTouchStart={onTouchStart}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
onClick={() => setShowControls(!showControls)}
>
{/* Contenu principal */}
<div className="relative h-full w-full flex items-center justify-center">
{/* Boutons en haut */}
<div
className={cn(
"absolute top-4 left-4 flex items-center gap-2 z-30 transition-all duration-300",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
>
<button
onClick={(e) => {
e.stopPropagation();
setIsDoublePage(!isDoublePage);
}}
className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
aria-label={
isDoublePage ? "Désactiver le mode double page" : "Activer le mode double page"
}
>
{isDoublePage ? (
<LayoutTemplate className="h-6 w-6" />
) : (
<SplitSquareVertical className="h-6 w-6" />
)}
</button>
</div>
{/* Bouton précédent */}
{currentPage > 1 && (
<button
onClick={(e) => {
e.stopPropagation();
handlePreviousPage();
}}
className={cn(
"absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
aria-label="Page précédente"
>
<ChevronLeft className="h-8 w-8" />
</button>
)}
<ControlButtons
showControls={showControls}
onToggleControls={() => setShowControls(!showControls)}
onPreviousPage={handlePreviousPage}
onNextPage={handleNextPage}
onClose={onClose}
currentPage={currentPage}
totalPages={pages.length}
/>
{/* Pages */}
<div className="relative flex-1 flex items-center justify-center overflow-hidden p-1">
<div className="relative w-full h-[calc(100vh-2rem)] flex items-center justify-center">
@@ -529,10 +176,7 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
"max-h-full w-auto object-contain transition-opacity duration-300",
isLoading ? "opacity-0" : "opacity-100"
)}
onLoad={() => {
setIsLoading(false);
handleThumbnailLoad(currentPage);
}}
onLoad={() => handleThumbnailLoad(currentPage)}
/>
)}
</div>
@@ -549,139 +193,22 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
"max-h-full w-auto object-contain transition-opacity duration-300",
secondPageLoading ? "opacity-0" : "opacity-100"
)}
onLoad={() => {
setSecondPageLoading(false);
handleThumbnailLoad(currentPage + 1);
}}
onLoad={() => handleThumbnailLoad(currentPage + 1)}
/>
)}
</div>
)}
</div>
</div>
{/* Bouton suivant */}
{currentPage < pages.length && (
<button
onClick={(e) => {
e.stopPropagation();
handleNextPage();
}}
className={cn(
"absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
aria-label="Page suivante"
>
<ChevronRight className="h-8 w-8" />
</button>
)}
{/* Bouton fermer */}
{onClose && (
<button
onClick={(e) => {
e.stopPropagation();
onClose();
}}
className={cn(
"absolute top-4 right-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-30",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
aria-label="Fermer"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
</div>
<NavigationBar
currentPage={currentPage}
pages={pages}
onPageChange={handlePageChange}
showControls={showControls}
book={book}
/>
</svg>
</button>
)}
</div>
{/* Barre de navigation des pages */}
<div
className={cn(
"absolute bottom-0 left-0 right-0 bg-background/50 backdrop-blur-sm border-t border-border/40 transition-all duration-300 ease-in-out z-30",
showControls ? "h-64 opacity-100" : "h-0 opacity-0"
)}
>
{showControls && (
<>
<div
id="thumbnails-container"
className="h-full overflow-x-auto flex items-center gap-2 px-4 scroll-smooth snap-x snap-mandatory"
>
{/* Ajouter un élément vide au début pour le centrage */}
<div className="w-[calc(50vw-18rem)] flex-shrink-0" />
{pages.map((_, index) => {
const pageNumber = index + 1;
const isVisible = visibleThumbnails.includes(pageNumber);
return (
<button
key={pageNumber}
ref={(el) => {
thumbnailRefs.current[pageNumber] = el;
if (el) observeThumbnail(pageNumber);
}}
data-page={pageNumber}
id={`thumbnail-${pageNumber}`}
onClick={() => {
setCurrentPage(pageNumber);
setIsLoading(true);
setImageError(false);
syncReadProgress(pageNumber);
}}
className={`relative h-56 w-40 flex-shrink-0 rounded-md overflow-hidden transition-all cursor-pointer snap-center ${
currentPage === pageNumber
? "ring-2 ring-primary scale-110 z-10"
: "opacity-80 hover:opacity-100 hover:scale-105"
}`}
>
{isVisible && (
<>
<ImageLoader isLoading={!loadedThumbnails[pageNumber]} />
<Image
src={getThumbnailUrl(pageNumber)}
alt={`Miniature page ${pageNumber}`}
className={cn(
"object-cover transition-opacity duration-300",
!loadedThumbnails[pageNumber] ? "opacity-0" : "opacity-100"
)}
fill
sizes="100px"
onLoad={() => handleThumbnailLoad(pageNumber)}
loading="lazy"
quality={50}
/>
</>
)}
<div className="absolute bottom-0 inset-x-0 h-8 bg-gradient-to-t from-black/60 to-transparent flex items-center justify-center">
<span className="text-sm text-white font-medium">{pageNumber}</span>
</div>
</button>
);
})}
{/* Ajouter un élément vide à la fin pour le centrage */}
<div className="w-[calc(50vw-18rem)] flex-shrink-0" />
</div>
{/* Indicateur de page */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 rounded-full bg-background/50 text-sm">
Page {currentPage}
{shouldShowDoublePage(currentPage) ? `-${currentPage + 1}` : ""} / {pages.length}
</div>
</>
)}
</div>
</div>
</div>
);

107
src/components/reader/components/ControlButtons.tsx Normal file
View File

@@ -0,0 +1,107 @@
import { ControlButtonsProps } from "../types";
import { cn } from "@/lib/utils";
import { ChevronLeft, ChevronRight, LayoutTemplate, SplitSquareVertical } from "lucide-react";
export const ControlButtons = ({
showControls,
onPrevious,
onNext,
onClose,
currentPage,
totalPages,
isDoublePage,
onToggleDoublePage,
}: ControlButtonsProps) => {
return (
<>
{/* Boutons en haut */}
<div
className={cn(
"absolute top-4 left-4 flex items-center gap-2 z-30 transition-all duration-300",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
>
<button
onClick={(e) => {
e.stopPropagation();
onToggleDoublePage();
}}
className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
aria-label={
isDoublePage ? "Désactiver le mode double page" : "Activer le mode double page"
}
>
{isDoublePage ? (
<LayoutTemplate className="h-6 w-6" />
) : (
<SplitSquareVertical className="h-6 w-6" />
)}
</button>
</div>
{/* Bouton précédent */}
{currentPage > 1 && (
<button
onClick={(e) => {
e.stopPropagation();
onPrevious();
}}
className={cn(
"absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
aria-label="Page précédente"
>
<ChevronLeft className="h-8 w-8" />
</button>
)}
{/* Bouton suivant */}
{currentPage < totalPages && (
<button
onClick={(e) => {
e.stopPropagation();
onNext();
}}
className={cn(
"absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
aria-label="Page suivante"
>
<ChevronRight className="h-8 w-8" />
</button>
)}
{/* Bouton fermer */}
{onClose && (
<button
onClick={(e) => {
e.stopPropagation();
onClose();
}}
className={cn(
"absolute top-4 right-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-30",
showControls ? "opacity-100" : "opacity-0 pointer-events-none"
)}
aria-label="Fermer"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
)}
</>
);
};

71
src/components/reader/components/NavigationBar.tsx Normal file
View File

@@ -0,0 +1,71 @@
import { NavigationBarProps } from "../types";
import { cn } from "@/lib/utils";
import { Thumbnail } from "./Thumbnail";
import { useThumbnails } from "../hooks/useThumbnails";
import { useEffect } from "react";
export const NavigationBar = ({
currentPage,
pages,
onPageChange,
showControls,
book,
}: NavigationBarProps) => {
const {
loadedThumbnails,
handleThumbnailLoad,
getThumbnailUrl,
visibleThumbnails,
scrollToActiveThumbnail,
} = useThumbnails({
book,
currentPage,
});
useEffect(() => {
if (showControls) {
scrollToActiveThumbnail();
}
}, [showControls, currentPage, scrollToActiveThumbnail]);
return (
<div
className={cn(
"absolute bottom-0 left-0 right-0 bg-background/50 backdrop-blur-sm border-t border-border/40 transition-all duration-300 ease-in-out z-30",
showControls ? "h-64 opacity-100" : "h-0 opacity-0"
)}
>
{showControls && (
<>
<div
id="thumbnails-container"
className="h-full overflow-x-auto flex items-center gap-2 px-4 scroll-smooth snap-x snap-mandatory"
>
<div className="w-[calc(50vw-18rem)] flex-shrink-0" />
{pages.map((_, index) => {
const pageNumber = index + 1;
const isVisible = visibleThumbnails.includes(pageNumber);
return (
<Thumbnail
key={pageNumber}
pageNumber={pageNumber}
currentPage={currentPage}
onPageChange={onPageChange}
getThumbnailUrl={getThumbnailUrl}
loadedThumbnails={loadedThumbnails}
onThumbnailLoad={handleThumbnailLoad}
isVisible={isVisible}
/>
);
})}
<div className="w-[calc(50vw-18rem)] flex-shrink-0" />
</div>
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 rounded-full bg-background/50 text-sm">
Page {currentPage} / {pages.length}
</div>
</>
)}
</div>
);
};

76
src/components/reader/components/Thumbnail.tsx Normal file
View File

@@ -0,0 +1,76 @@
import { ThumbnailProps } from "../types";
import { ImageLoader } from "@/components/ui/image-loader";
import { cn } from "@/lib/utils";
import Image from "next/image";
import { forwardRef, useEffect, useState } from "react";
export const Thumbnail = forwardRef<HTMLButtonElement, ThumbnailProps>(
(
{
pageNumber,
currentPage,
onPageChange,
getThumbnailUrl,
loadedThumbnails,
onThumbnailLoad,
isVisible,
},
ref
) => {
const [imageUrl, setImageUrl] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (isVisible) {
const url = getThumbnailUrl(pageNumber);
setImageUrl(url);
if (!loadedThumbnails[pageNumber]) {
setIsLoading(true);
}
}
}, [isVisible, pageNumber, getThumbnailUrl, loadedThumbnails]);
const handleImageLoad = () => {
setIsLoading(false);
if (!loadedThumbnails[pageNumber]) {
onThumbnailLoad(pageNumber);
}
};
return (
<button
ref={ref}
data-page={pageNumber}
id={`thumbnail-${pageNumber}`}
onClick={() => onPageChange(pageNumber)}
className={`relative h-56 w-40 flex-shrink-0 rounded-md overflow-hidden transition-all cursor-pointer snap-center ${
currentPage === pageNumber
? "ring-2 ring-primary scale-110 z-10"
: "opacity-80 hover:opacity-100 hover:scale-105"
}`}
>
<ImageLoader isLoading={isLoading} />
{isVisible && imageUrl && (
<Image
src={imageUrl}
alt={`Miniature page ${pageNumber}`}
className={cn(
"object-cover transition-opacity duration-300",
isLoading ? "opacity-0" : "opacity-100"
)}
fill
sizes="100px"
loading="lazy"
quality={50}
onLoad={handleImageLoad}
/>
)}
<div className="absolute bottom-0 inset-x-0 h-8 bg-gradient-to-t from-black/60 to-transparent flex items-center justify-center">
<span className="text-sm text-white font-medium">{pageNumber}</span>
</div>
</button>
);
}
);
Thumbnail.displayName = "Thumbnail";

20
src/components/reader/hooks/useOrientation.ts Normal file
View File

@@ -0,0 +1,20 @@
import { useState, useEffect } from "react";
export const useOrientation = () => {
const [isLandscape, setIsLandscape] = useState(false);
useEffect(() => {
const checkOrientation = () => {
setIsLandscape(window.innerWidth > window.innerHeight);
};
checkOrientation();
window.addEventListener("resize", checkOrientation);
return () => {
window.removeEventListener("resize", checkOrientation);
};
}, []);
return isLandscape;
};

97
src/components/reader/hooks/usePageCache.ts Normal file
View File

@@ -0,0 +1,97 @@
import { useCallback, useRef } from "react";
import { PageCache } from "../types";
import { KomgaBook } from "@/types/komga";
interface UsePageCacheProps {
book: KomgaBook;
pages: number[];
}
export const usePageCache = ({ book, pages }: UsePageCacheProps) => {
const pageCache = useRef<PageCache>({});
const preloadPage = useCallback(
async (pageNumber: number) => {
if (pageNumber > pages.length || pageNumber < 1) return;
if (pageCache.current[pageNumber]?.url) return;
if (pageCache.current[pageNumber]?.loading) {
await pageCache.current[pageNumber].loading;
return;
}
let resolveLoading: () => void;
const loadingPromise = new Promise<void>((resolve) => {
resolveLoading = resolve;
});
pageCache.current[pageNumber] = {
...pageCache.current[pageNumber],
loading: loadingPromise,
};
try {
const response = await fetch(`/api/komga/books/${book.id}/pages/${pageNumber}`);
const blob = await response.blob();
const url = URL.createObjectURL(blob);
pageCache.current[pageNumber] = {
blob,
url,
timestamp: Date.now(),
};
resolveLoading!();
} catch (error) {
console.error(`Erreur lors du préchargement de la page ${pageNumber}:`, error);
delete pageCache.current[pageNumber];
resolveLoading!();
}
},
[book.id, pages.length]
);
const getPageUrl = useCallback(
async (pageNumber: number) => {
if (pageCache.current[pageNumber]?.url) {
return pageCache.current[pageNumber].url;
}
if (pageCache.current[pageNumber]?.loading) {
await pageCache.current[pageNumber].loading;
return pageCache.current[pageNumber].url;
}
await preloadPage(pageNumber);
return (
pageCache.current[pageNumber]?.url ||
`/api/komga/images/books/${book.id}/pages/${pageNumber}`
);
},
[book.id, preloadPage]
);
const cleanCache = useCallback(
(currentPageNumber: number) => {
const maxDistance = 8;
const minPage = Math.max(1, currentPageNumber - maxDistance);
const maxPage = Math.min(pages.length, currentPageNumber + maxDistance);
Object.entries(pageCache.current).forEach(([pageNum, cache]) => {
const page = parseInt(pageNum);
if (page < minPage || page > maxPage) {
URL.revokeObjectURL(cache.url);
delete pageCache.current[page];
}
});
},
[pages.length]
);
return {
preloadPage,
getPageUrl,
cleanCache,
};
};

105
src/components/reader/hooks/usePageNavigation.ts Normal file
View File

@@ -0,0 +1,105 @@
import { useState, useCallback, useEffect } from "react";
import { KomgaBook } from "@/types/komga";
interface UsePageNavigationProps {
book: KomgaBook;
pages: number[];
isDoublePage: boolean;
}
export const usePageNavigation = ({ book, pages, isDoublePage }: UsePageNavigationProps) => {
const [currentPage, setCurrentPage] = useState(book.readProgress?.page || 1);
const [isLoading, setIsLoading] = useState(true);
const [secondPageLoading, setSecondPageLoading] = useState(true);
const [imageError, setImageError] = useState(false);
const syncReadProgress = useCallback(
async (page: number) => {
try {
const completed = page === pages.length;
await fetch(`/api/komga/books/${book.id}/read-progress`, {
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ page, completed }),
});
} catch (error) {
console.error("Erreur lors de la synchronisation de la progression:", error);
}
},
[book.id, pages.length]
);
const shouldShowDoublePage = useCallback(
(pageNumber: number) => {
if (!isDoublePage) return false;
if (pageNumber === 1) return false;
return pageNumber < pages.length;
},
[isDoublePage, pages.length]
);
const handlePreviousPage = useCallback(() => {
if (currentPage > 1) {
const newPage = isDoublePage && currentPage > 2 ? currentPage - 2 : currentPage - 1;
setCurrentPage(newPage);
setIsLoading(true);
setSecondPageLoading(true);
setImageError(false);
const timer = setTimeout(() => {
syncReadProgress(newPage);
}, 300);
return () => clearTimeout(timer);
}
}, [currentPage, isDoublePage, syncReadProgress]);
const handleNextPage = useCallback(() => {
if (currentPage < pages.length) {
const newPage = isDoublePage ? Math.min(currentPage + 2, pages.length) : currentPage + 1;
setCurrentPage(newPage);
setIsLoading(true);
setSecondPageLoading(true);
setImageError(false);
const timer = setTimeout(() => {
syncReadProgress(newPage);
}, 300);
return () => clearTimeout(timer);
}
}, [currentPage, pages.length, isDoublePage, syncReadProgress]);
useEffect(() => {
setIsLoading(true);
setSecondPageLoading(true);
}, [isDoublePage]);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "ArrowLeft") {
handlePreviousPage();
} else if (event.key === "ArrowRight") {
handleNextPage();
}
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [handlePreviousPage, handleNextPage]);
return {
currentPage,
setCurrentPage,
isLoading,
setIsLoading,
secondPageLoading,
setSecondPageLoading,
imageError,
setImageError,
handlePreviousPage,
handleNextPage,
shouldShowDoublePage,
syncReadProgress,
};
};

51
src/components/reader/hooks/useThumbnails.ts Normal file
View File

@@ -0,0 +1,51 @@
import { useState, useCallback, useEffect } from "react";
import { KomgaBook } from "@/types/komga";
interface UseThumbnailsProps {
book: KomgaBook;
currentPage: number;
}
export const useThumbnails = ({ book, currentPage }: UseThumbnailsProps) => {
const [loadedThumbnails, setLoadedThumbnails] = useState<{ [key: number]: boolean }>({});
const [visibleThumbnails, setVisibleThumbnails] = useState<number[]>([]);
const handleThumbnailLoad = useCallback((pageNumber: number) => {
setLoadedThumbnails((prev) => ({ ...prev, [pageNumber]: true }));
}, []);
const getThumbnailUrl = useCallback(
(pageNumber: number) => {
return `/api/komga/images/books/${book.id}/pages/${pageNumber}/thumbnail`;
},
[book.id]
);
// Mettre à jour les thumbnails visibles autour de la page courante
useEffect(() => {
const windowSize = 10; // Nombre de pages à charger de chaque côté
const start = Math.max(1, currentPage - windowSize);
const end = currentPage + windowSize;
const newVisibleThumbnails = Array.from({ length: end - start + 1 }, (_, i) => start + i);
setVisibleThumbnails(newVisibleThumbnails);
}, [currentPage]);
const scrollToActiveThumbnail = useCallback(() => {
const thumbnail = document.getElementById(`thumbnail-${currentPage}`);
if (thumbnail) {
thumbnail.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center",
});
}
}, [currentPage]);
return {
loadedThumbnails,
handleThumbnailLoad,
getThumbnailUrl,
visibleThumbnails,
scrollToActiveThumbnail,
};
};

43
src/components/reader/types.ts Normal file
View File

@@ -0,0 +1,43 @@
import { KomgaBook } from "@/types/komga";
export interface PageCache {
[pageNumber: number]: {
blob: Blob;
url: string;
timestamp: number;
loading?: Promise<void>;
};
}
export interface BookReaderProps {
book: KomgaBook;
pages: number[];
onClose?: () => void;
}
export interface ThumbnailProps {
pageNumber: number;
currentPage: number;
onPageChange: (page: number) => void;
getThumbnailUrl: (pageNumber: number) => string;
loadedThumbnails: { [key: number]: boolean };
onThumbnailLoad: (pageNumber: number) => void;
isVisible: boolean;
}
export interface NavigationBarProps {
currentPage: number;
pages: number[];
onPageChange: (page: number) => void;
showControls: boolean;
book: KomgaBook;
}
export interface ControlButtonsProps {
showControls: boolean;
onToggleControls: () => void;
onPreviousPage: () => void;
onNextPage: () => void;
currentPage: number;
totalPages: number;
}