feat: add a safe computedStyle to videojs. (#3664)

This is used internally in the seek bar and mouse time display.
In firefox, in an iframe that is hidden with "display: none",
getComputedStyle() returns "null" which can break things.
See https://bugzilla.mozilla.org/show_bug.cgi?id=548397 for more
details.

src/js/control-bar/progress-control/mouse-time-display.js

@@ -1,12 +1,12 @@
 /**
  * @file mouse-time-display.js
  */
-import window from 'global/window';
 import Component from '../../component.js';
 import * as Dom from '../../utils/dom.js';
 import * as Fn from '../../utils/fn.js';
 import formatTime from '../../utils/format-time.js';
 import throttle from 'lodash-compat/function/throttle';
+import computedStyle from '../../utils/computed-style.js';
 
 /**
  * The Mouse Time Display component shows the time you will seek to
@@ -71,7 +71,7 @@ class MouseTimeDisplay extends Component {
     if (this.keepTooltipsInside) {
       const clampedPosition = this.clampPosition_(position);
       const difference = position - clampedPosition + 1;
-      const tooltipWidth = parseFloat(window.getComputedStyle(this.tooltip).width);
+      const tooltipWidth = parseFloat(computedStyle(this.tooltip, 'width'));
       const tooltipWidthHalf = tooltipWidth / 2;
 
       this.tooltip.innerHTML = time;
@@ -98,8 +98,8 @@ class MouseTimeDisplay extends Component {
       return position;
     }
 
-    const playerWidth = parseFloat(window.getComputedStyle(this.player().el()).width);
-    const tooltipWidth = parseFloat(window.getComputedStyle(this.tooltip).width);
+    const playerWidth = parseFloat(computedStyle(this.player().el(), 'width'));
+    const tooltipWidth = parseFloat(computedStyle(this.tooltip, 'width'));
     const tooltipWidthHalf = tooltipWidth / 2;
     let actualPosition = position;
 

src/js/control-bar/progress-control/seek-bar.js

@@ -1,11 +1,11 @@
 /**
  * @file seek-bar.js
  */
-import window from 'global/window';
 import Slider from '../../slider/slider.js';
 import Component from '../../component.js';
 import * as Fn from '../../utils/fn.js';
 import formatTime from '../../utils/format-time.js';
+import computedStyle from '../../utils/computed-style.js';
 
 import './load-progress-bar.js';
 import './play-progress-bar.js';
@@ -65,8 +65,8 @@ class SeekBar extends Slider {
       this.updateAriaAttributes(this.tooltipProgressBar.el_);
       this.tooltipProgressBar.el_.style.width = this.bar.el_.style.width;
 
-      const playerWidth = parseFloat(window.getComputedStyle(this.player().el()).width);
-      const tooltipWidth = parseFloat(window.getComputedStyle(this.tooltipProgressBar.tooltip).width);
+      const playerWidth = parseFloat(computedStyle(this.player().el(), 'width'));
+      const tooltipWidth = parseFloat(computedStyle(this.tooltipProgressBar.tooltip, 'width'));
       const tooltipStyle = this.tooltipProgressBar.el().style;
 
       tooltipStyle.maxWidth = Math.floor(playerWidth - (tooltipWidth / 2)) + 'px';

src/js/utils/computed-style.js

@@ -0,0 +1,27 @@
+import window from 'global/window';
+
+/**
+ * A safe getComputedStyle with an IE8 fallback.
+ *
+ * This is because in Firefox, if the player is loaded in an iframe with `display:none`,
+ * then `getComputedStyle` returns `null`, so, we do a null-check to make sure
+ * that the player doesn't break in these cases.
+ * See https://bugzilla.mozilla.org/show_bug.cgi?id=548397 for more details.
+ *
+ * @function computedStyle
+ * @param el the element you want the computed style of
+ * @param prop the property name you want
+ */
+export default function computedStyle(el, prop) {
+  if (!el || !prop) {
+    return '';
+  }
+
+  if (typeof window.getComputedStyle === 'function') {
+    const cs = window.getComputedStyle(el);
+
+    return cs ? cs[prop] : '';
+  }
+
+  return el.currentStyle[prop] || '';
+}

src/js/video.js

@@ -25,6 +25,7 @@ import log from './utils/log.js';
 import * as Dom from './utils/dom.js';
 import * as browser from './utils/browser.js';
 import * as Url from './utils/url.js';
+import computedStyle from './utils/computed-style.js';
 import extendFn from './extend.js';
 import merge from 'lodash-compat/object/merge';
 import xhr from 'xhr';
@@ -721,6 +722,20 @@ videojs.appendContent = Dom.appendContent;
  */
 videojs.insertContent = Dom.insertContent;
 
+/**
+ * A safe getComputedStyle with an IE8 fallback.
+ *
+ * This is because in Firefox, if the player is loaded in an iframe with `display:none`,
+ * then `getComputedStyle` returns `null`, so, we do a null-check to make sure
+ * that the player doesn't break in these cases.
+ * See https://bugzilla.mozilla.org/show_bug.cgi?id=548397 for more details.
+ *
+ * @function computedStyle
+ * @param el the element you want the computed style of
+ * @param prop the property name you want
+ */
+videojs.computedStyle = computedStyle;
+
 /*
  * Custom Universal Module Definition (UMD)
  *