diff --git a/README.md b/README.md index b1902d4..9ea6cef 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,17 @@ Remember to also add the CSS to your build. With most bundlers you can: require('@silvermine/videojs-quality-selector/dist/css/quality-selector.css') ``` +> [!WARNING] +> This plugin's source code uses ES6+ syntax and keywords, such as `class` and `static`. +> If you need to support [browsers that do not support newer JavaScript +> syntax](https://caniuse.com/es6), you will need to use a tool like +> [Babel](https://babeljs.io/) to transpile and polyfill your code. +> +> Alternatively, you can +> `require('@silvermine/videojs-chromecast/dist/js/silvermine-videojs-quality-selector.js')` +> to use a JavaScript file that has already been polyfilled/transpiled down to ES5 +> compatibility. + ### Providing video sources Sources can be provided with either the `` tag or via the `src` function on the diff --git a/docs/demo/index.html b/docs/demo/index.html index 60372dd..c420ac7 100644 --- a/docs/demo/index.html +++ b/docs/demo/index.html @@ -3,8 +3,8 @@ videojs-quality-selector Demo - - + + diff --git a/package-lock.json b/package-lock.json index 2cabf52..9423c46 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4841,9 +4841,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001441", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz", - "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==", + "version": "1.0.30001562", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001562.tgz", + "integrity": "sha512-kfte3Hym//51EdX4239i+Rmp20EsLIYGdPkERegTgU19hQWCRhsRFGKHTliUlsry53tv17K7n077Kqa0WJU4ng==", "dev": true, "funding": [ { @@ -4853,6 +4853,10 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ] }, @@ -19214,9 +19218,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001441", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz", - "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==", + "version": "1.0.30001562", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001562.tgz", + "integrity": "sha512-kfte3Hym//51EdX4239i+Rmp20EsLIYGdPkERegTgU19hQWCRhsRFGKHTliUlsry53tv17K7n077Kqa0WJU4ng==", "dev": true }, "caseless": { diff --git a/package.json b/package.json index 28f172f..b1cf90e 100644 --- a/package.json +++ b/package.json @@ -40,8 +40,8 @@ "@silvermine/eslint-config": "3.0.1", "@silvermine/standardization": "2.0.0", "autoprefixer": "8.6.5", - "babelify": "10.0.0", "babel-eslint": "10.1.0", + "babelify": "10.0.0", "check-node-version": "4.0.3", "core-js": "3.11.0", "coveralls": "3.0.3", diff --git a/src/scss/quality-selector.scss b/src/scss/quality-selector.scss index 14d263a..b1d8095 100644 --- a/src/scss/quality-selector.scss +++ b/src/scss/quality-selector.scss @@ -12,7 +12,14 @@ font-weight: normal; font-style: normal; &::before { - content: '\f110'; + // The correct icon font character for Video.js 7 and below: + .video-js:not(.vjs-v8) & { + content: '\f110'; + } + // Icon font character for Video.js 8: + .vjs-v8 & { + content: '\f114'; + } } } }