Merge pull request #998 from MITx/feature/rocha/hd-video-player

Add HD control to video player

common/lib/xmodule/xmodule/css/video/display.scss

@@ -355,6 +355,34 @@ div.video {
           }
         }
 
+        a.quality_control {
+          background: url(../images/hd.png) center no-repeat;
+          border-right: 1px solid #000;
+          @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+          color: #797979;
+          display: block;
+          float: left;
+          line-height: 46px; //height of play pause buttons
+          margin-left: 0;
+          padding: 0 lh(.5);
+          text-indent: -9999px;
+          @include transition();
+          width: 30px;
+
+          &:hover {
+            background-color: #444;
+            color: #fff;
+            text-decoration: none;
+          }
+
+          &.active {
+            background-color: #F44;
+            color: #0ff;
+            text-decoration: none;
+          }
+        }
+
+
         a.hide-subtitles {
           background: url('../images/cc.png') center no-repeat;
           color: #797979;

common/lib/xmodule/xmodule/js/src/video/display/video_caption.coffee

@@ -22,7 +22,7 @@ class @VideoCaption extends Subview
       """
     @$('.video-controls .secondary-controls').append """
       <a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
-      """
+      """#"
     @$('.subtitles').css maxHeight: @$('.video-wrapper').height() - 5
     @fetchCaption()
 
@@ -144,7 +144,7 @@ class @VideoCaption extends Subview
       @el.removeClass('closed')
       @scrollCaption()
     $.cookie('hide_captions', hide_captions, expires: 3650, path: '/')
- 
+
   captionHeight: ->
     if @el.hasClass('fullscreen')
       $(window).height() - @$('.video-controls').height()

common/lib/xmodule/xmodule/js/src/video/display/video_control.coffee

@@ -16,7 +16,7 @@ class @VideoControl extends Subview
           <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
         </div>
       </div>
-      """
+      """#"
 
     unless onTouchBasedDevice()
       @$('.video_control').addClass('play').html('Play')

common/lib/xmodule/xmodule/js/src/video/display/video_player.coffee

@@ -9,6 +9,7 @@ class @VideoPlayer extends Subview
   bind: ->
     $(@control).bind('play', @play)
       .bind('pause', @pause)
+    $(@qualityControl).bind('changeQuality', @handlePlaybackQualityChange)
     $(@caption).bind('seek', @onSeek)
     $(@speedControl).bind('speedChange', @onSpeedChange)
     $(@progressSlider).bind('seek', @onSeek)
@@ -25,6 +26,7 @@ class @VideoPlayer extends Subview
 
   render: ->
     @control = new VideoControl el: @$('.video-controls')
+    @qualityControl = new VideoQualityControl el: @$('.secondary-controls')
     @caption = new VideoCaption
         el: @el
         youtubeId: @video.youtubeId('1.0')
@@ -41,10 +43,12 @@ class @VideoPlayer extends Subview
         rel: 0
         showinfo: 0
         enablejsapi: 1
+        modestbranding: 1
       videoId: @video.youtubeId()
       events:
         onReady: @onReady
         onStateChange: @onStateChange
+        onPlaybackQualityChange: @onPlaybackQualityChange
     @caption.hideCaptions(@['video'].hide_captions)
 
   addToolTip: ->
@@ -53,7 +57,7 @@ class @VideoPlayer extends Subview
         my: 'top right'
         at: 'top center'
 
-  onReady: =>
+  onReady: (event) =>
     unless onTouchBasedDevice()
       $('.video-load-complete:first').data('video').player.play()
 
@@ -68,6 +72,13 @@ class @VideoPlayer extends Subview
       when YT.PlayerState.ENDED
         @onEnded()
 
+  onPlaybackQualityChange: (event, value) =>
+    quality = @player.getPlaybackQuality()
+    @qualityControl.onQualityChange(quality)
+
+  handlePlaybackQualityChange: (event, value) =>
+    @player.setPlaybackQuality(value)
+
   onUnstarted: =>
     @control.pause()
     @caption.pause()

common/lib/xmodule/xmodule/js/src/video/display/video_quality_control.coffee

@@ -0,0 +1,26 @@
+class @VideoQualityControl extends Subview
+  initialize: ->
+    @quality = null;
+
+  bind: ->
+    @$('.quality_control').click @toggleQuality
+
+  render: ->
+    @el.append """
+      <a href="#" class="quality_control" title="HD">HD</a>
+      """#"
+
+  onQualityChange: (value) ->
+    @quality = value
+    if @quality in ['hd720', 'hd1080', 'highres']
+        @el.addClass('active')
+    else
+        @el.removeClass('active')
+
+  toggleQuality: (event) =>
+    event.preventDefault()
+    if @quality in ['hd720', 'hd1080', 'highres']
+        newQuality = 'large'
+    else
+        newQuality = 'hd720'
+    $(@).trigger('changeQuality', newQuality)

common/lib/xmodule/xmodule/js/src/video/display/video_volume_control.coffee

@@ -17,7 +17,7 @@ class @VideoVolumeControl extends Subview
           <div class="volume-slider"></div>
         </div>
       </div>
-      """
+      """#"
     @slider = @$('.volume-slider').slider
       orientation: "vertical"
       range: "min"