auto-pause video backgrounds on tab switch

src/component/bookmark/index.js

@@ -244,6 +244,16 @@ bookmark.item = {
   },
   clear: () => {
 
+    if (bookmark.tile.current.length > 0) {
+
+      bookmark.tile.current.forEach(item => {
+
+        item.clear();
+
+      });
+
+    }
+
     bookmark.tile.current = [];
 
   }

src/component/bookmarkTile/index.js

@@ -492,6 +492,14 @@ const BookmarkTile = function ({
 
             this.element.content.background.video.appendChild(this.video.video);
 
+            this.bind.add();
+
+          } else {
+
+            this.video = false;
+
+            this.bind.remove();
+
           }
 
           break;
@@ -551,6 +559,33 @@ const BookmarkTile = function ({
 
   };
 
+  this.bind = {
+    add: () => {
+
+      if (this.video) {
+
+        this.video.bind.add();
+
+      }
+
+    },
+    remove: () => {
+
+      if (this.video) {
+
+        this.video.bind.remove();
+
+      }
+
+    }
+  };
+
+  this.clear = () => {
+
+    this.bind.remove();
+
+  };
+
   this.video = false;
 
   this.assemble();

src/component/theme/index.js

@@ -413,6 +413,8 @@ theme.background.video = {
         url: allUrls[Math.floor(Math.random() * allUrls.length)]
       });
 
+      theme.background.element.video.bind.add();
+
       theme.background.element.type.video.wrap.appendChild(theme.background.element.video.video);
 
     } else {
@@ -424,9 +426,11 @@ theme.background.video = {
   },
   clear: () => {
 
-    theme.background.element.video = false;
+    if (theme.background.element.video) {
 
-    if (theme.background.element.type.video.wrap.lastChild) {
+      theme.background.element.video.bind.remove();
+
+      theme.background.element.video = false;
 
       clearChildNode(theme.background.element.type.video.wrap);
 

src/component/video/index.js

@@ -1,4 +1,3 @@
-
 import { node } from '../../utility/node';
 import { isValidString } from '../../utility/isValidString';
 
@@ -26,6 +25,16 @@ export const Video = function ({
     }
   };
 
+  this.autoPause = () => {
+
+    if (document.visibilityState === 'visible') {
+      this.video.play();
+    } else {
+      this.video.pause();
+    }
+
+  };
+
   this.assemble = () => {
 
     this.video.muted = true;
@@ -52,6 +61,20 @@ export const Video = function ({
 
   };
 
+  this.bind = {};
+
+  this.bind.add = () => {
+
+    window.addEventListener('visibilitychange', this.autoPause);
+
+  };
+
+  this.bind.remove = () => {
+
+    window.removeEventListener('visibilitychange', this.autoPause);
+
+  };
+
   this.assemble();
 
 };