Play feature grid items on hover

Author: satya164

static/js/video-playback.js

@@ -2,6 +2,21 @@ function setupPlayer(video) {
   const container = document.createElement('div');
   const icon = document.createElement('div');
 
+  const play = () => {
+    const promise = video.play();
+
+    container.classList.remove('paused');
+
+    promise?.catch(() => {
+      container.classList.add('paused');
+    });
+  };
+
+  const pause = () => {
+    video.pause();
+    container.classList.add('paused');
+  };
+
   video.parentNode.insertBefore(container, video);
 
   icon.classList.add('video-player-icon');
@@ -10,15 +25,28 @@ function setupPlayer(video) {
   container.appendChild(video);
   container.appendChild(icon);
 
-  container.addEventListener('click', () => {
-    if (video.paused) {
-      video.play();
-      container.classList.remove('paused');
-    } else {
-      video.pause();
-      container.classList.add('paused');
-    }
-  });
+  const feature = video.closest('.feature-grid li');
+
+  if (feature != null) {
+    video.removeAttribute('loop');
+    video.loop = false;
+
+    feature.addEventListener('mouseenter', () => {
+      video.loop = true;
+
+      play();
+    });
+
+    feature.addEventListener('mouseleave', pause);
+  } else {
+    container.addEventListener('click', () => {
+      if (video.paused) {
+        play();
+      } else {
+        pause();
+      }
+    });
+  }
 
   container.style.borderRadius = window.getComputedStyle(video).borderRadius;