From 1d9a007ddb9b385a4bbb62d744be674acfbc3b98 Mon Sep 17 00:00:00 2001 From: mister-ben Date: Mon, 10 Jul 2023 22:47:06 +0200 Subject: [PATCH] fix: make compatible with chrome 53 --- src/js/player.js | 4 ++-- src/js/tracks/text-track-display.js | 4 +++- src/js/video.js | 2 +- test/unit/player.test.js | 4 ++-- test/unit/tracks/text-track-display.test.js | 4 +++- test/unit/utils/custom-element.test.js | 5 ++++- test/unit/video.test.js | 5 ++++- 7 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/js/player.js b/src/js/player.js index 604a78ec59..cd6850949d 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -3100,7 +3100,7 @@ class Player extends Component { }).then(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'); }); diff --git a/src/js/tracks/text-track-display.js b/src/js/tracks/text-track-display.js index 04b8ca0e6c..06f45652da 100644 --- a/src/js/tracks/text-track-display.js +++ b/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; } diff --git a/src/js/video.js b/src/js/video.js index 12a3d82354..f535309be9 100644 --- a/src/js/video.js +++ b/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)) { diff --git a/test/unit/player.test.js b/test/unit/player.test.js index e283838e91..a31213e32a 100644 --- a/test/unit/player.test.js +++ b/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; diff --git a/test/unit/tracks/text-track-display.test.js b/test/unit/tracks/text-track-display.test.js index 7b8a1dd9f3..9c41926514 100644 --- a/test/unit/tracks/text-track-display.test.js +++ b/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; diff --git a/test/unit/utils/custom-element.test.js b/test/unit/utils/custom-element.test.js index a60f793da7..6322e83c40 100644 --- a/test/unit/utils/custom-element.test.js +++ b/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); +} diff --git a/test/unit/video.test.js b/test/unit/video.test.js index 327437b0dc..f110f75949 100644 --- a/test/unit/video.test.js +++ b/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;