From 8f32b9f5c9f14970d29a87d017070b51e5b3799b Mon Sep 17 00:00:00 2001 From: mister-ben Date: Mon, 5 Jun 2023 19:53:36 +0200 Subject: [PATCH 1/7] fix: revert resolveJsonModule in tsconfig (#8310) --- tsconfig.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 46c83a27a..1311702d2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,7 +8,6 @@ "declarationMap": true, "skipLibCheck": true, "checkJs": false, - "preserveWatchOutput": true, - "resolveJsonModule": true + "preserveWatchOutput": true } } \ No newline at end of file From 581786a6448300171f450ded59ad62a91167f79f Mon Sep 17 00:00:00 2001 From: mister-ben Date: Mon, 5 Jun 2023 21:03:01 +0300 Subject: [PATCH 2/7] 8.4.1 --- CHANGELOG.md | 7 +++++++ package-lock.json | 2 +- package.json | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a084b56b7..97da85da7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ + +## [8.4.1](https://github.com/videojs/video.js/compare/v8.4.0...v8.4.1) (2023-06-05) + +### Bug Fixes + +* revert resolveJsonModule in tsconfig ([#8310](https://github.com/videojs/video.js/issues/8310)) ([8f32b9f](https://github.com/videojs/video.js/commit/8f32b9f)) + # [8.4.0](https://github.com/videojs/video.js/compare/v8.3.0...v8.4.0) (2023-06-02) diff --git a/package-lock.json b/package-lock.json index 4be4f8f0b..3b9d2c463 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "video.js", - "version": "8.4.0", + "version": "8.4.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 8dc0d739f..b7ace26d4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "video.js", "description": "An HTML5 video player that supports HLS and DASH with a common API and skin.", - "version": "8.4.0", + "version": "8.4.1", "main": "./dist/video.cjs.js", "module": "./dist/video.es.js", "style": "./dist/video-js.css", From fab8f95a07e2f323ab7c8c18acb33cf91e109717 Mon Sep 17 00:00:00 2001 From: Makio64 Date: Tue, 6 Jun 2023 23:21:49 +0200 Subject: [PATCH 3/7] fix(package): update videojs-contrib-quality-levels to 4.0.0 to eliminate deprecation warning (#8303) Co-authored-by: Pat O'Neill --- package-lock.json | 14 +++++++++++--- package.json | 2 +- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3b9d2c463..f43a1cc24 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15224,13 +15224,21 @@ } } } + }, + "videojs-contrib-quality-levels": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-3.0.0.tgz", + "integrity": "sha512-sNx38EYUx+Q+gmup1gVTv9P9/sPs28rM7gZOx1sedaHoKxEdYB+ysOGfHj6MSELBMNGMj6ZspdrpSiWguGvGxA==", + "requires": { + "global": "^4.4.0" + } } } }, "videojs-contrib-quality-levels": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-3.0.0.tgz", - "integrity": "sha512-sNx38EYUx+Q+gmup1gVTv9P9/sPs28rM7gZOx1sedaHoKxEdYB+ysOGfHj6MSELBMNGMj6ZspdrpSiWguGvGxA==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.0.0.tgz", + "integrity": "sha512-u5rmd8BjLwANp7XwuQ0Q/me34bMe6zg9PQdHfTS7aXgiVRbNTb4djcmfG7aeSrkpZjg+XCLezFNenlJaCjBHKw==", "requires": { "global": "^4.4.0" } diff --git a/package.json b/package.json index b7ace26d4..ecc8c2fea 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,7 @@ "mpd-parser": "^1.0.1", "mux.js": "^6.2.0", "safe-json-parse": "4.0.0", - "videojs-contrib-quality-levels": "3.0.0", + "videojs-contrib-quality-levels": "4.0.0", "videojs-font": "4.1.0", "videojs-vtt.js": "0.15.4" }, From f0751777a1ab0955fc0c15794050e3479ad2f272 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <34163393+amtins@users.noreply.github.com> Date: Tue, 6 Jun 2023 23:22:27 +0200 Subject: [PATCH 4/7] fix(loading-spinner): fix loading spinner responsiveness when default font size is modified (#8295) --- src/css/components/_loading.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/css/components/_loading.scss b/src/css/components/_loading.scss index 7dbee7da6..a88508431 100644 --- a/src/css/components/_loading.scss +++ b/src/css/components/_loading.scss @@ -3,20 +3,20 @@ position: absolute; top: 50%; left: 50%; - margin: -25px 0 0 -25px; + transform: translate(-50%, -50%); opacity: 0.85; // Need to fix centered page layouts text-align: left; - border: 6px solid rgba($primary-background-color, $primary-background-transparency); + border: .6em solid rgba($primary-background-color, $primary-background-transparency); // border: 6px solid rgba(43, 51, 63, 0.5); box-sizing: border-box; background-clip: padding-box; - width: 50px; - height: 50px; - border-radius: 25px; + width: 5em; + height: 5em; + border-radius: 50%; visibility: hidden; } @@ -31,7 +31,7 @@ .vjs-loading-spinner:after { content: ""; position: absolute; - margin: -6px; + margin: -0.6em; box-sizing: inherit; width: inherit; height: inherit; From 3dece507bcdb99a06d2b6c95d4aa83b2f1019b92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <34163393+amtins@users.noreply.github.com> Date: Tue, 6 Jun 2023 23:24:00 +0200 Subject: [PATCH 5/7] fix(text-track-settings): fix text track settings responsiveness when default font size is modified (#8294) --- src/css/components/_captions-settings.scss | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/css/components/_captions-settings.scss b/src/css/components/_captions-settings.scss index 8fa89452d..8c36ed82b 100644 --- a/src/css/components/_captions-settings.scss +++ b/src/css/components/_captions-settings.scss @@ -53,6 +53,10 @@ } // Form elements +.vjs-text-track-settings select { + font-size: inherit; +} + .vjs-track-setting > select { margin-right: 1em; margin-bottom: 0.5em; @@ -65,7 +69,7 @@ .vjs-text-track-settings fieldset span { display: inline-block; - padding: 0 6px 8px; + padding: 0 .6em .8em; } // style the second select for text colors @@ -76,17 +80,11 @@ .vjs-text-track-settings legend { color: $primary-foreground-color; font-weight: bold; - font-size: 14px; + font-size: 1.2em; } .vjs-text-track-settings .vjs-label { - clip: rect(1px 1px 1px 1px); // for Internet Explorer - clip: rect(1px, 1px, 1px, 1px); - margin: 0 5px 5px 0; - border: 0; - height: 1px; - width: 1px; - overflow: hidden; + margin: 0 .5em .5em 0; } .vjs-track-settings-controls button:focus, From dc1e2bb42a879855867e729c72994914cc54ef44 Mon Sep 17 00:00:00 2001 From: BrainCrumbz Date: Tue, 6 Jun 2023 23:24:30 +0200 Subject: [PATCH 6/7] fix(shadow-dom): prevent warning 'element supplied is not included' (#8192) Co-authored-by: Giuseppe Piscopo --- package.json | 2 +- sandbox/shadow-dom.html.example | 79 ++++++++++++++++++++++++++ src/js/video.js | 7 ++- test/unit/utils/custom-element.test.js | 26 +++++++++ test/unit/video.test.js | 25 ++++++++ 5 files changed, 137 insertions(+), 2 deletions(-) create mode 100644 sandbox/shadow-dom.html.example create mode 100644 test/unit/utils/custom-element.test.js diff --git a/package.json b/package.json index ecc8c2fea..cf5032399 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "minify:css:cdn": "cleancss dist/alt/video-js-cdn.css -o dist/alt/video-js-cdn.min.css", "minify:css:default": "cleancss dist/video-js.css -o dist/video-js.min.css", "watch": "npm-run-all -p watch:*", - "watch:lang": "chokidar --initial 'lang/**/!(zh-Hans|zh-Hant)*.json' -c 'npm run build:lang'", + "watch:lang": "chokidar --initial \"lang/**/!(zh-Hans|zh-Hant)*.json\" -c \"npm run build:lang\"", "watch:rollup": "rollup -c -w --no-progress", "watch:types": "tsc -w", "watch:css": "npm-run-all -p build:css:default build:css:cdn watch:css:*", diff --git a/sandbox/shadow-dom.html.example b/sandbox/shadow-dom.html.example new file mode 100644 index 000000000..90ea34897 --- /dev/null +++ b/sandbox/shadow-dom.html.example @@ -0,0 +1,79 @@ + + + + + Video.js Sandbox + + + + + +
+

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html

+ 
npm start
+ 
open http://localhost:9999/sandbox/index.html
+
+ +

Tap on video to play/pause

+ + + + + + + diff --git a/src/js/video.js b/src/js/video.js index 2734cf08d..12a3d8235 100644 --- a/src/js/video.js +++ b/src/js/video.js @@ -149,7 +149,12 @@ function videojs(id, options, ready) { // This will make sure that the element is indeed in the dom of that document. // Additionally, check that the document in question has a default view. // If the document is no longer attached to the dom, the defaultView of the document will be null. - if (!el.ownerDocument.defaultView || !el.ownerDocument.body.contains(el)) { + // 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 rootNode = inShadowDom ? el.getRootNode() : el.ownerDocument.body; + + if (!el.ownerDocument.defaultView || !rootNode.contains(el)) { log.warn('The element supplied is not included in the DOM'); } diff --git a/test/unit/utils/custom-element.test.js b/test/unit/utils/custom-element.test.js new file mode 100644 index 000000000..a60f793da --- /dev/null +++ b/test/unit/utils/custom-element.test.js @@ -0,0 +1,26 @@ +/* eslint-env browser */ +import videojs from '../../../src/js/video.js'; + +export class TestCustomElement extends HTMLElement { + + constructor() { + super(); + + const shadowRoot = this.attachShadow({ mode: 'closed' }); + + const containerElem = document.createElement('div'); + + containerElem.setAttribute('data-vjs-player', ''); + shadowRoot.appendChild(containerElem); + + const videoElem = document.createElement('video'); + + videoElem.setAttribute('width', 640); + videoElem.setAttribute('height', 260); + containerElem.appendChild(videoElem); + + this.innerPlayer = videojs(videoElem); + } +} + +window.customElements.define('test-custom-element', TestCustomElement); diff --git a/test/unit/video.test.js b/test/unit/video.test.js index 2b041b9ba..327437b0d 100644 --- a/test/unit/video.test.js +++ b/test/unit/video.test.js @@ -4,6 +4,8 @@ import * as Dom from '../../src/js/utils/dom.js'; import log from '../../src/js/utils/log.js'; import document from 'global/document'; import sinon from 'sinon'; +// import custom element for Shadow DOM test +import './utils/custom-element.test'; QUnit.module('video.js', { beforeEach() { @@ -84,6 +86,29 @@ QUnit.test( } ); +QUnit.test( + 'should not log if the supplied element is included in the Shadow DOM', + function(assert) { + const origWarnLog = log.warn; + const fixture = document.getElementById('qunit-fixture'); + const warnLogs = []; + + log.warn = (args) => { + warnLogs.push(args); + }; + + const customElem = document.createElement('test-custom-element'); + + fixture.appendChild(customElem); + const innerPlayer = customElem.innerPlayer; + + assert.ok(innerPlayer, 'created player within Shadow DOM'); + assert.equal(warnLogs.length, 0, 'no warn logs'); + + log.warn = origWarnLog; + } +); + QUnit.test( 'should log about already initialized players if options already passed', function(assert) { From 6c4997d25b9a3aa05434677bca7c5c3b86808ac7 Mon Sep 17 00:00:00 2001 From: Pat O'Neill Date: Tue, 6 Jun 2023 17:36:43 -0400 Subject: [PATCH 7/7] 8.4.2 --- CHANGELOG.md | 10 ++++++++++ package-lock.json | 2 +- package.json | 2 +- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 97da85da7..417ed6f06 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ + +## [8.4.2](https://github.com/videojs/video.js/compare/v8.4.1...v8.4.2) (2023-06-06) + +### Bug Fixes + +* **loading-spinner:** fix loading spinner responsiveness when default font size is modified ([#8295](https://github.com/videojs/video.js/issues/8295)) ([f075177](https://github.com/videojs/video.js/commit/f075177)) +* **package:** update videojs-contrib-quality-levels to 4.0.0 to eliminate deprecation warning ([#8303](https://github.com/videojs/video.js/issues/8303)) ([fab8f95](https://github.com/videojs/video.js/commit/fab8f95)) +* **shadow-dom:** prevent warning 'element supplied is not included' ([#8192](https://github.com/videojs/video.js/issues/8192)) ([dc1e2bb](https://github.com/videojs/video.js/commit/dc1e2bb)) +* **text-track-settings:** fix text track settings responsiveness when default font size is modified ([#8294](https://github.com/videojs/video.js/issues/8294)) ([3dece50](https://github.com/videojs/video.js/commit/3dece50)) + ## [8.4.1](https://github.com/videojs/video.js/compare/v8.4.0...v8.4.1) (2023-06-05) diff --git a/package-lock.json b/package-lock.json index f43a1cc24..247c60cee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "video.js", - "version": "8.4.1", + "version": "8.4.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index cf5032399..e32a358f4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "video.js", "description": "An HTML5 video player that supports HLS and DASH with a common API and skin.", - "version": "8.4.1", + "version": "8.4.2", "main": "./dist/video.cjs.js", "module": "./dist/video.es.js", "style": "./dist/video-js.css",