fix: addChild with index should allow for children that are elements (#…

…6671)

This is #6644 but against the 7.8.x release line.

Co-authored-by: mister-ben <git@misterben.me>

src/js/component.js

@@ -526,8 +526,13 @@ class Component {
       // If inserting before a component, insert before that component's element
       let refNode = null;
 
-      if (this.children_[index + 1] && this.children_[index + 1].el_) {
-        refNode = this.children_[index + 1].el_;
+      if (this.children_[index + 1]) {
+        // Most children are components, but the video tech is an HTML element
+        if (this.children_[index + 1].el_) {
+          refNode = this.children_[index + 1].el_;
+        } else if (Dom.isEl(this.children_[index + 1])) {
+          refNode = this.children_[index + 1];
+        }
       }
 
       this.contentEl().insertBefore(component.el(), refNode);

test/unit/component.test.js

@@ -164,6 +164,26 @@ QUnit.test('should insert element relative to the element of the component to in
   /* eslint-enable no-unused-vars */
 });
 
+QUnit.test('should allow for children that are elements', function(assert) {
+
+  // for legibility of the test itself:
+  /* eslint-disable no-unused-vars */
+
+  const comp = new Component(getFakePlayer());
+  const testEl = Dom.createEl('div');
+
+  // Add element as video el gets added to player
+  comp.el().appendChild(testEl);
+  comp.children_.unshift(testEl);
+
+  const child1 = comp.addChild('component', {el: Dom.createEl('div', {}, {class: 'c1'})});
+  const child2 = comp.addChild('component', {el: Dom.createEl('div', {}, {class: 'c4'})}, 0);
+
+  assert.ok(child2.el_.nextSibling === testEl, 'addChild should insert el before a sibling that is an element');
+
+  /* eslint-enable no-unused-vars */
+});
+
 QUnit.test('addChild should throw if the child does not exist', function(assert) {
   const comp = new Component(getFakePlayer());