@heff changed component child lists to arrays instead of objects. closes

#2477
videojs · Sep 28, 2015 · 1d79c4a · 1d79c4a
1 parent c5321f4
commit 1d79c4a
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 60 deletions.
diff --git 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
@@ -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
-<video ... data-setup='{ "children": { "controlBar": { "children": { "muteToggle": false } } } }'></video>
+<video ... data-setup='{ "controlBar": { "muteToggle": false } }'></video>
 ```
 
 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
@@ -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');
    *     // -> <div class='my-component'><div class="my-button">myButton<div></div>
-   *     // -> 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,31 +445,40 @@ 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: [
    *         'button',
    *         {
    *           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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',