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

src/components/reader/hooks/usePageNavigation.ts

@@ -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,
   };