diff --git a/CHANGELOG.md b/CHANGELOG.md index 99e0934237..e32692d648 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -148,6 +148,7 @@ CHANGELOG * @misteroneill fixed tsml to be used as a tag for template strings ([view](https://github.com/videojs/video.js/pull/2629)) * @eXon added support for a tech-supplied poster ([view](https://github.com/videojs/video.js/pull/2339)) * @heff improved some skin defaults for external styling ([view](https://github.com/videojs/video.js/pull/2642)) +* @heff changed component child lists to arrays instead of objects ([view](https://github.com/videojs/video.js/pull/2477)) -------------------- diff --git a/docs/guides/options.md b/docs/guides/options.md index 62914915f4..89a1209b15 100644 --- a/docs/guides/options.md +++ b/docs/guides/options.md @@ -119,21 +119,6 @@ Component Options You can set the options for any single player component. For instance, if you wanted to remove the `muteToggle` button, which is a child of `controlBar`, you can just set that component to false: -```javascript -var player = videojs('video-id', { - children: { - controlBar: { - children: { - muteToggle: false - } - } - } -}); -``` - -All the children can start getting a little verbose, so to simplify things, you can also set options for child components directly on the parent options. -This is functionally the exact same as the above, for instance. - ```javascript var player = videojs('video-id', { controlBar: { @@ -146,7 +131,7 @@ This also works using the `data-setup` attribute on the video element, just reme notation. ```html - + ``` The [components guide](components.md) has an excellent breakdown of the structure of a player, you diff --git a/src/js/component.js b/src/js/component.js index d3274f700b..02cdd13e94 100644 --- a/src/js/component.js +++ b/src/js/component.js @@ -146,19 +146,17 @@ class Component { * Deep merge of options objects * Whenever a property is an object on both options objects * the two properties will be merged using mergeOptions. - * This is used for merging options for child components. We - * want it to be easy to override individual options on a child - * component without having to rewrite all the other default options. + * * ```js * Parent.prototype.options_ = { - * children: { + * optionSet: { * 'childOne': { 'foo': 'bar', 'asdf': 'fdsa' }, * 'childTwo': {}, * 'childThree': {} * } * } * newOptions = { - * children: { + * optionSet: { * 'childOne': { 'foo': 'baz', 'abc': '123' } * 'childTwo': null, * 'childFour': {} @@ -170,7 +168,7 @@ class Component { * RESULT * ```js * { - * children: { + * optionSet: { * 'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' }, * 'childTwo': null, // Disabled. Won't be initialized. * 'childThree': {}, @@ -324,16 +322,14 @@ class Component { * * var myButton = myComponent.addChild('MyButton'); * // ->
myButton
- * // -> myButton === myComonent.children()[0]; + * // -> myButton === myComponent.children()[0]; * ``` * Pass in options for child constructors and options for children of the child * ```js * var myButton = myComponent.addChild('MyButton', { * text: 'Press Me', - * children: { - * buttonChildExample: { - * buttonChildOption: true - * } + * buttonChildExample: { + * buttonChildOption: true * } * }); * ``` @@ -449,24 +445,29 @@ class Component { * ```js * // when an instance of MyComponent is created, all children in options * // will be added to the instance by their name strings and options - * MyComponent.prototype.options_.children = { + * MyComponent.prototype.options_ = { + * children: [ + * 'myChildComponent' + * ], * myChildComponent: { * myChildOption: true * } - * } - * ``` + * }; + * * // Or when creating the component - * ```js * var myComp = new MyComponent(player, { - * children: { - * myChildComponent: { - * myChildOption: true - * } + * children: [ + * 'myChildComponent' + * ], + * myChildComponent: { + * myChildOption: true * } * }); * ``` - * The children option can also be an Array of child names or + * The children option can also be an array of * child options objects (that also include a 'name' key). + * This can be used if you have two child components of the + * same type that need different options. * ```js * var myComp = new MyComponent(player, { * children: [ @@ -474,6 +475,10 @@ class Component { * { * name: 'button', * someOtherOption: true + * }, + * { + * name: 'button', + * someOtherOption: false * } * ] * }); diff --git a/src/js/control-bar/progress-control/progress-control.js b/src/js/control-bar/progress-control/progress-control.js index 1cd8307853..703989e4db 100644 --- a/src/js/control-bar/progress-control/progress-control.js +++ b/src/js/control-bar/progress-control/progress-control.js @@ -30,9 +30,9 @@ class ProgressControl extends Component { } ProgressControl.prototype.options_ = { - children: { - 'seekBar': {} - } + children: [ + 'seekBar' + ] }; Component.registerComponent('ProgressControl', ProgressControl); diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js index 610c4886d8..09176fbde7 100644 --- a/src/js/control-bar/progress-control/seek-bar.js +++ b/src/js/control-bar/progress-control/seek-bar.js @@ -126,11 +126,11 @@ class SeekBar extends Slider { } SeekBar.prototype.options_ = { - children: { - 'loadProgressBar': {}, - 'mouseTimeDisplay': {}, - 'playProgressBar': {} - }, + children: [ + 'loadProgressBar', + 'mouseTimeDisplay', + 'playProgressBar' + ], 'barName': 'playProgressBar' }; diff --git a/src/js/control-bar/volume-control/volume-bar.js b/src/js/control-bar/volume-control/volume-bar.js index 00808b1d7f..cf0026ba4e 100644 --- a/src/js/control-bar/volume-control/volume-bar.js +++ b/src/js/control-bar/volume-control/volume-bar.js @@ -98,9 +98,9 @@ class VolumeBar extends Slider { } VolumeBar.prototype.options_ = { - children: { - 'volumeLevel': {} - }, + children: [ + 'volumeLevel' + ], 'barName': 'volumeLevel' }; diff --git a/src/js/control-bar/volume-control/volume-control.js b/src/js/control-bar/volume-control/volume-control.js index 5c69aae93c..2095b3dfac 100644 --- a/src/js/control-bar/volume-control/volume-control.js +++ b/src/js/control-bar/volume-control/volume-control.js @@ -47,9 +47,9 @@ class VolumeControl extends Component { } VolumeControl.prototype.options_ = { - children: { - 'volumeBar': {} - } + children: [ + 'volumeBar' + ] }; Component.registerComponent('VolumeControl', VolumeControl); diff --git a/src/js/player.js b/src/js/player.js index c5473f7820..366eb3dcb3 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -2566,16 +2566,16 @@ Player.prototype.options_ = { // 'playbackRates': [0.5, 1, 1.5, 2], // Included control sets - children: { - mediaLoader: {}, - posterImage: {}, - textTrackDisplay: {}, - loadingSpinner: {}, - bigPlayButton: {}, - controlBar: {}, - errorDisplay: {}, - textTrackSettings: {} - }, + children: [ + 'mediaLoader', + 'posterImage', + 'textTrackDisplay', + 'loadingSpinner', + 'bigPlayButton', + 'controlBar', + 'errorDisplay', + 'textTrackSettings' + ], language: document.getElementsByTagName('html')[0].getAttribute('lang') || navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language || 'en',