From f94c3d93f24bf74577efb81c7592b2f61f6a34c6 Mon Sep 17 00:00:00 2001
From: Carey Hinoki <carey.hinoki@gmail.com>
Date: Mon, 26 Sep 2016 11:24:41 -0700
Subject: [PATCH] Components are now accessible via `camelCase` and
 `UpperCamelCase` means.

- addChild
- getChild
- getComponent
- registerComponent
---
 src/js/component.js           | 22 +++++++++++++++++++++-
 src/js/utils/to-title-case.js |  4 ++++
 test/unit/component.test.js   | 12 ++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/js/component.js b/src/js/component.js
index f29588b7cd..37afa80089 100644
--- a/src/js/component.js
+++ b/src/js/component.js
@@ -306,6 +306,12 @@ class Component {
    * @method getChild
    */
   getChild(name) {
+    if (!name) {
+      return;
+    }
+
+    name = toTitleCase(name);
+
     return this.childNameIndex_[name];
   }
 
@@ -343,7 +349,7 @@ class Component {
 
     // If child is a string, create nt 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) {
@@ -1386,11 +1392,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 +1416,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];
     }
   }
diff --git a/src/js/utils/to-title-case.js b/src/js/utils/to-title-case.js
index c9f97b88e1..05ac86eae5 100644
--- a/src/js/utils/to-title-case.js
+++ b/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);
 }
 
diff --git a/test/unit/component.test.js b/test/unit/component.test.js
index a1d502146e..130e06a49b 100644
--- a/test/unit/component.test.js
+++ b/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: {