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

@@ -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,19 +985,15 @@ 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);
 
     // 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];

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 '';