Upgrade for videojs8

.browserslistrc

@@ -0,0 +1 @@
+./node_modules/@silvermine/standardization/browserslist/.browserslistrc-broad-support

.editorconfig

@@ -0,0 +1 @@
+node_modules/@silvermine/standardization/.editorconfig

.eslintrc.json

@@ -1,5 +1,4 @@
 {
-
-   "extends": "@silvermine/eslint-config/node"
-
+   "extends": "@silvermine/eslint-config/node",
+   "parser": "babel-eslint"
 }

.github/workflows/ci.yml

@@ -0,0 +1,38 @@
+name: CI
+
+on: [ push, pull_request ]
+
+jobs:
+   build:
+      runs-on: ubuntu-latest
+      steps:
+         -
+            uses: actions/checkout@v3
+            with:
+               fetch-depth: 0 # Fetch all history
+         -
+            uses: actions/setup-node@v3
+            with:
+               node-version-file: '.nvmrc'
+         - run: npm i -g [email protected]
+         - run: npm ci
+         - run: npm run standards
+   test:
+      needs: [ build ]
+      runs-on: ubuntu-latest
+      strategy:
+         fail-fast: false
+         matrix:
+            node-version: [ 14, 16, 'lts/*', 'latest' ]
+      steps:
+         - uses: actions/checkout@v3
+         -
+            name: Use Node.js ${{ matrix.node-version }}
+            uses: actions/setup-node@v3
+            with:
+               node-version: ${{ matrix.node-version }}
+         - run: npm i -g [email protected]
+         - run: npm ci # Reinstall the dependencies to ensure they install with the current version of node
+         - run: npm test
+         - name: Coveralls
+           uses: coverallsapp/github-action@v1

.gitignore

@@ -1,4 +1,6 @@
 .DS_Store
 node_modules
 coverage
+.nyc_output
 dist
+.idea

.markdownlint.json

@@ -0,0 +1,3 @@
+{
+   "extends": "./node_modules/@silvermine/standardization/.markdownlint.json"
+}

.npmignore

@@ -3,3 +3,5 @@
 Gruntfile.js
 tests/**
 docs
+.nyc_output
+coverage

.nvmrc

@@ -1 +1 @@
-12.14.0
+16.15.0

.nycrc.json

@@ -0,0 +1,16 @@
+{
+   "include": [
+      "src/**/*.js"
+   ],
+   "extension": [
+      ".js"
+   ],
+   "reporter": [
+      "text-summary",
+      "html",
+      "lcov"
+   ],
+   "instrument": true,
+   "sourceMap": true,
+   "all": true
+}

.stylelintrc.yml

@@ -0,0 +1 @@
+extends: ./node_modules/@silvermine/standardization/.stylelintrc.yml

CHANGELOG.md

