Add tests for Youtube part of Videoalpha

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

+<div class="course-content">
+  <div id="video_example">
+    <div id="example">
+      <div
+        id="video_id"
+        class="video"
+        data-streams="0.75:slowerSpeedYoutubeId,1.0:normalSpeedYoutubeId"
+        data-show-captions="true"
+        data-start=""
+        data-end=""
+        data-caption-asset-path="/static/subs/">
+        <div class="tc-wrapper">
+          <article class="video-wrapper">
+            <section class="video-player">
+              <div id="id"></div>
+            </section>
+            <section class="video-controls"></section>
+          </article>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

common/lib/xmodule/xmodule/js/spec/helper.coffee

@@ -41,9 +41,12 @@ jasmine.stubRequests = ->
       throw "External request attempted for #{settings.url}, which is not defined."
 
 jasmine.stubYoutubePlayer = ->
-  YT.Player = -> jasmine.createSpyObj 'YT.Player', ['cueVideoById', 'getVideoEmbedCode',
+  YT.Player = ->
+    obj = jasmine.createSpyObj 'YT.Player', ['cueVideoById', 'getVideoEmbedCode',
     'getCurrentTime', 'getPlayerState', 'getVolume', 'setVolume', 'loadVideoById',
-    'playVideo', 'pauseVideo', 'seekTo']
+    'playVideo', 'pauseVideo', 'seekTo', 'getDuration', 'getAvailablePlaybackRates', 'setPlaybackRate']
+    obj['getAvailablePlaybackRates'] = jasmine.createSpy('getAvailablePlaybackRates').andReturn [0.75, 1.0, 1.25, 1.5]
+    obj
 
 jasmine.stubVideoPlayer = (context, enableParts, createPlayer=true) ->
   enableParts = [enableParts] unless $.isArray(enableParts)
@@ -60,6 +63,19 @@ jasmine.stubVideoPlayer = (context, enableParts, createPlayer=true) ->
   if createPlayer
     return new VideoPlayer(video: context.video)
 
+jasmine.stubVideoPlayerAlpha = (context, enableParts, createPlayer=true) ->
+  suite = context.suite
+  currentPartName = suite.description while suite = suite.parentSuite
+
+  loadFixtures 'videoalpha.html'
+  jasmine.stubRequests()
+  YT.Player = undefined
+  window.OldVideoPlayerAlpha = undefined
+  context.video = new VideoAlpha '#example', '.75:slowerSpeedYoutubeId,1.0:normalSpeedYoutubeId'
+  jasmine.stubYoutubePlayer()
+  if createPlayer
+    return new VideoPlayerAlpha(video: context.video)
+
 
 # Stub jQuery.cookie
 $.cookie = jasmine.createSpy('jQuery.cookie').andReturn '1.0'

common/lib/xmodule/xmodule/js/spec/videoalpha/display/video_control_spec.coffee

