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

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.
This commit is contained in:
Gary Katsevman 2016-11-03 15:59:34 -04:00 committed by GitHub
parent 685404d018
commit 9702618c02
4 changed files with 49 additions and 7 deletions

View File

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

View File

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

View File

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

View File

@ -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)
*