diff --git a/src/js/component.js b/src/js/component.js index f96ee75e04..2fc4dfed34 100644 --- a/src/js/component.js +++ b/src/js/component.js @@ -57,7 +57,7 @@ class Component { this.options_ = mergeOptions({}, this.options_); // Updated options with supplied options - options = this.options(options); + options = this.options_ = mergeOptions(this.options_, options); // Get ID from options or options element if one is supplied this.id_ = options.id || (options.el && options.el.id); @@ -186,6 +186,8 @@ class Component { * @return {Object} A NEW object of this.options_ and obj merged */ options(obj) { + log.warn('this.options() has been deprecated and will be moved to the constructor in 6.0'); + if (!obj) { return this.options_; } @@ -468,7 +470,8 @@ class Component { if (children) { // `this` is `parent` - let parentOptions = this.options(); + let parentOptions = this.options_; + let handleAdd = (name, opts) => { // Allow options for children to be set at the parent options // e.g. videojs(id, { controlBar: false }); @@ -483,6 +486,10 @@ class Component { return; } + // We also want to pass the original player options to each component as well so they don't need to + // reach back into the player for options later. + opts.playerOptions = this.options_.playerOptions; + // Create and add the child component. // Add a direct reference to the child by name on the parent instance. // If two of the same component are used, different names should be supplied diff --git a/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js b/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js index 22ff038d3c..76a0fde6d3 100644 --- a/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js +++ b/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js @@ -43,7 +43,7 @@ class PlaybackRateMenuButton extends MenuButton { // Menu creation createMenu() { let menu = new Menu(this.player()); - let rates = this.player().options()['playbackRates']; + let rates = this.playbackRates(); if (rates) { for (let i = rates.length - 1; i >= 0; i--) { @@ -64,10 +64,11 @@ class PlaybackRateMenuButton extends MenuButton { handleClick() { // select next rate option let currentRate = this.player().playbackRate(); - let rates = this.player().options()['playbackRates']; + let rates = this.playbackRates(); + // this will select first one if the last one currently selected let newRate = rates[0]; - for (let i = 0; i currentRate) { newRate = rates[i]; break; @@ -76,11 +77,15 @@ class PlaybackRateMenuButton extends MenuButton { this.player().playbackRate(newRate); } + playbackRates() { + return this.options_['playbackRates'] || (this.options_.playerOptions && this.options_.playerOptions['playbackRates']); + } + playbackRateSupported() { return this.player().tech && this.player().tech['featuresPlaybackRate'] - && this.player().options()['playbackRates'] - && this.player().options()['playbackRates'].length > 0 + && this.playbackRates() + && this.playbackRates().length > 0 ; } diff --git a/src/js/menu/menu-button.js b/src/js/menu/menu-button.js index f19d999641..f12396e060 100644 --- a/src/js/menu/menu-button.js +++ b/src/js/menu/menu-button.js @@ -51,10 +51,10 @@ class MenuButton extends Button { var menu = new Menu(this.player_); // Add a title list item to the top - if (this.options().title) { + if (this.options_.title) { menu.contentEl().appendChild(Dom.createEl('li', { className: 'vjs-menu-title', - innerHTML: toTitleCase(this.options().title), + innerHTML: toTitleCase(this.options_.title), tabIndex: -1 })); } diff --git a/src/js/menu/menu.js b/src/js/menu/menu.js index 40b313dff3..6852351d19 100644 --- a/src/js/menu/menu.js +++ b/src/js/menu/menu.js @@ -28,7 +28,7 @@ class Menu extends Component { } createEl() { - let contentElType = this.options().contentElType || 'ul'; + let contentElType = this.options_.contentElType || 'ul'; this.contentEl_ = Dom.createEl(contentElType, { className: 'vjs-menu-content' }); diff --git a/src/js/player.js b/src/js/player.js index 927b0295ef..7c8075c3b8 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -142,15 +142,24 @@ class Player extends Component { this.el_ = this.createEl(); + // We also want to pass the original player options to each component and plugin + // as well so they don't need to reach back into the player for options later. + // We also need to do another copy of this.options_ so we don't end up with + // an infinite loop. + let playerOptionsCopy = mergeOptions({}, this.options_); + // Load plugins if (options['plugins']) { let plugins = options['plugins']; Object.getOwnPropertyNames(plugins).forEach(function(name){ + plugins[name].playerOptions = playerOptionsCopy; this[name](plugins[name]); }, this); } + this.options_.playerOptions = playerOptionsCopy; + this.initChildren(); // Set isAudio based on whether or not an audio tag was used @@ -1554,7 +1563,7 @@ class Player extends Component { } else { // We need to wrap this in a timeout to give folks a chance to add error event handlers this.setTimeout( function() { - this.error({ code: 4, message: this.localize(this.options()['notSupportedMessage']) }); + this.error({ code: 4, message: this.localize(this.options_['notSupportedMessage']) }); }, 0); // we could not find an appropriate tech, but let's still notify the delegate that this is it @@ -1917,7 +1926,7 @@ class Player extends Component { // Clear any existing inactivity timeout to start the timer over this.clearTimeout(inactivityTimeout); - var timeout = this.options()['inactivityTimeout']; + var timeout = this.options_['inactivityTimeout']; if (timeout > 0) { // In milliseconds, if no more activity has occurred the // user will be considered inactive @@ -2117,7 +2126,7 @@ class Player extends Component { } toJSON() { - let options = mergeOptions(this.options()); + let options = mergeOptions(this.options_); let tracks = options.tracks; options.tracks = []; diff --git a/src/js/slider/slider.js b/src/js/slider/slider.js index 55674d1c1b..ed11873f12 100644 --- a/src/js/slider/slider.js +++ b/src/js/slider/slider.js @@ -23,7 +23,7 @@ class Slider extends Component { this.handle = this.getChild(this.options_['handleName']); // Set a horizontal or vertical class on the slider depending on the slider type - this.vertical(!!this.options()['vertical']); + this.vertical(!!this.options_['vertical']); this.on('mousedown', this.handleMouseDown); this.on('touchstart', this.handleMouseDown); @@ -117,7 +117,7 @@ class Slider extends Component { let boxH = el.offsetHeight; let handle = this.handle; - if (this.options()['vertical']) { + if (this.options_['vertical']) { let boxY = box.top; let pageY; diff --git a/src/js/tech/flash.js b/src/js/tech/flash.js index bc37206f3a..7a2c4025e8 100644 --- a/src/js/tech/flash.js +++ b/src/js/tech/flash.js @@ -56,7 +56,7 @@ class Flash extends Tech { } createEl() { - let options = this.options(); + let options = this.options_; // Generate ID for swf object let objId = options.techId; diff --git a/src/js/tech/loader.js b/src/js/tech/loader.js index 0e808f2af3..e0c7aa59d2 100644 --- a/src/js/tech/loader.js +++ b/src/js/tech/loader.js @@ -15,8 +15,9 @@ class MediaLoader extends Component { // If there are no sources when the player is initialized, // load the first supported playback technology. - if (!player.options_['sources'] || player.options_['sources'].length === 0) { - for (let i=0, j=player.options_['techOrder']; i