From b3513108bc0d061b6fe267873250ed4f86fd5f65 Mon Sep 17 00:00:00 2001
From: Dizel <diskroma69@gmail.com>
Date: Sat, 23 Oct 2021 16:26:34 +0700
Subject: [PATCH] auto-pause video backgrounds on tab switch

---
 src/component/bookmark/index.js     | 10 +++++++++
 src/component/bookmarkTile/index.js | 35 +++++++++++++++++++++++++++++
 src/component/theme/index.js        |  8 +++++--
 src/component/video/index.js        | 25 ++++++++++++++++++++-
 4 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/src/component/bookmark/index.js b/src/component/bookmark/index.js
index 54f69dec..b2dabbc2 100644
--- a/src/component/bookmark/index.js
+++ b/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 = [];
 
   }
diff --git a/src/component/bookmarkTile/index.js b/src/component/bookmarkTile/index.js
index db1e74c8..be76db05 100644
--- a/src/component/bookmarkTile/index.js
+++ b/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();
diff --git a/src/component/theme/index.js b/src/component/theme/index.js
index 7b9c6a27..71d7e1eb 100644
--- a/src/component/theme/index.js
+++ b/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);
 
diff --git a/src/component/video/index.js b/src/component/video/index.js
index 3f4df0fc..1791bb4d 100644
--- a/src/component/video/index.js
+++ b/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();
 
 };