+describe 'VideoControlAlpha', ->
+  beforeEach ->
+    window.onTouchBasedDevice = jasmine.createSpy('onTouchBasedDevice').andReturn false
+    loadFixtures 'videoalpha.html'
+    $('.video-controls').html ''
+
+  describe 'constructor', ->
+
+    it 'render the video controls', ->
+      @control = new window.VideoControlAlpha(el: $('.video-controls'))
+      expect($('.video-controls')).toContain
+      ['.slider', 'ul.vcr', 'a.play', '.vidtime', '.add-fullscreen'].join(',')
+      expect($('.video-controls').find('.vidtime')).toHaveText '0:00 / 0:00'
+
+    it 'bind the playback button', ->
+      @control = new window.VideoControlAlpha(el: $('.video-controls'))
+      expect($('.video_control')).toHandleWith 'click', @control.togglePlayback
+
+    describe 'when on a touch based device', ->
+      beforeEach ->
+        window.onTouchBasedDevice.andReturn true
+        @control = new window.VideoControlAlpha(el: $('.video-controls'))
+
+      it 'does not add the play class to video control', ->
+        expect($('.video_control')).not.toHaveClass 'play'
+        expect($('.video_control')).not.toHaveHtml 'Play'
+
+
+    describe 'when on a non-touch based device', ->
+
+      beforeEach ->
+        @control = new window.VideoControlAlpha(el: $('.video-controls'))
+
+      it 'add the play class to video control', ->
+        expect($('.video_control')).toHaveClass 'play'
+        expect($('.video_control')).toHaveHtml 'Play'
+
+  describe 'play', ->
+
+    beforeEach ->
+      @control = new window.VideoControlAlpha(el: $('.video-controls'))
+      @control.play()
+
+    it 'switch playback button to play state', ->
+      expect($('.video_control')).not.toHaveClass 'play'
+      expect($('.video_control')).toHaveClass 'pause'
+      expect($('.video_control')).toHaveHtml 'Pause'
+
+  describe 'pause', ->
+
+    beforeEach ->
+      @control = new window.VideoControlAlpha(el: $('.video-controls'))
+      @control.pause()
+
+    it 'switch playback button to pause state', ->
+      expect($('.video_control')).not.toHaveClass 'pause'
+      expect($('.video_control')).toHaveClass 'play'
+      expect($('.video_control')).toHaveHtml 'Play'
+
+  describe 'togglePlayback', ->
+
+    beforeEach ->
+      @control = new window.VideoControlAlpha(el: $('.video-controls'))
+
+    describe 'when the control does not have play or pause class', ->
+      beforeEach ->
+        $('.video_control').removeClass('play').removeClass('pause')
+
+      describe 'when the video is playing', ->
+        beforeEach ->
+          $('.video_control').addClass('play')
+          spyOnEvent @control, 'pause'
+          @control.togglePlayback jQuery.Event('click')
+
+        it 'does not trigger the pause event', ->
+          expect('pause').not.toHaveBeenTriggeredOn @control
+
+      describe 'when the video is paused', ->
+        beforeEach ->
+          $('.video_control').addClass('pause')
+          spyOnEvent @control, 'play'
+          @control.togglePlayback jQuery.Event('click')
+
+        it 'does not trigger the play event', ->
+          expect('play').not.toHaveBeenTriggeredOn @control
+
+      describe 'when the video is playing', ->
+        beforeEach ->
+          spyOnEvent @control, 'pause'
+          $('.video_control').addClass 'pause'
+          @control.togglePlayback jQuery.Event('click')
+
+        it 'trigger the pause event', ->
+          expect('pause').toHaveBeenTriggeredOn @control
+
+      describe 'when the video is paused', ->
+        beforeEach ->
+          spyOnEvent @control, 'play'
+          $('.video_control').addClass 'play'
+          @control.togglePlayback jQuery.Event('click')
+
+        it 'trigger the play event', ->
+          expect('play').toHaveBeenTriggeredOn @control

common/lib/xmodule/xmodule/js/spec/videoalpha/display/video_progress_slider_spec.coffee

