feat: integrate PhotoswipeReader component and remove BookReader for enhanced reading experience; add zoom functionality to control buttons
This commit is contained in:
Julien Froidefond
@@ -1,158 +0,0 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
"use client";
|
||||
|
||||
import type { BookReaderProps } from "./types";
|
||||
import { useOrientation } from "./hooks/useOrientation";
|
||||
import { usePageNavigation } from "./hooks/usePageNavigation";
|
||||
import { usePageCache } from "./hooks/usePageCache";
|
||||
import { usePageUrls } from "./hooks/usePageUrls";
|
||||
import { usePreloadPages } from "./hooks/usePreloadPages";
|
||||
import { useFullscreen } from "./hooks/useFullscreen";
|
||||
import { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { NavigationBar } from "./components/NavigationBar";
|
||||
import { ControlButtons } from "./components/ControlButtons";
|
||||
import { ReaderContent } from "./components/ReaderContent";
|
||||
import { useReadingDirection } from "./hooks/useReadingDirection";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
|
||||
export function BookReader({ book, pages, onClose, nextBook }: BookReaderProps) {
|
||||
const [isDoublePage, setIsDoublePage] = useState(false);
|
||||
const [showControls, setShowControls] = useState(false);
|
||||
const [showThumbnails, setShowThumbnails] = useState(false);
|
||||
const [isZoomed, setIsZoomed] = useState(false);
|
||||
const readerRef = useRef<HTMLDivElement>(null);
|
||||
const isLandscape = useOrientation();
|
||||
const { direction, toggleDirection, isRTL } = useReadingDirection();
|
||||
const { isFullscreen, toggleFullscreen } = useFullscreen();
|
||||
const { t } = useTranslate();
|
||||
|
||||
const {
|
||||
currentPage,
|
||||
navigateToPage,
|
||||
isLoading,
|
||||
setIsLoading,
|
||||
secondPageLoading,
|
||||
setSecondPageLoading,
|
||||
handlePreviousPage,
|
||||
handleNextPage,
|
||||
shouldShowDoublePage,
|
||||
showEndMessage,
|
||||
} = usePageNavigation({
|
||||
book,
|
||||
pages,
|
||||
isDoublePage,
|
||||
onClose,
|
||||
direction,
|
||||
nextBook,
|
||||
isZoomed,
|
||||
});
|
||||
|
||||
const { preloadPage, getPageUrl, cleanCache } = usePageCache({
|
||||
book,
|
||||
pages,
|
||||
});
|
||||
|
||||
const { currentPageUrl, nextPageUrl } = usePageUrls({
|
||||
currentPage,
|
||||
isDoublePage,
|
||||
shouldShowDoublePage,
|
||||
getPageUrl,
|
||||
setIsLoading,
|
||||
setSecondPageLoading,
|
||||
});
|
||||
|
||||
usePreloadPages({
|
||||
currentPage,
|
||||
totalPages: pages.length,
|
||||
isDoublePage,
|
||||
shouldShowDoublePage,
|
||||
preloadPage,
|
||||
cleanCache,
|
||||
});
|
||||
|
||||
// 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, setIsLoading, setSecondPageLoading]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={readerRef}
|
||||
className="fixed inset-0 bg-background/95 backdrop-blur-sm z-50 overflow-hidden touch-none"
|
||||
>
|
||||
<div
|
||||
className="relative h-full flex flex-col items-center justify-center"
|
||||
onClick={() => setShowControls(!showControls)}
|
||||
>
|
||||
<div className="relative h-full w-full flex items-center justify-center">
|
||||
{showEndMessage && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-50">
|
||||
<div className="bg-background/80 backdrop-blur-md border rounded-lg shadow-lg p-6 max-w-md text-center">
|
||||
<h3 className="text-lg font-semibold mb-2">{t("reader.endOfSeries")}</h3>
|
||||
<p className="text-muted-foreground mb-4">{t("reader.endOfSeriesMessage")}</p>
|
||||
<button
|
||||
onClick={() => onClose?.(currentPage)}
|
||||
className="px-4 py-2 bg-primary/90 backdrop-blur-md text-primary-foreground rounded-md hover:bg-primary/80 transition-colors"
|
||||
>
|
||||
{t("reader.backToSeries")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ControlButtons
|
||||
showControls={showControls}
|
||||
onToggleControls={() => setShowControls(!showControls)}
|
||||
onPreviousPage={handlePreviousPage}
|
||||
onNextPage={handleNextPage}
|
||||
onPageChange={navigateToPage}
|
||||
onClose={onClose}
|
||||
currentPage={currentPage}
|
||||
totalPages={pages.length}
|
||||
isDoublePage={isDoublePage}
|
||||
onToggleDoublePage={() => setIsDoublePage(!isDoublePage)}
|
||||
isFullscreen={isFullscreen}
|
||||
onToggleFullscreen={() => toggleFullscreen(readerRef.current)}
|
||||
direction={direction}
|
||||
onToggleDirection={toggleDirection}
|
||||
showThumbnails={showThumbnails}
|
||||
onToggleThumbnails={() => setShowThumbnails(!showThumbnails)}
|
||||
/>
|
||||
|
||||
<ReaderContent
|
||||
currentPage={currentPage}
|
||||
currentPageUrl={currentPageUrl}
|
||||
nextPageUrl={nextPageUrl}
|
||||
isLoading={isLoading}
|
||||
secondPageLoading={secondPageLoading}
|
||||
isDoublePage={isDoublePage}
|
||||
shouldShowDoublePage={shouldShowDoublePage}
|
||||
isRTL={isRTL}
|
||||
onThumbnailLoad={handleThumbnailLoad}
|
||||
onZoomChange={setIsZoomed}
|
||||
/>
|
||||
|
||||
<NavigationBar
|
||||
currentPage={currentPage}
|
||||
pages={pages}
|
||||
onPageChange={navigateToPage}
|
||||
showControls={showControls}
|
||||
showThumbnails={showThumbnails}
|
||||
book={book}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import type { KomgaBook } from "@/types/komga";
|
||||
import { BookReader } from "./BookReader";
|
||||
import { PhotoswipeReader } from "./PhotoswipeReader";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface ClientBookReaderProps {
|
||||
@@ -26,7 +26,7 @@ export function ClientBookReader({ book, pages }: ClientBookReaderProps) {
|
||||
};
|
||||
|
||||
if (isReading) {
|
||||
return <BookReader book={book} pages={pages} onClose={handleCloseReader} />;
|
||||
return <PhotoswipeReader book={book} pages={pages} onClose={handleCloseReader} />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import type { KomgaBook } from "@/types/komga";
|
||||
import { BookReader } from "./BookReader";
|
||||
import { PhotoswipeReader } from "./PhotoswipeReader";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
|
||||
|
||||
@@ -23,5 +23,5 @@ export function ClientBookWrapper({ book, pages, nextBook }: ClientBookWrapperPr
|
||||
//router.back();
|
||||
};
|
||||
|
||||
return <BookReader book={book} pages={pages} onClose={handleCloseReader} nextBook={nextBook} />;
|
||||
return <PhotoswipeReader book={book} pages={pages} onClose={handleCloseReader} nextBook={nextBook} />;
|
||||
}
|
||||
|
||||
407
src/components/reader/PhotoswipeReader.tsx
Normal file
407
src/components/reader/PhotoswipeReader.tsx
Normal file
@@ -0,0 +1,407 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState, useCallback } from "react";
|
||||
import PhotoSwipe from "photoswipe";
|
||||
import "photoswipe/style.css";
|
||||
import type { BookReaderProps } from "./types";
|
||||
import { useOrientation } from "./hooks/useOrientation";
|
||||
import { useFullscreen } from "./hooks/useFullscreen";
|
||||
import { useReadingDirection } from "./hooks/useReadingDirection";
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
import { ControlButtons } from "./components/ControlButtons";
|
||||
import { NavigationBar } from "./components/NavigationBar";
|
||||
import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderProps) {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslate();
|
||||
const readerRef = useRef<HTMLDivElement>(null);
|
||||
const pswpRef = useRef<PhotoSwipe | null>(null);
|
||||
const [currentPage, setCurrentPage] = useState(() => {
|
||||
const saved = ClientOfflineBookService.getCurrentPage(book);
|
||||
return saved < 1 ? 1 : saved;
|
||||
});
|
||||
const [isDoublePage, setIsDoublePage] = useState(false);
|
||||
const [showControls, setShowControls] = useState(false);
|
||||
const [showThumbnails, setShowThumbnails] = useState(false);
|
||||
const [showEndMessage, setShowEndMessage] = useState(false);
|
||||
const [loadedImages, setLoadedImages] = useState<Record<number, { width: number; height: number }>>({});
|
||||
const isLandscape = useOrientation();
|
||||
const { direction, toggleDirection, isRTL } = useReadingDirection();
|
||||
const { isFullscreen, toggleFullscreen } = useFullscreen();
|
||||
const syncTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const touchStartXRef = useRef<number | null>(null);
|
||||
const touchStartYRef = useRef<number | null>(null);
|
||||
const isPinchingRef = useRef(false);
|
||||
|
||||
// Auto double page en paysage
|
||||
useEffect(() => {
|
||||
setIsDoublePage(isLandscape);
|
||||
}, [isLandscape]);
|
||||
|
||||
const shouldShowDoublePage = useCallback(
|
||||
(pageNumber: number) => {
|
||||
const isMobile = window.innerHeight < 700;
|
||||
if (isMobile) return false;
|
||||
if (!isDoublePage) return false;
|
||||
if (pageNumber === 1) return false;
|
||||
return pageNumber < pages.length;
|
||||
},
|
||||
[isDoublePage, pages.length]
|
||||
);
|
||||
|
||||
// Sync progress
|
||||
const syncReadProgress = useCallback(
|
||||
async (page: number) => {
|
||||
try {
|
||||
ClientOfflineBookService.setCurrentPage(book, page);
|
||||
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("Sync error:", error);
|
||||
}
|
||||
},
|
||||
[book, pages.length]
|
||||
);
|
||||
|
||||
const debouncedSync = useCallback(
|
||||
(page: number) => {
|
||||
if (syncTimeoutRef.current) {
|
||||
clearTimeout(syncTimeoutRef.current);
|
||||
}
|
||||
syncTimeoutRef.current = setTimeout(() => syncReadProgress(page), 2000);
|
||||
},
|
||||
[syncReadProgress]
|
||||
);
|
||||
|
||||
const navigateToPage = useCallback(
|
||||
(page: number) => {
|
||||
if (page >= 1 && page <= pages.length) {
|
||||
setCurrentPage(page);
|
||||
debouncedSync(page);
|
||||
}
|
||||
},
|
||||
[pages.length, debouncedSync]
|
||||
);
|
||||
|
||||
const handlePreviousPage = useCallback(() => {
|
||||
if (currentPage === 1) return;
|
||||
const step = isDoublePage && shouldShowDoublePage(currentPage - 2) ? 2 : 1;
|
||||
navigateToPage(Math.max(1, currentPage - step));
|
||||
}, [currentPage, isDoublePage, navigateToPage, shouldShowDoublePage]);
|
||||
|
||||
const handleNextPage = useCallback(() => {
|
||||
if (currentPage === pages.length) {
|
||||
if (nextBook) {
|
||||
router.push(`/books/${nextBook.id}`);
|
||||
return;
|
||||
}
|
||||
setShowEndMessage(true);
|
||||
return;
|
||||
}
|
||||
const step = isDoublePage && shouldShowDoublePage(currentPage) ? 2 : 1;
|
||||
navigateToPage(Math.min(pages.length, currentPage + step));
|
||||
}, [currentPage, pages.length, isDoublePage, shouldShowDoublePage, navigateToPage, nextBook, router]);
|
||||
|
||||
// Touch handlers for swipe navigation
|
||||
const handleTouchStart = useCallback((e: TouchEvent) => {
|
||||
// Ne pas gérer si Photoswipe est ouvert
|
||||
if (pswpRef.current) return;
|
||||
|
||||
// Détecter si c'est un pinch (2+ doigts)
|
||||
if (e.touches.length > 1) {
|
||||
isPinchingRef.current = true;
|
||||
touchStartXRef.current = null;
|
||||
touchStartYRef.current = null;
|
||||
return;
|
||||
}
|
||||
|
||||
isPinchingRef.current = false;
|
||||
touchStartXRef.current = e.touches[0].clientX;
|
||||
touchStartYRef.current = e.touches[0].clientY;
|
||||
}, []);
|
||||
|
||||
const handleTouchEnd = useCallback((e: TouchEvent) => {
|
||||
// Ignorer si c'était un pinch
|
||||
if (isPinchingRef.current) {
|
||||
isPinchingRef.current = false;
|
||||
touchStartXRef.current = null;
|
||||
touchStartYRef.current = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (touchStartXRef.current === null || touchStartYRef.current === null) return;
|
||||
if (pswpRef.current) return; // Ne pas gérer si Photoswipe est ouvert
|
||||
|
||||
const touchEndX = e.changedTouches[0].clientX;
|
||||
const touchEndY = e.changedTouches[0].clientY;
|
||||
const deltaX = touchEndX - touchStartXRef.current;
|
||||
const deltaY = touchEndY - touchStartYRef.current;
|
||||
|
||||
// Si le déplacement vertical est plus important, on ignore (scroll)
|
||||
if (Math.abs(deltaY) > Math.abs(deltaX)) {
|
||||
touchStartXRef.current = null;
|
||||
touchStartYRef.current = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// Seuil de 100px pour changer de page
|
||||
if (Math.abs(deltaX) > 100) {
|
||||
if (deltaX > 0) {
|
||||
// Swipe vers la droite
|
||||
if (isRTL) {
|
||||
handleNextPage();
|
||||
} else {
|
||||
handlePreviousPage();
|
||||
}
|
||||
} else {
|
||||
// Swipe vers la gauche
|
||||
if (isRTL) {
|
||||
handlePreviousPage();
|
||||
} else {
|
||||
handleNextPage();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
touchStartXRef.current = null;
|
||||
touchStartYRef.current = null;
|
||||
}, [handleNextPage, handlePreviousPage, isRTL]);
|
||||
|
||||
// Keyboard & Touch events
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "ArrowLeft") {
|
||||
e.preventDefault();
|
||||
if (isRTL) {
|
||||
handleNextPage();
|
||||
} else {
|
||||
handlePreviousPage();
|
||||
}
|
||||
} else if (e.key === "ArrowRight") {
|
||||
e.preventDefault();
|
||||
if (isRTL) {
|
||||
handlePreviousPage();
|
||||
} else {
|
||||
handleNextPage();
|
||||
}
|
||||
} else if (e.key === "Escape" && onClose) {
|
||||
e.preventDefault();
|
||||
onClose(currentPage);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
window.addEventListener("touchstart", handleTouchStart);
|
||||
window.addEventListener("touchend", handleTouchEnd);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleKeyDown);
|
||||
window.removeEventListener("touchstart", handleTouchStart);
|
||||
window.removeEventListener("touchend", handleTouchEnd);
|
||||
};
|
||||
}, [handleNextPage, handlePreviousPage, handleTouchStart, handleTouchEnd, onClose, isRTL, currentPage]);
|
||||
|
||||
// Cleanup
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (syncTimeoutRef.current) {
|
||||
clearTimeout(syncTimeoutRef.current);
|
||||
syncReadProgress(currentPage);
|
||||
}
|
||||
ClientOfflineBookService.removeCurrentPage(book);
|
||||
};
|
||||
}, [syncReadProgress, book, currentPage]);
|
||||
|
||||
const getPageUrl = useCallback((pageNum: number) => `/api/komga/books/${book.id}/pages/${pageNum}`, [book.id]);
|
||||
|
||||
// Load image dimensions
|
||||
const loadImageDimensions = useCallback((pageNum: number) => {
|
||||
if (loadedImages[pageNum]) return;
|
||||
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
setLoadedImages(prev => ({
|
||||
...prev,
|
||||
[pageNum]: { width: img.naturalWidth, height: img.naturalHeight }
|
||||
}));
|
||||
};
|
||||
img.src = getPageUrl(pageNum);
|
||||
}, [loadedImages, getPageUrl]);
|
||||
|
||||
// Preload current and next pages dimensions
|
||||
useEffect(() => {
|
||||
loadImageDimensions(currentPage);
|
||||
if (isDoublePage && shouldShowDoublePage(currentPage)) {
|
||||
loadImageDimensions(currentPage + 1);
|
||||
}
|
||||
// Preload next
|
||||
if (currentPage < pages.length) {
|
||||
loadImageDimensions(currentPage + 1);
|
||||
if (isDoublePage && currentPage + 1 < pages.length) {
|
||||
loadImageDimensions(currentPage + 2);
|
||||
}
|
||||
}
|
||||
}, [currentPage, isDoublePage, shouldShowDoublePage, loadImageDimensions, pages.length]);
|
||||
|
||||
// Handle zoom via button
|
||||
const handleZoom = useCallback(() => {
|
||||
const dims = loadedImages[currentPage];
|
||||
if (!dims) return;
|
||||
|
||||
const dataSource = [{
|
||||
src: getPageUrl(currentPage),
|
||||
width: dims.width,
|
||||
height: dims.height,
|
||||
alt: `Page ${currentPage}`
|
||||
}];
|
||||
|
||||
// Close any existing instance
|
||||
if (pswpRef.current) {
|
||||
pswpRef.current.close();
|
||||
}
|
||||
|
||||
// Create and open PhotoSwipe
|
||||
const pswp = new PhotoSwipe({
|
||||
dataSource,
|
||||
index: 0,
|
||||
bgOpacity: 0.9,
|
||||
showHideAnimationType: 'fade',
|
||||
initialZoomLevel: 0.25,
|
||||
secondaryZoomLevel: 0.5, // Niveau de zoom au double-clic
|
||||
maxZoomLevel: 4,
|
||||
clickToCloseNonZoomable: true, // Ferme au clic simple
|
||||
tapAction: 'zoom', // Ferme au tap
|
||||
wheelToZoom: true,
|
||||
pinchToClose: false, // Pinch pour fermer
|
||||
closeOnVerticalDrag: true, // Swipe vertical pour fermer
|
||||
escKey: true, // ESC ferme le zoom
|
||||
arrowKeys: false, // On gère les flèches nous-mêmes
|
||||
});
|
||||
|
||||
pswpRef.current = pswp;
|
||||
pswp.init();
|
||||
|
||||
// Clean up on close
|
||||
pswp.on('close', () => {
|
||||
pswpRef.current = null;
|
||||
});
|
||||
}, [loadedImages, currentPage, getPageUrl]);
|
||||
|
||||
// Cleanup PhotoSwipe on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (pswpRef.current) {
|
||||
pswpRef.current.close();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={readerRef}
|
||||
className="fixed inset-0 bg-background/95 backdrop-blur-sm z-50 overflow-hidden"
|
||||
onClick={() => setShowControls(!showControls)}
|
||||
>
|
||||
<div className="relative h-full flex flex-col items-center justify-center">
|
||||
{showEndMessage && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-50">
|
||||
<div className="bg-background/80 backdrop-blur-md border rounded-lg shadow-lg p-6 max-w-md text-center">
|
||||
<h3 className="text-lg font-semibold mb-2">{t("reader.endOfSeries")}</h3>
|
||||
<p className="text-muted-foreground mb-4">{t("reader.endOfSeriesMessage")}</p>
|
||||
<button
|
||||
onClick={() => onClose?.(currentPage)}
|
||||
className="px-4 py-2 bg-primary/90 backdrop-blur-md text-primary-foreground rounded-md hover:bg-primary/80 transition-colors"
|
||||
>
|
||||
{t("reader.backToSeries")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ControlButtons
|
||||
showControls={showControls}
|
||||
onToggleControls={() => setShowControls(!showControls)}
|
||||
onPreviousPage={handlePreviousPage}
|
||||
onNextPage={handleNextPage}
|
||||
onPageChange={navigateToPage}
|
||||
onClose={onClose}
|
||||
currentPage={currentPage}
|
||||
totalPages={pages.length}
|
||||
isDoublePage={isDoublePage}
|
||||
onToggleDoublePage={() => setIsDoublePage(!isDoublePage)}
|
||||
isFullscreen={isFullscreen}
|
||||
onToggleFullscreen={() => toggleFullscreen(readerRef.current)}
|
||||
direction={direction}
|
||||
onToggleDirection={toggleDirection}
|
||||
showThumbnails={showThumbnails}
|
||||
onToggleThumbnails={() => setShowThumbnails(!showThumbnails)}
|
||||
onZoom={handleZoom}
|
||||
/>
|
||||
|
||||
{/* Reader content */}
|
||||
<div className="relative flex-1 flex items-center justify-center overflow-hidden w-full">
|
||||
<div className="relative w-full h-[calc(100vh-2rem)] flex items-center justify-center gap-1">
|
||||
{/* Page 1 */}
|
||||
<div
|
||||
className={cn(
|
||||
"relative h-full flex items-center",
|
||||
isDoublePage && shouldShowDoublePage(currentPage)
|
||||
? "w-1/2"
|
||||
: "w-full justify-center",
|
||||
isDoublePage && shouldShowDoublePage(currentPage) && {
|
||||
"order-2 justify-start": isRTL,
|
||||
"order-1 justify-end": !isRTL,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={getPageUrl(currentPage)}
|
||||
alt={`Page ${currentPage}`}
|
||||
className="max-h-full max-w-full object-contain transition-opacity"
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Page 2 (double page) */}
|
||||
{isDoublePage && shouldShowDoublePage(currentPage) && (
|
||||
<div
|
||||
className={cn(
|
||||
"relative h-full w-1/2 flex items-center",
|
||||
{
|
||||
"order-1 justify-end": isRTL,
|
||||
"order-2 justify-start": !isRTL,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={getPageUrl(currentPage + 1)}
|
||||
alt={`Page ${currentPage + 1}`}
|
||||
className="max-h-full max-w-full object-contain transition-opacity"
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NavigationBar
|
||||
currentPage={currentPage}
|
||||
pages={pages}
|
||||
onPageChange={navigateToPage}
|
||||
showControls={showControls}
|
||||
showThumbnails={showThumbnails}
|
||||
book={book}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
MoveRight,
|
||||
MoveLeft,
|
||||
Images,
|
||||
ZoomIn,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PageInput } from "./PageInput";
|
||||
@@ -33,6 +34,7 @@ export const ControlButtons = ({
|
||||
onPageChange,
|
||||
showThumbnails,
|
||||
onToggleThumbnails,
|
||||
onZoom,
|
||||
}: ControlButtonsProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
@@ -111,6 +113,18 @@ export const ControlButtons = ({
|
||||
iconClassName="h-6 w-6"
|
||||
className={cn("rounded-full", showThumbnails && "ring-2 ring-primary")}
|
||||
/>
|
||||
<IconButton
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
icon={ZoomIn}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onZoom();
|
||||
}}
|
||||
tooltip={t("reader.controls.zoom")}
|
||||
iconClassName="h-6 w-6"
|
||||
className="rounded-full"
|
||||
/>
|
||||
<div className="p-2 rounded-full" onClick={(e) => e.stopPropagation()}>
|
||||
<PageInput
|
||||
currentPage={currentPage}
|
||||
|
||||
@@ -1,57 +0,0 @@
|
||||
import { ZoomablePage } from "./ZoomablePage";
|
||||
|
||||
interface ReaderContentProps {
|
||||
currentPage: number;
|
||||
currentPageUrl: string;
|
||||
nextPageUrl: string;
|
||||
isLoading: boolean;
|
||||
secondPageLoading: boolean;
|
||||
isDoublePage: boolean;
|
||||
shouldShowDoublePage: (page: number) => boolean;
|
||||
isRTL: boolean;
|
||||
onThumbnailLoad: (pageNumber: number) => void;
|
||||
onZoomChange?: (isZoomed: boolean) => void;
|
||||
}
|
||||
|
||||
export const ReaderContent = ({
|
||||
currentPage,
|
||||
currentPageUrl,
|
||||
nextPageUrl,
|
||||
isLoading,
|
||||
secondPageLoading,
|
||||
isDoublePage,
|
||||
shouldShowDoublePage,
|
||||
isRTL,
|
||||
onThumbnailLoad,
|
||||
onZoomChange,
|
||||
}: ReaderContentProps) => {
|
||||
return (
|
||||
<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 gap-0">
|
||||
<ZoomablePage
|
||||
pageUrl={currentPageUrl}
|
||||
pageNumber={currentPage}
|
||||
isLoading={isLoading}
|
||||
onLoad={onThumbnailLoad}
|
||||
isDoublePage={isDoublePage}
|
||||
isRTL={isRTL}
|
||||
order="first"
|
||||
onZoomChange={onZoomChange}
|
||||
/>
|
||||
|
||||
{isDoublePage && shouldShowDoublePage(currentPage) && (
|
||||
<ZoomablePage
|
||||
pageUrl={nextPageUrl}
|
||||
pageNumber={currentPage + 1}
|
||||
isLoading={secondPageLoading}
|
||||
onLoad={onThumbnailLoad}
|
||||
isDoublePage={true}
|
||||
isRTL={isRTL}
|
||||
order="second"
|
||||
onZoomChange={onZoomChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,93 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface ZoomablePageProps {
|
||||
pageUrl: string | null;
|
||||
pageNumber: number;
|
||||
isLoading: boolean;
|
||||
onLoad: (pageNumber: number) => void;
|
||||
isDoublePage?: boolean;
|
||||
isRTL?: boolean;
|
||||
order?: "first" | "second";
|
||||
onZoomChange?: (isZoomed: boolean) => void;
|
||||
}
|
||||
|
||||
export const ZoomablePage = ({
|
||||
pageUrl,
|
||||
pageNumber,
|
||||
isLoading,
|
||||
onLoad,
|
||||
isDoublePage = false,
|
||||
isRTL = false,
|
||||
order = "first",
|
||||
onZoomChange,
|
||||
}: ZoomablePageProps) => {
|
||||
const [isZoomed, setIsZoomed] = useState(false);
|
||||
|
||||
const handleTransform = (ref: any, state: { scale: number; positionX: number; positionY: number }) => {
|
||||
const zoomed = state.scale > 1.1;
|
||||
setIsZoomed(zoomed);
|
||||
onZoomChange?.(zoomed);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative h-full flex items-center",
|
||||
isDoublePage && {
|
||||
"w-1/2": true,
|
||||
"order-2 justify-start": order === "first" ? isRTL : !isRTL,
|
||||
"order-1 justify-end": order === "first" ? !isRTL : isRTL,
|
||||
},
|
||||
!isDoublePage && "w-full justify-center"
|
||||
)}
|
||||
>
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pageUrl && (
|
||||
<TransformWrapper
|
||||
initialScale={1}
|
||||
minScale={1}
|
||||
maxScale={4}
|
||||
centerOnInit={true}
|
||||
wheel={{ step: 1.5 }}
|
||||
pinch={{ step: 1 }}
|
||||
doubleClick={{
|
||||
disabled: false,
|
||||
step: 1,
|
||||
animationTime: 200,
|
||||
animationType: "easeOut"
|
||||
}}
|
||||
panning={{
|
||||
disabled: false,
|
||||
lockAxisX: !isZoomed
|
||||
}}
|
||||
limitToBounds={true}
|
||||
centerZoomedOut={false}
|
||||
onTransformed={handleTransform}
|
||||
>
|
||||
<TransformComponent
|
||||
wrapperClass="w-full h-full flex items-center justify-center"
|
||||
contentClass="cursor-pointer"
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={pageUrl}
|
||||
alt={`Page ${pageNumber}`}
|
||||
className={cn(
|
||||
"max-h-full w-auto object-contain",
|
||||
isLoading ? "opacity-0" : "opacity-100"
|
||||
)}
|
||||
onLoad={() => onLoad(pageNumber)}
|
||||
/>
|
||||
</TransformComponent>
|
||||
</TransformWrapper>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,137 +0,0 @@
|
||||
import { useCallback, useRef } from "react";
|
||||
import type { PageCache } from "../types";
|
||||
import type { KomgaBook } from "@/types/komga";
|
||||
import { usePreferences } from "@/contexts/PreferencesContext";
|
||||
|
||||
interface UsePageCacheProps {
|
||||
book: KomgaBook;
|
||||
pages: number[];
|
||||
}
|
||||
|
||||
export const usePageCache = ({ book, pages }: UsePageCacheProps) => {
|
||||
const pageCache = useRef<PageCache>({});
|
||||
const { preferences } = usePreferences();
|
||||
|
||||
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 startTime = performance.now();
|
||||
const response = await fetch(`/api/komga/books/${book.id}/pages/${pageNumber}`);
|
||||
const blob = await response.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const endTime = performance.now();
|
||||
|
||||
// Logger la requête côté client seulement si le mode debug est activé et ce n'est pas une requête de debug
|
||||
if (!url.includes('/api/debug') && preferences.debug) {
|
||||
try {
|
||||
await fetch("/api/debug", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
url: `/api/komga/books/${book.id}/pages/${pageNumber}`,
|
||||
startTime,
|
||||
endTime,
|
||||
fromCache: false,
|
||||
}),
|
||||
});
|
||||
} catch {
|
||||
// Ignorer les erreurs de logging
|
||||
}
|
||||
}
|
||||
|
||||
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, preferences.debug]
|
||||
);
|
||||
|
||||
const getPageUrl = useCallback(
|
||||
async (pageNumber: number) => {
|
||||
if (pageCache.current[pageNumber]?.url) {
|
||||
// Logger l'utilisation du cache côté client seulement si le mode debug est activé et ce n'est pas une requête de debug
|
||||
const cacheUrl = `[CLIENT-CACHE] /api/komga/books/${book.id}/pages/${pageNumber}`;
|
||||
if (!cacheUrl.includes('/api/debug') && preferences.debug) {
|
||||
try {
|
||||
await fetch("/api/debug", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
url: cacheUrl,
|
||||
startTime: performance.now(),
|
||||
endTime: performance.now(),
|
||||
fromCache: true,
|
||||
}),
|
||||
});
|
||||
} catch {
|
||||
// Ignorer les erreurs de logging
|
||||
}
|
||||
}
|
||||
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, preferences.debug]
|
||||
);
|
||||
|
||||
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,
|
||||
};
|
||||
};
|
||||
@@ -1,280 +0,0 @@
|
||||
import { useState, useCallback, useEffect, useRef } from "react";
|
||||
import type { KomgaBook } from "@/types/komga";
|
||||
import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface UsePageNavigationProps {
|
||||
book: KomgaBook;
|
||||
pages: number[];
|
||||
isDoublePage: boolean;
|
||||
onClose?: (currentPage: number) => void;
|
||||
direction: "ltr" | "rtl";
|
||||
nextBook?: KomgaBook | null;
|
||||
isZoomed?: boolean;
|
||||
}
|
||||
|
||||
export const usePageNavigation = ({
|
||||
book,
|
||||
pages,
|
||||
isDoublePage,
|
||||
onClose,
|
||||
direction,
|
||||
nextBook,
|
||||
isZoomed = false,
|
||||
}: UsePageNavigationProps) => {
|
||||
const router = useRouter();
|
||||
const cPage = ClientOfflineBookService.getCurrentPage(book);
|
||||
const [currentPage, setCurrentPage] = useState(cPage < 1 ? 1 : cPage);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [secondPageLoading, setSecondPageLoading] = useState(true);
|
||||
const [showEndMessage, setShowEndMessage] = useState(false);
|
||||
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const touchStartXRef = useRef<number | null>(null);
|
||||
const touchStartYRef = useRef<number | null>(null);
|
||||
const currentPageRef = useRef(currentPage);
|
||||
const isRTL = direction === "rtl";
|
||||
|
||||
useEffect(() => {
|
||||
currentPageRef.current = currentPage;
|
||||
}, [currentPage]);
|
||||
|
||||
const syncReadProgress = useCallback(
|
||||
async (page: number) => {
|
||||
try {
|
||||
ClientOfflineBookService.setCurrentPage(book, page);
|
||||
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) {
|
||||
if (error instanceof Error) {
|
||||
console.error(
|
||||
`Erreur de synchronisation de la progression pour le livre ${book.id} à la page ${page}:`,
|
||||
error.message
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
[book, pages.length]
|
||||
);
|
||||
|
||||
const debouncedSyncReadProgress = useCallback(
|
||||
(page: number) => {
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
}
|
||||
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
syncReadProgress(page);
|
||||
timeoutRef.current = null;
|
||||
}, 2000);
|
||||
},
|
||||
[syncReadProgress]
|
||||
);
|
||||
|
||||
const shouldShowDoublePage = useCallback(
|
||||
(pageNumber: number) => {
|
||||
const isMobile = window.innerHeight < 700;
|
||||
if (isMobile) return false;
|
||||
if (!isDoublePage) return false;
|
||||
if (pageNumber === 1) return false;
|
||||
return pageNumber < pages.length;
|
||||
},
|
||||
[isDoublePage, pages.length]
|
||||
);
|
||||
|
||||
const navigateToPage = useCallback(
|
||||
(page: number) => {
|
||||
// if (page >= 1 && page <= pages.length) {
|
||||
setCurrentPage(page);
|
||||
setIsLoading(true);
|
||||
setSecondPageLoading(true);
|
||||
debouncedSyncReadProgress(page);
|
||||
// }
|
||||
},
|
||||
[debouncedSyncReadProgress]
|
||||
);
|
||||
|
||||
const handlePreviousPage = useCallback(() => {
|
||||
if (currentPage === 1) return;
|
||||
if (isDoublePage && shouldShowDoublePage(currentPage - 2)) {
|
||||
navigateToPage(Math.max(1, currentPage - 2));
|
||||
} else {
|
||||
navigateToPage(Math.max(1, currentPage - 1));
|
||||
}
|
||||
}, [currentPage, isDoublePage, navigateToPage, shouldShowDoublePage]);
|
||||
|
||||
const handleNextPage = useCallback(() => {
|
||||
if (currentPage === pages.length) {
|
||||
if (nextBook) {
|
||||
router.push(`/books/${nextBook.id}`);
|
||||
return;
|
||||
} else {
|
||||
setShowEndMessage(true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (isDoublePage && shouldShowDoublePage(currentPage)) {
|
||||
navigateToPage(Math.min(pages.length, currentPage + 2));
|
||||
} else {
|
||||
navigateToPage(Math.min(pages.length, currentPage + 1));
|
||||
}
|
||||
}, [
|
||||
currentPage,
|
||||
isDoublePage,
|
||||
navigateToPage,
|
||||
pages.length,
|
||||
shouldShowDoublePage,
|
||||
nextBook,
|
||||
router,
|
||||
]);
|
||||
|
||||
const handleTouchStart = useCallback(
|
||||
(event: TouchEvent) => {
|
||||
// Si on est zoomé, on ne gère pas la navigation
|
||||
if (isZoomed) {
|
||||
touchStartXRef.current = null;
|
||||
touchStartYRef.current = null;
|
||||
return;
|
||||
}
|
||||
|
||||
touchStartXRef.current = event.touches[0].clientX;
|
||||
touchStartYRef.current = event.touches[0].clientY;
|
||||
currentPageRef.current = currentPage;
|
||||
},
|
||||
[currentPage, isZoomed]
|
||||
);
|
||||
|
||||
const handleTouchEnd = useCallback(
|
||||
(event: TouchEvent) => {
|
||||
if (touchStartXRef.current === null || touchStartYRef.current === null) return;
|
||||
|
||||
const touchEndX = event.changedTouches[0].clientX;
|
||||
const touchEndY = event.changedTouches[0].clientY;
|
||||
const deltaX = touchEndX - touchStartXRef.current;
|
||||
const deltaY = touchEndY - touchStartYRef.current;
|
||||
|
||||
// Si le déplacement vertical est plus important que le déplacement horizontal,
|
||||
// on ne fait rien (pour éviter de confondre avec un scroll)
|
||||
if (Math.abs(deltaY) > Math.abs(deltaX)) return;
|
||||
|
||||
// Seuil pour éviter les changements de page accidentels
|
||||
if (Math.abs(deltaX) > 100) {
|
||||
if (deltaX > 0) {
|
||||
// Swipe vers la droite
|
||||
if (isRTL) {
|
||||
handleNextPage();
|
||||
} else {
|
||||
handlePreviousPage();
|
||||
}
|
||||
} else {
|
||||
// Swipe vers la gauche
|
||||
if (isRTL) {
|
||||
handlePreviousPage();
|
||||
} else {
|
||||
handleNextPage();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
touchStartXRef.current = null;
|
||||
touchStartYRef.current = null;
|
||||
},
|
||||
[handleNextPage, handlePreviousPage, isRTL]
|
||||
);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
setSecondPageLoading(true);
|
||||
}, [isDoublePage]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "ArrowLeft") {
|
||||
e.preventDefault();
|
||||
if (isRTL) {
|
||||
handleNextPage();
|
||||
} else {
|
||||
handlePreviousPage();
|
||||
}
|
||||
} else if (e.key === "ArrowRight") {
|
||||
e.preventDefault();
|
||||
if (isRTL) {
|
||||
handlePreviousPage();
|
||||
} else {
|
||||
handleNextPage();
|
||||
}
|
||||
} else if (e.key === "Escape" && onClose) {
|
||||
e.preventDefault();
|
||||
onClose(currentPage);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
window.addEventListener("touchstart", handleTouchStart);
|
||||
window.addEventListener("touchend", handleTouchEnd);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleKeyDown);
|
||||
window.removeEventListener("touchstart", handleTouchStart);
|
||||
window.removeEventListener("touchend", handleTouchEnd);
|
||||
};
|
||||
}, [
|
||||
handleNextPage,
|
||||
handlePreviousPage,
|
||||
handleTouchStart,
|
||||
handleTouchEnd,
|
||||
onClose,
|
||||
isRTL,
|
||||
currentPage,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
syncReadProgress(currentPageRef.current);
|
||||
ClientOfflineBookService.removeCurrentPage(book);
|
||||
}
|
||||
};
|
||||
}, [syncReadProgress, book]);
|
||||
|
||||
const handleDoubleClick = useCallback((transformRef?: any) => {
|
||||
if (transformRef?.current) {
|
||||
try {
|
||||
// Utiliser setTransform au lieu de zoomIn pour éviter les NaN
|
||||
const transform = transformRef.current;
|
||||
const currentScale = transform.instance?.state?.scale || 1;
|
||||
|
||||
if (currentScale <= 1.1) {
|
||||
// Zoom à 2x
|
||||
transform.setTransform(0, 0, 2);
|
||||
} else {
|
||||
// Reset à 1x
|
||||
transform.setTransform(0, 0, 1);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error in handleDoubleClick:", error);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
return {
|
||||
currentPage,
|
||||
navigateToPage,
|
||||
isLoading,
|
||||
setIsLoading,
|
||||
secondPageLoading,
|
||||
setSecondPageLoading,
|
||||
handlePreviousPage,
|
||||
handleNextPage,
|
||||
shouldShowDoublePage,
|
||||
handleDoubleClick,
|
||||
showEndMessage,
|
||||
};
|
||||
};
|
||||
@@ -1,75 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface UsePageUrlsProps {
|
||||
currentPage: number;
|
||||
isDoublePage: boolean;
|
||||
shouldShowDoublePage: (page: number) => boolean;
|
||||
getPageUrl: (page: number) => Promise<string>;
|
||||
setIsLoading: (loading: boolean) => void;
|
||||
setSecondPageLoading: (loading: boolean) => void;
|
||||
}
|
||||
|
||||
export const usePageUrls = ({
|
||||
currentPage,
|
||||
isDoublePage,
|
||||
shouldShowDoublePage,
|
||||
getPageUrl,
|
||||
setIsLoading,
|
||||
setSecondPageLoading,
|
||||
}: UsePageUrlsProps) => {
|
||||
const [currentPageUrl, setCurrentPageUrl] = useState<string>("");
|
||||
const [nextPageUrl, setNextPageUrl] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const loadPageUrls = async () => {
|
||||
try {
|
||||
const url = await getPageUrl(currentPage);
|
||||
if (isMounted) {
|
||||
setCurrentPageUrl(url);
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
if (isDoublePage && shouldShowDoublePage(currentPage)) {
|
||||
const nextUrl = await getPageUrl(currentPage + 1);
|
||||
if (isMounted) {
|
||||
setNextPageUrl(nextUrl);
|
||||
setSecondPageLoading(false);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
console.error(
|
||||
`Erreur de chargement des URLs pour la page ${currentPage}:`,
|
||||
error.message
|
||||
);
|
||||
}
|
||||
if (isMounted) {
|
||||
setIsLoading(false);
|
||||
setSecondPageLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
setIsLoading(true);
|
||||
setSecondPageLoading(true);
|
||||
loadPageUrls();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [
|
||||
currentPage,
|
||||
isDoublePage,
|
||||
shouldShowDoublePage,
|
||||
getPageUrl,
|
||||
setIsLoading,
|
||||
setSecondPageLoading,
|
||||
]);
|
||||
|
||||
return {
|
||||
currentPageUrl,
|
||||
nextPageUrl,
|
||||
};
|
||||
};
|
||||
@@ -1,61 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
|
||||
interface UsePreloadPagesProps {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
isDoublePage: boolean;
|
||||
shouldShowDoublePage: (page: number) => boolean;
|
||||
preloadPage: (page: number) => Promise<void>;
|
||||
cleanCache: (currentPage: number) => void;
|
||||
}
|
||||
|
||||
export const usePreloadPages = ({
|
||||
currentPage,
|
||||
totalPages,
|
||||
isDoublePage,
|
||||
shouldShowDoublePage,
|
||||
preloadPage,
|
||||
cleanCache,
|
||||
}: UsePreloadPagesProps) => {
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const preloadCurrentPages = async () => {
|
||||
if (!isMounted) return;
|
||||
|
||||
await preloadPage(currentPage);
|
||||
|
||||
if (!isMounted) return;
|
||||
|
||||
if (isDoublePage && shouldShowDoublePage(currentPage)) {
|
||||
await preloadPage(currentPage + 1);
|
||||
}
|
||||
|
||||
if (!isMounted) return;
|
||||
|
||||
const pagesToPreload = [];
|
||||
|
||||
// Précharger les 2 pages précédentes en priorité
|
||||
for (let i = 1; i <= 2 && currentPage - i >= 1; i++) {
|
||||
pagesToPreload.push(currentPage - i);
|
||||
}
|
||||
|
||||
// Précharger les 4 pages suivantes
|
||||
for (let i = 1; i <= 4 && currentPage + i <= totalPages; i++) {
|
||||
pagesToPreload.push(currentPage + i);
|
||||
}
|
||||
|
||||
for (const page of pagesToPreload) {
|
||||
if (!isMounted) break;
|
||||
await preloadPage(page);
|
||||
}
|
||||
};
|
||||
|
||||
preloadCurrentPages();
|
||||
cleanCache(currentPage);
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [currentPage, isDoublePage, shouldShowDoublePage, preloadPage, cleanCache, totalPages]);
|
||||
};
|
||||
@@ -52,6 +52,7 @@ export interface ControlButtonsProps {
|
||||
onToggleDirection: () => void;
|
||||
showThumbnails: boolean;
|
||||
onToggleThumbnails: () => void;
|
||||
onZoom: () => void;
|
||||
}
|
||||
|
||||
export interface UsePageNavigationProps {
|
||||
|
||||
@@ -417,6 +417,7 @@
|
||||
"show": "Show thumbnails",
|
||||
"hide": "Hide thumbnails"
|
||||
},
|
||||
"zoom": "Zoom",
|
||||
"close": "Close",
|
||||
"previousPage": "Previous page",
|
||||
"nextPage": "Next page"
|
||||
|
||||
@@ -415,6 +415,7 @@
|
||||
"show": "Afficher les vignettes",
|
||||
"hide": "Masquer les vignettes"
|
||||
},
|
||||
"zoom": "Zoom",
|
||||
"close": "Fermer",
|
||||
"previousPage": "Page précédente",
|
||||
"nextPage": "Page suivante"
|
||||
|
||||
Reference in New Issue
Block a user