From 88451b60a2bc5adff0f8e0338055f571242565f7 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 1 Dec 2025 13:59:12 -0500
Subject: [PATCH] simplify mouse events

---
 .../ScrollerLottie.stories.svelte             |  2 +-
 .../ScrollerLottie/ScrollerLottie.svelte      | 24 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/ScrollerLottie/ScrollerLottie.stories.svelte b/src/components/ScrollerLottie/ScrollerLottie.stories.svelte
index 454ca513..27edc1b1 100644
--- a/src/components/ScrollerLottie/ScrollerLottie.stories.svelte
+++ b/src/components/ScrollerLottie/ScrollerLottie.stories.svelte
@@ -36,7 +36,7 @@
   let progress = $state(0);
 </script>
 
-<Story name="Basic">
+<Story name="Demo">
   <ScrollerLottie autoplay loop showDebugInfo />
 </Story>
 
diff --git a/src/components/ScrollerLottie/ScrollerLottie.svelte b/src/components/ScrollerLottie/ScrollerLottie.svelte
index c3cdff8f..90c03afa 100644
--- a/src/components/ScrollerLottie/ScrollerLottie.svelte
+++ b/src/components/ScrollerLottie/ScrollerLottie.svelte
@@ -107,14 +107,17 @@
     }
   }
 
-  const hoverHandler = (event: MouseEvent) => {
-    if (!playOnHover || !lottiePlayer?.isLoaded) return;
-    if (event.type === 'mouseenter') {
-      lottiePlayer?.play();
-    } else if (event.type === 'mouseleave') {
-      lottiePlayer?.pause();
+  function handleMouseEnter() {
+    if (playOnHover && lottiePlayer?.isLoaded) {
+      lottiePlayer.play();
     }
-  };
+  }
+
+  function handleMouseLeave() {
+    if (playOnHover && lottiePlayer?.isLoaded) {
+      lottiePlayer.pause();
+    }
+  }
 
   onMount(() => {
     const shouldAutoplay = autoplay && !playOnHover;
@@ -149,12 +152,7 @@
       dotLottieRefCallback(lottiePlayer);
     }
 
-    canvas.addEventListener('mouseenter', hoverHandler);
-    canvas.addEventListener('mouseleave', hoverHandler);
-
     return () => {
-      canvas.removeEventListener('mouseenter', hoverHandler);
-      canvas.removeEventListener('mouseleave', hoverHandler);
       lottiePlayer?.destroy();
     };
   });
@@ -391,6 +389,8 @@
       bind:this={canvas}
       bind:clientWidth={canvasWidth}
       bind:clientHeight={canvasHeight}
+      onmouseenter={handleMouseEnter}
+      onmouseleave={handleMouseLeave}
     ></canvas>
   </div>