From a682125480e20d642747b4cc79c1e11b27cca683 Mon Sep 17 00:00:00 2001
From: Matt Luedke <mluedke.ds@gmail.com>
Date: Fri, 1 Dec 2017 18:25:45 -0500
Subject: [PATCH] Refs #13 Support quality selector buttons anywhere in the
 player's component hierarchy

Previously, the SourceInterceptor made the assumption that the QualitySelector button component
is a direct child of the controlBar component. That may not always be true. Video.js allows you
to specify a nested hierarchy of components, and so when plugin users choose to move the
QualitySelector button elsewhere, the plugin does not work properly.

This commit introduces a new event type called QUALITY_REQUESTED to signal when the user is
requesting a quality change. The old QUALITY_SELECTED event is now used to denote when the
plugin actually uses a new quality source. This dichotomy eliminates the need for the
SourceInterceptor to have a reference to the QualitySelector button component.
---
 src/js/components/QualityOption.js     |  2 +-
 src/js/components/QualitySelector.js   | 15 ++++++++++++---
 src/js/events.js                       |  1 +
 src/js/index.js                        |  2 +-
 src/js/middleware/SourceInterceptor.js | 12 ++++--------
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/js/components/QualityOption.js b/src/js/components/QualityOption.js
index 92bd497..7b64bd6 100644
--- a/src/js/components/QualityOption.js
+++ b/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);
       },
 
    });
diff --git a/src/js/components/QualitySelector.js b/src/js/components/QualitySelector.js
index 8b66df1..16c3398 100644
--- a/src/js/components/QualitySelector.js
+++ b/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,11 @@ module.exports = function(videojs) {
             });
          }.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 +55,12 @@ 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;
+            this.update();
+         }
       },
 
       /**
diff --git a/src/js/events.js b/src/js/events.js
index 2301e92..fb25fdf 100644
--- a/src/js/events.js
+++ b/src/js/events.js
@@ -2,6 +2,7 @@
 
 module.exports = {
 
+   QUALITY_REQUESTED: 'qualityRequested',
    QUALITY_SELECTED: 'qualitySelected',
 
 };
diff --git a/src/js/index.js b/src/js/index.js
index 8155d0c..d1de183 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -13,7 +13,7 @@ module.exports = function(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) {
+      player.on(events.QUALITY_REQUESTED, function(event, newSource) {
          var sources = player.currentSources(),
              currentTime = player.currentTime(),
              isPaused = player.paused(),
diff --git a/src/js/middleware/SourceInterceptor.js b/src/js/middleware/SourceInterceptor.js
index 19bff90..f302f22 100644
--- a/src/js/middleware/SourceInterceptor.js
+++ b/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,7 @@ module.exports = function(videojs) {
 
          setSource: function(playerSelectedSource, next) {
             var sources = player.currentSources(),
-                userSelectedSource, chosenSource,
-                qualitySelector;
+                userSelectedSource, chosenSource;
 
             // There are generally two source options, the one that videojs
             // auto-selects and the one that a "user" of this plugin has
@@ -28,11 +28,7 @@ module.exports = function(videojs) {
 
             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);