feat: Support toggling the select icon with the source label (#28)

User options can now be passed to the plugin.  Options are passed upon initialization and use the following syntax:

require('@silvermine/videojs-quality-selector')(videojs, options);

If you're not using require, you can pass options using a window config:

<script>
   window.SILVERMINE_VIDEOJS_QUALITY_SELECTOR_CONFIG = {
      showQualitySelectionLabelInControlBar: true,
   };
</script>
<script src="path/to/silvermine-videojs-quality-selector.js"></script>

The options are sent from the constructor to `/components/QualitySelector.js`.

Currently only one option is available:

showQualitySelectionLabelInControlBar: (default: `false`) - Enabling this flag will swap the selector
icon with the label of the currently selected source.

More options should be possible by adding them to the object.

A class is added to the Menu Item (Has class vjs-icon-placeholder) when the flag is disabled to include the icon.  When enabled, basic HTML is simply included into the element.

Refs #28

Author: PrestonN

README.md

@@ -64,6 +64,35 @@ var videojs = require('videojs');
 require('@silvermine/videojs-quality-selector')(videojs);
 ```
 
+### Initialization options
+
+* **`showQualitySelectionLabelInControlBar`** (default: `false`) - Enabling this flag will swap the selector
+icon with the label of the currently selected source.
+
+#### Providing initialization options via `require()`
+
+If requiring this plugin via NPM, any desired initialization options can be supplied to
+the constructor function exported by the module. For example:
+
+```js
+require('@silvermine/videojs-quality-selector')(videojs, { showQualitySelectionLabelInControlBar: true });
+```
+
+#### Providing initialization options via `<script>`
+
+If using the prebuilt JS, the initialization options can be provided via
+`window.SILVERMINE_VIDEOJS_QUALITY_SELECTOR_CONFIG`. Note that these options need to be set
+before the `<script>` tag to include the plugin.
+
+```html
+<script>
+   window.SILVERMINE_VIDEOJS_QUALITY_SELECTOR_CONFIG = {
+      showQualitySelectionLabelInControlBar: true,
+   };
+</script>
+<script src="path/to/silvermine-videojs-quality-selector.js"></script>
+```
+
 ### Providing video sources
 
 Sources can be provided with either the `<source>` tag or via the `src` function on the

package-lock.json

@@ -5,8 +5,9 @@ var _ = require('underscore'),
     qualityOptionFactory = require('./QualityOption'),
     QUALITY_CHANGE_CLASS = 'vjs-quality-changing';
 
-module.exports = function(videojs) {
-   var MenuButton = videojs.getComponent('MenuButton'),
+module.exports = function(videojs, userOpts) {
+   var userOptions = _.defaults(_.extend({}, userOpts), { showQualitySelectionLabelInControlBar: false }),
+       MenuButton = videojs.getComponent('MenuButton'),
        QualityOption = qualityOptionFactory(videojs),
        QualitySelector;
 
@@ -22,6 +23,8 @@ module.exports = function(videojs) {
        * @inheritdoc
        */
       constructor: function(player, options) {
+         var qualitySelectMenuButton = this.children_[0].controlTextEl_.previousSibling;
+
          MenuButton.call(this, player, options);
 
          // Update interface instantly so the user's change is acknowledged
@@ -42,6 +45,15 @@ module.exports = function(videojs) {
          player.on(events.QUALITY_SELECTED, function(event, newSource) {
             // Update the selected source with the source that was actually selected
             this.setSelectedSource(newSource);
+
+            // Check for quality select label flag
+            if (userOptions.showQualitySelectionLabelInControlBar !== false) {
+               qualitySelectMenuButton.innerHTML = newSource.label;
+            } else if (qualitySelectMenuButton.className.indexOf('vjs-quality-selector-icon') === -1) {
+               // Add class to show gear icon.  Blank out innerHTML for safety precations.
+               qualitySelectMenuButton.className += ' vjs-quality-selector-icon';
+               qualitySelectMenuButton.innerHTML = '';
+            }
          }.bind(this));
 
          // Since it's possible for the player to get a source before the selector is

src/js/components/QualitySelector.js

@@ -6,10 +6,10 @@ var _ = require('underscore'),
     sourceInterceptorFactory = require('./middleware/SourceInterceptor'),
     SafeSeek = require('./util/SafeSeek');
 
-module.exports = function(videojs) {
+module.exports = function(videojs, userOpts) {
    videojs = videojs || window.videojs;
 
-   qualitySelectorFactory(videojs);
+   qualitySelectorFactory(videojs, userOpts);
    sourceInterceptorFactory(videojs);
 
    videojs.hook('setup', function(player) {

src/js/index.js

@@ -1,3 +1,3 @@
 'use strict';
 
-require('./index')();
+require('./index')(undefined, window.SILVERMINE_VIDEOJS_QUALITY_SELECTOR_CONFIG);

src/js/standalone.js

@@ -5,7 +5,7 @@
       height: 100%;
       width: 100%;
    }
-   .vjs-icon-placeholder {
+   .vjs-quality-selector-icon {
       // From video.js font: https://github.com/videojs/font
       font-family: 'VideoJS';
       font-weight: normal;