diff --git a/src/js/component.js b/src/js/component.js index f29588b7cd..141206467b 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]; } @@ -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]; } } 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..20c253c56f 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: { @@ -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) {