danak/dpage-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hasMultiplePages

Browse Source
This commit is contained in:
hamid zarghami
2026-05-06 15:13:06 +03:30
parent ae7eae34d9
commit 25822b05a6
1 changed files with 48 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/viewer/components/BookViewer.tsx
+48 -38
View File
@@ -109,6 +109,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
);
const displayWidth = Math.round(bookWidth * VIEWER_SCALE);
const displayHeight = Math.round(bookHeight * VIEWER_SCALE);
const hasMultiplePages = pages.length > 1;
// موبایل: از ابعاد viewport برای جا دادن کتاب در صفحه
const [viewport, setViewport] = useState(() =>
@@ -290,6 +291,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
}, [isAutoPlayActive]);
const handleLinkClick = useCallback((linkUrl: string) => {
if (pages.length <= 1) return;
if (linkUrl.startsWith('page://')) {
const action = linkUrl.replace('page://', '');
const pageFlipAPI = bookRef.current?.pageFlip() as PageFlipWithFlipController | undefined;
@@ -432,13 +434,13 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
startPage={startPage}
autoSize={false}
maxShadowOpacity={isDesktop ? 0.5 : 0}
showCover={true}
showCover={hasMultiplePages}
mobileScrollSupport={!usePortrait}
clickEventForward={true}
useMouseEvents={true}
swipeDistance={usePortrait ? 48 : 30}
useMouseEvents={hasMultiplePages}
swipeDistance={hasMultiplePages ? (usePortrait ? 48 : 30) : 9999}
startZIndex={1}
showPageCorners={true}
showPageCorners={hasMultiplePages}
disableFlipByClick={true}
className="flipbook-container mx-auto max-w-full"
style={{}}
@@ -464,23 +466,27 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
</div>
<div className="shrink-0 max-md:min-h-12 flex items-center gap-3 md:gap-6 bg-white rounded-full px-4 md:px-6 py-2 md:py-3 shadow-lg">
{/* دکمه راست: فارسی = صفحه بعد | لاتین = صفحه قبل */}
<button
type="button"
onClick={() => {
stopAutoPlayByUser();
if (leftToRightFlip) {
goToPrevPage();
} else {
goToNextPage();
}
}}
disabled={leftToRightFlip ? currentPage <= 0 : currentPage >= pages.length - 1}
className="p-2 md:p-2 min-h-11 min-w-11 md:min-h-0 md:min-w-0 inline-flex items-center justify-center rounded-full hover:bg-gray-100 active:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition-all"
aria-label={leftToRightFlip ? 'صفحه قبل' : 'صفحه بعد'}
>
<ArrowRight2 color='black' size={20} className="text-gray-700 md:w-6 md:h-6" />
</button>
{hasMultiplePages && (
<>
{/* دکمه راست: فارسی = صفحه بعد | لاتین = صفحه قبل */}
<button
type="button"
onClick={() => {
stopAutoPlayByUser();
if (leftToRightFlip) {
goToPrevPage();
} else {
goToNextPage();
}
}}
disabled={leftToRightFlip ? currentPage <= 0 : currentPage >= pages.length - 1}
className="p-2 md:p-2 min-h-11 min-w-11 md:min-h-0 md:min-w-0 inline-flex items-center justify-center rounded-full hover:bg-gray-100 active:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition-all"
aria-label={leftToRightFlip ? 'صفحه قبل' : 'صفحه بعد'}
>
<ArrowRight2 color='black' size={20} className="text-gray-700 md:w-6 md:h-6" />
</button>
</>
)}
{/* شماره صفحه */}
<div className="flex items-center gap-2 min-w-[100px] md:min-w-[120px] justify-center">
@@ -489,23 +495,27 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
</span>
</div>
{/* دکمه چپ: فارسی = صفحه قبل | لاتین = صفحه بعد */}
<button
type="button"
onClick={() => {
stopAutoPlayByUser();
if (leftToRightFlip) {
goToNextPage();
} else {
goToPrevPage();
}
}}
disabled={leftToRightFlip ? currentPage >= pages.length - 1 : currentPage <= 0}
className="p-2 md:p-2 min-h-11 min-w-11 md:min-h-0 md:min-w-0 inline-flex items-center justify-center rounded-full hover:bg-gray-100 active:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition-all"
aria-label={leftToRightFlip ? 'صفحه بعد' : 'صفحه قبل'}
>
<ArrowLeft2 color='black' size={20} className="text-gray-700 md:w-6 md:h-6" />
</button>
{hasMultiplePages && (
<>
{/* دکمه چپ: فارسی = صفحه قبل | لاتین = صفحه بعد */}
<button
type="button"
onClick={() => {
stopAutoPlayByUser();
if (leftToRightFlip) {
goToNextPage();
} else {
goToPrevPage();
}
}}
disabled={leftToRightFlip ? currentPage >= pages.length - 1 : currentPage <= 0}
className="p-2 md:p-2 min-h-11 min-w-11 md:min-h-0 md:min-w-0 inline-flex items-center justify-center rounded-full hover:bg-gray-100 active:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition-all"
aria-label={leftToRightFlip ? 'صفحه بعد' : 'صفحه قبل'}
>
<ArrowLeft2 color='black' size={20} className="text-gray-700 md:w-6 md:h-6" />
</button>
</>
)}
</div>
</div>
);