From 3e55b9a1cb26f056c0f7299e1a5a4ce0b05777a1 Mon Sep 17 00:00:00 2001
From: Gary Katsevman <git@gkatsev.com>
Date: Tue, 19 Mar 2019 16:46:45 -0400
Subject: [PATCH 1/4] null-check this.bar

---
 src/js/control-bar/progress-control/seek-bar.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js
index a1024ef5dc..d421332bc0 100644
--- a/src/js/control-bar/progress-control/seek-bar.js
+++ b/src/js/control-bar/progress-control/seek-bar.js
@@ -133,7 +133,9 @@ class SeekBar extends Slider {
     );
 
     // Update the `PlayProgressBar`.
-    this.bar.update(Dom.getBoundingClientRect(this.el_), percent);
+    if (this.bar) {
+      this.bar.update(Dom.getBoundingClientRect(this.el_), percent);
+    }
   }
 
   /**

From b0f14a527212a3b8b44215c7df247d03dc0db73a Mon Sep 17 00:00:00 2001
From: Gary Katsevman <git@gkatsev.com>
Date: Tue, 19 Mar 2019 17:09:28 -0400
Subject: [PATCH 2/4] move internal functions into helper methods

---
 .../control-bar/progress-control/seek-bar.js  | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js
index d421332bc0..28c44b2151 100644
--- a/src/js/control-bar/progress-control/seek-bar.js
+++ b/src/js/control-bar/progress-control/seek-bar.js
@@ -64,24 +64,26 @@ class SeekBar extends Slider {
     // via an interval
     this.updateInterval = null;
 
-    this.on(this.player_, ['playing'], () => {
-      this.clearInterval(this.updateInterval);
-
-      this.updateInterval = this.setInterval(() =>{
-        this.requestAnimationFrame(() => {
-          this.update();
-        });
-      }, UPDATE_REFRESH_INTERVAL);
-    });
+    this.on(this.player_, ['playing'], this.enableInterval_);
 
-    this.on(this.player_, ['ended', 'pause', 'waiting'], (e) => {
-      if (this.player_.liveTracker && this.player_.liveTracker.isLive() && e.type !== 'ended') {
-        return;
-      }
+    this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableInterval_);
 
-      this.clearInterval(this.updateInterval);
-    });
+  }
+
+  enableInterval_() {
+    this.clearInterval(this.updateInterval);
+
+    this.updateInterval = this.setInterval(() =>{
+      this.requestAnimationFrame(this.update);
+    }, UPDATE_REFRESH_INTERVAL);
+  }
+
+  disableInterval_(e) {
+    if (this.player_.liveTracker && this.player_.liveTracker.isLive() && e.type !== 'ended') {
+      return;
+    }
 
+    this.clearInterval(this.updateInterval);
   }
 
   /**

From 7f0a7c994d11a6451a85dae6c7f9a2f89130aedd Mon Sep 17 00:00:00 2001
From: Gary Katsevman <git@gkatsev.com>
Date: Tue, 19 Mar 2019 17:40:28 -0400
Subject: [PATCH 3/4] toggle interval on visibilitychange

---
 src/js/control-bar/progress-control/seek-bar.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js
index 28c44b2151..a88c795e92 100644
--- a/src/js/control-bar/progress-control/seek-bar.js
+++ b/src/js/control-bar/progress-control/seek-bar.js
@@ -9,6 +9,7 @@ import * as Fn from '../../utils/fn.js';
 import formatTime from '../../utils/format-time.js';
 import {silencePromise} from '../../utils/promise';
 import keycode from 'keycode';
+import document from 'global/document';
 
 import './load-progress-bar.js';
 import './play-progress-bar.js';
@@ -68,6 +69,22 @@ class SeekBar extends Slider {
 
     this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableInterval_);
 
+    // we don't need to update the play progress if the document is hidden,
+    // also, this causes the CPU to spike and eventually crash the page on IE11.
+    if ('hidden' in document && 'visibilityState' in document) {
+      this.on(document, 'visibilitychange', this.toggleVisibility_);
+    }
+  }
+
+  toggleVisibility_(e) {
+    if (document.hidden) {
+      this.disableInterval_(e);
+    } else {
+      this.enableInterval_();
+
+      // we just switched back to the page and someone may be looking, so, update ASAP
+      this.requestAnimationFrame(this.update);
+    }
   }
 
   enableInterval_() {

From 4c705c74bbf0c5bf294ace2b5f8af89e26698dcd Mon Sep 17 00:00:00 2001
From: Gary Katsevman <git@gkatsev.com>
Date: Tue, 19 Mar 2019 17:40:48 -0400
Subject: [PATCH 4/4] make update a no-op if the element isn't visible

---
 src/js/control-bar/progress-control/seek-bar.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js
index a88c795e92..2c5395b3c1 100644
--- a/src/js/control-bar/progress-control/seek-bar.js
+++ b/src/js/control-bar/progress-control/seek-bar.js
@@ -169,6 +169,12 @@ class SeekBar extends Slider {
    *          The current percent at a number from 0-1
    */
   update(event) {
+    // if the offsetParent is null, then this element is hidden, in which case
+    // we don't need to update it.
+    if (this.el().offsetParent === null) {
+      return;
+    }
+
     const percent = super.update();
 
     this.update_(this.getCurrentTime_(), percent);