From c62cff07d2144e992b6bad797488abb7810a3607 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 21 Feb 2025 22:41:11 +0100
Subject: [PATCH] feat(reader): right to left read

---
 src/components/reader/BookReader.tsx          | 42 ++++++---
 .../reader/components/ControlButtons.tsx      | 23 ++++-
 .../reader/hooks/usePageNavigation.ts         | 86 +++++++++++++------
 .../reader/hooks/useReadingDirection.ts       | 28 ++++++
 src/components/reader/types.ts                |  3 +
 5 files changed, 143 insertions(+), 39 deletions(-)
 create mode 100644 src/components/reader/hooks/useReadingDirection.ts

diff --git a/src/components/reader/BookReader.tsx b/src/components/reader/BookReader.tsx
index f594640..7d2b82d 100644
--- a/src/components/reader/BookReader.tsx
+++ b/src/components/reader/BookReader.tsx
@@ -10,6 +10,7 @@ import { NavigationBar } from "./components/NavigationBar";
 import { ControlButtons } from "./components/ControlButtons";
 import { ImageLoader } from "@/components/ui/image-loader";
 import { cn } from "@/lib/utils";
+import { useReadingDirection } from "./hooks/useReadingDirection";
 
 export function BookReader({ book, pages, onClose }: BookReaderProps) {
   const [isDoublePage, setIsDoublePage] = useState(false);
@@ -17,6 +18,7 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
   const [isFullscreen, setIsFullscreen] = useState(false);
   const readerRef = useRef<HTMLDivElement>(null);
   const isLandscape = useOrientation();
+  const { direction, toggleDirection, isRTL } = useReadingDirection();
 
   const {
     currentPage,
@@ -33,6 +35,7 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
     pages,
     isDoublePage,
     onClose,
+    direction,
   });
 
   const { preloadPage, getPageUrl, cleanCache } = usePageCache({
@@ -133,7 +136,15 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
     return () => {
       isMounted = false;
     };
-  }, [currentPage, isDoublePage, shouldShowDoublePage, preloadPage, cleanCache, pages.length]);
+  }, [
+    currentPage,
+    isDoublePage,
+    shouldShowDoublePage,
+    preloadPage,
+    cleanCache,
+    pages.length,
+    isRTL,
+  ]);
 
   // Effet pour gérer le mode double page automatiquement en paysage
   useEffect(() => {
@@ -200,6 +211,8 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
                 console.error("Erreur lors du changement de mode plein écran:", error);
               }
             }}
+            direction={direction}
+            onToggleDirection={toggleDirection}
           />
 
           {/* Pages */}
@@ -216,7 +229,8 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
               <div
                 className={cn(
                   "relative h-full flex items-center",
-                  isDoublePage ? "w-1/2 justify-end" : "w-full justify-center"
+                  isDoublePage ? "w-1/2 justify-end" : "w-full justify-center",
+                  direction === "rtl" && isDoublePage && "justify-start"
                 )}
               >
                 <ImageLoader isLoading={isLoading} />
