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:
parent
685404d018
commit
9702618c02
@ -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;
|
||||
|
||||
|
@ -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';
|
||||
|
27
src/js/utils/computed-style.js
Normal file
27
src/js/utils/computed-style.js
Normal 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] || '';
|
||||
}
|
@ -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)
|
||||
*
|
||||
|
Loading…
x
Reference in New Issue
Block a user