catchup-library-web 1.21.6 → 1.21.7

package/dist/index.js

@@ -5776,6 +5776,8 @@ var MatchingActivityMaterialContent = ({
   });
   const itemsRef = (0, import_react21.useRef)(null);
   const dropZoneRefs = (0, import_react21.useRef)({});
+  const scrollAnimationRef = (0, import_react21.useRef)(null);
+  const lastScrollTimeRef = (0, import_react21.useRef)(0);
   (0, import_react21.useEffect)(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5804,26 +5806,43 @@ var MatchingActivityMaterialContent = ({
   (0, import_react21.useEffect)(() => {
     if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
       const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      const currentTime = Date.now();
+      if (currentTime - lastScrollTimeRef.current < 300) {
+        return;
+      }
+      lastScrollTimeRef.current = currentTime;
       if (dropZoneElement) {
+        if (scrollAnimationRef.current) {
+          cancelAnimationFrame(scrollAnimationRef.current);
+        }
         const targetPosition = dropZoneElement.getBoundingClientRect().top + window.pageYOffset;
         const startPosition = window.pageYOffset;
         const distance = targetPosition - startPosition - window.innerHeight / 2 + dropZoneElement.offsetHeight / 2;
-        const duration = 1e3;
+        const duration = 800;
         let start = null;
-        const animation = (currentTime) => {
-          if (start === null) start = currentTime;
-          const timeElapsed = currentTime - start;
+        const animation = (currentTime2) => {
+          if (start === null) start = currentTime2;
+          const timeElapsed = currentTime2 - start;
           const progress = Math.min(timeElapsed / duration, 1);
-          const ease = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+          const ease = (t) => 1 - Math.pow(1 - t, 3);
           window.scrollTo(0, startPosition + distance * ease(progress));
           if (timeElapsed < duration) {
-            requestAnimationFrame(animation);
+            scrollAnimationRef.current = requestAnimationFrame(animation);
+          } else {
+            scrollAnimationRef.current = null;
           }
         };
-        requestAnimationFrame(animation);
+        scrollAnimationRef.current = requestAnimationFrame(animation);
       }
     }
   }, [dropTargetKey]);
+  (0, import_react21.useEffect)(() => {
+    return () => {
+      if (scrollAnimationRef.current) {
+        cancelAnimationFrame(scrollAnimationRef.current);
+      }
+    };
+  }, []);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"

package/dist/index.mjs

@@ -5560,6 +5560,8 @@ var MatchingActivityMaterialContent = ({
   });
   const itemsRef = useRef6(null);
   const dropZoneRefs = useRef6({});
+  const scrollAnimationRef = useRef6(null);
+  const lastScrollTimeRef = useRef6(0);
   useEffect11(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
@@ -5588,26 +5590,43 @@ var MatchingActivityMaterialContent = ({
   useEffect11(() => {
     if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
       const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      const currentTime = Date.now();
+      if (currentTime - lastScrollTimeRef.current < 300) {
+        return;
+      }
+      lastScrollTimeRef.current = currentTime;
       if (dropZoneElement) {
+        if (scrollAnimationRef.current) {
+          cancelAnimationFrame(scrollAnimationRef.current);
+        }
         const targetPosition = dropZoneElement.getBoundingClientRect().top + window.pageYOffset;
         const startPosition = window.pageYOffset;
         const distance = targetPosition - startPosition - window.innerHeight / 2 + dropZoneElement.offsetHeight / 2;
-        const duration = 1e3;
+        const duration = 800;
         let start = null;
-        const animation = (currentTime) => {
-          if (start === null) start = currentTime;
-          const timeElapsed = currentTime - start;
+        const animation = (currentTime2) => {
+          if (start === null) start = currentTime2;
+          const timeElapsed = currentTime2 - start;
           const progress = Math.min(timeElapsed / duration, 1);
-          const ease = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+          const ease = (t) => 1 - Math.pow(1 - t, 3);
           window.scrollTo(0, startPosition + distance * ease(progress));
           if (timeElapsed < duration) {
-            requestAnimationFrame(animation);
+            scrollAnimationRef.current = requestAnimationFrame(animation);
+          } else {
+            scrollAnimationRef.current = null;
           }
         };
-        requestAnimationFrame(animation);
+        scrollAnimationRef.current = requestAnimationFrame(animation);
       }
     }
   }, [dropTargetKey]);
+  useEffect11(() => {
+    return () => {
+      if (scrollAnimationRef.current) {
+        cancelAnimationFrame(scrollAnimationRef.current);
+      }
+    };
+  }, []);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "MATCHING"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.21.06",
+  "version": "1.21.07",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/material-contents/MatchingActivityMaterialContent.tsx

@@ -34,6 +34,8 @@ const MatchingActivityMaterialContent = ({
   });
   const itemsRef = useRef<HTMLDivElement>(null);
   const dropZoneRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
+  const scrollAnimationRef = useRef<number | null>(null);
+  const lastScrollTimeRef = useRef<number>(0);
 
   useEffect(() => {
     const shuffleArray = (array: any) => {
@@ -62,10 +64,25 @@ const MatchingActivityMaterialContent = ({
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
 
+  // Replace the useEffect with this version
   useEffect(() => {
     if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
       const dropZoneElement = dropZoneRefs.current[dropTargetKey];
+      const currentTime = Date.now();
+
+      // Throttle: only scroll every 300ms to slow it down
+      if (currentTime - lastScrollTimeRef.current < 300) {
+        return;
+      }
+
+      lastScrollTimeRef.current = currentTime;
+
       if (dropZoneElement) {
+        // Cancel any existing animation
+        if (scrollAnimationRef.current) {
+          cancelAnimationFrame(scrollAnimationRef.current);
+        }
+
         const targetPosition =
           dropZoneElement.getBoundingClientRect().top + window.pageYOffset;
         const startPosition = window.pageYOffset;
@@ -74,7 +91,7 @@ const MatchingActivityMaterialContent = ({
           startPosition -
           window.innerHeight / 2 +
           dropZoneElement.offsetHeight / 2;
-        const duration = 1000;
+        const duration = 800; // Slower duration
         let start: number | null = null;
 
         const animation = (currentTime: number) => {
@@ -82,22 +99,32 @@ const MatchingActivityMaterialContent = ({
           const timeElapsed = currentTime - start;
           const progress = Math.min(timeElapsed / duration, 1);
 
-          // Easing function for smooth animation
-          const ease = (t: number) =>
-            t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+          // Gentler easing function
+          const ease = (t: number) => 1 - Math.pow(1 - t, 3);
 
           window.scrollTo(0, startPosition + distance * ease(progress));
 
           if (timeElapsed < duration) {
-            requestAnimationFrame(animation);
+            scrollAnimationRef.current = requestAnimationFrame(animation);
+          } else {
+            scrollAnimationRef.current = null;
           }
         };
 
-        requestAnimationFrame(animation);
+        scrollAnimationRef.current = requestAnimationFrame(animation);
       }
     }
   }, [dropTargetKey]);
 
+  // Add cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (scrollAnimationRef.current) {
+        cancelAnimationFrame(scrollAnimationRef.current);
+      }
+    };
+  }, []);
+
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData: any) => answerData.type === "MATCHING"