Merge pull request #1 from iv-org/hide-quality-option

Related to https://github.com/iv-org/invidious/pull/3011

.eslintrc.json

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

.nvmrc

@@ -0,0 +1 @@
+12.14.0

.travis.yml

@@ -1,12 +1,15 @@
 language: node_js
-# 4.3.2 is what AWS Lambda currently uses
 node_js:
-  - "5"
+   - "node" # Latest node version
-  - "4.3.2"
+   - "lts/*" # Latest LTS version
+   - "12"
+   - "10"
+   - "8"
 
-before_install: if [[ `npm -v` != 3* ]]; then npm i -g npm@3; fi
+before_install: npm i -g npm@6.13.4
 
 script:
+   - npm run commitlint
    - grunt standards
    - npm test
 

CHANGELOG.md

@@ -3,6 +3,35 @@
 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
+
+   * Downgraded the `class.extend` dependency to 0.9.1. Version 0.9.2 introduces a call to
+     `new Function(someString)`, which [violates the Content Security Policy that blocks
+     `eval` and `eval`-like function
+     calls.](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_eval_expressions)
+     (f9ca724 Fixes #36)
+   * Fixed a bug where the quality selection menu did not render when sources were set
+     sometime after the player was initially created and became ready (a3753dd Fixes #47).
+   * Support 'selected' as a value for the `selected` attribute on `source` tags (8702f4f
+     Fixes #39)
+
+## 1.2.2
+
+   * Fixed a bug introduced in `1.2.0` where the quality selector menu did not show the
+     selected source as selected when it first rendered
+
+## 1.2.1
+
+   * Fixed a bug introduced in 31a305d where the path to the built JS file in the `dist`
+     folder changed unintentionally
+   * Fixed a bug that prevented the quality selector menu from fading out smoothly in
+     Video.js 7.
+   * Included Video.js 7 in peer dependency range (21900e8 Fixes #26)
+
+## 1.2.0
+
+   * Migrated NPM package to use `@silvermine` scope
+
 ## 1.1.2
 
    * Fixed a bug where selecting a quality menu item while a video was playing did not resume

Gruntfile.js

@@ -8,6 +8,8 @@
 var path = require('path'),
     getCodeVersion = require('silvermine-serverless-utils/src/get-code-version');
 
+const sass = require('node-sass');
+
 module.exports = function(grunt) {
 
    var DEBUG = !!grunt.option('debug'),
@@ -26,12 +28,13 @@ module.exports = function(grunt) {
 
       dist: {
          base: path.join(__dirname, 'dist'),
+         jsFileName: 'silvermine-videojs-quality-selector',
       },
    };
 
    config.dist.js = {
-      bundle: path.join(config.dist.base, 'js', '<%= pkg.name %>.js'),
+      bundle: path.join(config.dist.base, 'js', '<%= config.dist.jsFileName %>.js'),
-      minified: path.join(config.dist.base, 'js', '<%= pkg.name %>.min.js'),
+      minified: path.join(config.dist.base, 'js', '<%= config.dist.jsFileName %>.min.js'),
    };
 
    config.dist.css = {
@@ -70,6 +73,7 @@ module.exports = function(grunt) {
 
       sass: {
          options: {
+            implementation: sass,
             sourceMap: DEBUG,
             indentWidth: 3,
             outputStyle: DEBUG ? 'expanded' : 'compressed',
@@ -101,13 +105,17 @@ module.exports = function(grunt) {
          },
       },
 
+      clean: {
+         dist: config.dist.base,
+      },
+
       eslint: {
          target: config.js.all,
       },
 
       sasslint: {
          options: {
-            configFile: path.join(__dirname, 'node_modules', 'sass-lint-config-silvermine', 'sass-lint.yml'),
+            configFile: path.join(__dirname, 'node_modules', '@silvermine/sass-lint-config', 'sass-lint.yml'),
          },
          target: config.sass.all,
       },
@@ -136,6 +144,7 @@ module.exports = function(grunt) {
    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');
 

README.md

@@ -38,11 +38,12 @@ There is an example of this in
 <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">
 <script src="./path/to/video.min.js"></script>
-<script src="https://unpkg.com/silvermine-videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js"></script>
+<script src="https://unpkg.com/@silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js"></script>
 ```
 
 #### Using `require`
@@ -50,7 +51,7 @@ There is an example of this in
 When using NPM/Browserify, first install the plugin.
 
 ```
-npm install --save silvermine-videojs-quality-selector
+npm install --save @silvermine/videojs-quality-selector
 ```
 
 For `videojs` to use the plug-in, the plugin needs to register itself with the instance of
@@ -60,7 +61,7 @@ For `videojs` to use the plug-in, the plugin needs to register itself with the i
 var videojs = require('videojs');
 
 // The following registers the plugin with `videojs`
-require('silvermine-videojs-quality-selector')(videojs);
+require('@silvermine/videojs-quality-selector')(videojs);
 ```
 
 ### Providing video sources

commitlint.config.js

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

docs/demo/index.html

@@ -3,8 +3,8 @@
 <head>
    <meta charset=utf-8 />
    <title>videojs-quality-selector Demo</title>
-   <link href="https://unpkg.com/video.js@6.1.0/dist/video-js.css" rel="stylesheet">
+   <link href="https://unpkg.com/video.js@7.5.4/dist/video-js.css" rel="stylesheet">
-   <script src="https://unpkg.com/video.js@6.1.0/dist/video.js"></script>
+   <script src="https://unpkg.com/video.js@7.5.4/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>

package.json

@@ -1,11 +1,12 @@
 {
-  "name": "silvermine-videojs-quality-selector",
+  "name": "@silvermine/videojs-quality-selector",
-  "version": "1.1.2",
+  "version": "1.2.4",
   "description": "video.js plugin for selecting a video quality or resolution",
   "main": "src/js/index.js",
   "scripts": {
-    "prepublish": "grunt build",
+    "prepare": "grunt build",
-    "test": "./node_modules/.bin/istanbul cover ./node_modules/.bin/_mocha -- -R spec 'tests/**/*.test.js'"
+    "test": "check-node-version --npm 6.13.4 && ./node_modules/.bin/istanbul cover ./node_modules/.bin/_mocha -- -R spec 'tests/**/*.test.js'",
+    "commitlint": "commitlint --from ad805e8"
   },
   "author": "Jeremy Thomerson",
   "license": "MIT",
@@ -25,32 +26,36 @@
   },
   "homepage": "https://github.com/silvermine/videojs-quality-selector#readme",
   "devDependencies": {
-    "autoprefixer": "7.1.1",
+    "@commitlint/cli": "8.3.5",
-    "coveralls": "2.13.1",
+    "@commitlint/travis-cli": "8.3.5",
-    "eslint": "4.0.0",
+    "@silvermine/eslint-config": "3.0.0-rc.0",
-    "eslint-config-silvermine": "1.3.0",
+    "@silvermine/sass-lint-config": "1.1.0",
+    "autoprefixer": "9.5.1",
+    "check-node-version": "4.0.3",
+    "coveralls": "3.0.3",
     "expect.js": "0.3.1",
-    "grunt": "1.0.1",
+    "grunt": "1.0.4",
-    "grunt-browserify": "5.0.0",
+    "grunt-browserify": "5.3.0",
-    "grunt-contrib-uglify": "3.0.1",
+    "grunt-contrib-clean": "2.0.0",
-    "grunt-contrib-watch": "1.0.0",
+    "grunt-contrib-uglify": "4.0.1",
-    "grunt-eslint": "20.0.0",
+    "grunt-contrib-watch": "1.1.0",
-    "grunt-postcss": "0.8.0",
+    "grunt-eslint": "22.0.0",
-    "grunt-sass": "2.0.0",
+    "grunt-postcss": "0.9.0",
-    "grunt-sass-lint": "0.2.2",
+    "grunt-sass": "3.0.2",
+    "grunt-sass-lint": "0.2.4",
     "istanbul": "0.4.5",
-    "mocha": "3.4.2",
+    "mocha": "6.1.4",
     "mocha-lcov-reporter": "1.3.0",
-    "rewire": "2.5.2",
+    "node-sass": "4.12.0",
-    "sass-lint-config-silvermine": "1.0.1",
+    "rewire": "4.0.1",
     "silvermine-serverless-utils": "git+https://github.com/silvermine/serverless-utils.git#910f1149af824fc8d0fa840878079c7d3df0f414",
-    "sinon": "2.3.5"
+    "sinon": "7.3.2"
   },
   "peerDependencies": {
-    "video.js": "6.x"
+    "video.js": ">=6.0.0"
   },
   "dependencies": {
-    "class.extend": "0.9.2",
+    "class.extend": "0.9.1",
-    "underscore": "1.8.3"
+    "underscore": "1.9.1"
   }
 }

src/.eslintrc.json

@@ -1,5 +1,5 @@
 {
 
-   "extends": "eslint-config-silvermine/browser"
+   "extends": "@silvermine/eslint-config/browser"
 
 }

src/js/components/QualitySelector.js

@@ -34,6 +34,11 @@ module.exports = function(videojs) {
             });
          }.bind(this));
 
+         // Update the list of menu items only when the list of sources change
+         player.on(events.PLAYER_SOURCES_CHANGED, function() {
+            this.update();
+         }.bind(this));
+
          player.on(events.QUALITY_SELECTED, function(event, newSource) {
             // Update the selected source with the source that was actually selected
             this.setSelectedSource(newSource);
@@ -59,7 +64,9 @@ module.exports = function(videojs) {
 
          if (this.selectedSrc !== src) {
             this.selectedSrc = src;
-            this.update();
+            _.each(this.items, function(item) {
+               item.selected(item.source.src === src);
+            });
          }
       },
 
@@ -69,10 +76,10 @@ module.exports = function(videojs) {
       createItems: function() {
          var player = this.player(),
              sources = player.currentSources();
-
+          
-         if (!sources || sources.length < 2) {
+         sources = sources.filter(function(element) {
-            return [];
+               return element.hidequalityoption == undefined;
-         }
+         });
 
          return _.map(sources, function(source) {
             return new QualityOption(player, {

src/js/events.js

@@ -4,5 +4,6 @@ module.exports = {
 
    QUALITY_REQUESTED: 'qualityRequested',
    QUALITY_SELECTED: 'qualitySelected',
+   PLAYER_SOURCES_CHANGED: 'playerSourcesChanged',
 
 };

src/js/index.js

@@ -16,6 +16,7 @@ module.exports = function(videojs) {
       function changeQuality(event, newSource) {
          var sources = player.currentSources(),
              currentTime = player.currentTime(),
+             currentPlaybackRate = player.playbackRate(),
              isPaused = player.paused(),
              selectedSource;
 
@@ -49,6 +50,7 @@ module.exports = function(videojs) {
                // player's `src` is updated but the player's `currentTime` has not yet
                // been set by the SafeSeek operation.
                player._qualitySelectorSafeSeek = new SafeSeek(player, currentTime);
+               player.playbackRate(currentPlaybackRate);
             }
 
             if (!isPaused) {

src/js/middleware/SourceInterceptor.js

@@ -17,6 +17,11 @@ module.exports = function(videojs) {
                player._qualitySelectorSafeSeek.onPlayerSourcesChange();
             }
 
+            if (!_.isEqual(sources, player._qualitySelectorPreviousSources)) {
+               player.trigger(events.PLAYER_SOURCES_CHANGED, sources);
+               player._qualitySelectorPreviousSources = sources;
+            }
+
             // There are generally two source options, the one that videojs
             // auto-selects and the one that a "user" of this plugin has
             // supplied via the `selected` property. `selected` can come from
@@ -24,10 +29,10 @@ module.exports = function(videojs) {
             // videojs using `src()`.
 
             userSelectedSource = _.find(sources, function(source) {
-               // Must check for both boolean and string 'true' as sources set
+               // Must check for boolean values as well as either the string 'true' or
-               // programmatically should use a boolean, but those coming from
+               // 'selected'. When sources are set programmatically, the value will be a
-               // a `<source>` tag will use a string.
+               // boolean, but those coming from a `<source>` tag will be a string.
-               return source.selected === true || source.selected === 'true';
+               return source.selected === true || source.selected === 'true' || source.selected === 'selected';
             });
 
             chosenSource = userSelectedSource || playerSelectedSource;

tests/.eslintrc.json

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