+describe 'VideoProgressSliderAlpha', ->
+  beforeEach ->
+    window.onTouchBasedDevice = jasmine.createSpy('onTouchBasedDevice').andReturn false
+
+  describe 'constructor', ->
+    describe 'on a non-touch based device', ->
+      beforeEach ->
+        spyOn($.fn, 'slider').andCallThrough()
+        @player = jasmine.stubVideoPlayerAlpha @
+        @progressSlider = @player.progressSlider
+
+      it 'build the slider', ->
+        expect(@progressSlider.slider).toBe '.slider'
+        expect($.fn.slider).toHaveBeenCalledWith
+          range: 'min'
+          change: @progressSlider.onChange
+          slide: @progressSlider.onSlide
+          stop: @progressSlider.onStop
+
+      it 'build the seek handle', ->
+        expect(@progressSlider.handle).toBe '.slider .ui-slider-handle'
+        expect($.fn.qtip).toHaveBeenCalledWith
+          content: "0:00"
+          position:
+            my: 'bottom center'
+            at: 'top center'
+            container: @progressSlider.handle
+          hide:
+            delay: 700
+          style:
+            classes: 'ui-tooltip-slider'
+            widget: true
+
+    describe 'on a touch-based device', ->
+      beforeEach ->
+        window.onTouchBasedDevice.andReturn true
+        spyOn($.fn, 'slider').andCallThrough()
+        @player = jasmine.stubVideoPlayerAlpha @
+        @progressSlider = @player.progressSlider
+
+      it 'does not build the slider', ->
+        expect(@progressSlider.slider).toBeUndefined
+        expect($.fn.slider).not.toHaveBeenCalled()
+
+  describe 'play', ->
+    beforeEach ->
+      spyOn(VideoProgressSliderAlpha.prototype, 'buildSlider').andCallThrough()
+      @player = jasmine.stubVideoPlayerAlpha @
+      @progressSlider = @player.progressSlider
+
+    describe 'when the slider was already built', ->
+
+      beforeEach ->
+        @progressSlider.play()
+
+      it 'does not build the slider', ->
+        expect(@progressSlider.buildSlider.calls.length).toEqual 1
+
+    describe 'when the slider was not already built', ->
+      beforeEach ->
+        spyOn($.fn, 'slider').andCallThrough()
+        @progressSlider.slider = null
+        @progressSlider.play()
+
+      it 'build the slider', ->
+        expect(@progressSlider.slider).toBe '.slider'
+        expect($.fn.slider).toHaveBeenCalledWith
+          range: 'min'
+          change: @progressSlider.onChange
+          slide: @progressSlider.onSlide
+          stop: @progressSlider.onStop
+
+      it 'build the seek handle', ->
+        expect(@progressSlider.handle).toBe '.ui-slider-handle'
+        expect($.fn.qtip).toHaveBeenCalledWith
+          content: "0:00"
+          position:
+            my: 'bottom center'
+            at: 'top center'
+            container: @progressSlider.handle
+          hide:
+            delay: 700
+          style:
+            classes: 'ui-tooltip-slider'
+            widget: true
+
+  describe 'updatePlayTime', ->
+    beforeEach ->
+      @player = jasmine.stubVideoPlayerAlpha @
+      @progressSlider = @player.progressSlider
+
+    describe 'when frozen', ->
+      beforeEach ->
+        spyOn($.fn, 'slider').andCallThrough()
+        @progressSlider.frozen = true
+        @progressSlider.updatePlayTime 20, 120
+
+      it 'does not update the slider', ->
+        expect($.fn.slider).not.toHaveBeenCalled()
+
+    describe 'when not frozen', ->
+      beforeEach ->
+        spyOn($.fn, 'slider').andCallThrough()
+        @progressSlider.frozen = false
+        @progressSlider.updatePlayTime 20, 120
+
+      it 'update the max value of the slider', ->
+        expect($.fn.slider).toHaveBeenCalledWith 'option', 'max', 120
+
+      it 'update current value of the slider', ->
+        expect($.fn.slider).toHaveBeenCalledWith 'value', 20
+
+  describe 'onSlide', ->
+    beforeEach ->
+      @player = jasmine.stubVideoPlayerAlpha @
+      @progressSlider = @player.progressSlider
+      @time = null
+      $(@progressSlider).bind 'seek', (event, time) => @time = time
+      spyOnEvent @progressSlider, 'seek'
+      @progressSlider.onSlide {}, value: 20
+
+    it 'freeze the slider', ->
+      expect(@progressSlider.frozen).toBeTruthy()
+
+    it 'update the tooltip', ->
+      expect($.fn.qtip).toHaveBeenCalled()
+
+    it 'trigger seek event', ->
+      expect('seek').toHaveBeenTriggeredOn @progressSlider
+      expect(@time).toEqual 20
+
+  describe 'onChange', ->
+    beforeEach ->
+      @player = jasmine.stubVideoPlayerAlpha @
+      @progressSlider = @player.progressSlider
+      @progressSlider.onChange {}, value: 20
+
+    it 'update the tooltip', ->
+      expect($.fn.qtip).toHaveBeenCalled()
+
+  describe 'onStop', ->
+    beforeEach ->
+      @player = jasmine.stubVideoPlayerAlpha @
+      @progressSlider = @player.progressSlider
+      @time = null
+      $(@progressSlider).bind 'seek', (event, time) => @time = time
+      spyOnEvent @progressSlider, 'seek'
+      @progressSlider.onStop {}, value: 20
+
+    it 'freeze the slider', ->
+      expect(@progressSlider.frozen).toBeTruthy()
+
+    it 'trigger seek event', ->
+      expect('seek').toHaveBeenTriggeredOn @progressSlider
+      expect(@time).toEqual 20
+
+    it 'set timeout to unfreeze the slider', ->
+      expect(window.setTimeout).toHaveBeenCalledWith jasmine.any(Function), 200
+      window.setTimeout.mostRecentCall.args[0]()
+      expect(@progressSlider.frozen).toBeFalsy()
+
+  describe 'updateTooltip', ->
+    beforeEach ->
+      @player = jasmine.stubVideoPlayerAlpha @
+      @progressSlider = @player.progressSlider
+      @progressSlider.updateTooltip 90
+
+    it 'set the tooltip value', ->
+      expect($.fn.qtip).toHaveBeenCalledWith 'option', 'content.text', '1:30'

