static/js: Experiment with video autoplay

1 files changed, 46 insertions, 9 deletions

diff --git a/assets/js/index.js b/assets/js/index.js
index 8e5cf48..8a47f5a 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -335,14 +335,14 @@
 })();
 (function() {
     const hide = function(triggers) {
-        for(let i = 0; i < triggers.length; i++){
-            triggers[i].checked = false;
+        for(let i1 = 0; i1 < triggers.length; i1++){
+            triggers[i1].checked = false;
         }
     };
     const hideIfClickedOutside = function(menus, triggers, event) {
-        for(let i = 0; i < menus.length; i++){
-            const active = triggers[i].checked === true;
-            const outside = !menus[i].contains(event.target);
+        for(let i1 = 0; i1 < menus.length; i1++){
+            const active = triggers[i1].checked === true;
+            const outside = !menus[i1].contains(event.target);
             if (outside && active) hide(triggers);
         }
     };
@@ -563,6 +563,43 @@
     });
 })();
 (function() {
+    function viewport(element) {
+        const options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+            offset: {
+                top: -50,
+                left: 0,
+                bottom: -50,
+                right: 0
+            }
+        };
+        const view = element.getBoundingClientRect();
+        return view.top >= -options.offset.top && view.left >= -options.offset.left && view.bottom <= (window.innerHeight || self.documentElement.clientHeight) + options.offset.bottom && view.right <= (window.innerWidth || self.documentElement.clientWidth) + options.offset.right;
+    }
+    [
+        "scroll",
+        "DOMContentLoaded"
+    ].forEach(function(event) {
+        self.addEventListener(event, function() {
+            const videos = document.querySelectorAll("video");
+            let first = true;
+            for(i = 0; i < videos.length; i++){
+                videos[i].autoplay = true;
+                videos[i].controls = true;
+                videos[i].loop = true;
+                videos[i].muted = true;
+                videos[i].playsinline = true;
+                const onscreen = viewport(videos[i]);
+                if (first && onscreen) {
+                    videos[i].play();
+                    first = false;
+                } else {
+                    videos[i].pause();
+                }
+            }
+        });
+    });
+})();
+(function() {
     const relative = new Intl.RelativeTimeFormat("en", {
         localeMatcher: "best fit",
         numeric: "always",
@@ -576,9 +613,9 @@
     }
     const date = function(update) {
         const elements = document.querySelectorAll("time");
-        for(let i = 0; i < elements.length; ++i){
-            const offscreen = !viewport(elements[i]);
-            const hidden = elements[i].offsetParent === null;
+        for(let i1 = 0; i1 < elements.length; ++i1){
+            const offscreen = !viewport(elements[i1]);
+            const hidden = elements[i1].offsetParent === null;
             if (update === "viewport" && (offscreen || hidden)) continue;
             (function(element) {
                 try {
@@ -643,7 +680,7 @@
                 } catch (error) {
                     console.error("Error: Unable to resolve relative time format!", error);
                 }
-            })(elements[i]);
+            })(elements[i1]);
         }
     };
     const substitution = setInterval(date, 4);