Merge pull request #1314 from edx/jmclaus/bugfix_HD_control_state

Added two states to HD control: HD off - HD on

common/lib/xmodule/xmodule/js/fixtures/video.html

@@ -45,7 +45,7 @@
                     </div>
                   </div>
                   <a href="#" class="add-fullscreen" title="Fill browser" role="button" aria-disabled="false">Fill Browser</a>
-                  <a href="#" class="quality_control" title="HD" role="button" aria-disabled="false">HD</a>
+                  <a href="#" class="quality_control" title="HD off" role="button" aria-disabled="false">HD off</a>
                   <a href="#" class="hide-subtitles" title="Turn off captions" role="button" aria-disabled="false">Captions</a>
                 </div>
               </div>

common/lib/xmodule/xmodule/js/fixtures/video_all.html

@@ -48,7 +48,7 @@
                     </div>
                   </div>
                   <a href="#" class="add-fullscreen" title="Fill browser" role="button" aria-disabled="false">Fill Browser</a>
-                  <a href="#" class="quality_control" title="HD" role="button" aria-disabled="false">HD</a>
+                  <a href="#" class="quality_control" title="HD off" role="button" aria-disabled="false">HD off</a>
                   <a href="#" class="hide-subtitles" title="Turn off captions" role="button" aria-disabled="false">Captions</a>
                 </div>
               </div>

common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html

@@ -45,7 +45,7 @@
                     </div>
                   </div>
                   <a href="#" class="add-fullscreen" title="Fill browser" role="button" aria-disabled="false">Fill Browser</a>
-                  <a href="#" class="quality_control" title="HD" role="button" aria-disabled="false">HD</a>
+                  <a href="#" class="quality_control" title="HD off" role="button" aria-disabled="false">HD off</a>
                   <a href="#" class="hide-subtitles" title="Turn off captions" role="button" aria-disabled="false">Captions</a>
                 </div>
               </div>

common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js

@@ -59,14 +59,24 @@ function () {
     // ***************************************************************
 
     function onQualityChange(value) {
+        var controlStateStr;
         this.videoQualityControl.quality = value;
 
         if (_.indexOf(this.config.availableQualities, value) !== -1) {
-            this.videoQualityControl.el.addClass('active');
+            controlStateStr = gettext('HD on');
+            this.videoQualityControl.el
+                                    .addClass('active')
+                                    .attr('title', controlStateStr)
+                                    .text(controlStateStr);
         } else {
-            this.videoQualityControl.el.removeClass('active');
+            controlStateStr = gettext('HD off');
+            this.videoQualityControl.el
+                                    .removeClass('active')
+                                    .attr('title', controlStateStr)
+                                    .text(controlStateStr);
+
         }
-    }
+    }       
 
     // This function change quality of video.
     // Right now we haven't ability to choose quality of HD video,

lms/templates/video.html

@@ -77,7 +77,7 @@
                             </div>
                         </div>
                         <a href="#" class="add-fullscreen" title="${_('Fill browser')}" role="button" aria-disabled="false">${_('Fill browser')}</a>
-                        <a href="#" class="quality_control" title="${_('HD')}" role="button" aria-disabled="false">${_('HD')}</a>
+                        <a href="#" class="quality_control" title="${_('HD off')}" role="button" aria-disabled="false">${_('HD off')}</a>
 
                         <a href="#" class="hide-subtitles" title="${_('Turn off captions')}" role="button" aria-disabled="false">${_('Turn off captions')}</a>
                     </div>