fix: review fullscreen and touch

src/components/reader/BookReader.tsx

@@ -142,23 +142,11 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
 
   // Effet pour gérer le fullscreen
   useEffect(() => {
-    const enterFullscreen = async () => {
-      try {
-        if (readerRef.current && !isFullscreen) {
-          await readerRef.current.requestFullscreen();
-          setIsFullscreen(true);
-        }
-      } catch (error) {
-        console.error("Erreur lors du passage en plein écran:", error);
-      }
-    };
-
     const handleFullscreenChange = () => {
       setIsFullscreen(!!document.fullscreenElement);
     };
 
     document.addEventListener("fullscreenchange", handleFullscreenChange);
-    enterFullscreen();
 
     return () => {
       document.removeEventListener("fullscreenchange", handleFullscreenChange);

src/components/reader/components/ControlButtons.tsx

@@ -25,10 +25,10 @@ export const ControlButtons = ({
 }: ControlButtonsProps) => {
   return (
     <>
-      {/* Bouton mode double page */}
+      {/* Boutons de contrôle */}
       <div
         className={cn(
-          "absolute top-4 left-4 z-30 flex items-center gap-2 transition-all duration-300",
+          "absolute top-4 left-1/2 -translate-x-1/2 z-30 flex items-center gap-2 transition-all duration-300",
           showControls ? "opacity-100" : "opacity-0 pointer-events-none"
         )}
       >

src/components/reader/hooks/usePageNavigation.ts

@@ -20,6 +20,7 @@ export const usePageNavigation = ({
   const [imageError, setImageError] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const touchStartXRef = useRef<number | null>(null);
+  const touchStartYRef = useRef<number | null>(null);
   const currentPageRef = useRef(currentPage);
 
   useEffect(() => {
@@ -94,16 +95,17 @@ export const usePageNavigation = ({
 
   const handleTouchStart = useCallback((event: TouchEvent) => {
     touchStartXRef.current = event.touches[0].clientX;
+    touchStartYRef.current = event.touches[0].clientY;
   }, []);
 
   const handleTouchEnd = useCallback(
     (event: TouchEvent) => {
-      if (touchStartXRef.current === null) return;
+      if (touchStartXRef.current === null || touchStartYRef.current === null) return;
 
       const touchEndX = event.changedTouches[0].clientX;
       const touchEndY = event.changedTouches[0].clientY;
       const deltaX = touchEndX - touchStartXRef.current;
-      const deltaY = Math.abs(touchEndY - event.touches[0].clientY);
+      const deltaY = Math.abs(touchEndY - touchStartYRef.current);
       const minSwipeDistance = 50;
 
       if (deltaY > Math.abs(deltaX)) return;
@@ -117,6 +119,7 @@ export const usePageNavigation = ({
       }
 
       touchStartXRef.current = null;
+      touchStartYRef.current = null;
     },
     [handlePreviousPage, handleNextPage]
   );