fix animation

src/pages/viewer/components/BookPage.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback } from 'react';
+import { forwardRef } from 'react';
 import { type PageData } from '../types';
 import type { EditorObject } from '@/pages/editor/store/editorStore';
 import { toCssLinearGradient } from '@/pages/editor/utils/gradient';
@@ -12,7 +12,7 @@ import {
 } from '@/pages/editor/utils/textStyle';
 import '@/pages/viewer/styles/entranceAnimations.css';
 import { mergeEntranceAnimationStyle } from '@/pages/viewer/utils/entranceAnimationStyle';
-import { useBookPageEntranceSequence } from '@/pages/viewer/hooks/useBookPageEntranceSequence';
+import type { EntrancePhase } from '@/pages/viewer/hooks/useBookEntranceController';
 
 type BookPageProps = {
   page: PageData;
@@ -28,6 +28,8 @@ type BookPageProps = {
     angle: number;
   };
   backgroundImageUrl?: string;
+  /** فاز انیمیشن ورود — از BookViewer کنترل می‌شود */
+  entrancePhase?: EntrancePhase;
   /** در پیش‌نمایش کاتالوگ انیمیشن ورود غیرفعال باشد */
   disableEntranceAnimations?: boolean;
 };
@@ -40,20 +42,8 @@ type BookPageProps = {
  * نیاز به forwardRef دارد تا react-pageflip بتواند ref را مدیریت کند
  */
 const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
-  ({ page, scale = 1, pageWidth, pageHeight, onLinkClick, backgroundType, backgroundColor, backgroundGradient, backgroundImageUrl, disableEntranceAnimations = false }, ref) => {
+  ({ page, scale = 1, pageWidth, pageHeight, onLinkClick, backgroundType, backgroundColor, backgroundGradient, backgroundImageUrl, entrancePhase = 'idle', disableEntranceAnimations = false }, ref) => {
-    const { attachRootRef, entranceSeq } = useBookPageEntranceSequence(disableEntranceAnimations);
+    const phase: EntrancePhase = disableEntranceAnimations ? 'settled' : entrancePhase;
-
-    const setHostRef = useCallback(
-      (node: HTMLDivElement | null) => {
-        attachRootRef(node);
-        if (typeof ref === 'function') {
-          ref(node);
-        } else if (ref) {
-          (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
-        }
-      },
-      [ref, attachRootRef],
-    );
     // تابع برای تبدیل opacity به رنگ (مثل editor)
     // در editor، getColorWithOpacity انتظار opacity 0-100 دارد
     // در dataTransformer، opacity از 0-1 به 0-100 تبدیل شده است
@@ -97,7 +87,7 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
         rotationDeg?: number;
       },
     ) =>
-      mergeEntranceAnimationStyle(style, obj, scale, index, entranceSeq, {
+      mergeEntranceAnimationStyle(style, obj, scale, index, phase, {
         ...extra,
         flyLayoutPx,
       });
@@ -664,7 +654,7 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
 
     return (
       <div
-        ref={setHostRef}
+        ref={ref}
         dir="rtl"
         className="page"
         data-density="soft"

src/pages/viewer/components/BookViewer.tsx

@@ -5,6 +5,7 @@ import BookPage from './BookPage';
 import { ArrowLeft2, ArrowRight2, Pause, Play } from 'iconsax-react';
 import { getPaperDimensions } from '@/config/paperSizes';
 import type { DocumentSettings } from '@/pages/editor/store/editorStore';
+import { useBookEntranceController } from '@/pages/viewer/hooks/useBookEntranceController';
 
 /** فاصله پیش‌فرض بین هر ورق در پخش خودکار (میلی‌ثانیه) */
 const AUTO_PLAY_INTERVAL_MS = 3000;
@@ -176,6 +177,30 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
         ? 'desktop'
         : `mobile-${pagePixelWidth}-${pagePixelHeight}`;
 
+    const usePortrait = !isDesktop || displayStyle === 'single';
+
+    const {
+        scheduleEntranceForSpread,
+        getEntrancePhase,
+        reset: resetEntrance,
+    } = useBookEntranceController({
+        pages,
+        portrait: usePortrait,
+        showCover: hasMultiplePages,
+    });
+
+    const commitEntranceAtCurrentSpread = useCallback(() => {
+        const api = bookRef.current?.pageFlip();
+        const idx = api?.getCurrentPageIndex?.();
+        if (typeof idx !== 'number' || pages.length <= 0) return;
+        const clamped = Math.max(0, Math.min(idx, pages.length - 1));
+        scheduleEntranceForSpread(clamped);
+    }, [pages.length, scheduleEntranceForSpread]);
+
+    useEffect(() => {
+        resetEntrance();
+    }, [flipKey, pages.length, pages[0]?.id, resetEntrance]);
+
     // اطمینان از اینکه currentPage همیشه در محدوده معتبر است
     useEffect(() => {
         if (currentPage < 0) {
@@ -282,16 +307,17 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
             setCurrentPage(clamped);
             lastFlipPageRef.current = clamped;
         },
-        [pages.length]
+        [pages.length],
     );
 
-    /** بعد از اتمام انیمیشن، ایندکس واقعی کتاب را می‌گیریم (RTL روی روت کتاب مختصات page-flip را به‌هم می‌زند) */
+    /** بعد از اتمام انیمیشن ورق، ایندکس واقعی کتاب را می‌گیریم و انیمیشن ورود را یک‌بار شروع می‌کنیم */
     const handleChangeState = useCallback(
         (e: PageFlipStateEvent) => {
             if (e.data !== 'read') return;
             syncPageIndexFromBook();
+            commitEntranceAtCurrentSpread();
         },
-        [syncPageIndexFromBook]
+        [syncPageIndexFromBook, commitEntranceAtCurrentSpread],
     );
 
     const goToNextPage = useCallback(() => {
@@ -393,9 +419,6 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
         }
     }, [currentPage, pages.length, goToNextPage, goToPrevPage]);
 
-    // تک‌صفحه‌ای: موبایل یا تنظیم single، دوصفحه‌ای: دسکتاپ + تنظیم double
-    const usePortrait = !isDesktop || displayStyle === 'single';
-
     const prevFlipKeyRef = useRef(flipKey);
     useEffect(() => {
         if (prevFlipKeyRef.current !== flipKey) {
@@ -481,6 +504,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
                             <BookPage
                                 key={page.id}
                                 page={page}
+                                entrancePhase={getEntrancePhase(page.id)}
                                 scale={contentScale}
                                 pageWidth={pagePixelWidth}
                                 pageHeight={pagePixelHeight}

src/pages/viewer/hooks/useBookEntranceController.ts

@@ -0,0 +1,125 @@
+import { useCallback, useRef, useState } from "react";
+import {
+  DEFAULT_ENTRANCE_DURATION_MS,
+  ENTRANCE_ANIMATION_BASE_DELAY_MS,
+  MAX_ENTRANCE_DELAY_MS,
+} from "@/shared/entranceAnimation";
+import { getVisiblePageIndices } from "@/pages/viewer/utils/visiblePageIndices";
+
+/** حداکثر زمان پخش انیمیشن ورود (برای برداشتن حالت play) */
+const MAX_ENTRANCE_PLAY_MS =
+  ENTRANCE_ANIMATION_BASE_DELAY_MS +
+  MAX_ENTRANCE_DELAY_MS +
+  4000 +
+  1200;
+
+export type EntrancePhase = "idle" | "play" | "settled";
+
+type PageRef = { id: number };
+
+type Options = {
+  pages: PageRef[];
+  portrait: boolean;
+  showCover: boolean;
+};
+
+/**
+ * کنترل یک‌بار پخش انیمیشن ورود هر صفحه — state در والد نگه‌داری می‌شود
+ * تا با remount شدن BookPage هنگام ورق‌خوردن دوباره اجرا نشود.
+ */
+export function useBookEntranceController({ pages, portrait, showCover }: Options) {
+  const playedPageIdsRef = useRef(new Set<number>());
+  const [playingPageIds, setPlayingPageIds] = useState<ReadonlySet<number>>(() => new Set());
+  const playTimersRef = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map());
+
+  const clearPlayTimer = useCallback((pageId: number) => {
+    const t = playTimersRef.current.get(pageId);
+    if (t) {
+      clearTimeout(t);
+      playTimersRef.current.delete(pageId);
+    }
+  }, []);
+
+  const finishPlaying = useCallback((pageId: number) => {
+    clearPlayTimer(pageId);
+    setPlayingPageIds((prev) => {
+      if (!prev.has(pageId)) return prev;
+      const next = new Set(prev);
+      next.delete(pageId);
+      return next;
+    });
+  }, [clearPlayTimer]);
+
+  const scheduleEntranceForSpread = useCallback(
+    (currentIndex: number) => {
+      const indices = getVisiblePageIndices(currentIndex, pages.length, {
+        portrait,
+        showCover,
+      });
+
+      const visibleIds = new Set(
+        indices.map((i) => pages[i]?.id).filter((id): id is number => id != null),
+      );
+
+      const newlyPlaying: number[] = [];
+
+      for (const i of indices) {
+        const page = pages[i];
+        if (!page) continue;
+        if (playedPageIdsRef.current.has(page.id)) continue;
+
+        playedPageIdsRef.current.add(page.id);
+        newlyPlaying.push(page.id);
+      }
+
+      setPlayingPageIds((prev) => {
+        const next = new Set<number>();
+        for (const id of prev) {
+          if (visibleIds.has(id)) next.add(id);
+        }
+        for (const id of newlyPlaying) next.add(id);
+        if (
+          next.size === prev.size &&
+          newlyPlaying.every((id) => prev.has(id))
+        ) {
+          return prev;
+        }
+        return next;
+      });
+
+      if (newlyPlaying.length === 0) return;
+
+      for (const pageId of newlyPlaying) {
+        clearPlayTimer(pageId);
+        playTimersRef.current.set(
+          pageId,
+          setTimeout(() => finishPlaying(pageId), MAX_ENTRANCE_PLAY_MS),
+        );
+      }
+    },
+    [pages, portrait, showCover, clearPlayTimer, finishPlaying],
+  );
+
+  const getEntrancePhase = useCallback(
+    (pageId: number): EntrancePhase => {
+      if (playingPageIds.has(pageId)) return "play";
+      if (playedPageIdsRef.current.has(pageId)) return "settled";
+      return "idle";
+    },
+    [playingPageIds],
+  );
+
+  const reset = useCallback(() => {
+    for (const id of playTimersRef.current.keys()) {
+      clearPlayTimer(id);
+    }
+    playedPageIdsRef.current.clear();
+    setPlayingPageIds(new Set());
+  }, [clearPlayTimer]);
+
+  return {
+    scheduleEntranceForSpread,
+    getEntrancePhase,
+    reset,
+  };
+}

src/pages/viewer/hooks/useBookPageEntranceSequence.ts

@@ -1,56 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-/**
- * وقتی صفحهٔ کتاب به viewport می‌رسد، یک شمارنده زیاد می‌شود تا انیمیشن ورود دوباره اجرا شود
- * (مشابه ورود مجدد به اسلاید در PowerPoint).
- */
-export function useBookPageEntranceSequence(disabled: boolean) {
-  const wasVisibleRef = useRef(false);
-  const [entranceSeq, setEntranceSeq] = useState(0);
-  const observerRef = useRef<IntersectionObserver | null>(null);
-
-  const attachRootRef = useCallback(
-    (node: HTMLDivElement | null) => {
-      observerRef.current?.disconnect();
-      observerRef.current = null;
-      if (disabled || !node) {
-        wasVisibleRef.current = false;
-        return;
-      }
-
-      const io = new IntersectionObserver(
-        (entries) => {
-          const entry = entries[0];
-          if (!entry) return;
-          const visible = entry.isIntersecting && entry.intersectionRatio >= 0.06;
-          const mostlyHidden = !entry.isIntersecting || entry.intersectionRatio < 0.02;
-
-          if (visible && !wasVisibleRef.current) {
-            wasVisibleRef.current = true;
-            setEntranceSeq((s) => s + 1);
-          } else if (mostlyHidden) {
-            wasVisibleRef.current = false;
-          }
-        },
-        { threshold: [0, 0.02, 0.06, 0.12, 0.25] },
-      );
-
-      io.observe(node);
-      observerRef.current = io;
-    },
-    [disabled],
-  );
-
-  useEffect(
-    () => () => {
-      observerRef.current?.disconnect();
-      observerRef.current = null;
-    },
-    [],
-  );
-
-  return {
-    attachRootRef,
-    entranceSeq: disabled ? 0 : entranceSeq,
-  };
-}

src/pages/viewer/utils/entranceAnimationStyle.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties } from "react";
 import type { EditorObject } from "@/pages/editor/store/editorStore";
+import type { EntrancePhase } from "@/pages/viewer/hooks/useBookEntranceController";
 import {
   DEFAULT_ENTRANCE_DURATION_MS,
   DEFAULT_ENTRANCE_DELAY_MS,
@@ -48,7 +49,7 @@ export function mergeEntranceAnimationStyle(
   obj: EditorObject,
   scale: number,
   elementIndex: number,
-  entranceSeq: number,
+  phase: EntrancePhase,
   options?: {
     transformOrigin?: CSSProperties["transformOrigin"];
     rotationDeg?: number;
@@ -57,12 +58,11 @@ export function mergeEntranceAnimationStyle(
   },
 ): CSSProperties {
   const type = obj.entranceAnimation;
-  if (!type || type === "none") {
+  if (!type || type === "none" || phase === "settled") {
     return base;
   }
 
-  /* تا observer هنوز seq را زیاد نکرده، یک فریم با «ظاهر نهایی» رندر نشود — باعث چشمک می‌شد */
+  if (phase === "idle") {
-  if (entranceSeq === 0) {
     const { opacity: _o, ...rest } = base;
     return {
       ...rest,

src/pages/viewer/utils/visiblePageIndices.ts

@@ -0,0 +1,28 @@
+/** ایندکس صفحاتی که در اسپرد فعلی کتاب دیده می‌شوند */
+export function getVisiblePageIndices(
+  currentIndex: number,
+  pageCount: number,
+  mode: { portrait: boolean; showCover: boolean },
+): number[] {
+  if (pageCount <= 0) return [];
+
+  const idx = Math.max(0, Math.min(currentIndex, pageCount - 1));
+
+  if (mode.portrait) {
+    return [idx];
+  }
+
+  if (mode.showCover) {
+    if (idx === 0) return [0];
+    if (idx === pageCount - 1) return [pageCount - 1];
+    const right = idx + 1;
+    return right < pageCount ? [idx, right] : [idx];
+  }
+
+  if (idx % 2 === 0) {
+    const right = idx + 1;
+    return right < pageCount ? [idx, right] : [idx];
+  }
+
+  return [idx - 1, idx];
+}