common/lib/xmodule/xmodule/js/spec/videoalpha/display/video_speed_control_spec.coffee

+describe 'VideoSpeedControlAlpha', ->
+  beforeEach ->
+    window.onTouchBasedDevice = jasmine.createSpy('onTouchBasedDevice').andReturn false
+    jasmine.stubVideoPlayerAlpha @
+    $('.speeds').remove()
+
+  describe 'constructor', ->
+    describe 'always', ->
+      beforeEach ->
+        @speedControl = new VideoSpeedControlAlpha el: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
+
+      it 'add the video speed control to player', ->
+        secondaryControls = $('.secondary-controls')
+        li = secondaryControls.find('.video_speeds li')
+        expect(secondaryControls).toContain '.speeds'
+        expect(secondaryControls).toContain '.video_speeds'
+        expect(secondaryControls.find('p.active').text()).toBe '1.0x'
+        expect(li.filter('.active')).toHaveData 'speed', @speedControl.currentSpeed
+        expect(li.length).toBe @speedControl.speeds.length
+        $.each li.toArray().reverse(), (index, link) =>
+          expect($(link)).toHaveData 'speed', @speedControl.speeds[index]
+          expect($(link).find('a').text()).toBe @speedControl.speeds[index] + 'x'
+
+      it 'bind to change video speed link', ->
+        expect($('.video_speeds a')).toHandleWith 'click', @speedControl.changeVideoSpeed
+
+    describe 'when running on touch based device', ->
+      beforeEach ->
+        window.onTouchBasedDevice.andReturn true
+        $('.speeds').removeClass 'open'
+        @speedControl = new VideoSpeedControlAlpha el: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
+
+      it 'open the speed toggle on click', ->
+        $('.speeds').click()
+        expect($('.speeds')).toHaveClass 'open'
+        $('.speeds').click()
+        expect($('.speeds')).not.toHaveClass 'open'
+
+    describe 'when running on non-touch based device', ->
+      beforeEach ->
+        $('.speeds').removeClass 'open'
+        @speedControl = new VideoSpeedControlAlpha el: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
+
+      it 'open the speed toggle on hover', ->
+        $('.speeds').mouseenter()
+        expect($('.speeds')).toHaveClass 'open'
+        $('.speeds').mouseleave()
+        expect($('.speeds')).not.toHaveClass 'open'
+
+      it 'close the speed toggle on mouse out', ->
+        $('.speeds').mouseenter().mouseleave()
+        expect($('.speeds')).not.toHaveClass 'open'
+
+      it 'close the speed toggle on click', ->
+        $('.speeds').mouseenter().click()
+        expect($('.speeds')).not.toHaveClass 'open'
+
+  describe 'changeVideoSpeed', ->
+    beforeEach ->
+      @speedControl = new VideoSpeedControlAlpha el: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
+      @video.setSpeed '1.0'
+
+    describe 'when new speed is the same', ->
+      beforeEach ->
+        spyOnEvent @speedControl, 'speedChange'
+        $('li[data-speed="1.0"] a').click()
+
+      it 'does not trigger speedChange event', ->
+        expect('speedChange').not.toHaveBeenTriggeredOn @speedControl
+
+    describe 'when new speed is not the same', ->
+      beforeEach ->
+        @newSpeed = null
+        $(@speedControl).bind 'speedChange', (event, newSpeed) => @newSpeed = newSpeed
+        spyOnEvent @speedControl, 'speedChange'
+        $('li[data-speed="0.75"] a').click()
+
+      it 'trigger speedChange event', ->
+        expect('speedChange').toHaveBeenTriggeredOn @speedControl
+        expect(@newSpeed).toEqual 0.75
+
+  describe 'onSpeedChange', ->
+    beforeEach ->
+      @speedControl = new VideoSpeedControlAlpha el: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
+      $('li[data-speed="1.0"] a').addClass 'active'
+      @speedControl.setSpeed '0.75'
+
+    it 'set the new speed as active', ->
+      expect($('.video_speeds li[data-speed="1.0"]')).not.toHaveClass 'active'
+      expect($('.video_speeds li[data-speed="0.75"]')).toHaveClass 'active'
+      expect($('.speeds p.active')).toHaveHtml '0.75x'

