feat: Components are now accessible via camelCase and `UpperCamelCa…

…se` (#3439)

This means that you can `getChild` and `addChild` with both `myComponent` and `MyComponent`.

Fixes #3436.

src/js/component.js

@@ -306,6 +306,12 @@ class Component {
    * @method getChild
    */
   getChild(name) {
+    if (!name) {
+      return;
+    }
+
+    name = toTitleCase(name);
+
     return this.childNameIndex_[name];
   }
 
@@ -341,9 +347,9 @@ class Component {
     let component;
     let componentName;
 
-    // If child is a string, create nt with options
+    // If child is a string, create component with options
     if (typeof child === 'string') {
-      componentName = child;
+      componentName = toTitleCase(child);
 
       // Options can also be specified as a boolean, so convert to an empty object if false.
       if (!options) {
@@ -356,9 +362,7 @@ class Component {
         options = {};
       }
 
-      // If no componentClass in options, assume componentClass is the name lowercased
-      // (e.g. playButton)
-      const componentClassName = options.componentClass || toTitleCase(componentName);
+      const componentClassName = options.componentClass || componentName;
 
       // Set name through options
       options.name = componentName;
@@ -1386,11 +1390,18 @@ class Component {
    * @method registerComponent
    */
   static registerComponent(name, comp) {
+    if (!name) {
+      return;
+    }
+
+    name = toTitleCase(name);
+
     if (!Component.components_) {
       Component.components_ = {};
     }
 
     Component.components_[name] = comp;
+
     return comp;
   }
 
@@ -1403,12 +1414,19 @@ class Component {
    * @method getComponent
    */
   static getComponent(name) {
+    if (!name) {
+      return;
+    }
+
+    name = toTitleCase(name);
+
     if (Component.components_ && Component.components_[name]) {
       return Component.components_[name];
     }
 
     if (window && window.videojs && window.videojs[name]) {
       log.warn(`The ${name} component was added to the videojs object when it should be registered using videojs.registerComponent(name, component)`);
+
       return window.videojs[name];
     }
   }

src/js/utils/to-title-case.js

@@ -9,6 +9,10 @@
  * @method toTitleCase
  */
 function toTitleCase(string) {
+  if (typeof string !== 'string') {
+    return string;
+  }
+
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 

test/unit/component.test.js

@@ -99,6 +99,18 @@ QUnit.test('addChild should throw if the child does not exist', function(assert)
 
 });
 
+QUnit.test('should add a child component with title case name', function(assert) {
+  const comp = new Component(getFakePlayer());
+
+  const child = comp.addChild('Component');
+
+  assert.ok(comp.children().length === 1);
+  assert.ok(comp.children()[0] === child);
+  assert.ok(comp.el().childNodes[0] === child.el());
+  assert.ok(comp.getChild('Component') === child);
+  assert.ok(comp.getChildById(child.id()) === child);
+});
+
 QUnit.test('should init child components from options', function(assert) {
   const comp = new Component(getFakePlayer(), {
     children: {
@@ -178,8 +190,8 @@ QUnit.test('should init child components from component options', function(asser
     testComponent4: {}
   });
 
-  assert.ok(!testComp.childNameIndex_.testComponent2, 'we do not have testComponent2');
-  assert.ok(testComp.childNameIndex_.testComponent4, 'we have a testComponent4');
+  assert.ok(!testComp.childNameIndex_.TestComponent2, 'we do not have testComponent2');
+  assert.ok(testComp.childNameIndex_.TestComponent4, 'we have a testComponent4');
 });
 
 QUnit.test('should allows setting child options at the parent options level', function(assert) {