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

refactor: remove zoom and pan functionality from BookReader and ReaderContent components, replacing SinglePage with ZoomablePage for enhanced zoom capabilities

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-16 14:18:13 +02:00
parent fd22e2ee83
commit c59a472853
4 changed files with 103 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,9 +35,6 @@ export function BookReader({ book, pages, onClose, nextBook }: BookReaderProps)
handlePreviousPage,
handleNextPage,
shouldShowDoublePage,
zoomLevel,
panPosition,
handleDoubleClick,
showEndMessage,
} = usePageNavigation({
book,
@@ -141,9 +138,6 @@ export function BookReader({ book, pages, onClose, nextBook }: BookReaderProps)
shouldShowDoublePage={shouldShowDoublePage}
isRTL={isRTL}
onThumbnailLoad={handleThumbnailLoad}
zoomLevel={zoomLevel}
panPosition={panPosition}
onDoubleClick={handleDoubleClick}
/>
<NavigationBar

18
src/components/reader/components/ReaderContent.tsx
View File

@@ -1,4 +1,4 @@
import { SinglePage } from "./SinglePage";
import { ZoomablePage } from "./ZoomablePage";
interface ReaderContentProps {
currentPage: number;
@@ -10,9 +10,6 @@ interface ReaderContentProps {
shouldShowDoublePage: (page: number) => boolean;
isRTL: boolean;
onThumbnailLoad: (pageNumber: number) => void;
zoomLevel: number;
panPosition: { x: number; y: number };
onDoubleClick: () => void;
}
export const ReaderContent = ({
@@ -25,14 +22,11 @@ export const ReaderContent = ({
shouldShowDoublePage,
isRTL,
onThumbnailLoad,
zoomLevel,
panPosition,
onDoubleClick,
}: ReaderContentProps) => {
return (
<div className="relative flex-1 flex items-center justify-center overflow-hidden p-1">
<div className="relative w-full h-[calc(100vh-2rem)] flex items-center justify-center gap-0">
<SinglePage
<ZoomablePage
pageUrl={currentPageUrl}
pageNumber={currentPage}
isLoading={isLoading}
@@ -40,13 +34,10 @@ export const ReaderContent = ({
isDoublePage={isDoublePage}
isRTL={isRTL}
order="first"
zoomLevel={zoomLevel}
panPosition={panPosition}
onDoubleClick={onDoubleClick}
/>
{isDoublePage && shouldShowDoublePage(currentPage) && (
<SinglePage
<ZoomablePage
pageUrl={nextPageUrl}
pageNumber={currentPage + 1}
isLoading={secondPageLoading}
@@ -54,9 +45,6 @@ export const ReaderContent = ({
isDoublePage={true}
isRTL={isRTL}
order="second"
zoomLevel={zoomLevel}
panPosition={panPosition}
onDoubleClick={onDoubleClick}
/>
)}
</div>

77
src/components/reader/components/ZoomablePage.tsx Normal file
View File

@@ -0,0 +1,77 @@
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import { cn } from "@/lib/utils";
interface ZoomablePageProps {
pageUrl: string | null;
pageNumber: number;
isLoading: boolean;
onLoad: (pageNumber: number) => void;
isDoublePage?: boolean;
isRTL?: boolean;
order?: "first" | "second";
}
export const ZoomablePage = ({
pageUrl,
pageNumber,
isLoading,
onLoad,
isDoublePage = false,
isRTL = false,
order = "first",
}: ZoomablePageProps) => {
return (
<div
className={cn(
"relative h-full flex items-center",
isDoublePage && {
"w-1/2": true,
"order-2 justify-start": order === "first" ? isRTL : !isRTL,
"order-1 justify-end": order === "first" ? !isRTL : isRTL,
},
!isDoublePage && "w-full justify-center"
)}
>
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
</div>
)}
{pageUrl && (
<TransformWrapper
initialScale={1}
minScale={1}
maxScale={4}
centerOnInit={true}
wheel={{ step: 1.5 }}
pinch={{ step: 1 }}
doubleClick={{
disabled: false,
step: 1,
animationTime: 200,
animationType: "easeOut"
}}
panning={{ disabled: false }}
limitToBounds={true}
centerZoomedOut={false}
>
<TransformComponent
wrapperClass="w-full h-full flex items-center justify-center"
contentClass="cursor-pointer"
>
<img
src={pageUrl}
alt={`Page ${pageNumber}`}
className={cn(
"max-h-full w-auto object-contain",
isLoading ? "opacity-0" : "opacity-100"
)}
onLoad={() => onLoad(pageNumber)}
/>
</TransformComponent>
</TransformWrapper>
)}
</div>
);
};

102
src/components/reader/hooks/usePageNavigation.ts
View File

@@ -25,17 +25,12 @@ export const usePageNavigation = ({
const [currentPage, setCurrentPage] = useState(cPage < 1 ? 1 : cPage);
const [isLoading, setIsLoading] = useState(true);
const [secondPageLoading, setSecondPageLoading] = useState(true);
const [zoomLevel, setZoomLevel] = useState(1);
const [panPosition, setPanPosition] = useState({ x: 0, y: 0 });
const [showEndMessage, setShowEndMessage] = useState(false);
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const touchStartXRef = useRef<number | null>(null);
const touchStartYRef = useRef<number | null>(null);
const lastPanPositionRef = useRef({ x: 0, y: 0 });
const currentPageRef = useRef(currentPage);
const isRTL = direction === "rtl";
const initialDistanceRef = useRef<number | null>(null);
const DEFAULT_ZOOM_LEVEL = 2;
useEffect(() => {
currentPageRef.current = currentPage;
@@ -136,59 +131,17 @@ export const usePageNavigation = ({
router,
]);
const calculateDistance = (touch1: Touch, touch2: Touch) => {
const dx = touch2.clientX - touch1.clientX;
const dy = touch2.clientY - touch1.clientY;
return Math.sqrt(dx * dx + dy * dy);
};
const handleTouchMove = useCallback(
(event: TouchEvent) => {
if (event.touches.length === 2) {
const distance = calculateDistance(event.touches[0], event.touches[1]);
if (initialDistanceRef.current !== null) {
const scale = distance / initialDistanceRef.current;
const zoomFactor = 0.3;
setZoomLevel((prevZoomLevel) =>
Math.min(3, Math.max(1, prevZoomLevel + (scale - 1) * zoomFactor))
);
}
} else if (event.touches.length === 1 && zoomLevel > 1) {
// Gestion du pan uniquement quand on est zoomé
if (touchStartXRef.current !== null && touchStartYRef.current !== null) {
const deltaX = event.touches[0].clientX - touchStartXRef.current;
const deltaY = event.touches[0].clientY - touchStartYRef.current;
setPanPosition({
x: lastPanPositionRef.current.x + deltaX,
y: lastPanPositionRef.current.y + deltaY,
});
}
event.preventDefault(); // Empêcher le scroll de la page
}
},
[zoomLevel]
);
const handleTouchStart = useCallback(
(event: TouchEvent) => {
if (event.touches.length === 2) {
initialDistanceRef.current = calculateDistance(event.touches[0], event.touches[1]);
} else {
touchStartXRef.current = event.touches[0].clientX;
touchStartYRef.current = event.touches[0].clientY;
lastPanPositionRef.current = panPosition;
currentPageRef.current = currentPage;
}
touchStartXRef.current = event.touches[0].clientX;
touchStartYRef.current = event.touches[0].clientY;
currentPageRef.current = currentPage;
},
[currentPage, panPosition]
[currentPage]
);
const handleTouchEnd = useCallback(
(event: TouchEvent) => {
if (event.touches.length < 2) {
initialDistanceRef.current = null;
}
if (touchStartXRef.current === null || touchStartYRef.current === null) return;
const touchEndX = event.changedTouches[0].clientX;
@@ -196,15 +149,6 @@ export const usePageNavigation = ({
const deltaX = touchEndX - touchStartXRef.current;
const deltaY = touchEndY - touchStartYRef.current;
// Si on est zoomé, on met à jour la position finale du pan
if (zoomLevel > 1) {
lastPanPositionRef.current = {
x: lastPanPositionRef.current.x + deltaX,
y: lastPanPositionRef.current.y + deltaY,
};
return;
}
// Si le déplacement vertical est plus important que le déplacement horizontal,
// on ne fait rien (pour éviter de confondre avec un scroll)
if (Math.abs(deltaY) > Math.abs(deltaX)) return;
@@ -231,16 +175,9 @@ export const usePageNavigation = ({
touchStartXRef.current = null;
touchStartYRef.current = null;
},
[handleNextPage, handlePreviousPage, isRTL, zoomLevel]
[handleNextPage, handlePreviousPage, isRTL]
);
// Reset du pan quand on change de page ou dezoom
useEffect(() => {
if (zoomLevel === 1) {
setPanPosition({ x: 0, y: 0 });
lastPanPositionRef.current = { x: 0, y: 0 };
}
}, [zoomLevel, currentPage]);
useEffect(() => {
setIsLoading(true);
@@ -272,13 +209,11 @@ export const usePageNavigation = ({
window.addEventListener("keydown", handleKeyDown);
window.addEventListener("touchstart", handleTouchStart);
window.addEventListener("touchend", handleTouchEnd);
window.addEventListener("touchmove", handleTouchMove);
return () => {
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener("touchstart", handleTouchStart);
window.removeEventListener("touchend", handleTouchEnd);
window.removeEventListener("touchmove", handleTouchMove);
};
}, [
handleNextPage,
@@ -287,7 +222,7 @@ export const usePageNavigation = ({
handleTouchEnd,
onClose,
isRTL,
handleTouchMove,
currentPage,
]);
useEffect(() => {
@@ -300,13 +235,24 @@ export const usePageNavigation = ({
};
}, [syncReadProgress, book]);
const handleDoubleClick = useCallback(() => {
setZoomLevel((prevZoom) => {
if (prevZoom === 1) {
return DEFAULT_ZOOM_LEVEL;
const handleDoubleClick = useCallback((transformRef?: any) => {
if (transformRef?.current) {
try {
// Utiliser setTransform au lieu de zoomIn pour éviter les NaN
const transform = transformRef.current;
const currentScale = transform.instance?.state?.scale || 1;
if (currentScale <= 1.1) {
// Zoom à 2x
transform.setTransform(0, 0, 2);
} else {
// Reset à 1x
transform.setTransform(0, 0, 1);
}
} catch (error) {
console.error("Error in handleDoubleClick:", error);
}
return 1;
});
}
}, []);
return {
@@ -319,8 +265,6 @@ export const usePageNavigation = ({
handlePreviousPage,
handleNextPage,
shouldShowDoublePage,
zoomLevel,
panPosition,
handleDoubleClick,
showEndMessage,
};