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 */
|
/* eslint-disable @next/next/no-img-element */
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useRef, useState, useCallback } from "react";
|
import { useEffect, useState, useCallback, useRef } from "react";
|
||||||
import PhotoSwipe from "photoswipe";
|
|
||||||
import "photoswipe/style.css";
|
import "photoswipe/style.css";
|
||||||
import type { BookReaderProps } from "./types";
|
import type { BookReaderProps } from "./types";
|
||||||
import { useOrientation } from "./hooks/useOrientation";
|
|
||||||
import { useFullscreen } from "./hooks/useFullscreen";
|
import { useFullscreen } from "./hooks/useFullscreen";
|
||||||
import { useReadingDirection } from "./hooks/useReadingDirection";
|
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 { ControlButtons } from "./components/ControlButtons";
|
||||||
import { NavigationBar } from "./components/NavigationBar";
|
import { NavigationBar } from "./components/NavigationBar";
|
||||||
import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
|
import { EndOfSeriesModal } from "./components/EndOfSeriesModal";
|
||||||
import { useRouter } from "next/navigation";
|
import { PageDisplay } from "./components/PageDisplay";
|
||||||
import { cn } from "@/lib/utils";
|
import { ReaderContainer } from "./components/ReaderContainer";
|
||||||
|
|
||||||
export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderProps) {
|
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 [showControls, setShowControls] = useState(false);
|
||||||
const [showThumbnails, setShowThumbnails] = 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 lastClickTimeRef = useRef<number>(0);
|
||||||
const clickTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
const clickTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||||
|
|
||||||
// Garder currentPage à jour dans la ref pour le cleanup
|
// Hooks
|
||||||
useEffect(() => {
|
const { direction, toggleDirection, isRTL } = useReadingDirection();
|
||||||
currentPageRef.current = currentPage;
|
const { isFullscreen, toggleFullscreen } = useFullscreen();
|
||||||
}, [currentPage]);
|
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
|
// Activer le zoom dans le reader en enlevant la classe no-pinch-zoom
|
||||||
useEffect(() => {
|
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(() => {
|
useEffect(() => {
|
||||||
setIsDoublePage(isLandscape);
|
loadImageDimensions(currentPage);
|
||||||
}, [isLandscape]);
|
if (isDoublePage && shouldShowDoublePage(currentPage, pages.length)) {
|
||||||
|
loadImageDimensions(currentPage + 1);
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
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;
|
// Keyboard events
|
||||||
touchStartYRef.current = null;
|
|
||||||
}, [handleNextPage, handlePreviousPage, isRTL]);
|
|
||||||
|
|
||||||
// Keyboard & Touch events
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleKeyDown = (e: KeyboardEvent) => {
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
if (e.key === "ArrowLeft") {
|
if (e.key === "ArrowLeft") {
|
||||||
@@ -244,178 +98,11 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
|
|||||||
};
|
};
|
||||||
|
|
||||||
window.addEventListener("keydown", handleKeyDown);
|
window.addEventListener("keydown", handleKeyDown);
|
||||||
window.addEventListener("touchstart", handleTouchStart);
|
|
||||||
window.addEventListener("touchmove", handleTouchMove);
|
|
||||||
window.addEventListener("touchend", handleTouchEnd);
|
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener("keydown", handleKeyDown);
|
window.removeEventListener("keydown", handleKeyDown);
|
||||||
window.removeEventListener("touchstart", handleTouchStart);
|
|
||||||
window.removeEventListener("touchmove", handleTouchMove);
|
|
||||||
window.removeEventListener("touchend", handleTouchEnd);
|
|
||||||
};
|
};
|
||||||
}, [handleNextPage, handlePreviousPage, handleTouchStart, handleTouchMove, handleTouchEnd, onClose, isRTL, currentPage]);
|
}, [handleNextPage, handlePreviousPage, 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]);
|
|
||||||
|
|
||||||
const handleContainerClick = useCallback((e: React.MouseEvent) => {
|
const handleContainerClick = useCallback((e: React.MouseEvent) => {
|
||||||
// Vérifier si c'est un double-clic sur une image
|
// Vérifier si c'est un double-clic sur une image
|
||||||
@@ -450,26 +137,12 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
|
|||||||
}, [showControls, handleZoom]);
|
}, [showControls, handleZoom]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<ReaderContainer onContainerClick={handleContainerClick}>
|
||||||
ref={readerRef}
|
<EndOfSeriesModal
|
||||||
className="reader-zoom-enabled fixed inset-0 bg-background/95 backdrop-blur-sm z-50 overflow-hidden"
|
show={showEndMessage}
|
||||||
onClick={handleContainerClick}
|
onClose={onClose || (() => undefined)}
|
||||||
>
|
currentPage={currentPage}
|
||||||
<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
|
<ControlButtons
|
||||||
showControls={showControls}
|
showControls={showControls}
|
||||||
@@ -481,102 +154,25 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
|
|||||||
currentPage={currentPage}
|
currentPage={currentPage}
|
||||||
totalPages={pages.length}
|
totalPages={pages.length}
|
||||||
isDoublePage={isDoublePage}
|
isDoublePage={isDoublePage}
|
||||||
onToggleDoublePage={() => setIsDoublePage(!isDoublePage)}
|
onToggleDoublePage={toggleDoublePage}
|
||||||
isFullscreen={isFullscreen}
|
isFullscreen={isFullscreen}
|
||||||
onToggleFullscreen={() => toggleFullscreen(readerRef.current)}
|
onToggleFullscreen={() => toggleFullscreen(document.body)}
|
||||||
direction={direction}
|
direction={direction}
|
||||||
onToggleDirection={toggleDirection}
|
onToggleDirection={toggleDirection}
|
||||||
showThumbnails={showThumbnails}
|
showThumbnails={showThumbnails}
|
||||||
onToggleThumbnails={() => setShowThumbnails(!showThumbnails)}
|
onToggleThumbnails={() => setShowThumbnails(!showThumbnails)}
|
||||||
onZoom={handleZoom}
|
onZoom={handleZoom}
|
||||||
onForceReload={handleForceReload}
|
onForceReload={() => handleForceReload(currentPage, isDoublePage, (page) => shouldShowDoublePage(page, pages.length))}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Reader content */}
|
<PageDisplay
|
||||||
<div className="relative flex-1 flex items-center justify-center overflow-hidden w-full">
|
currentPage={currentPage}
|
||||||
<div className="relative w-full h-[calc(100vh-2rem)] flex items-center justify-center gap-1">
|
pages={pages}
|
||||||
{/* Page 1 */}
|
isDoublePage={isDoublePage}
|
||||||
<div
|
shouldShowDoublePage={(page) => shouldShowDoublePage(page, pages.length)}
|
||||||
className={cn(
|
imageBlobUrls={imageBlobUrls}
|
||||||
"relative h-full flex items-center",
|
getPageUrl={getPageUrl}
|
||||||
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>
|
|
||||||
|
|
||||||
{/* 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
|
<NavigationBar
|
||||||
currentPage={currentPage}
|
currentPage={currentPage}
|
||||||
@@ -586,8 +182,7 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
|
|||||||
showThumbnails={showThumbnails}
|
showThumbnails={showThumbnails}
|
||||||
book={book}
|
book={book}
|
||||||
/>
|
/>
|
||||||
</div>
|
</ReaderContainer>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
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,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -45,6 +45,7 @@ class CircuitBreaker {
|
|||||||
if (this.state.state === 'HALF_OPEN') {
|
if (this.state.state === 'HALF_OPEN') {
|
||||||
this.state.failureCount = 0;
|
this.state.failureCount = 0;
|
||||||
this.state.state = 'CLOSED';
|
this.state.state = 'CLOSED';
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
console.log('[CIRCUIT-BREAKER] ✅ Circuit closed - Komga recovered');
|
console.log('[CIRCUIT-BREAKER] ✅ Circuit closed - Komga recovered');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -71,6 +72,7 @@ class CircuitBreaker {
|
|||||||
lastFailureTime: 0,
|
lastFailureTime: 0,
|
||||||
nextAttemptTime: 0,
|
nextAttemptTime: 0,
|
||||||
};
|
};
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
console.log('[CIRCUIT-BREAKER] 🔄 Circuit reset');
|
console.log('[CIRCUIT-BREAKER] 🔄 Circuit reset');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user