fix: make compatible with chrome 53 (#8354)

Author: mister-ben

src/js/player.js

@@ -3100,7 +3100,7 @@ class Player extends Component {
         Dom.copyStyleSheetsToWindow(pipWindow);
         this.el_.parentNode.insertBefore(pipContainer, this.el_);
 
-        pipWindow.document.body.append(this.el_);
+        pipWindow.document.body.appendChild(this.el_);
         pipWindow.document.body.classList.add('vjs-pip-window');
 
         this.player_.isInPictureInPicture(true);
@@ -3110,7 +3110,7 @@ class Player extends Component {
         pipWindow.addEventListener('pagehide', (event) => {
           const pipVideo = event.target.querySelector('.video-js');
 
-          pipContainer.replaceWith(pipVideo);
+          pipContainer.parentNode.replaceChild(pipVideo, pipContainer);
           this.player_.isInPictureInPicture(false);
           this.player_.trigger('leavepictureinpicture');
         });

src/js/tracks/text-track-display.js

@@ -324,7 +324,9 @@ class TextTrackDisplay extends Component {
    * a {@link Player#texttrackchange} or a {@link Player#fullscreenchange} is fired.
    */
   updateDisplayOverlay() {
-    if (!this.player_.videoHeight()) {
+    // inset-inline and inset-block are not supprted on old chrome, but these are
+    // only likely to be used on TV devices
+    if (!this.player_.videoHeight() || !window.CSS.supports('inset-inline: 10px')) {
       return;
     }
 

src/js/video.js

@@ -151,7 +151,7 @@ function videojs(id, options, ready) {
   // If the document is no longer attached to the dom, the defaultView of the document will be null.
   // If element is inside Shadow DOM (e.g. is part of a Custom element), ownerDocument.body
   // always returns false. Instead, use the Shadow DOM root.
-  const inShadowDom = el.getRootNode() instanceof window.ShadowRoot;
+  const inShadowDom = 'getRootNode' in el ? el.getRootNode() instanceof window.ShadowRoot : false;
   const rootNode = inShadowDom ? el.getRootNode() : el.ownerDocument.body;
 
   if (!el.ownerDocument.defaultView || !rootNode.contains(el)) {

test/unit/player.test.js

@@ -2848,7 +2848,7 @@ QUnit.test('document pictureinpicture is opt-in', function(assert) {
 
   player.requestPictureInPicture().catch(e => {
     assert.equal(e, 'No PiP mode is available', 'docPiP not used when not enabled');
-  }).finally(_ => {
+  }).then(_ => {
     if (window.documentPictureInPicture === testPiPObj) {
       delete window.documentPictureInPicture;
     }
@@ -2888,7 +2888,7 @@ QUnit.test('docPiP is used in preference to winPiP', function(assert) {
     assert.ok(true, 'docPiP was called');
   }).catch(_ => {
     assert.ok(true, 'docPiP was called');
-  }).finally(_ => {
+  }).then(_ => {
     assert.equal(0, count, 'requestPictureInPicture not passed to tech');
     if (window.documentPictureInPicture === testPiPObj) {
       delete window.documentPictureInPicture;

test/unit/tracks/text-track-display.test.js

@@ -450,7 +450,9 @@ if (!Html5.supportsNativeTextTracks()) {
     );
   });
 
-  QUnit.test('text track display should overlay a video', function(assert) {
+  const skipOnOldChrome = window.CSS.supports('inset-inline: 10px') ? 'test' : 'skip';
+
+  QUnit[skipOnOldChrome]('text track display should overlay a video', function(assert) {
     const tag = document.createElement('video');
 
     tag.width = 320;

test/unit/utils/custom-element.test.js

@@ -23,4 +23,7 @@ export class TestCustomElement extends HTMLElement {
   }
 }
 
-window.customElements.define('test-custom-element', TestCustomElement);
+// Not supported on Chrome < 54
+if ('customElements' in window) {
+  window.customElements.define('test-custom-element', TestCustomElement);
+}

test/unit/video.test.js

@@ -3,6 +3,7 @@ import videojs from '../../src/js/video.js';
 import * as Dom from '../../src/js/utils/dom.js';
 import log from '../../src/js/utils/log.js';
 import document from 'global/document';
+import window from 'global/window';
 import sinon from 'sinon';
 // import custom element for Shadow DOM test
 import './utils/custom-element.test';
@@ -86,7 +87,9 @@ QUnit.test(
   }
 );
 
-QUnit.test(
+const skipWithoutCustomElements = 'customElements' in window ? 'test' : 'skip';
+
+QUnit[skipWithoutCustomElements](
   'should not log if the supplied element is included in the Shadow DOM',
   function(assert) {
     const origWarnLog = log.warn;