@@ -1,7 +1,15 @@
-# Silvermine VideoJS Quality/Resolution Selector Change Log
+# Changelog
+
+All notable changes to this project will be documented in this file.
+See [our coding standards][commit-messages] for commit guidelines.
+
+### [1.3.1](https://github.com/silvermine/videojs-quality-selector/compare/v1.3.0...v1.3.1) (2023-11-15)
+
+
+### Bug Fixes
+
+* use correct icon for Video.js 8 ([1209756](https://github.com/silvermine/videojs-quality-selector/commit/1209756616af52843f55ac53e2c7fbe29df63541))
 
-In general, this project adheres to [Semantic Versioning](http://semver.org/). If for some
-reason we do something that's not strictly semantic, it will be clearly called out below.
 
 ## 1.2.3
 

Gruntfile.js

@@ -2,18 +2,25 @@
  * Copyright (c) 2017 Jeremy Thomerson
  * Licensed under the MIT license.
  */
-
-'use strict';
-
 var path = require('path'),
     getCodeVersion = require('silvermine-serverless-utils/src/get-code-version');
 
-const sass = require('node-sass');
+const sass = require('sass');
 
 module.exports = function(grunt) {
 
    var DEBUG = !!grunt.option('debug'),
-       config;
+       pkgJSON = grunt.file.readJSON('package.json'),
+       config, versionInfo;
+
+   try {
+      versionInfo = getCodeVersion.both();
+   } catch(e) {
+      // When this package is installed as a git URL, getCodeVersion throws an error and
+      // is not able to find the git version for this package. So, we fall back to using
+      // the version number from package.json
+      versionInfo = pkgJSON.version;
+   }
 
    config = {
       js: {
@@ -22,7 +29,7 @@ module.exports = function(grunt) {
       },
 
       sass: {
-         base: path.join(__dirname, 'src', 'sass'),
+         base: path.join(__dirname, 'src', 'scss'),
          all: [ 'src/**/*.scss' ],
       },
 
@@ -44,14 +51,34 @@ module.exports = function(grunt) {
 
    grunt.initConfig({
 
-      pkg: grunt.file.readJSON('package.json'),
-      versionInfo: getCodeVersion.both(),
+      pkg: pkgJSON,
+      versionInfo: versionInfo,
       config: config,
 
       browserify: {
          main: {
             src: config.js.standalone,
             dest: config.dist.js.bundle,
+            options: {
+               transform: [
+                  [
+                     'babelify',
+                     {
+                        presets: [
+                           [
+                              '@babel/preset-env',
+                              {
+                                 debug: true,
+                                 useBuiltIns: 'usage',
+                                 shippedProposals: true,
+                                 corejs: 3,
+                              },
+                           ],
+                        ],
+                     },
+                  ],
+               ],
+            },
          },
       },
 
@@ -109,17 +136,6 @@ module.exports = function(grunt) {
          dist: config.dist.base,
       },
 
-      eslint: {
-         target: config.js.all,
-      },
-
-      sasslint: {
-         options: {
-            configFile: path.join(__dirname, 'node_modules', '@silvermine/sass-lint-config', 'sass-lint.yml'),
-         },
-         target: config.sass.all,
-      },
-
       watch: {
          grunt: {
             files: [ 'Gruntfile.js' ],
@@ -136,19 +152,15 @@ module.exports = function(grunt) {
             tasks: [ 'build-css' ],
          },
       },
-
    });
 
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-browserify');
-   grunt.loadNpmTasks('grunt-eslint');
    grunt.loadNpmTasks('grunt-postcss');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-sass');
-   grunt.loadNpmTasks('grunt-sass-lint');
 
-   grunt.registerTask('standards', [ 'eslint', 'sasslint' ]);
    grunt.registerTask('build-js', [ 'browserify', 'uglify' ]);
    grunt.registerTask('build-css', [ 'sass', 'postcss' ]);
    grunt.registerTask('build', [ 'build-js', 'build-css' ]);

README.md

@@ -31,14 +31,14 @@ for `videojs` at `window.videojs`).
 There is an example of this in
 [`docs/demo/index.html`](./docs/demo/index.html).
 
-##### From local file:
+##### From local file
 
 ```js
 <script src="./path/to/video.min.js"></script>
 <script src="./path/to/silvermine-videojs-quality-selector.min.js"></script>
 ```
 
-##### From [`unpkg`](https://unpkg.com/@silvermine/videojs-quality-selector/):
+##### From [`unpkg`](https://unpkg.com/@silvermine/videojs-quality-selector/)
 
 ```js
 <link href="https://unpkg.com/@silvermine/videojs-quality-selector/dist/css/quality-selector.css" rel="stylesheet">
@@ -50,7 +50,7 @@ There is an example of this in
 
 When using NPM/Browserify, first install the plugin.
 
-```
+```bash
 npm install --save @silvermine/videojs-quality-selector
 ```
 
@@ -64,6 +64,23 @@ var videojs = require('videojs');
 require('@silvermine/videojs-quality-selector')(videojs);
 ```
 
+Remember to also add the CSS to your build. With most bundlers you can:
+
+```js
+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-quality-selector/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 `<source>` tag or via the `src` function on the
@@ -72,7 +89,7 @@ instance of a `video.js` player.
 #### Using `<source>`
 
 ```html
-<video id="video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'>
+<video id="video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268">
    <source src="https://example.com/video_720.mp4" type="video/mp4" label="720P">
    <source src="https://example.com/video_480.mp4" type="video/mp4" label="480P" selected="true">
    <source src="https://example.com/video_360.mp4" type="video/mp4" label="360P">
@@ -107,13 +124,17 @@ player.src([
 There are at least two ways to add the quality selector control to the player's control
 bar. The first is directly adding it via `addChild`. For example:
 
-```
-player.controlBar.addChild('QualitySelector');
+```js
+videojs('video_1', {}, function() {
+   var player = this;
+
+   player.controlBar.addChild('QualitySelector');
+});
 ```
 
 The second option is to add the control via the player's options, for instance:
 
-```
+```js
 var options, player;
 
 options = {

commitlint.config.js

@@ -1,5 +1,3 @@
-'use strict';
-
 module.exports = {
-   extends: [ '@silvermine/eslint-config/commitlint.js' ],
+   extends: [ '@silvermine/standardization/commitlint.js' ],
 };

docs/demo/index.html

@@ -3,23 +3,23 @@
 <head>
    <meta charset=utf-8 />
    <title>videojs-quality-selector Demo</title>
-   <link href="https://unpkg.com/video.js@7.5.4/dist/video-js.css" rel="stylesheet">
-   <script src="https://unpkg.com/video.js@7.5.4/dist/video.js"></script>
+   <link href="https://unpkg.com/video.js@8.6.1/dist/video-js.css" rel="stylesheet">
+   <script src="https://unpkg.com/video.js@8.6.1/dist/video.js"></script>
    <script src="../../dist/js/silvermine-videojs-quality-selector.min.js"></script>
    <link href="../../dist/css/quality-selector.css" rel="stylesheet">
 </head>
 <body>
    <h1>Demo of <code>videojs-quality-selector</code></h1>
 
-   <video id="video_1" class="video-js vjs-default-skin" controls preload="auto" data-setup='{}'>
-      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.720p.webm" type="video/webm" label="720P">
-      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.480p.webm" type="video/webm" label="480P" selected="true">
-      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.360p.webm" type="video/webm" label="360P">
-      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.240p.webm" type="video/webm" label="240P">
+   <video id="video_1" class="video-js vjs-default-skin" controls preload="auto">
+      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.720p.vp9.webm" type="video/webm" label="720P">
+      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.480p.vp9.webm" type="video/webm" label="480P" selected="true">
+      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.360p.vp9.webm" type="video/webm" label="360P">
+      <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.240p.vp9.webm" type="video/webm" label="240P">
    </video>
 
    <script>
-      videojs("video_1", {}, function() {
+      videojs('video_1', {}, function() {
          var player = this;
 
          player.controlBar.addChild('QualitySelector');