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"
-  - "4.3.2"
+   - "node" # Latest node version
+   - "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

@@ -0,0 +1,78 @@
+# Silvermine VideoJS Quality/Resolution Selector Change Log
+
+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
+   playback after the source changed. Affected Safari and players whose `preload` attribute
+   was `none` (8feeafb Fixes #16).
+
+## 1.1.1
+
+   * Reference underscore as a dependency since we depend on it (931d8a4 See #12)
+
+## 1.1.0
+
+**NOTE:** Strictly speaking, this version breaks API backwards-compatibility, and thus
+should have been a 2.0.0 release. However, the break in API was just the changing of an
+event name, and the event was not a documented event intended for external users to use
+(although they could have easily done so). Also, even if someone was using the event,
+depending on the specific reason they were using it, they may not need to make a change at
+all.
+
+If you were relying on the `QUALITY_SELECTED` event, it's possible that you will now need
+to rely on the `QUALITY_REQUESTED` event instead, depending on why you were listening to
+the event. See a682125 for details.
+
+   * Support quality selector buttons anywhere in the player's component hierarchy (a682125 Fixes #13)
+
+## 1.0.3
+
+   * Stopped modifying format of passed-in source list (See 7da6fd3)
+
+## 1.0.2
+
+   * Added localization (cc7f670 fixes #7)
+
+## 1.0.1
+
+   * Fixed bug with binding to `QUALITY_SELECTED` way too many times (9dd9ca1 Fixes #5)
+
+## 1.0.0
+
+   * Added documentation and released the initial release of the plugin.
+
+## 0.9.0
+
+   * Working version of the plugin, as yet undocumented.

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'),
-      minified: path.join(config.dist.base, 'js', '<%= pkg.name %>.min.js'),
+      bundle: path.join(config.dist.base, 'js', '<%= config.dist.jsFileName %>.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">
-   <script src="https://unpkg.com/video.js@6.1.0/dist/video.js"></script>
+   <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>
    <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",
-  "version": "1.0.2",
+  "name": "@silvermine/videojs-quality-selector",
+  "version": "1.2.4",
   "description": "video.js plugin for selecting a video quality or resolution",
   "main": "src/js/index.js",
   "scripts": {
-    "prepublish": "grunt build",
-    "test": "./node_modules/.bin/istanbul cover ./node_modules/.bin/_mocha -- -R spec 'tests/**/*.test.js'"
+    "prepare": "grunt build",
+    "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,30 +26,36 @@
   },
   "homepage": "https://github.com/silvermine/videojs-quality-selector#readme",
   "devDependencies": {
-    "autoprefixer": "7.1.1",
-    "class.extend": "0.9.2",
-    "coveralls": "2.13.1",
-    "eslint": "4.0.0",
-    "eslint-config-silvermine": "1.3.0",
+    "@commitlint/cli": "8.3.5",
+    "@commitlint/travis-cli": "8.3.5",
+    "@silvermine/eslint-config": "3.0.0-rc.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-browserify": "5.0.0",
-    "grunt-contrib-uglify": "3.0.1",
-    "grunt-contrib-watch": "1.0.0",
-    "grunt-eslint": "20.0.0",
-    "grunt-postcss": "0.8.0",
-    "grunt-sass": "2.0.0",
-    "grunt-sass-lint": "0.2.2",
+    "grunt": "1.0.4",
+    "grunt-browserify": "5.3.0",
+    "grunt-contrib-clean": "2.0.0",
+    "grunt-contrib-uglify": "4.0.1",
+    "grunt-contrib-watch": "1.1.0",
+    "grunt-eslint": "22.0.0",
+    "grunt-postcss": "0.9.0",
+    "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",
-    "sass-lint-config-silvermine": "1.0.1",
+    "node-sass": "4.12.0",
+    "rewire": "4.0.1",
     "silvermine-serverless-utils": "git+https://github.com/silvermine/serverless-utils.git#910f1149af824fc8d0fa840878079c7d3df0f414",
-    "sinon": "2.3.5",
-    "underscore": "1.8.3"
+    "sinon": "7.3.2"
   },
   "peerDependencies": {
-    "video.js": "6.x"
+    "video.js": ">=6.0.0"
+  },
+  "dependencies": {
+    "class.extend": "0.9.1",
+    "underscore": "1.9.1"
   }
 }

src/.eslintrc.json

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

src/js/components/QualityOption.js

@@ -39,7 +39,7 @@ module.exports = function(videojs) {
        */
       handleClick: function(event) {
          MenuItem.prototype.handleClick.call(this, event);
-         this.player().trigger(events.QUALITY_SELECTED, this.source);
+         this.player().trigger(events.QUALITY_REQUESTED, this.source);
       },
 
    });

src/js/components/QualitySelector.js

@@ -25,7 +25,7 @@ module.exports = function(videojs) {
          MenuButton.call(this, player, options);
 
          // Update interface instantly so the user's change is acknowledged
-         player.on(events.QUALITY_SELECTED, function(event, newSource) {
+         player.on(events.QUALITY_REQUESTED, function(event, newSource) {
             this.setSelectedSource(newSource);
             player.addClass(QUALITY_CHANGE_CLASS);
 
@@ -34,6 +34,16 @@ 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);
+         }.bind(this));
+
          // Since it's possible for the player to get a source before the selector is
          // created, make sure to update once we get a "ready" signal.
          player.one('ready', function() {
@@ -50,8 +60,14 @@ module.exports = function(videojs) {
        * @param source {object} player source to display as selected
        */
       setSelectedSource: function(source) {
-         this.selectedSrc = source ? source.src : undefined;
-         this.update();
+         var src = (source ? source.src : undefined);
+
+         if (this.selectedSrc !== src) {
+            this.selectedSrc = src;
+            _.each(this.items, function(item) {
+               item.selected(item.source.src === src);
+            });
+         }
       },
 
       /**
@@ -60,10 +76,10 @@ module.exports = function(videojs) {
       createItems: function() {
          var player = this.player(),
              sources = player.currentSources();
-
-         if (!sources || sources.length < 2) {
-            return [];
-         }
+          
+         sources = sources.filter(function(element) {
+               return element.hidequalityoption == undefined;
+         });
 
          return _.map(sources, function(source) {
             return new QualityOption(player, {

src/js/events.js

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

src/js/index.js

@@ -3,7 +3,8 @@
 var _ = require('underscore'),
     events = require('./events'),
     qualitySelectorFactory = require('./components/QualitySelector'),
-    sourceInterceptorFactory = require('./middleware/SourceInterceptor');
+    sourceInterceptorFactory = require('./middleware/SourceInterceptor'),
+    SafeSeek = require('./util/SafeSeek');
 
 module.exports = function(videojs) {
    videojs = videojs || window.videojs;
@@ -12,28 +13,54 @@ module.exports = function(videojs) {
    sourceInterceptorFactory(videojs);
 
    videojs.hook('setup', function(player) {
-      // Add handler to switch sources when the user requests a change
-      player.on(events.QUALITY_SELECTED, function(event, newSource) {
+      function changeQuality(event, newSource) {
          var sources = player.currentSources(),
              currentTime = player.currentTime(),
+             currentPlaybackRate = player.playbackRate(),
              isPaused = player.paused(),
              selectedSource;
 
-         sources = _.map(sources, _.partial(_.omit, _, 'selected'));
+         // Clear out any previously selected sources (see: #11)
+         _.each(sources, function(source) {
+            source.selected = false;
+         });
+
          selectedSource = _.findWhere(sources, { src: newSource.src });
          // Note: `_.findWhere` returns a reference to an object. Thus the
          // following updates the original object in `sources`.
          selectedSource.selected = true;
 
+         if (player._qualitySelectorSafeSeek) {
+            player._qualitySelectorSafeSeek.onQualitySelectionChange();
+         }
+
          player.src(sources);
 
-         player.one('loadeddata', function() {
-            player.currentTime(currentTime);
+         player.ready(function() {
+            if (!player._qualitySelectorSafeSeek || player._qualitySelectorSafeSeek.hasFinished()) {
+               // Either we don't have a pending seek action or the one that we have is no
+               // longer applicable. This block must be within a `player.ready` callback
+               // because the call to `player.src` above is asynchronous, and so not
+               // having it within this `ready` callback would cause the SourceInterceptor
+               // to execute after this block instead of before.
+               //
+               // We save the `currentTime` within the SafeSeek instance because if
+               // multiple QUALITY_REQUESTED events are received before the SafeSeek
+               // operation finishes, the player's `currentTime` will be `0` if the
+               // 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) {
                player.play();
             }
          });
-      });
+      }
+
+      // Add handler to switch sources when the user requests a change
+      player.on(events.QUALITY_REQUESTED, changeQuality);
    });
 };
 

src/js/middleware/SourceInterceptor.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var _ = require('underscore');
+var _ = require('underscore'),
+    events = require('../events');
 
 module.exports = function(videojs) {
 
@@ -10,8 +11,16 @@ module.exports = function(videojs) {
 
          setSource: function(playerSelectedSource, next) {
             var sources = player.currentSources(),
-                userSelectedSource, chosenSource,
-                qualitySelector;
+                userSelectedSource, chosenSource;
+
+            if (player._qualitySelectorSafeSeek) {
+               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
@@ -20,19 +29,15 @@ module.exports = function(videojs) {
             // videojs using `src()`.
 
             userSelectedSource = _.find(sources, function(source) {
-               // Must check for both boolean and string 'true' as sources set
-               // programmatically should use a boolean, but those coming from
-               // a `<source>` tag will use a string.
-               return source.selected === true || source.selected === 'true';
+               // Must check for boolean values as well as either the string 'true' or
+               // 'selected'. When sources are set programmatically, the value will be a
+               // boolean, but those coming from a `<source>` tag will be a string.
+               return source.selected === true || source.selected === 'true' || source.selected === 'selected';
             });
 
             chosenSource = userSelectedSource || playerSelectedSource;
 
-            // Update the quality selector with the new source
-            qualitySelector = player.controlBar.getChild('qualitySelector');
-            if (qualitySelector) {
-               qualitySelector.setSelectedSource(chosenSource);
-            }
+            player.trigger(events.QUALITY_SELECTED, chosenSource);
 
             // Pass along the chosen source
             next(null, chosenSource);

src/js/util/SafeSeek.js

@@ -0,0 +1,80 @@
+'use strict';
+
+var Class = require('class.extend');
+
+module.exports = Class.extend({
+   init: function(player, seekToTime) {
+      this._player = player;
+      this._seekToTime = seekToTime;
+      this._hasFinished = false;
+      this._keepThisInstanceWhenPlayerSourcesChange = false;
+      this._seekWhenSafe();
+   },
+
+   _seekWhenSafe: function() {
+      var HAVE_FUTURE_DATA = 3;
+
+      // `readyState` in Video.js is the same as the HTML5 Media element's `readyState`
+      // property.
+      //
+      // `readyState` is an enum of 5 values (0-4), each of which represent a state of
+      // readiness to play. The meaning of the values range from HAVE_NOTHING (0), meaning
+      // no data is available to HAVE_ENOUGH_DATA (4), meaning all data is loaded and the
+      // video can be played all the way through.
+      //
+      // In order to seek successfully, the `readyState` must be at least HAVE_FUTURE_DATA
+      // (3).
+      //
+      // @see http://docs.videojs.com/player#readyState
+      // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
+      // @see https://dev.w3.org/html5/spec-preview/media-elements.html#seek-the-media-controller
+      if (this._player.readyState() < HAVE_FUTURE_DATA) {
+         this._seekFn = this._seek.bind(this);
+         // The `canplay` event means that the `readyState` is at least HAVE_FUTURE_DATA.
+         this._player.one('canplay', this._seekFn);
+      } else {
+         this._seek();
+      }
+   },
+
+   onPlayerSourcesChange: function() {
+      if (this._keepThisInstanceWhenPlayerSourcesChange) {
+         // By setting this to `false`, we know that if the player sources change again
+         // the change did not originate from a quality selection change, the new sources
+         // are likely different from the old sources, and so this pending seek no longer
+         // applies.
+         this._keepThisInstanceWhenPlayerSourcesChange = false;
+      } else {
+         this.cancel();
+      }
+   },
+
+   onQualitySelectionChange: function() {
+      // `onPlayerSourcesChange` will cancel this pending seek unless we tell it not to.
+      // We need to reuse this same pending seek instance because when the player is
+      // paused, the `preload` attribute is set to `none`, and the user selects one
+      // quality option and then another, the player cannot seek until the player has
+      // enough data to do so (and the `canplay` event is fired) and thus on the second
+      // selection the player's `currentTime()` is `0` and when the video plays we would
+      // seek to `0` instead of the correct time.
+      if (!this.hasFinished()) {
+         this._keepThisInstanceWhenPlayerSourcesChange = true;
+      }
+   },
+
+   _seek: function() {
+      this._player.currentTime(this._seekToTime);
+      this._keepThisInstanceWhenPlayerSourcesChange = false;
+      this._hasFinished = true;
+   },
+
+   hasFinished: function() {
+      return this._hasFinished;
+   },
+
+   cancel: function() {
+      this._player.off('canplay', this._seekFn);
+      this._keepThisInstanceWhenPlayerSourcesChange = false;
+      this._hasFinished = true;
+   },
+});

tests/.eslintrc.json

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