common/lib/xmodule/xmodule/js/spec/videoalpha/display/video_volume_control_spec.coffee

+describe 'VideoVolumeControlAlpha', ->
+  beforeEach ->
+    jasmine.stubVideoPlayerAlpha @
+    $('.volume').remove()
+
+  describe 'constructor', ->
+    beforeEach ->
+      spyOn($.fn, 'slider')
+      @volumeControl = new VideoVolumeControlAlpha el: $('.secondary-controls')
+
+    it 'initialize currentVolume to 100', ->
+      expect(@volumeControl.currentVolume).toEqual 100
+
+    it 'render the volume control', ->
+      expect($('.secondary-controls').html()).toContain """
+        <div class="volume">
+          <a href="#"></a>
+          <div class="volume-slider-container">
+            <div class="volume-slider"></div>
+          </div>
+        </div>
+      """
+
+    it 'create the slider', ->
+      expect($.fn.slider).toHaveBeenCalledWith
+        orientation: "vertical"
+        range: "min"
+        min: 0
+        max: 100
+        value: 100
+        change: @volumeControl.onChange
+        slide: @volumeControl.onChange
+
+    it 'bind the volume control', ->
+      expect($('.volume>a')).toHandleWith 'click', @volumeControl.toggleMute
+
+      expect($('.volume')).not.toHaveClass 'open'
+      $('.volume').mouseenter()
+      expect($('.volume')).toHaveClass 'open'
+      $('.volume').mouseleave()
+      expect($('.volume')).not.toHaveClass 'open'
+
+  describe 'onChange', ->
+    beforeEach ->
+      spyOnEvent @volumeControl, 'volumeChange'
+      @newVolume = undefined
+      @volumeControl = new VideoVolumeControlAlpha el: $('.secondary-controls')
+      $(@volumeControl).bind 'volumeChange', (event, volume) => @newVolume = volume
+
+    describe 'when the new volume is more than 0', ->
+      beforeEach ->
+        @volumeControl.onChange undefined, value: 60
+
+      it 'set the player volume', ->
+        expect(@newVolume).toEqual 60
+
+      it 'remote muted class', ->
+        expect($('.volume')).not.toHaveClass 'muted'
+
+    describe 'when the new volume is 0', ->
+      beforeEach ->
+        @volumeControl.onChange undefined, value: 0
+
+      it 'set the player volume', ->
+        expect(@newVolume).toEqual 0
+
+      it 'add muted class', ->
+        expect($('.volume')).toHaveClass 'muted'
+
+  describe 'toggleMute', ->
+    beforeEach ->
+      @newVolume = undefined
+      @volumeControl = new VideoVolumeControlAlpha el: $('.secondary-controls')
+      $(@volumeControl).bind 'volumeChange', (event, volume) => @newVolume = volume
+
+    describe 'when the current volume is more than 0', ->
+      beforeEach ->
+        @volumeControl.currentVolume = 60
+        @volumeControl.toggleMute()
+
+      it 'save the previous volume', ->
+        expect(@volumeControl.previousVolume).toEqual 60
+
+      it 'set the player volume', ->
+        expect(@newVolume).toEqual 0
+
+    describe 'when the current volume is 0', ->
+      beforeEach ->
+        @volumeControl.currentVolume = 0
+        @volumeControl.previousVolume = 60
+        @volumeControl.toggleMute()
+
+      it 'set the player volume to previous volume', ->
+        expect(@newVolume).toEqual 60

common/lib/xmodule/xmodule/js/spec/videoalpha/display_spec.coffee

