From 20cae21ff7222fd6b1efa6b4e48578fd405ba126 Mon Sep 17 00:00:00 2001
From: Bruno <bmalaquin@travelclick.com>
Date: Tue, 30 Jul 2019 00:17:02 +0200
Subject: [PATCH] fix(component): use safe computedStyle in currentDimension
 (#6073)

This will prevent a null exception when a video.js is implemented in a 'display:none' iframe on Firefox (<62).

This is a fix in continuation of the PR #3664 regarding a bug in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=548397
---
 src/js/component.js            | 9 +++------
 src/js/utils/computed-style.js | 4 ++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/js/component.js b/src/js/component.js
index f2c9fb77c1..8c884acb32 100644
--- a/src/js/component.js
+++ b/src/js/component.js
@@ -12,6 +12,7 @@ import * as Fn from './utils/fn.js';
 import * as Guid from './utils/guid.js';
 import toTitleCase from './utils/to-title-case.js';
 import mergeOptions from './utils/merge-options.js';
+import computedStyle from './utils/computed-style';
 
 /**
  * Base class for all UI Components.
@@ -984,11 +985,7 @@ class Component {
       throw new Error('currentDimension only accepts width or height value');
     }
 
-    if (typeof window.getComputedStyle === 'function') {
-      const computedStyle = window.getComputedStyle(this.el_);
-
-      computedWidthOrHeight = computedStyle.getPropertyValue(widthOrHeight) || computedStyle[widthOrHeight];
-    }
+    computedWidthOrHeight = computedStyle(this.el_, widthOrHeight);
 
     // remove 'px' from variable and parse as integer
     computedWidthOrHeight = parseFloat(computedWidthOrHeight);
@@ -996,7 +993,7 @@ class Component {
     // if the computed value is still 0, it's possible that the browser is lying
     // and we want to check the offset values.
     // This code also runs wherever getComputedStyle doesn't exist.
-    if (computedWidthOrHeight === 0) {
+    if (computedWidthOrHeight === 0 || isNaN(computedWidthOrHeight)) {
       const rule = `offset${toTitleCase(widthOrHeight)}`;
 
       computedWidthOrHeight = this.el_[rule];
diff --git a/src/js/utils/computed-style.js b/src/js/utils/computed-style.js
index 0bf81266ea..7571c7b76a 100644
--- a/src/js/utils/computed-style.js
+++ b/src/js/utils/computed-style.js
@@ -26,9 +26,9 @@ function computedStyle(el, prop) {
   }
 
   if (typeof window.getComputedStyle === 'function') {
-    const cs = window.getComputedStyle(el);
+    const computedStyleValue = window.getComputedStyle(el);
 
-    return cs ? cs[prop] : '';
+    return computedStyleValue ? computedStyleValue.getPropertyValue(prop) || computedStyleValue[prop] : '';
   }
 
   return '';