bitwave-tv · DispatchCommit · Jun 9, 2020 · May 26, 2020 · May 26, 2020 · May 28, 2020
diff --git 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 `<head>`:
 
 ```html
-<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
-<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
+<link href="//vjs.zencdn.net/7.8.2/video-js.min.css" rel="stylesheet">
+<script src="//vjs.zencdn.net/7.8.2/video.min.js"></script>
 ```
 
 > 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
 <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
 
 <!-- unpkg : use a specific version of Video.js (change the version numbers as necessary) -->
-<link href="https://unpkg.com/video.js@6.11.0/dist/video-js.min.css" rel="stylesheet">
-<script src="https://unpkg.com/video.js@6.11.0/dist/video.min.js"></script>
+<link href="https://unpkg.com/video.js@7.8.2/dist/video-js.min.css" rel="stylesheet">
+<script src="https://unpkg.com/video.js@7.8.2/dist/video.min.js"></script>
 
 <!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) -->
-<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.7.3/video-js.min.css" rel="stylesheet">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.7.3/video.min.js"></script>
+<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.8.1/video-js.min.css" rel="stylesheet">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.8.1/video.min.js"></script>
 ```
 
 Next, using Video.js is as simple as creating a `<video>` element, but with an additional `data-setup` attribute. At a minimum, this attribute must have a value of `'{}'`, but it can include any Video.js [options][options] - just make sure it contains valid JSON!

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "video.js",
-  "description": "An HTML5 and Flash video player with a common API and skin for both.",
+  "description": "An HTML5 video player that supports HLS and DASH with a common API and skin.",
   "version": "7.8.1",
   "main": "./dist/video.cjs.js",
   "module": "./dist/video.es.js",
@@ -9,6 +9,7 @@
   "license": "Apache-2.0",
   "keywords": [
     "flash",
+    "hls",
     "html5",
     "player",
     "video",

diff --git a/src/css/components/_layout.scss b/src/css/components/_layout.scss
@@ -113,12 +113,13 @@ body.vjs-full-window {
   bottom: 0;
   right: 0;
 }
-.video-js.vjs-fullscreen {
+.video-js.vjs-fullscreen:not(.vjs-ios-native-fs) {
   width: 100% !important;
   height: 100% !important;
   // Undo any aspect ratio padding for fluid layouts
   padding-top: 0 !important;
 }
+
 .video-js.vjs-fullscreen.vjs-user-inactive {
   cursor: none;
 }

diff --git 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/src/js/player.js b/src/js/player.js
@@ -2077,6 +2077,9 @@ class Player extends Component {
    */
   handleTechFullscreenChange_(event, data) {
     if (data) {
+      if (data.nativeIOSFullscreen) {
+        this.toggleClass('vjs-ios-native-fs');
+      }
       this.isFullscreen(data.isFullscreen);
     }
   }

diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js
@@ -626,7 +626,11 @@ class Html5 extends Tech {
         this.el_.webkitPresentationMode !== 'picture-in-picture') {
         this.one('webkitendfullscreen', endFn);
 
-        this.trigger('fullscreenchange', { isFullscreen: true });
+        this.trigger('fullscreenchange', {
+          isFullscreen: true,
+          // set a flag in case another tech triggers fullscreenchange
+          nativeIOSFullscreen: true
+        });
       }
     };
 

diff --git 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());