fix animation

2026-05-16 23:22:01 -07:00
parent b3e0378af5
commit fef8099ab1
6 changed files with 195 additions and 84 deletions
@@ -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,
+  };
+}
@@ -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,
-  };
-}