static/js: Experiment with video autoplay

2 files changed, 37 insertions, 0 deletions

diff --git a/static/js/autoplay.ts b/static/js/autoplay.ts
new file mode 100644
index 0000000..efa55e9
--- /dev/null
+++ b/static/js/autoplay.ts
@@ -0,0 +1,36 @@
+(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();
+        }
+      }
+    });
+  });
+})();
diff --git a/static/js/index.ts b/static/js/index.ts
index af805ae..da4defa 100644
--- a/static/js/index.ts
+++ b/static/js/index.ts
@@ -4,6 +4,7 @@ import "./plumber.ts";
 import "./instantpage.ts";
 import "./contextmenu.ts";
 import "./fixedsearch.ts";
+import "./autoplay.ts";
 import "./timeago.ts";
 
 console.log("Surface Control: Complete");