fix in mobile
This commit is contained in:
hamid zarghami
@@ -139,6 +139,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
isBookFlippingRef.current = flipping;
|
||||
flipbookWrapperRef.current?.classList.toggle("relative", flipping);
|
||||
flipbookWrapperRef.current?.classList.toggle("z-10", flipping);
|
||||
flipbookWrapperRef.current?.classList.toggle("flipbook-flipping", flipping);
|
||||
spineOverlayRef.current?.classList.toggle("z-50", !flipping);
|
||||
spineOverlayRef.current?.classList.toggle("z-0", flipping);
|
||||
}, []);
|
||||
@@ -231,6 +232,8 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
const pagePixelWidth = viewportFit.w;
|
||||
const pagePixelHeight = viewportFit.h;
|
||||
const contentScale = viewportFit.contentScale;
|
||||
const flipDisabledOnMobile = !isDesktop && magnifierEnabled;
|
||||
const magnifierLockedPageId = usePortrait ? (pages[currentPage]?.id ?? null) : null;
|
||||
|
||||
const flipKey = `${usePortrait ? "portrait" : "spread"}-${pagePixelWidth}-${pagePixelHeight}-${flipIndexCount}`;
|
||||
|
||||
@@ -399,6 +402,12 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
[flipIndexCount, scheduleEntranceForIndices, getVisibleLogicalIndices, toLogicalIndex],
|
||||
);
|
||||
|
||||
const beginPageNavigation = useCallback(() => {
|
||||
if (flipDisabledOnMobile) return false;
|
||||
setBookFlippingVisual(true);
|
||||
return true;
|
||||
}, [flipDisabledOnMobile, setBookFlippingVisual]);
|
||||
|
||||
/** بعد از اتمام انیمیشن ورق، ایندکس واقعی کتاب را میگیریم و انیمیشن ورود را یکبار شروع میکنیم */
|
||||
const handleChangeState = useCallback(
|
||||
(e: PageFlipStateEvent) => {
|
||||
@@ -415,23 +424,25 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
|
||||
const goToNextPage = useCallback(() => {
|
||||
if (currentPage >= pages.length - 1) return;
|
||||
if (!beginPageNavigation()) return;
|
||||
const api = bookRef.current?.pageFlip() as PageFlipWithFlipController | undefined;
|
||||
if (isRtlBook) {
|
||||
triggerFlipPrev(api);
|
||||
} else {
|
||||
api?.flipNext();
|
||||
}
|
||||
}, [currentPage, pages.length, isRtlBook]);
|
||||
}, [currentPage, pages.length, isRtlBook, beginPageNavigation]);
|
||||
|
||||
const goToPrevPage = useCallback(() => {
|
||||
if (currentPage <= 0) return;
|
||||
if (!beginPageNavigation()) return;
|
||||
const api = bookRef.current?.pageFlip() as PageFlipWithFlipController | undefined;
|
||||
if (isRtlBook) {
|
||||
api?.flipNext();
|
||||
} else {
|
||||
triggerFlipPrev(api);
|
||||
}
|
||||
}, [currentPage, isRtlBook]);
|
||||
}, [currentPage, isRtlBook, beginPageNavigation]);
|
||||
|
||||
const stopAutoPlayByUser = useCallback(() => {
|
||||
if (isAutoPlayActive) {
|
||||
@@ -459,10 +470,17 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, [magnifierEnabled]);
|
||||
|
||||
useEffect(() => {
|
||||
if (flipDisabledOnMobile && isAutoPlayActive) {
|
||||
setIsAutoPlayActive(false);
|
||||
}
|
||||
}, [flipDisabledOnMobile, isAutoPlayActive]);
|
||||
|
||||
const navigateToPageIndex = useCallback(
|
||||
(targetIndex: number) => {
|
||||
const pageFlipAPI = bookRef.current?.pageFlip();
|
||||
if (!pageFlipAPI) return;
|
||||
if (!beginPageNavigation()) return;
|
||||
|
||||
const logicalIdx = Math.max(0, Math.min(targetIndex, pages.length - 1));
|
||||
const flipIdx = toFlipIndex(logicalIdx);
|
||||
@@ -470,7 +488,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
lastFlipPageRef.current = logicalIdx;
|
||||
scheduleEntranceForIndices(getVisibleLogicalIndices(flipIdx));
|
||||
},
|
||||
[pages.length, scheduleEntranceForIndices, getVisibleLogicalIndices, toFlipIndex],
|
||||
[pages.length, scheduleEntranceForIndices, getVisibleLogicalIndices, toFlipIndex, beginPageNavigation],
|
||||
);
|
||||
|
||||
const handleLinkClick = useCallback(
|
||||
@@ -479,6 +497,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
stopAutoPlayByUser();
|
||||
|
||||
if (!linkUrl.startsWith("page://")) return;
|
||||
if (flipDisabledOnMobile) return;
|
||||
|
||||
const action = linkUrl.replace("page://", "");
|
||||
|
||||
@@ -497,7 +516,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
}
|
||||
}
|
||||
},
|
||||
[pages.length, goToNextPage, goToPrevPage, navigateToPageIndex, stopAutoPlayByUser],
|
||||
[pages.length, goToNextPage, goToPrevPage, navigateToPageIndex, stopAutoPlayByUser, flipDisabledOnMobile],
|
||||
);
|
||||
|
||||
const prevFlipKeyRef = useRef(flipKey);
|
||||
@@ -518,7 +537,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
|
||||
// پخش خودکار
|
||||
useEffect(() => {
|
||||
if (!isAutoPlayActive || pages.length <= 1) return;
|
||||
if (!isAutoPlayActive || pages.length <= 1 || flipDisabledOnMobile) return;
|
||||
const timer = setInterval(() => {
|
||||
if (currentPage >= pages.length - 1) {
|
||||
bookRef.current?.pageFlip()?.turnToPage?.(toFlipIndex(0));
|
||||
@@ -534,7 +553,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
}
|
||||
}, AUTO_PLAY_INTERVAL_MS);
|
||||
return () => clearInterval(timer);
|
||||
}, [isAutoPlayActive, currentPage, pages.length, isRtlBook, toFlipIndex]);
|
||||
}, [isAutoPlayActive, currentPage, pages.length, isRtlBook, toFlipIndex, flipDisabledOnMobile]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-4 md:gap-6 w-full h-full max-md:min-h-0 max-md:max-w-full max-md:overflow-x-hidden max-md:pb-[env(safe-area-inset-bottom,0px)]" dir="rtl">
|
||||
@@ -560,6 +579,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
className="max-w-full flex justify-center shrink-0 rounded-sm"
|
||||
style={{
|
||||
cursor: magnifierEnabled ? "zoom-in" : undefined,
|
||||
touchAction: magnifierEnabled ? "none" : undefined,
|
||||
overflow: "hidden",
|
||||
width: usePortrait ? pagePixelWidth : pagePixelWidth * 2,
|
||||
height: pagePixelHeight,
|
||||
@@ -583,12 +603,12 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
autoSize={false}
|
||||
maxShadowOpacity={legacyIOS ? 0 : isDesktop ? 0.55 : 0.32}
|
||||
showCover={hasMultiplePages}
|
||||
mobileScrollSupport={!usePortrait}
|
||||
mobileScrollSupport={!usePortrait && !magnifierEnabled}
|
||||
clickEventForward={true}
|
||||
useMouseEvents={hasMultiplePages && !magnifierEnabled}
|
||||
swipeDistance={hasMultiplePages ? (usePortrait ? 48 : 30) : 9999}
|
||||
swipeDistance={flipDisabledOnMobile || !hasMultiplePages ? 9999 : usePortrait ? 48 : 30}
|
||||
startZIndex={1}
|
||||
showPageCorners={hasMultiplePages}
|
||||
showPageCorners={hasMultiplePages && !flipDisabledOnMobile}
|
||||
disableFlipByClick={true}
|
||||
className={clx(
|
||||
"flipbook-container mx-auto max-w-full",
|
||||
@@ -626,6 +646,9 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
enabled={magnifierEnabled}
|
||||
containerRef={bookAreaRef}
|
||||
interactionRef={flipbookWrapperRef}
|
||||
isFlippingRef={isBookFlippingRef}
|
||||
lockedPageId={magnifierLockedPageId}
|
||||
blockFlipTouch={flipDisabledOnMobile}
|
||||
pages={displayPages}
|
||||
pageWidth={pagePixelWidth}
|
||||
pageHeight={pagePixelHeight}
|
||||
@@ -651,9 +674,13 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
goToPrevPage();
|
||||
}
|
||||
}}
|
||||
disabled={leftToRightFlip ? currentPage >= pages.length - 1 : currentPage <= 0}
|
||||
disabled={
|
||||
flipDisabledOnMobile ||
|
||||
(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 ? "صفحه بعد" : "صفحه قبل"}
|
||||
title={flipDisabledOnMobile ? "برای ورق زدن ابتدا ذرهبین را خاموش کنید" : undefined}
|
||||
>
|
||||
<ArrowRight2 color="black" size={20} className="text-gray-700 md:w-6 md:h-6" />
|
||||
</button>
|
||||
@@ -680,9 +707,13 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
goToNextPage();
|
||||
}
|
||||
}}
|
||||
disabled={leftToRightFlip ? currentPage <= 0 : currentPage >= pages.length - 1}
|
||||
disabled={
|
||||
flipDisabledOnMobile ||
|
||||
(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 ? "صفحه قبل" : "صفحه بعد"}
|
||||
title={flipDisabledOnMobile ? "برای ورق زدن ابتدا ذرهبین را خاموش کنید" : undefined}
|
||||
>
|
||||
<ArrowLeft2 color="black" size={20} className="text-gray-700 md:w-6 md:h-6" />
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user