From 0b91f74260076f888a71b604de042b9b5b59fcab Mon Sep 17 00:00:00 2001 From: mister-ben Date: Tue, 26 May 2020 23:00:23 +0200 Subject: [PATCH 1/4] fix: addChild with index should allow for children that are elements (#6644) The fix in #6297 doesn't work where the child to insert before is an element rather than a component, e.g. the video element. Check if the child to insert before is an element, as well as checking if it has an el_ --- src/js/component.js | 9 +++++++-- test/unit/component.test.js | 20 ++++++++++++++++++++ 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/js/component.js b/src/js/component.js index 35ac4acbe3..d88fa496a4 100644 --- a/src/js/component.js +++ b/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); diff --git a/test/unit/component.test.js b/test/unit/component.test.js index fcd4d1d59e..7cb17d8843 100644 --- a/test/unit/component.test.js +++ b/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()); From 756fbfc247c1aa93fcc4fedc3e0d4958216b673e Mon Sep 17 00:00:00 2001 From: Soroush Chehresa Date: Wed, 27 May 2020 02:16:59 +0430 Subject: [PATCH 2/4] docs(README): Update CDN version urls (#6658) --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 19c6cb5774..417f6df42e 100644 --- a/README.md +++ b/README.md @@ -23,8 +23,8 @@ Thanks to the awesome folks over at [Fastly][fastly], there's a free, CDN hosted version of Video.js that anyone can use. Add these tags to your document's ``: ```html - - + + ``` > For the latest version of video.js and URLs to use, check out the [Getting Started][getting-started] page on our website. @@ -45,12 +45,12 @@ Alternatively, you can include Video.js by getting it from [npm](https://videojs - - + + - - + + ``` Next, using Video.js is as simple as creating a `