From 0716f381758753f1af215fb47f00d85b65717315 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Thu, 16 Oct 2025 14:26:53 +0200
Subject: [PATCH] fix: improve touch gesture handling in usePageNavigation hook
 and add img element eslint directive in ZoomablePage component

---
 .../reader/components/ZoomablePage.tsx        |  1 +
 .../reader/hooks/usePageNavigation.ts         | 20 ++++++++++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/reader/components/ZoomablePage.tsx b/src/components/reader/components/ZoomablePage.tsx
index d6ea046..676a1cd 100644
--- a/src/components/reader/components/ZoomablePage.tsx
+++ b/src/components/reader/components/ZoomablePage.tsx
@@ -60,6 +60,7 @@ export const ZoomablePage = ({
             wrapperClass="w-full h-full flex items-center justify-center"
             contentClass="cursor-pointer"
           >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
               src={pageUrl}
               alt={`Page ${pageNumber}`}
diff --git a/src/components/reader/hooks/usePageNavigation.ts b/src/components/reader/hooks/usePageNavigation.ts
index 95f0e7b..ba495c6 100644
--- a/src/components/reader/hooks/usePageNavigation.ts
+++ b/src/components/reader/hooks/usePageNavigation.ts
@@ -133,15 +133,25 @@ export const usePageNavigation = ({
 
   const handleTouchStart = useCallback(
     (event: TouchEvent) => {
-      touchStartXRef.current = event.touches[0].clientX;
-      touchStartYRef.current = event.touches[0].clientY;
-      currentPageRef.current = currentPage;
+      // Ne gérer que les gestes à un seul doigt
+      if (event.touches.length === 1) {
+        touchStartXRef.current = event.touches[0].clientX;
+        touchStartYRef.current = event.touches[0].clientY;
+        currentPageRef.current = currentPage;
+      } else {
+        // Reset les références pour les gestes multi-touch (pinch)
+        touchStartXRef.current = null;
+        touchStartYRef.current = null;
+      }
     },
     [currentPage]
   );
 
   const handleTouchEnd = useCallback(
     (event: TouchEvent) => {
+      // Ne traiter que les gestes à un seul doigt
+      if (event.touches.length > 1) return;
+      
       if (touchStartXRef.current === null || touchStartYRef.current === null) return;
 
       const touchEndX = event.changedTouches[0].clientX;
@@ -153,8 +163,8 @@ export const usePageNavigation = ({
       // on ne fait rien (pour éviter de confondre avec un scroll)
       if (Math.abs(deltaY) > Math.abs(deltaX)) return;
 
-      // On vérifie si le déplacement est suffisant pour changer de page
-      if (Math.abs(deltaX) > 50) {
+      // Augmenter le seuil pour éviter les changements de page accidentels
+      if (Math.abs(deltaX) > 100) {
         if (deltaX > 0) {
           // Swipe vers la droite
           if (isRTL) {