feat: review bookreader zoom and pages on mobile

src/components/reader/BookReader.tsx

@@ -32,6 +32,7 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
     handlePreviousPage,
     handleNextPage,
     shouldShowDoublePage,
+    zoomLevel,
   } = usePageNavigation({
     book,
     pages,
@@ -116,6 +117,7 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
             shouldShowDoublePage={shouldShowDoublePage}
             isRTL={isRTL}
             onThumbnailLoad={handleThumbnailLoad}
+            zoomLevel={zoomLevel}
           />
 
           <NavigationBar

src/components/reader/components/ReaderContent.tsx

@@ -10,6 +10,7 @@ interface ReaderContentProps {
   shouldShowDoublePage: (page: number) => boolean;
   isRTL: boolean;
   onThumbnailLoad: (pageNumber: number) => void;
+  zoomLevel: number;
 }
 
 export const ReaderContent = ({
@@ -22,6 +23,7 @@ export const ReaderContent = ({
   shouldShowDoublePage,
   isRTL,
   onThumbnailLoad,
+  zoomLevel,
 }: ReaderContentProps) => {
   return (
     <div className="relative flex-1 flex items-center justify-center overflow-hidden p-1">
@@ -34,6 +36,7 @@ export const ReaderContent = ({
           isDoublePage={isDoublePage}
           isRTL={isRTL}
           order="first"
+          zoomLevel={zoomLevel}
         />
 
         {isDoublePage && shouldShowDoublePage(currentPage) && (

src/components/reader/components/SinglePage.tsx

@@ -9,6 +9,7 @@ interface SinglePageProps {
   isDoublePage?: boolean;
   isRTL?: boolean;
   order?: "first" | "second";
+  zoomLevel?: number;
 }
 
 export const SinglePage = ({
@@ -19,6 +20,7 @@ export const SinglePage = ({
   isDoublePage = false,
   isRTL = false,
   order = "first",
+  zoomLevel,
 }: SinglePageProps) => {
   return (
     <div
@@ -36,6 +38,9 @@ export const SinglePage = ({
       {pageUrl && (
         <img
           src={pageUrl}
+          style={{
+            transform: `scale(${zoomLevel})`,
+          }}
           alt={`Page ${pageNumber}`}
           className={cn(
             "max-h-full w-auto object-contain transition-opacity duration-300",

src/components/reader/hooks/usePageNavigation.ts

@@ -24,6 +24,8 @@ export const usePageNavigation = ({
   const touchStartYRef = useRef<number | null>(null);
   const currentPageRef = useRef(currentPage);
   const isRTL = direction === "rtl";
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const initialDistanceRef = useRef<number | null>(null);
 
   useEffect(() => {
     currentPageRef.current = currentPage;
@@ -68,6 +70,8 @@ export const usePageNavigation = ({
 
   const shouldShowDoublePage = useCallback(
     (pageNumber: number) => {
+      const isMobile = window.innerHeight < 700;
+      if (isMobile) return false;
       if (!isDoublePage) return false;
       if (pageNumber === 1) return false;
       return pageNumber < pages.length;
@@ -103,17 +107,40 @@ export const usePageNavigation = ({
     }
   }, [currentPage, isDoublePage, navigateToPage, pages.length, shouldShowDoublePage]);
 
+  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;
+        setZoomLevel((prevZoomLevel) => Math.max(1, prevZoomLevel * scale));
+      }
+    }
+  }, []);
+
   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;
         currentPageRef.current = currentPage;
+      }
     },
     [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;
@@ -180,13 +207,23 @@ 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, handlePreviousPage, handleTouchStart, handleTouchEnd, onClose, isRTL]);
+  }, [
+    handleNextPage,
+    handlePreviousPage,
+    handleTouchStart,
+    handleTouchEnd,
+    onClose,
+    isRTL,
+    handleTouchMove,
+  ]);
 
   useEffect(() => {
     return () => {
@@ -207,5 +244,6 @@ export const usePageNavigation = ({
     handlePreviousPage,
     handleNextPage,
     shouldShowDoublePage,
+    zoomLevel,
   };
 };