web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-03-17 21:18:27 +02:00
Code Releases Activity

fix(component): use safe computedStyle in currentDimension (#6073)

Browse Source 
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
This commit is contained in:
Bruno 2019-07-30 00:17:02 +02:00 committed by Gary Katsevman
parent f2aedb72ec
commit 20cae21ff7
2 changed files with 5 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/js/component.js
View File

@ -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];

4
src/js/utils/computed-style.js
View File

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