diff --git a/src/components/reader/BookReader.tsx b/src/components/reader/BookReader.tsx index 565037c..00146ce 100644 --- a/src/components/reader/BookReader.tsx +++ b/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} /> 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 (
@@ -34,6 +36,7 @@ export const ReaderContent = ({ isDoublePage={isDoublePage} isRTL={isRTL} order="first" + zoomLevel={zoomLevel} /> {isDoublePage && shouldShowDoublePage(currentPage) && ( diff --git a/src/components/reader/components/SinglePage.tsx b/src/components/reader/components/SinglePage.tsx index bcb24f4..2729bcb 100644 --- a/src/components/reader/components/SinglePage.tsx +++ b/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 (
(null); const currentPageRef = useRef(currentPage); const isRTL = direction === "rtl"; + const [zoomLevel, setZoomLevel] = useState(1); + const initialDistanceRef = useRef(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) => { - touchStartXRef.current = event.touches[0].clientX; - touchStartYRef.current = event.touches[0].clientY; - currentPageRef.current = currentPage; + 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, }; };