+describe 'VideoAlpha', ->
+  metadata = undefined
+
+  beforeEach ->
+    loadFixtures 'videoalpha.html'
+    jasmine.stubRequests()
+
+    @videosDefinition = '0.75:slowerSpeedYoutubeId,1.0:normalSpeedYoutubeId'
+    @slowerSpeedYoutubeId = 'slowerSpeedYoutubeId'
+    @normalSpeedYoutubeId = 'normalSpeedYoutubeId'
+    metadata =
+      slowerSpeedYoutubeId:
+        id: @slowerSpeedYoutubeId
+        duration: 300
+      normalSpeedYoutubeId:
+        id: @normalSpeedYoutubeId
+        duration: 200
+
+  afterEach ->
+    window.OldVideoPlayerAlpha = undefined
+    window.onYouTubePlayerAPIReady = undefined
+
+  describe 'constructor', ->
+    beforeEach ->
+      @stubVideoPlayerAlpha = jasmine.createSpy('VideoPlayerAlpha')
+      $.cookie.andReturn '0.75'
+
+    describe 'by default', ->
+      beforeEach ->
+        spyOn(window.VideoAlpha.prototype, 'fetchMetadata').andCallFake ->
+          @metadata = metadata
+        @video = new VideoAlpha '#example', @videosDefinition
+      it 'reset the current video player', ->
+        expect(window.OldVideoPlayerAlpha).toBeUndefined()
+
+      it 'set the elements', ->
+        expect(@video.el).toBe '#video_id'
+
+      it 'parse the videos', ->
+        expect(@video.videos).toEqual
+          '0.75': @slowerSpeedYoutubeId
+          '1.0': @normalSpeedYoutubeId
+
+      it 'fetch the video metadata', ->
+        expect(@video.fetchMetadata).toHaveBeenCalled
+        expect(@video.metadata).toEqual metadata
+
+      it 'parse available video speeds', ->
+        expect(@video.speeds).toEqual ['0.75', '1.0']
+
+      it 'set current video speed via cookie', ->
+        expect(@video.speed).toEqual '0.75'
+
+      it 'store a reference for this video player in the element', ->
+        expect($('.video').data('video')).toEqual @video
+
+    describe 'when the Youtube API is already available', ->
+      beforeEach ->
+        @originalYT = window.YT
+        window.YT = { Player: true }
+        spyOn(window, 'VideoPlayerAlpha').andReturn(@stubVideoPlayerAlpha)
+        @video = new VideoAlpha '#example', @videosDefinition
+
+      afterEach ->
+        window.YT = @originalYT
+
+      it 'create the Video Player', ->
+        expect(window.VideoPlayerAlpha).toHaveBeenCalledWith(video: @video)
+        expect(@video.player).toEqual @stubVideoPlayerAlpha
+
+    describe 'when the Youtube API is not ready', ->
+      beforeEach ->
+        @originalYT = window.YT
+        window.YT = {}
+        @video = new VideoAlpha '#example', @videosDefinition
+
+      afterEach ->
+        window.YT = @originalYT
+
+      it 'set the callback on the window object', ->
+        expect(window.onYouTubePlayerAPIReady).toEqual jasmine.any(Function)
+
+    describe 'when the Youtube API becoming ready', ->
+      beforeEach ->
+        @originalYT = window.YT
+        window.YT = {}
+        spyOn(window, 'VideoPlayerAlpha').andReturn(@stubVideoPlayerAlpha)
+        @video = new VideoAlpha '#example', @videosDefinition
+        window.onYouTubePlayerAPIReady()
+
+      afterEach ->
+        window.YT = @originalYT
+
+      it 'create the Video Player for all video elements', ->
+        expect(window.VideoPlayerAlpha).toHaveBeenCalledWith(video: @video)
+        expect(@video.player).toEqual @stubVideoPlayerAlpha
+
+  describe 'youtubeId', ->
+    beforeEach ->
+      $.cookie.andReturn '1.0'
+      @video = new VideoAlpha '#example', @videosDefinition
+
+    describe 'with speed', ->
+      it 'return the video id for given speed', ->
+        expect(@video.youtubeId('0.75')).toEqual @slowerSpeedYoutubeId
+        expect(@video.youtubeId('1.0')).toEqual @normalSpeedYoutubeId
+
+    describe 'without speed', ->
+      it 'return the video id for current speed', ->
+        expect(@video.youtubeId()).toEqual @normalSpeedYoutubeId
+
+  describe 'setSpeed', ->
+    beforeEach ->
+      @video = new VideoAlpha '#example', @videosDefinition
+
+    describe 'when new speed is available', ->
+      beforeEach ->
+        @video.setSpeed '0.75'
+
+      it 'set new speed', ->
+        expect(@video.speed).toEqual '0.75'
+
+      it 'save setting for new speed', ->
+        expect($.cookie).toHaveBeenCalledWith 'video_speed', '0.75', expires: 3650, path: '/'
+
+    describe 'when new speed is not available', ->
+      beforeEach ->
+        @video.setSpeed '1.75'
+
+      it 'set speed to 1.0x', ->
+        expect(@video.speed).toEqual '1.0'
+
+  describe 'getDuration', ->
+    beforeEach ->
+      @video = new VideoAlpha '#example', @videosDefinition
+
+    it 'return duration for current video', ->
+      expect(@video.getDuration()).toEqual 200
+
+  describe 'log', ->
+    beforeEach ->
+      @video = new VideoAlpha '#example', @videosDefinition
+      @video.setSpeed '1.0'
+      spyOn Logger, 'log'
+      @video.player = { currentTime: 25 }
+      @video.log 'someEvent'
+
+    it 'call the logger with valid parameters', ->
+      expect(Logger.log).toHaveBeenCalledWith 'someEvent',
+        id: 'id'
+        code: @normalSpeedYoutubeId
+        currentTime: 25
+        speed: '1.0'

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

