fix duplicate event listener

adobecom · Aug 16, 2023 · 04a1496 · 04a1496
1 parent 9855930
commit 04a1496
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/libs/blocks/aside/aside.js b/libs/blocks/aside/aside.js
@@ -56,7 +56,8 @@ function decorateLayout(el) {
   const media = foreground.querySelector(':scope > div:not([class])');
   if (media && !el.classList.contains('notification')) {
     media.classList.add('image');
-    if (media.querySelector('video')) applyHoverPlay(media.querySelector('video'));
+    const video = media.querySelector('video');
+    if (video) applyHoverPlay(video);
   }
   const picture = text?.querySelector('picture');
   const iconArea = picture ? (picture.closest('p') || createTag('p', null, picture)) : null;

diff --git a/libs/blocks/marquee/marquee.js b/libs/blocks/marquee/marquee.js
@@ -135,7 +135,8 @@ export default function init(el) {
 
   if (media) {
     media.classList.add('media');
-    if (media.querySelector('video')) applyHoverPlay(media.querySelector('video'));
+    const video = media.querySelector('video');
+    if (video) applyHoverPlay(video);
     if (media.querySelector('a[href$=".mp4"]')) {
       decorateVideo(media);
     } else {

diff --git a/libs/blocks/video/video.js b/libs/blocks/video/video.js
@@ -23,7 +23,7 @@ export default function init(a) {
         <source src=".${pathname}" type="video/mp4" />
       </video>`;
   a.insertAdjacentHTML('afterend', video);
-  const videoElem = document.querySelector('video');
+  const videoElem = document.body.querySelector(`source[src=".${pathname}"]`)?.parentElement;
   applyHoverPlay(videoElem);
   a.remove();
 }
diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
@@ -100,8 +100,9 @@ export function decorateTextOverrides(el, options = ['-heading', '-body', '-deta
 }
 
 export function applyHoverPlay(video) {
-  if (video.hasAttribute('data-hoverplay')) {
+  if (video.hasAttribute('data-hoverplay') && !video.hasAttribute('data-mouseevent')) {
     video.addEventListener('mouseenter', () => { video.play(); });
     video.addEventListener('mouseleave', () => { video.pause(); });
+    video.setAttribute('data-mouseevent', true);
   }
 }