@@ -235,7 +249,12 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
 
               {/* Deuxième page en mode double page */}
               {isDoublePage && shouldShowDoublePage(currentPage) && (
-                <div className="relative h-full w-1/2 flex items-center justify-start">
+                <div
+                  className={cn(
+                    "relative h-full w-1/2 flex items-center",
+                    direction === "rtl" ? "justify-end" : "justify-start"
+                  )}
+                >
                   <ImageLoader isLoading={secondPageLoading} />
                   {nextPageUrl && (
                     <img
@@ -252,15 +271,16 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
               )}
             </div>
           </div>
-        </div>
 
-        <NavigationBar
-          currentPage={currentPage}
-          pages={pages}
-          onPageChange={navigateToPage}
-          showControls={showControls}
-          book={book}
-        />
+          {/* Barre de navigation */}
+          <NavigationBar
+            currentPage={currentPage}
+            pages={pages}
+            onPageChange={navigateToPage}
+            showControls={showControls}
+            book={book}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/reader/components/ControlButtons.tsx b/src/components/reader/components/ControlButtons.tsx
index dd3b70a..6733e90 100644
--- a/src/components/reader/components/ControlButtons.tsx
+++ b/src/components/reader/components/ControlButtons.tsx
@@ -7,6 +7,7 @@ import {
   LayoutTemplate,
   Maximize2,
   Minimize2,
+  ArrowLeftRight,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 
@@ -22,6 +23,8 @@ export const ControlButtons = ({
   onToggleDoublePage,
   isFullscreen,
   onToggleFullscreen,
+  direction,
+  onToggleDirection,
 }: ControlButtonsProps) => {
   return (
     <>
@@ -52,6 +55,20 @@ export const ControlButtons = ({
             <SplitSquareVertical className="h-6 w-6" />
           )}
         </button>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onToggleDirection();
+          }}
+          className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
+          aria-label={`Changer le sens de lecture (actuellement de ${
+            direction === "ltr" ? "gauche à droite" : "droite à gauche"
+          })`}
+        >
+          <ArrowLeftRight
+            className={cn("h-6 w-6 transition-transform", direction === "rtl" && "rotate-180")}
+          />
+        </button>
         <button
           onClick={(e) => {
             e.stopPropagation();
@@ -89,7 +106,8 @@ export const ControlButtons = ({
             onPreviousPage();
           }}
           className={cn(
-            "absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
+            "absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
+            direction === "rtl" ? "right-4" : "left-4",
             showControls ? "opacity-100" : "opacity-0 pointer-events-none"
           )}
           aria-label="Page précédente"
@@ -106,7 +124,8 @@ export const ControlButtons = ({
             onNextPage();
           }}
           className={cn(
-            "absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
+            "absolute top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-20",
+            direction === "rtl" ? "left-4" : "right-4",
             showControls ? "opacity-100" : "opacity-0 pointer-events-none"
           )}
           aria-label="Page suivante"
diff --git a/src/components/reader/hooks/usePageNavigation.ts b/src/components/reader/hooks/usePageNavigation.ts
index 2df89f9..7d9e306 100644
--- a/src/components/reader/hooks/usePageNavigation.ts
+++ b/src/components/reader/hooks/usePageNavigation.ts
@@ -6,6 +6,7 @@ interface UsePageNavigationProps {
   pages: number[];
   isDoublePage: boolean;
   onClose?: () => void;
+  direction: "ltr" | "rtl";
 }
 
 export const usePageNavigation = ({
@@ -13,6 +14,7 @@ export const usePageNavigation = ({
   pages,
   isDoublePage,
   onClose,
+  direction,
 }: UsePageNavigationProps) => {
   const [currentPage, setCurrentPage] = useState(book.readProgress?.page || 1);
   const [isLoading, setIsLoading] = useState(true);
@@ -21,6 +23,7 @@ export const usePageNavigation = ({
   const touchStartXRef = useRef<number | null>(null);
   const touchStartYRef = useRef<number | null>(null);
   const currentPageRef = useRef(currentPage);
+  const isRTL = direction === "rtl";
 
   useEffect(() => {
     currentPageRef.current = currentPage;
@@ -74,32 +77,40 @@ export const usePageNavigation = ({
 
   const navigateToPage = useCallback(
     (page: number) => {
+      // if (page >= 1 && page <= pages.length) {
       setCurrentPage(page);
       setIsLoading(true);
       setSecondPageLoading(true);
       debouncedSyncReadProgress(page);
+      // }
     },
     [debouncedSyncReadProgress]
   );
 
   const handlePreviousPage = useCallback(() => {
-    if (currentPage > 1) {
-      const newPage = isDoublePage && currentPage > 2 ? currentPage - 2 : currentPage - 1;
-      navigateToPage(newPage);
+    if (isDoublePage && shouldShowDoublePage(currentPage - 2)) {
+      navigateToPage(Math.max(1, currentPage - 2));
+    } else {
+      navigateToPage(Math.max(1, currentPage - 1));
     }
-  }, [currentPage, isDoublePage, navigateToPage]);
+  }, [currentPage, isDoublePage, navigateToPage, shouldShowDoublePage]);
 
   const handleNextPage = useCallback(() => {
-    if (currentPage < pages.length) {
-      const newPage = isDoublePage ? Math.min(currentPage + 2, pages.length) : currentPage + 1;
-      navigateToPage(newPage);
+    if (isDoublePage && shouldShowDoublePage(currentPage)) {
+      navigateToPage(Math.min(pages.length, currentPage + 2));
+    } else {
+      navigateToPage(Math.min(pages.length, currentPage + 1));
     }
-  }, [currentPage, pages.length, isDoublePage, navigateToPage]);
+  }, [currentPage, isDoublePage, navigateToPage, pages.length, shouldShowDoublePage]);
 
-  const handleTouchStart = useCallback((event: TouchEvent) => {
-    touchStartXRef.current = event.touches[0].clientX;
-    touchStartYRef.current = event.touches[0].clientY;
-  }, []);
+  const handleTouchStart = useCallback(
+    (event: TouchEvent) => {
+      touchStartXRef.current = event.touches[0].clientX;
+      touchStartYRef.current = event.touches[0].clientY;
+      currentPageRef.current = currentPage;
+    },
+    [currentPage]
+  );
 
   const handleTouchEnd = useCallback(
     (event: TouchEvent) => {
@@ -108,23 +119,35 @@ export const usePageNavigation = ({
       const touchEndX = event.changedTouches[0].clientX;
       const touchEndY = event.changedTouches[0].clientY;
       const deltaX = touchEndX - touchStartXRef.current;
-      const deltaY = Math.abs(touchEndY - touchStartYRef.current);
-      const minSwipeDistance = 50;
+      const deltaY = touchEndY - touchStartYRef.current;
 
-      if (deltaY > Math.abs(deltaX)) 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;
 
-      if (Math.abs(deltaX) > minSwipeDistance) {
+      // On vérifie si le déplacement est suffisant pour changer de page
+      if (Math.abs(deltaX) > 50) {
         if (deltaX > 0) {
-          handlePreviousPage();
+          // Swipe vers la droite
+          if (isRTL) {
+            handleNextPage();
+          } else {
+            handlePreviousPage();
+          }
         } else {
-          handleNextPage();
+          // Swipe vers la gauche
+          if (isRTL) {
+            handlePreviousPage();
+          } else {
+            handleNextPage();
+          }
         }
       }
 
       touchStartXRef.current = null;
       touchStartYRef.current = null;
     },
-    [handlePreviousPage, handleNextPage]
+    [handleNextPage, handlePreviousPage, isRTL]
   );
 
   useEffect(() => {
@@ -133,12 +156,23 @@ export const usePageNavigation = ({
   }, [isDoublePage]);
 
   useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "ArrowLeft") {
-        handlePreviousPage();
-      } else if (event.key === "ArrowRight") {
-        handleNextPage();
-      } else if (event.key === "Escape" && onClose) {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        if (isRTL) {
+          handleNextPage();
+        } else {
+          handlePreviousPage();
+        }
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        if (isRTL) {
+          handlePreviousPage();
+        } else {
+          handleNextPage();
+        }
+      } else if (e.key === "Escape" && onClose) {
+        e.preventDefault();
         onClose();
       }
     };
@@ -152,7 +186,7 @@ export const usePageNavigation = ({
       window.removeEventListener("touchstart", handleTouchStart);
       window.removeEventListener("touchend", handleTouchEnd);
     };
-  }, [handlePreviousPage, handleNextPage, handleTouchStart, handleTouchEnd, onClose]);
+  }, [handleNextPage, handlePreviousPage, handleTouchStart, handleTouchEnd, onClose, isRTL]);
 
   useEffect(() => {
     return () => {
diff --git a/src/components/reader/hooks/useReadingDirection.ts b/src/components/reader/hooks/useReadingDirection.ts
new file mode 100644
index 0000000..b243c3a
--- /dev/null
+++ b/src/components/reader/hooks/useReadingDirection.ts
@@ -0,0 +1,28 @@
+import { useState, useEffect } from "react";
+
+type ReadingDirection = "ltr" | "rtl";
+
+export const useReadingDirection = () => {
+  const [direction, setDirection] = useState<ReadingDirection>(() => {
+    if (typeof window !== "undefined") {
+      const savedDirection = localStorage.getItem("reading-direction") as ReadingDirection;
+      return savedDirection === "rtl" ? "rtl" : "ltr";
+    }
+    return "ltr";
+  });
+
+  useEffect(() => {
+    localStorage.setItem("reading-direction", direction);
+  }, [direction]);
+
+  const toggleDirection = () => {
+    setDirection((prev) => (prev === "ltr" ? "rtl" : "ltr"));
+  };
+
+  return {
+    direction,
+    setDirection,
+    toggleDirection,
+    isRTL: direction === "rtl",
+  };
+};
diff --git a/src/components/reader/types.ts b/src/components/reader/types.ts
index cdd4d8c..052fcb0 100644
--- a/src/components/reader/types.ts
+++ b/src/components/reader/types.ts
@@ -45,6 +45,8 @@ export interface ControlButtonsProps {
   onToggleDoublePage: () => void;
   isFullscreen: boolean;
   onToggleFullscreen: () => void;
+  direction: "ltr" | "rtl";
+  onToggleDirection: () => void;
 }
 
 export interface UsePageNavigationProps {
@@ -52,4 +54,5 @@ export interface UsePageNavigationProps {
   pages: number[];
   isDoublePage: boolean;
   onClose?: () => void;
+  direction: "ltr" | "rtl";
 }