load 5 pages first

src/pages/viewer/components/BookViewer.tsx

@@ -9,6 +9,8 @@ import { useBookEntranceController } from '@/pages/viewer/hooks/useBookEntranceC
 import { useViewerViewport } from '@/pages/viewer/hooks/useViewerViewport';
 import { useIsBrowserFullscreen } from '@/pages/viewer/hooks/useIsBrowserFullscreen';
 import { toggleViewerFullscreen } from '@/pages/viewer/utils/viewerFullscreen';
+import { isLegacyIOSSafari } from '@/pages/viewer/utils/isLegacyIOSSafari';
+import { clx } from '@/helpers/utils';
 
 /** فاصله پیش‌فرض بین هر ورق در پخش خودکار (میلی‌ثانیه) */
 const AUTO_PLAY_INTERVAL_MS = 3000;
@@ -36,6 +38,14 @@ function useIsDesktop() {
     );
 }
 
+function useLegacyIOSSafari() {
+    return useSyncExternalStore(
+        () => () => {},
+        isLegacyIOSSafari,
+        () => false
+    );
+}
+
 export type BookViewerProps = {
     pages: PageData[];
     catalogSize?: string;
@@ -117,6 +127,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
     const [isAutoPlayActive, setIsAutoPlayActive] = useState(false);
     const [startPage, setStartPage] = useState(0);
     const isDesktop = useIsDesktop();
+    const legacyIOS = useLegacyIOSSafari();
     const isBrowserFullscreen = useIsBrowserFullscreen();
 
     const autoPlay = documentSettings?.autoPlay ?? false;
@@ -481,12 +492,12 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
                         minHeight={pagePixelHeight}
                         maxWidth={pagePixelWidth}
                         maxHeight={pagePixelHeight}
-                        drawShadow={true}
+                        drawShadow={!legacyIOS}
                         flippingTime={800}
                         usePortrait={usePortrait}
                         startPage={startPage}
                         autoSize={false}
-                        maxShadowOpacity={isDesktop ? 0.55 : 0.32}
+                        maxShadowOpacity={legacyIOS ? 0 : isDesktop ? 0.55 : 0.32}
                         showCover={hasMultiplePages}
                         mobileScrollSupport={!usePortrait}
                         clickEventForward={true}
@@ -495,7 +506,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
                         startZIndex={1}
                         showPageCorners={hasMultiplePages}
                         disableFlipByClick={true}
-                        className="flipbook-container mx-auto max-w-full"
+                        className={clx('flipbook-container mx-auto max-w-full', legacyIOS && 'flipbook-legacy-ios')}
                         style={{}}
                         onFlip={onFlipForwarded}
                         onInit={handleBookInit}
@@ -514,6 +525,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
                                 backgroundColor={page.backgroundColor ?? backgroundColor}
                                 backgroundGradient={page.backgroundGradient ?? backgroundGradient}
                                 backgroundImageUrl={page.backgroundImageUrl ?? backgroundImageUrl}
+                                useHardPage={legacyIOS}
                             />
                         ))}
                     </HTMLFlipBook>