feat: refactor PhotoswipeReader to enhance modularity with new components and hooks for improved navigation, image loading, and touch handling
This commit is contained in:
Julien Froidefond
@@ -1,52 +1,53 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState, useCallback } from "react";
|
||||
import PhotoSwipe from "photoswipe";
|
||||
import { useEffect, useState, useCallback, useRef } from "react";
|
||||
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 { useDoublePageMode } from "./hooks/useDoublePageMode";
|
||||
import { useImageLoader } from "./hooks/useImageLoader";
|
||||
import { usePageNavigation } from "./hooks/usePageNavigation";
|
||||
import { useTouchNavigation } from "./hooks/useTouchNavigation";
|
||||
import { usePhotoSwipeZoom } from "./hooks/usePhotoSwipeZoom";
|
||||
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";
|
||||
import { EndOfSeriesModal } from "./components/EndOfSeriesModal";
|
||||
import { PageDisplay } from "./components/PageDisplay";
|
||||
import { ReaderContainer } from "./components/ReaderContainer";
|
||||
|
||||
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 [isLoading, setIsLoading] = useState(true);
|
||||
const [secondPageLoading, setSecondPageLoading] = useState(true);
|
||||
const [imageBlobUrls, setImageBlobUrls] = useState<Record<number, string>>({});
|
||||
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);
|
||||
const currentPageRef = useRef(currentPage);
|
||||
const lastClickTimeRef = useRef<number>(0);
|
||||
const clickTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// Garder currentPage à jour dans la ref pour le cleanup
|
||||
useEffect(() => {
|
||||
currentPageRef.current = currentPage;
|
||||
}, [currentPage]);
|
||||
// Hooks
|
||||
const { direction, toggleDirection, isRTL } = useReadingDirection();
|
||||
const { isFullscreen, toggleFullscreen } = useFullscreen();
|
||||
const { isDoublePage, shouldShowDoublePage, toggleDoublePage } = useDoublePageMode();
|
||||
const { loadedImages, imageBlobUrls, loadImageDimensions, handleForceReload, getPageUrl } = useImageLoader(book.id, pages);
|
||||
const { currentPage, showEndMessage, navigateToPage, handlePreviousPage, handleNextPage } = usePageNavigation({
|
||||
book,
|
||||
pages,
|
||||
isDoublePage,
|
||||
shouldShowDoublePage: (page) => shouldShowDoublePage(page, pages.length),
|
||||
onClose,
|
||||
nextBook,
|
||||
});
|
||||
const { pswpRef, handleZoom } = usePhotoSwipeZoom({
|
||||
loadedImages,
|
||||
currentPage,
|
||||
getPageUrl,
|
||||
});
|
||||
|
||||
// Touch navigation
|
||||
useTouchNavigation({
|
||||
onPreviousPage: handlePreviousPage,
|
||||
onNextPage: handleNextPage,
|
||||
pswpRef,
|
||||
});
|
||||
|
||||
// Activer le zoom dans le reader en enlevant la classe no-pinch-zoom
|
||||
useEffect(() => {
|
||||
@@ -57,170 +58,23 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Auto double page en paysage
|
||||
|
||||
// Preload current and next pages dimensions
|
||||
useEffect(() => {
|
||||
setIsDoublePage(isLandscape);
|
||||
}, [isLandscape]);
|
||||
|
||||
// Reset loading quand le mode double page change
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
setSecondPageLoading(true);
|
||||
}, [isDoublePage]);
|
||||
|
||||
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), 500);
|
||||
},
|
||||
[syncReadProgress]
|
||||
);
|
||||
|
||||
const navigateToPage = useCallback(
|
||||
(page: number) => {
|
||||
if (page >= 1 && page <= pages.length) {
|
||||
setCurrentPage(page);
|
||||
setIsLoading(true);
|
||||
setSecondPageLoading(true);
|
||||
// Mettre à jour le localStorage immédiatement
|
||||
ClientOfflineBookService.setCurrentPage(book, page);
|
||||
// Débouncer seulement l'API Komga
|
||||
debouncedSync(page);
|
||||
}
|
||||
},
|
||||
[pages.length, debouncedSync, book]
|
||||
);
|
||||
|
||||
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;
|
||||
loadImageDimensions(currentPage);
|
||||
if (isDoublePage && shouldShowDoublePage(currentPage, pages.length)) {
|
||||
loadImageDimensions(currentPage + 1);
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
// Un seul doigt - seulement si on n'était pas en train de pinch
|
||||
// On réinitialise isPinchingRef seulement ici, quand on commence un nouveau geste à 1 doigt
|
||||
if (e.touches.length === 1) {
|
||||
isPinchingRef.current = false;
|
||||
touchStartXRef.current = e.touches[0].clientX;
|
||||
touchStartYRef.current = e.touches[0].clientY;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleTouchMove = useCallback((e: TouchEvent) => {
|
||||
// Détecter le pinch pendant le mouvement
|
||||
if (e.touches.length > 1) {
|
||||
isPinchingRef.current = true;
|
||||
touchStartXRef.current = null;
|
||||
touchStartYRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleTouchEnd = useCallback((e: TouchEvent) => {
|
||||
// Si on était en mode pinch, ne JAMAIS traiter le swipe
|
||||
if (isPinchingRef.current) {
|
||||
touchStartXRef.current = null;
|
||||
touchStartYRef.current = null;
|
||||
// Ne PAS réinitialiser isPinchingRef ici, on le fera au prochain touchstart
|
||||
return;
|
||||
}
|
||||
|
||||
// Vérifier qu'on a bien des coordonnées de départ
|
||||
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 50px pour changer de page
|
||||
if (Math.abs(deltaX) > 50) {
|
||||
if (deltaX > 0) {
|
||||
// Swipe vers la droite
|
||||
if (isRTL) {
|
||||
handleNextPage();
|
||||
} else {
|
||||
handlePreviousPage();
|
||||
}
|
||||
} else {
|
||||
// Swipe vers la gauche
|
||||
if (isRTL) {
|
||||
handlePreviousPage();
|
||||
} else {
|
||||
handleNextPage();
|
||||
}
|
||||
// Preload next
|
||||
if (currentPage < pages.length) {
|
||||
loadImageDimensions(currentPage + 1);
|
||||
if (isDoublePage && currentPage + 1 < pages.length) {
|
||||
loadImageDimensions(currentPage + 2);
|
||||
}
|
||||
}
|
||||
}, [currentPage, isDoublePage, shouldShowDoublePage, loadImageDimensions, pages.length]);
|
||||
|
||||
touchStartXRef.current = null;
|
||||
touchStartYRef.current = null;
|
||||
}, [handleNextPage, handlePreviousPage, isRTL]);
|
||||
|
||||
// Keyboard & Touch events
|
||||
// Keyboard events
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "ArrowLeft") {
|
||||
@@ -244,178 +98,11 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
window.addEventListener("touchstart", handleTouchStart);
|
||||
window.addEventListener("touchmove", handleTouchMove);
|
||||
window.addEventListener("touchend", handleTouchEnd);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleKeyDown);
|
||||
window.removeEventListener("touchstart", handleTouchStart);
|
||||
window.removeEventListener("touchmove", handleTouchMove);
|
||||
window.removeEventListener("touchend", handleTouchEnd);
|
||||
};
|
||||
}, [handleNextPage, handlePreviousPage, handleTouchStart, handleTouchMove, handleTouchEnd, onClose, isRTL, currentPage]);
|
||||
|
||||
// Cleanup - Sync final sans debounce
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (syncTimeoutRef.current) {
|
||||
clearTimeout(syncTimeoutRef.current);
|
||||
}
|
||||
// Sync immédiatement au cleanup avec la VRAIE valeur actuelle
|
||||
syncReadProgress(currentPageRef.current);
|
||||
};
|
||||
}, [syncReadProgress]);
|
||||
|
||||
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();
|
||||
}
|
||||
// Révoquer toutes les blob URLs
|
||||
Object.values(imageBlobUrls).forEach(url => {
|
||||
if (url) URL.revokeObjectURL(url);
|
||||
});
|
||||
};
|
||||
}, [imageBlobUrls]);
|
||||
|
||||
// Force reload handler
|
||||
const handleForceReload = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
setSecondPageLoading(true);
|
||||
|
||||
// Révoquer les anciennes URLs blob
|
||||
if (imageBlobUrls[currentPage]) {
|
||||
URL.revokeObjectURL(imageBlobUrls[currentPage]);
|
||||
}
|
||||
if (imageBlobUrls[currentPage + 1]) {
|
||||
URL.revokeObjectURL(imageBlobUrls[currentPage + 1]);
|
||||
}
|
||||
|
||||
try {
|
||||
// Fetch page 1 avec cache: reload
|
||||
const response1 = await fetch(getPageUrl(currentPage), {
|
||||
cache: 'reload',
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache',
|
||||
'Pragma': 'no-cache'
|
||||
}
|
||||
});
|
||||
|
||||
if (!response1.ok) {
|
||||
throw new Error(`HTTP ${response1.status}`);
|
||||
}
|
||||
|
||||
const blob1 = await response1.blob();
|
||||
const blobUrl1 = URL.createObjectURL(blob1);
|
||||
|
||||
const newUrls: Record<number, string> = {
|
||||
...imageBlobUrls,
|
||||
[currentPage]: blobUrl1
|
||||
};
|
||||
|
||||
// Fetch page 2 si double page
|
||||
if (isDoublePage && shouldShowDoublePage(currentPage)) {
|
||||
const response2 = await fetch(getPageUrl(currentPage + 1), {
|
||||
cache: 'reload',
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache',
|
||||
'Pragma': 'no-cache'
|
||||
}
|
||||
});
|
||||
|
||||
if (!response2.ok) {
|
||||
throw new Error(`HTTP ${response2.status}`);
|
||||
}
|
||||
|
||||
const blob2 = await response2.blob();
|
||||
const blobUrl2 = URL.createObjectURL(blob2);
|
||||
newUrls[currentPage + 1] = blobUrl2;
|
||||
}
|
||||
|
||||
setImageBlobUrls(newUrls);
|
||||
} catch (error) {
|
||||
console.error('Error reloading images:', error);
|
||||
setIsLoading(false);
|
||||
setSecondPageLoading(false);
|
||||
}
|
||||
}, [currentPage, imageBlobUrls, isDoublePage, shouldShowDoublePage, getPageUrl]);
|
||||
}, [handleNextPage, handlePreviousPage, onClose, isRTL, currentPage]);
|
||||
|
||||
const handleContainerClick = useCallback((e: React.MouseEvent) => {
|
||||
// Vérifier si c'est un double-clic sur une image
|
||||
@@ -450,144 +137,52 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
|
||||
}, [showControls, handleZoom]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={readerRef}
|
||||
className="reader-zoom-enabled fixed inset-0 bg-background/95 backdrop-blur-sm z-50 overflow-hidden"
|
||||
onClick={handleContainerClick}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
<ReaderContainer onContainerClick={handleContainerClick}>
|
||||
<EndOfSeriesModal
|
||||
show={showEndMessage}
|
||||
onClose={onClose || (() => undefined)}
|
||||
currentPage={currentPage}
|
||||
/>
|
||||
|
||||
<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}
|
||||
onForceReload={handleForceReload}
|
||||
/>
|
||||
<ControlButtons
|
||||
showControls={showControls}
|
||||
onToggleControls={() => setShowControls(!showControls)}
|
||||
onPreviousPage={handlePreviousPage}
|
||||
onNextPage={handleNextPage}
|
||||
onPageChange={navigateToPage}
|
||||
onClose={onClose}
|
||||
currentPage={currentPage}
|
||||
totalPages={pages.length}
|
||||
isDoublePage={isDoublePage}
|
||||
onToggleDoublePage={toggleDoublePage}
|
||||
isFullscreen={isFullscreen}
|
||||
onToggleFullscreen={() => toggleFullscreen(document.body)}
|
||||
direction={direction}
|
||||
onToggleDirection={toggleDirection}
|
||||
showThumbnails={showThumbnails}
|
||||
onToggleThumbnails={() => setShowThumbnails(!showThumbnails)}
|
||||
onZoom={handleZoom}
|
||||
onForceReload={() => handleForceReload(currentPage, isDoublePage, (page) => shouldShowDoublePage(page, pages.length))}
|
||||
/>
|
||||
|
||||
{/* 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,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center z-10 opacity-0 animate-fade-in">
|
||||
<div className="relative">
|
||||
<div className="animate-spin rounded-full h-16 w-16 border-4 border-primary/20"></div>
|
||||
<div className="absolute inset-0 animate-spin rounded-full h-16 w-16 border-4 border-transparent border-t-primary" style={{ animationDuration: '0.8s' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
key={`page-${currentPage}-${imageBlobUrls[currentPage] || ''}`}
|
||||
src={imageBlobUrls[currentPage] || getPageUrl(currentPage)}
|
||||
alt={`Page ${currentPage}`}
|
||||
className={cn(
|
||||
"max-h-full max-w-full object-contain transition-opacity cursor-pointer",
|
||||
isLoading ? "opacity-0" : "opacity-100"
|
||||
)}
|
||||
loading="eager"
|
||||
onLoad={() => setIsLoading(false)}
|
||||
onError={() => setIsLoading(false)}
|
||||
ref={(img) => {
|
||||
// Si l'image est déjà en cache, onLoad ne sera pas appelé
|
||||
if (img?.complete && img?.naturalHeight !== 0) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<PageDisplay
|
||||
currentPage={currentPage}
|
||||
pages={pages}
|
||||
isDoublePage={isDoublePage}
|
||||
shouldShowDoublePage={(page) => shouldShowDoublePage(page, pages.length)}
|
||||
imageBlobUrls={imageBlobUrls}
|
||||
getPageUrl={getPageUrl}
|
||||
/>
|
||||
|
||||
{/* 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,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{secondPageLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center z-10 opacity-0 animate-fade-in">
|
||||
<div className="relative">
|
||||
<div className="animate-spin rounded-full h-16 w-16 border-4 border-primary/20"></div>
|
||||
<div className="absolute inset-0 animate-spin rounded-full h-16 w-16 border-4 border-transparent border-t-primary" style={{ animationDuration: '0.8s' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
key={`page-${currentPage + 1}-${imageBlobUrls[currentPage + 1] || ''}`}
|
||||
src={imageBlobUrls[currentPage + 1] || getPageUrl(currentPage + 1)}
|
||||
alt={`Page ${currentPage + 1}`}
|
||||
className={cn(
|
||||
"max-h-full max-w-full object-contain transition-opacity cursor-pointer",
|
||||
secondPageLoading ? "opacity-0" : "opacity-100"
|
||||
)}
|
||||
loading="eager"
|
||||
onLoad={() => setSecondPageLoading(false)}
|
||||
onError={() => setSecondPageLoading(false)}
|
||||
ref={(img) => {
|
||||
// Si l'image est déjà en cache, onLoad ne sera pas appelé
|
||||
if (img?.complete && img?.naturalHeight !== 0) {
|
||||
setSecondPageLoading(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NavigationBar
|
||||
currentPage={currentPage}
|
||||
pages={pages}
|
||||
onPageChange={navigateToPage}
|
||||
showControls={showControls}
|
||||
showThumbnails={showThumbnails}
|
||||
book={book}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<NavigationBar
|
||||
currentPage={currentPage}
|
||||
pages={pages}
|
||||
onPageChange={navigateToPage}
|
||||
showControls={showControls}
|
||||
showThumbnails={showThumbnails}
|
||||
book={book}
|
||||
/>
|
||||
</ReaderContainer>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
28
src/components/reader/components/EndOfSeriesModal.tsx
Normal file
28
src/components/reader/components/EndOfSeriesModal.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import { useTranslate } from "@/hooks/useTranslate";
|
||||
|
||||
interface EndOfSeriesModalProps {
|
||||
show: boolean;
|
||||
onClose: (currentPage: number) => void;
|
||||
currentPage: number;
|
||||
}
|
||||
|
||||
export function EndOfSeriesModal({ show, onClose, currentPage }: EndOfSeriesModalProps) {
|
||||
const { t } = useTranslate();
|
||||
|
||||
if (!show) return null;
|
||||
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
128
src/components/reader/components/PageDisplay.tsx
Normal file
128
src/components/reader/components/PageDisplay.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useReadingDirection } from "../hooks/useReadingDirection";
|
||||
|
||||
interface PageDisplayProps {
|
||||
currentPage: number;
|
||||
pages: number[];
|
||||
isDoublePage: boolean;
|
||||
shouldShowDoublePage: (page: number) => boolean;
|
||||
imageBlobUrls: Record<number, string>;
|
||||
getPageUrl: (pageNum: number) => string;
|
||||
}
|
||||
|
||||
export function PageDisplay({
|
||||
currentPage,
|
||||
pages: _pages,
|
||||
isDoublePage,
|
||||
shouldShowDoublePage,
|
||||
imageBlobUrls,
|
||||
getPageUrl,
|
||||
}: PageDisplayProps) {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [secondPageLoading, setSecondPageLoading] = useState(true);
|
||||
const { isRTL } = useReadingDirection();
|
||||
|
||||
const handleImageLoad = useCallback(() => {
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleSecondImageLoad = useCallback(() => {
|
||||
setSecondPageLoading(false);
|
||||
}, []);
|
||||
|
||||
// Reset loading when page changes
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
setSecondPageLoading(true);
|
||||
}, [currentPage, isDoublePage]);
|
||||
|
||||
return (
|
||||
<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,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center z-10 opacity-0 animate-fade-in">
|
||||
<div className="relative">
|
||||
<div className="animate-spin rounded-full h-16 w-16 border-4 border-primary/20"></div>
|
||||
<div className="absolute inset-0 animate-spin rounded-full h-16 w-16 border-4 border-transparent border-t-primary" style={{ animationDuration: '0.8s' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
key={`page-${currentPage}-${imageBlobUrls[currentPage] || ''}`}
|
||||
src={imageBlobUrls[currentPage] || getPageUrl(currentPage)}
|
||||
alt={`Page ${currentPage}`}
|
||||
className={cn(
|
||||
"max-h-full max-w-full object-contain transition-opacity cursor-pointer",
|
||||
isLoading ? "opacity-0" : "opacity-100"
|
||||
)}
|
||||
loading="eager"
|
||||
onLoad={handleImageLoad}
|
||||
onError={handleImageLoad}
|
||||
ref={(img) => {
|
||||
// Si l'image est déjà en cache, onLoad ne sera pas appelé
|
||||
if (img?.complete && img?.naturalHeight !== 0) {
|
||||
handleImageLoad();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</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,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{secondPageLoading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center z-10 opacity-0 animate-fade-in">
|
||||
<div className="relative">
|
||||
<div className="animate-spin rounded-full h-16 w-16 border-4 border-primary/20"></div>
|
||||
<div className="absolute inset-0 animate-spin rounded-full h-16 w-16 border-4 border-transparent border-t-primary" style={{ animationDuration: '0.8s' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
key={`page-${currentPage + 1}-${imageBlobUrls[currentPage + 1] || ''}`}
|
||||
src={imageBlobUrls[currentPage + 1] || getPageUrl(currentPage + 1)}
|
||||
alt={`Page ${currentPage + 1}`}
|
||||
className={cn(
|
||||
"max-h-full max-w-full object-contain transition-opacity cursor-pointer",
|
||||
secondPageLoading ? "opacity-0" : "opacity-100"
|
||||
)}
|
||||
loading="eager"
|
||||
onLoad={handleSecondImageLoad}
|
||||
onError={handleSecondImageLoad}
|
||||
ref={(img) => {
|
||||
// Si l'image est déjà en cache, onLoad ne sera pas appelé
|
||||
if (img?.complete && img?.naturalHeight !== 0) {
|
||||
handleSecondImageLoad();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
26
src/components/reader/components/ReaderContainer.tsx
Normal file
26
src/components/reader/components/ReaderContainer.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { useRef, useCallback } from "react";
|
||||
|
||||
interface ReaderContainerProps {
|
||||
children: React.ReactNode;
|
||||
onContainerClick: (e: React.MouseEvent) => void;
|
||||
}
|
||||
|
||||
export function ReaderContainer({ children, onContainerClick }: ReaderContainerProps) {
|
||||
const readerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleContainerClick = useCallback((e: React.MouseEvent) => {
|
||||
onContainerClick(e);
|
||||
}, [onContainerClick]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={readerRef}
|
||||
className="reader-zoom-enabled fixed inset-0 bg-background/95 backdrop-blur-sm z-50 overflow-hidden"
|
||||
onClick={handleContainerClick}
|
||||
>
|
||||
<div className="relative h-full flex flex-col items-center justify-center">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ImageLoader } from "@/components/ui/image-loader";
|
||||
|
||||
interface SinglePageProps {
|
||||
pageUrl: string;
|
||||
pageNumber: number;
|
||||
isLoading: boolean;
|
||||
onLoad: (pageNumber: number) => void;
|
||||
isDoublePage?: boolean;
|
||||
isRTL?: boolean;
|
||||
order?: "first" | "second";
|
||||
zoomLevel?: number;
|
||||
panPosition?: { x: number; y: number };
|
||||
onDoubleClick?: () => void;
|
||||
}
|
||||
|
||||
export const SinglePage = ({
|
||||
pageUrl,
|
||||
pageNumber,
|
||||
isLoading,
|
||||
onLoad,
|
||||
isDoublePage = false,
|
||||
isRTL = false,
|
||||
order = "first",
|
||||
zoomLevel = 1,
|
||||
panPosition = { x: 0, y: 0 },
|
||||
onDoubleClick,
|
||||
}: SinglePageProps) => {
|
||||
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"
|
||||
)}
|
||||
>
|
||||
<ImageLoader isLoading={isLoading} />
|
||||
{pageUrl && (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={pageUrl}
|
||||
style={{
|
||||
transform: `scale(${zoomLevel}) translate(${panPosition.x}px, ${panPosition.y}px)`,
|
||||
transformOrigin: "center",
|
||||
transition: zoomLevel === 1 ? "transform 0.3s ease-out" : "none",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
alt={`Page ${pageNumber}`}
|
||||
className={cn(
|
||||
"max-h-full w-auto object-contain",
|
||||
isLoading ? "opacity-0" : "opacity-100"
|
||||
)}
|
||||
onLoad={() => onLoad(pageNumber)}
|
||||
onDoubleClick={onDoubleClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
34
src/components/reader/hooks/useDoublePageMode.ts
Normal file
34
src/components/reader/hooks/useDoublePageMode.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useOrientation } from "./useOrientation";
|
||||
|
||||
export function useDoublePageMode() {
|
||||
const isLandscape = useOrientation();
|
||||
const [isDoublePage, setIsDoublePage] = useState(false);
|
||||
|
||||
// Auto double page en paysage
|
||||
useEffect(() => {
|
||||
setIsDoublePage(isLandscape);
|
||||
}, [isLandscape]);
|
||||
|
||||
const shouldShowDoublePage = useCallback(
|
||||
(pageNumber: number, totalPages: number) => {
|
||||
const isMobile = window.innerHeight < 700;
|
||||
if (isMobile) return false;
|
||||
if (!isDoublePage) return false;
|
||||
if (pageNumber === 1) return false;
|
||||
return pageNumber < totalPages;
|
||||
},
|
||||
[isDoublePage]
|
||||
);
|
||||
|
||||
const toggleDoublePage = useCallback(() => {
|
||||
setIsDoublePage(prev => !prev);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
isDoublePage,
|
||||
setIsDoublePage,
|
||||
shouldShowDoublePage,
|
||||
toggleDoublePage,
|
||||
};
|
||||
}
|
||||
108
src/components/reader/hooks/useImageLoader.ts
Normal file
108
src/components/reader/hooks/useImageLoader.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
import { useState, useCallback, useEffect, useRef } from "react";
|
||||
|
||||
interface ImageDimensions {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export function useImageLoader(bookId: string, _pages: number[]) {
|
||||
const [loadedImages, setLoadedImages] = useState<Record<number, ImageDimensions>>({});
|
||||
const [imageBlobUrls, setImageBlobUrls] = useState<Record<number, string>>({});
|
||||
const loadedImagesRef = useRef(loadedImages);
|
||||
|
||||
// Keep ref in sync with state
|
||||
useEffect(() => {
|
||||
loadedImagesRef.current = loadedImages;
|
||||
}, [loadedImages]);
|
||||
|
||||
const getPageUrl = useCallback((pageNum: number) => `/api/komga/books/${bookId}/pages/${pageNum}`, [bookId]);
|
||||
|
||||
// Load image dimensions
|
||||
const loadImageDimensions = useCallback((pageNum: number) => {
|
||||
if (loadedImagesRef.current[pageNum]) return;
|
||||
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
setLoadedImages(prev => ({
|
||||
...prev,
|
||||
[pageNum]: { width: img.naturalWidth, height: img.naturalHeight }
|
||||
}));
|
||||
};
|
||||
img.src = getPageUrl(pageNum);
|
||||
}, [getPageUrl]);
|
||||
|
||||
// Force reload handler
|
||||
const handleForceReload = useCallback(async (currentPage: number, isDoublePage: boolean, shouldShowDoublePage: (page: number) => boolean) => {
|
||||
// Révoquer les anciennes URLs blob
|
||||
if (imageBlobUrls[currentPage]) {
|
||||
URL.revokeObjectURL(imageBlobUrls[currentPage]);
|
||||
}
|
||||
if (imageBlobUrls[currentPage + 1]) {
|
||||
URL.revokeObjectURL(imageBlobUrls[currentPage + 1]);
|
||||
}
|
||||
|
||||
try {
|
||||
// Fetch page 1 avec cache: reload
|
||||
const response1 = await fetch(getPageUrl(currentPage), {
|
||||
cache: 'reload',
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache',
|
||||
'Pragma': 'no-cache'
|
||||
}
|
||||
});
|
||||
|
||||
if (!response1.ok) {
|
||||
throw new Error(`HTTP ${response1.status}`);
|
||||
}
|
||||
|
||||
const blob1 = await response1.blob();
|
||||
const blobUrl1 = URL.createObjectURL(blob1);
|
||||
|
||||
const newUrls: Record<number, string> = {
|
||||
...imageBlobUrls,
|
||||
[currentPage]: blobUrl1
|
||||
};
|
||||
|
||||
// Fetch page 2 si double page
|
||||
if (isDoublePage && shouldShowDoublePage(currentPage)) {
|
||||
const response2 = await fetch(getPageUrl(currentPage + 1), {
|
||||
cache: 'reload',
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache',
|
||||
'Pragma': 'no-cache'
|
||||
}
|
||||
});
|
||||
|
||||
if (!response2.ok) {
|
||||
throw new Error(`HTTP ${response2.status}`);
|
||||
}
|
||||
|
||||
const blob2 = await response2.blob();
|
||||
const blobUrl2 = URL.createObjectURL(blob2);
|
||||
newUrls[currentPage + 1] = blobUrl2;
|
||||
}
|
||||
|
||||
setImageBlobUrls(newUrls);
|
||||
} catch (error) {
|
||||
console.error('Error reloading images:', error);
|
||||
throw error;
|
||||
}
|
||||
}, [imageBlobUrls, getPageUrl]);
|
||||
|
||||
// Cleanup blob URLs on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
Object.values(imageBlobUrls).forEach(url => {
|
||||
if (url) URL.revokeObjectURL(url);
|
||||
});
|
||||
};
|
||||
}, [imageBlobUrls]);
|
||||
|
||||
return {
|
||||
loadedImages,
|
||||
imageBlobUrls,
|
||||
loadImageDimensions,
|
||||
handleForceReload,
|
||||
getPageUrl,
|
||||
};
|
||||
}
|
||||
117
src/components/reader/hooks/usePageNavigation.ts
Normal file
117
src/components/reader/hooks/usePageNavigation.ts
Normal file
@@ -0,0 +1,117 @@
|
||||
import { useState, useCallback, useRef, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
|
||||
import type { KomgaBook } from "@/types/komga";
|
||||
|
||||
interface UsePageNavigationProps {
|
||||
book: KomgaBook;
|
||||
pages: number[];
|
||||
isDoublePage: boolean;
|
||||
shouldShowDoublePage: (page: number) => boolean;
|
||||
onClose?: (currentPage: number) => void;
|
||||
nextBook?: KomgaBook | null;
|
||||
}
|
||||
|
||||
export function usePageNavigation({
|
||||
book,
|
||||
pages,
|
||||
isDoublePage,
|
||||
shouldShowDoublePage,
|
||||
onClose: _onClose,
|
||||
nextBook,
|
||||
}: UsePageNavigationProps) {
|
||||
const router = useRouter();
|
||||
const [currentPage, setCurrentPage] = useState(() => {
|
||||
const saved = ClientOfflineBookService.getCurrentPage(book);
|
||||
return saved < 1 ? 1 : saved;
|
||||
});
|
||||
const [showEndMessage, setShowEndMessage] = useState(false);
|
||||
const syncTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const currentPageRef = useRef(currentPage);
|
||||
|
||||
// Garder currentPage à jour dans la ref pour le cleanup
|
||||
useEffect(() => {
|
||||
currentPageRef.current = currentPage;
|
||||
}, [currentPage]);
|
||||
|
||||
// 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), 500);
|
||||
},
|
||||
[syncReadProgress]
|
||||
);
|
||||
|
||||
const navigateToPage = useCallback(
|
||||
(page: number) => {
|
||||
if (page >= 1 && page <= pages.length) {
|
||||
setCurrentPage(page);
|
||||
// Mettre à jour le localStorage immédiatement
|
||||
ClientOfflineBookService.setCurrentPage(book, page);
|
||||
// Débouncer seulement l'API Komga
|
||||
debouncedSync(page);
|
||||
}
|
||||
},
|
||||
[pages.length, debouncedSync, book]
|
||||
);
|
||||
|
||||
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]);
|
||||
|
||||
// Cleanup - Sync final sans debounce
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (syncTimeoutRef.current) {
|
||||
clearTimeout(syncTimeoutRef.current);
|
||||
}
|
||||
// Sync immédiatement au cleanup avec la VRAIE valeur actuelle
|
||||
syncReadProgress(currentPageRef.current);
|
||||
};
|
||||
}, [syncReadProgress]);
|
||||
|
||||
return {
|
||||
currentPage,
|
||||
setCurrentPage,
|
||||
showEndMessage,
|
||||
setShowEndMessage,
|
||||
navigateToPage,
|
||||
handlePreviousPage,
|
||||
handleNextPage,
|
||||
};
|
||||
}
|
||||
74
src/components/reader/hooks/usePhotoSwipeZoom.ts
Normal file
74
src/components/reader/hooks/usePhotoSwipeZoom.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import { useRef, useCallback, useEffect } from "react";
|
||||
import PhotoSwipe from "photoswipe";
|
||||
|
||||
interface UsePhotoSwipeZoomProps {
|
||||
loadedImages: Record<number, { width: number; height: number }>;
|
||||
currentPage: number;
|
||||
getPageUrl: (pageNum: number) => string;
|
||||
}
|
||||
|
||||
export function usePhotoSwipeZoom({
|
||||
loadedImages,
|
||||
currentPage,
|
||||
getPageUrl,
|
||||
}: UsePhotoSwipeZoomProps) {
|
||||
const pswpRef = useRef<PhotoSwipe | null>(null);
|
||||
|
||||
// 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 {
|
||||
pswpRef,
|
||||
handleZoom,
|
||||
};
|
||||
}
|
||||
117
src/components/reader/hooks/useTouchNavigation.ts
Normal file
117
src/components/reader/hooks/useTouchNavigation.ts
Normal file
@@ -0,0 +1,117 @@
|
||||
import { useCallback, useRef, useEffect } from "react";
|
||||
import { useReadingDirection } from "./useReadingDirection";
|
||||
|
||||
interface UseTouchNavigationProps {
|
||||
onPreviousPage: () => void;
|
||||
onNextPage: () => void;
|
||||
pswpRef: React.MutableRefObject<any>;
|
||||
}
|
||||
|
||||
export function useTouchNavigation({
|
||||
onPreviousPage,
|
||||
onNextPage,
|
||||
pswpRef,
|
||||
}: UseTouchNavigationProps) {
|
||||
const { isRTL } = useReadingDirection();
|
||||
const touchStartXRef = useRef<number | null>(null);
|
||||
const touchStartYRef = useRef<number | null>(null);
|
||||
const isPinchingRef = useRef(false);
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Un seul doigt - seulement si on n'était pas en train de pinch
|
||||
// On réinitialise isPinchingRef seulement ici, quand on commence un nouveau geste à 1 doigt
|
||||
if (e.touches.length === 1) {
|
||||
isPinchingRef.current = false;
|
||||
touchStartXRef.current = e.touches[0].clientX;
|
||||
touchStartYRef.current = e.touches[0].clientY;
|
||||
}
|
||||
}, [pswpRef]);
|
||||
|
||||
const handleTouchMove = useCallback((e: TouchEvent) => {
|
||||
// Détecter le pinch pendant le mouvement
|
||||
if (e.touches.length > 1) {
|
||||
isPinchingRef.current = true;
|
||||
touchStartXRef.current = null;
|
||||
touchStartYRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleTouchEnd = useCallback((e: TouchEvent) => {
|
||||
// Si on était en mode pinch, ne JAMAIS traiter le swipe
|
||||
if (isPinchingRef.current) {
|
||||
touchStartXRef.current = null;
|
||||
touchStartYRef.current = null;
|
||||
// Ne PAS réinitialiser isPinchingRef ici, on le fera au prochain touchstart
|
||||
return;
|
||||
}
|
||||
|
||||
// Vérifier qu'on a bien des coordonnées de départ
|
||||
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 50px pour changer de page
|
||||
if (Math.abs(deltaX) > 50) {
|
||||
if (deltaX > 0) {
|
||||
// Swipe vers la droite
|
||||
if (isRTL) {
|
||||
onNextPage();
|
||||
} else {
|
||||
onPreviousPage();
|
||||
}
|
||||
} else {
|
||||
// Swipe vers la gauche
|
||||
if (isRTL) {
|
||||
onPreviousPage();
|
||||
} else {
|
||||
onNextPage();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
touchStartXRef.current = null;
|
||||
touchStartYRef.current = null;
|
||||
}, [onNextPage, onPreviousPage, isRTL, pswpRef]);
|
||||
|
||||
// Setup touch event listeners
|
||||
useEffect(() => {
|
||||
window.addEventListener("touchstart", handleTouchStart);
|
||||
window.addEventListener("touchmove", handleTouchMove);
|
||||
window.addEventListener("touchend", handleTouchEnd);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("touchstart", handleTouchStart);
|
||||
window.removeEventListener("touchmove", handleTouchMove);
|
||||
window.removeEventListener("touchend", handleTouchEnd);
|
||||
};
|
||||
}, [handleTouchStart, handleTouchMove, handleTouchEnd]);
|
||||
|
||||
return {
|
||||
handleTouchStart,
|
||||
handleTouchMove,
|
||||
handleTouchEnd,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user