diff --git a/src/pages/viewer/components/BookViewer.tsx b/src/pages/viewer/components/BookViewer.tsx index b833188..219d860 100644 --- a/src/pages/viewer/components/BookViewer.tsx +++ b/src/pages/viewer/components/BookViewer.tsx @@ -1,4 +1,4 @@ -import { type FC, useRef, useCallback, useState } from 'react'; +import { type FC, useRef, useCallback, useState, useEffect } from 'react'; import HTMLFlipBook from 'react-pageflip'; import { type PageData } from '../types'; import BookPage from './BookPage'; @@ -30,18 +30,41 @@ const BookViewer: FC = ({ pages }) => { const bookRef = useRef(null); const [currentPage, setCurrentPage] = useState(0); + // اطمینان از اینکه currentPage همیشه در محدوده معتبر است + useEffect(() => { + if (currentPage < 0) { + setCurrentPage(0); + } else if (currentPage >= pages.length) { + setCurrentPage(pages.length - 1); + } + }, [currentPage, pages.length]); + const handlePageFlip = useCallback((e: FlipEvent) => { - const pageNum = e.data; + // react-pageflip شماره صفحه را به صورت 0-based برمی‌گرداند + // اما باید مطمئن شویم که در محدوده معتبر است + let pageNum = e.data; + + // اگر pageNum منفی است یا بزرگتر از تعداد صفحات، آن را محدود می‌کنیم + if (pageNum < 0) { + pageNum = 0; + } else if (pageNum >= pages.length) { + pageNum = pages.length - 1; + } + setCurrentPage(pageNum); - }, []); + }, [pages.length]); const goToNextPage = useCallback(() => { - bookRef.current?.pageFlip()?.flipNext(); - }, []); + if (currentPage < pages.length - 1) { + bookRef.current?.pageFlip()?.flipNext(); + } + }, [currentPage, pages.length]); const goToPrevPage = useCallback(() => { - bookRef.current?.pageFlip()?.flipPrev(); - }, []); + if (currentPage > 0) { + bookRef.current?.pageFlip()?.flipPrev(); + } + }, [currentPage]); return (
@@ -106,7 +129,7 @@ const BookViewer: FC = ({ pages }) => { {/* شماره صفحه */}
- صفحه {currentPage + 1} از {pages.length} + صفحه {Math.min(currentPage + 1, pages.length)} از {pages.length}