@@ -37,7 +37,7 @@ class @VideoCaptionAlpha extends SubviewAlpha
         @loaded = true
 
         if onTouchBasedDevice()
-          $('.subtitles li').html "Caption will be displayed when you start playing the video."
+          $('.subtitles').html "<li>Caption will be displayed when you start playing the video.</li>"
         else
           @renderCaption()
 

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

@@ -6,7 +6,7 @@ class @VideoPlayerAlpha extends SubviewAlpha
     # we must pause the player (stop setInterval() method).
     if (window.OldVideoPlayerAlpha) and (window.OldVideoPlayerAlpha.onPause)
       window.OldVideoPlayerAlpha.onPause()
-    window.OldVideoPlayerAlpha = this
+    window.OldVideoPlayerAlpha = @
 
     if @video.videoType is 'youtube'
       @PlayerState = YT.PlayerState
@@ -29,7 +29,7 @@ class @VideoPlayerAlpha extends SubviewAlpha
     $(@progressSlider).bind('slide_seek', @onSeek)
     if @volumeControl
       $(@volumeControl).bind('volumeChange', @onVolumeChange)
-    $(document).keyup @bindExitFullScreen
+    $(document.documentElement).keyup @bindExitFullScreen
 
     @$('.add-fullscreen').click @toggleFullScreen
     @addToolTip() unless onTouchBasedDevice()
@@ -114,7 +114,7 @@ class @VideoPlayerAlpha extends SubviewAlpha
     @video.log 'load_video'
     if @video.videoType is 'html5'
       @player.setPlaybackRate @video.speed
-    if not onTouchBasedDevice() and $('.video:first').data('autoplay') is 'True'
+    if not onTouchBasedDevice() and $('.video:first').data('autoplay') isnt 'False'
       $('.video-load-complete:first').data('video').player.play()
 
   onStateChange: (event) =>
@@ -135,6 +135,8 @@ class @VideoPlayerAlpha extends SubviewAlpha
           # NOTE: It is my strong belief that in the future YouTube Flash player will
           # not get speed changes. This is a dying technology. So we can safely use
           # this indirect method to determine player mode.
+
+
           availableSpeeds = @player.getAvailablePlaybackRates()
           prev_player_type = $.cookie('prev_player_type')
           if availableSpeeds.length > 1
@@ -308,7 +310,7 @@ class @VideoPlayerAlpha extends SubviewAlpha
     @player.pauseVideo() if @player.pauseVideo
 
   duration: ->
-    duration = @player.getDuration()
+    duration = @player.getDuration() if @player.getDuration
     if isFinite(duration) is false
       duration = @video.getDuration()
     duration

common/lib/xmodule/xmodule/js/src/videoalpha/display/video_progress_slider.coffee

@@ -12,7 +12,7 @@ class @VideoProgressSliderAlpha extends SubviewAlpha
     @buildHandle()
 
   buildHandle: ->
-    @handle = @$('.slider .ui-slider-handle')
+    @handle = @$('.ui-slider-handle')
     @handle.qtip
       content: "#{Time.format(@slider.slider('value'))}"
       position: