static/js/autoplay: Disable on interruption

2 files changed, 24 insertions, 6 deletions

diff --git a/assets/js/index.js b/assets/js/index.js
index 8fdab5a..5c08da2 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -547,9 +547,18 @@
     if (!localStorage[key]) localStorage[key] = state;
     [
         "scroll",
-        "DOMContentLoaded"
+        "DOMContentLoaded",
+        "pointerover",
+        "touchstart",
+        "touchend"
     ].forEach(function(event) {
-        self.addEventListener(event, function() {
+        self.addEventListener(event, function(event) {
+            if (event.type === "pointerover" || event.type === "touchstart" || event.type === "touchend") {
+                if (event.target.nodeName === "VIDEO") {
+                    event.target.setAttribute("data-autoplay", false);
+                }
+                return;
+            }
             let first = true;
             const videos = document.querySelectorAll("video");
             for(let i = 0; i < videos.length; i++){
@@ -564,7 +573,8 @@
                 videos[i].setAttribute("muted", true);
                 videos[i].setAttribute("playsinline", true);
                 const onscreen = viewport(videos[i]);
-                if (first && onscreen && localStorage[key] === state) {
+                const uninterrupted = !videos[i].dataset.autoplay;
+                if (first && onscreen && uninterrupted && localStorage[key] === state) {
                     videos[i].play();
                     first = false;
                 } else {
diff --git a/static/js/autoplay.ts b/static/js/autoplay.ts
index d212e76..4b33139 100644
--- a/static/js/autoplay.ts
+++ b/static/js/autoplay.ts
@@ -20,8 +20,15 @@
 
   if (!localStorage[key]) localStorage[key] = state;
 
-  ["scroll", "DOMContentLoaded"].forEach(function (event) {
-    self.addEventListener(event, function () {
+  ["scroll", "DOMContentLoaded", "pointerover", "touchstart", "touchend"].forEach(function (event) {
+    self.addEventListener(event, function (event) {
+
+      if (event.type === "pointerover" || event.type === "touchstart" || event.type === "touchend") {
+        if (event.target.nodeName === "VIDEO") {
+          event.target.setAttribute("data-autoplay", false);
+        }
+        return;
+      }
 
       let first = true;
       const videos = document.querySelectorAll("video");
@@ -40,8 +47,9 @@
         videos[i].setAttribute("playsinline", true);
 
         const onscreen = viewport(videos[i]);
+        const uninterrupted = !videos[i].dataset.autoplay;
 
-        if (first && onscreen && localStorage[key] === state) {
+        if (first && onscreen && uninterrupted && localStorage[key] === state) {
           videos[i].play();
           first = false;
         } else {