Skip to content

E
edx-platform
Commit 4e183dd6 by Prem Sichanugrist
Options

Clean up events binding in Video Player 

* Video Player now acting as a parent that always knowing the state of
  their children.
* Events on the sub-controls are now triggered on itself, and binded by
  the Video Player instead of triggering everything on the Video Player.
* A new helper class, SubView, has been introduced to cleanup repeat
  logic on scoped jQuery selector, render() and bind()
parent 207777fb
Showing with 360 additions and 412 deletions
lms/static/coffee/spec/helper.coffee
...@@ -52,7 +52,7 @@ jasmine.stubVideoPlayer = (context, enableParts, createPlayer=true) -> ...@@ -52,7 +52,7 @@ jasmine.stubVideoPlayer = (context, enableParts, createPlayer=true) ->
context.video = new Video 'example', '.75:abc123,1.0:def456' context.video = new Video 'example', '.75:abc123,1.0:def456'
jasmine.stubYoutubePlayer() jasmine.stubYoutubePlayer()
if createPlayer if createPlayer
return new VideoPlayer context.video return new VideoPlayer(video: context.video)
spyOn(window, 'onunload') spyOn(window, 'onunload')
......
lms/static/coffee/spec/modules/video/video_caption_spec.coffee
describe 'VideoCaption', -> describe 'VideoCaption', ->
beforeEach -> beforeEach ->
@player = jasmine.stubVideoPlayer @ jasmine.stubVideoPlayer @
$('.subtitles').remove()
afterEach -> afterEach ->
YT.Player = undefined YT.Player = undefined
...@@ -12,10 +13,7 @@ describe 'VideoCaption', -> ...@@ -12,10 +13,7 @@ describe 'VideoCaption', ->
describe 'always', -> describe 'always', ->
beforeEach -> beforeEach ->
@caption = new VideoCaption @player, 'def456' @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
it 'set the player', ->
expect(@caption.player).toEqual @player
it 'set the youtube id', -> it 'set the youtube id', ->
expect(@caption.youtubeId).toEqual 'def456' expect(@caption.youtubeId).toEqual 'def456'
...@@ -30,26 +28,14 @@ describe 'VideoCaption', -> ...@@ -30,26 +28,14 @@ describe 'VideoCaption', ->
expect($.getWithPrefix).toHaveBeenCalledWith @caption.captionURL(), jasmine.any(Function) expect($.getWithPrefix).toHaveBeenCalledWith @caption.captionURL(), jasmine.any(Function)
it 'bind window resize event', -> it 'bind window resize event', ->
expect($(window)).toHandleWith 'resize', @caption.onWindowResize expect($(window)).toHandleWith 'resize', @caption.resize
it 'bind player resize event', ->
expect($(@player)).toHandleWith 'resize', @caption.onWindowResize
it 'bind player seek event', ->
expect($(@player)).toHandleWith 'seek', @caption.onUpdatePlayTime
it 'bind player updatePlayTime event', ->
expect($(@player)).toHandleWith 'updatePlayTime', @caption.onUpdatePlayTime
it 'bind player play event', ->
expect($(@player)).toHandleWith 'play', @caption.onPlay
it 'bind the hide caption button', -> it 'bind the hide caption button', ->
expect($('.hide-subtitles')).toHandleWith 'click', @caption.toggle expect($('.hide-subtitles')).toHandleWith 'click', @caption.toggle
it 'bind the mouse movement', -> it 'bind the mouse movement', ->
expect($('.subtitles')).toHandleWith 'mouseenter', @caption.onMouseEnter expect($('.subtitles')).toHandleWith 'mouseover', @caption.onMouseEnter
expect($('.subtitles')).toHandleWith 'mouseleave', @caption.onMouseLeave expect($('.subtitles')).toHandleWith 'mouseout', @caption.onMouseLeave
expect($('.subtitles')).toHandleWith 'mousemove', @caption.onMovement expect($('.subtitles')).toHandleWith 'mousemove', @caption.onMovement
expect($('.subtitles')).toHandleWith 'mousewheel', @caption.onMovement expect($('.subtitles')).toHandleWith 'mousewheel', @caption.onMovement
expect($('.subtitles')).toHandleWith 'DOMMouseScroll', @caption.onMovement expect($('.subtitles')).toHandleWith 'DOMMouseScroll', @caption.onMovement
...@@ -57,7 +43,7 @@ describe 'VideoCaption', -> ...@@ -57,7 +43,7 @@ describe 'VideoCaption', ->
describe 'when on a non touch-based device', -> describe 'when on a non touch-based device', ->
beforeEach -> beforeEach ->
spyOn(window, 'onTouchBasedDevice').andReturn false spyOn(window, 'onTouchBasedDevice').andReturn false
@caption = new VideoCaption @player, 'def456' @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
it 'render the caption', -> it 'render the caption', ->
expect($('.subtitles').html()).toMatch new RegExp(''' expect($('.subtitles').html()).toMatch new RegExp('''
...@@ -81,7 +67,7 @@ describe 'VideoCaption', -> ...@@ -81,7 +67,7 @@ describe 'VideoCaption', ->
describe 'when on a touch-based device', -> describe 'when on a touch-based device', ->
beforeEach -> beforeEach ->
spyOn(window, 'onTouchBasedDevice').andReturn true spyOn(window, 'onTouchBasedDevice').andReturn true
@caption = new VideoCaption @player, 'def456' @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
it 'show explaination message', -> it 'show explaination message', ->
expect($('.subtitles li')).toHaveHtml "Caption will be displayed when you start playing the video." expect($('.subtitles li')).toHaveHtml "Caption will be displayed when you start playing the video."
...@@ -93,7 +79,7 @@ describe 'VideoCaption', -> ...@@ -93,7 +79,7 @@ describe 'VideoCaption', ->
beforeEach -> beforeEach ->
spyOn(window, 'setTimeout').andReturn 100 spyOn(window, 'setTimeout').andReturn 100
spyOn window, 'clearTimeout' spyOn window, 'clearTimeout'
@caption = new VideoCaption @player, 'def456' @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
describe 'when cursor is outside of the caption box', -> describe 'when cursor is outside of the caption box', ->
beforeEach -> beforeEach ->
...@@ -140,7 +126,7 @@ describe 'VideoCaption', -> ...@@ -140,7 +126,7 @@ describe 'VideoCaption', ->
describe 'when the player is playing', -> describe 'when the player is playing', ->
beforeEach -> beforeEach ->
spyOn(@player, 'isPlaying').andReturn true @caption.playing = true
$('.subtitles li[data-index]:first').addClass 'current' $('.subtitles li[data-index]:first').addClass 'current'
$('.subtitles').trigger jQuery.Event 'mouseout' $('.subtitles').trigger jQuery.Event 'mouseout'
...@@ -149,7 +135,7 @@ describe 'VideoCaption', -> ...@@ -149,7 +135,7 @@ describe 'VideoCaption', ->
describe 'when the player is not playing', -> describe 'when the player is not playing', ->
beforeEach -> beforeEach ->
spyOn(@player, 'isPlaying').andReturn false @caption.playing = false
$('.subtitles').trigger jQuery.Event 'mouseout' $('.subtitles').trigger jQuery.Event 'mouseout'
it 'does not scroll the caption', -> it 'does not scroll the caption', ->
...@@ -157,7 +143,7 @@ describe 'VideoCaption', -> ...@@ -157,7 +143,7 @@ describe 'VideoCaption', ->
describe 'search', -> describe 'search', ->
beforeEach -> beforeEach ->
@caption = new VideoCaption @player, 'def456' @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
it 'return a correct caption index', -> it 'return a correct caption index', ->
expect(@caption.search(0)).toEqual 0 expect(@caption.search(0)).toEqual 0
...@@ -167,20 +153,20 @@ describe 'VideoCaption', -> ...@@ -167,20 +153,20 @@ describe 'VideoCaption', ->
expect(@caption.search(30000)).toEqual 3 expect(@caption.search(30000)).toEqual 3
expect(@caption.search(30001)).toEqual 3 expect(@caption.search(30001)).toEqual 3
describe 'onPlay', -> describe 'play', ->
describe 'when the caption was not rendered', -> describe 'when the caption was not rendered', ->
beforeEach -> beforeEach ->
spyOn(window, 'onTouchBasedDevice').andReturn true spyOn(window, 'onTouchBasedDevice').andReturn true
@caption = new VideoCaption @player, 'def456' @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
@caption.onPlay() @caption.play()
it 'render the caption', -> it 'render the caption', ->
expect($('.subtitles').html()).toMatch new RegExp(''' expect($('.subtitles').html()).toMatch new RegExp(
<li data-index="0" data-start="0">Caption at 0</li> '''<li data-index="0" data-start="0">Caption at 0</li>''' +
<li data-index="1" data-start="10000">Caption at 10000</li> '''<li data-index="1" data-start="10000">Caption at 10000</li>''' +
<li data-index="2" data-start="20000">Caption at 20000</li> '''<li data-index="2" data-start="20000">Caption at 20000</li>''' +
<li data-index="3" data-start="30000">Caption at 30000</li> '''<li data-index="3" data-start="30000">Caption at 30000</li>'''
'''.replace(/\n/g, '')) )
it 'add a padding element to caption', -> it 'add a padding element to caption', ->
expect($('.subtitles li:first')).toBe '.spacing' expect($('.subtitles li:first')).toBe '.spacing'
...@@ -193,22 +179,34 @@ describe 'VideoCaption', -> ...@@ -193,22 +179,34 @@ describe 'VideoCaption', ->
it 'set rendered to true', -> it 'set rendered to true', ->
expect(@caption.rendered).toBeTruthy() expect(@caption.rendered).toBeTruthy()
describe 'onUpdatePlayTime', -> it 'set playing to true', ->
expect(@caption.playing).toBeTruthy()
describe 'pause', ->
beforeEach ->
@caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
@caption.playing = true
@caption.pause()
it 'set playing to false', ->
expect(@caption.playing).toBeFalsy()
describe 'updatePlayTime', ->
beforeEach -> beforeEach ->
@caption = new VideoCaption @player, 'def456' @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
describe 'when the video speed is 1.0x', -> describe 'when the video speed is 1.0x', ->
beforeEach -> beforeEach ->
@video.setSpeed '1.0' @caption.currentSpeed = '1.0'
@caption.onUpdatePlayTime {}, 25.000 @caption.updatePlayTime 25.000
it 'search the caption based on time', -> it 'search the caption based on time', ->
expect(@caption.currentIndex).toEqual 2 expect(@caption.currentIndex).toEqual 2
describe 'when the video speed is not 1.0x', -> describe 'when the video speed is not 1.0x', ->
beforeEach -> beforeEach ->
@video.setSpeed '0.75' @caption.currentSpeed = '0.75'
@caption.onUpdatePlayTime {}, 25.000 @caption.updatePlayTime 25.000
it 'search the caption based on 1.0x speed', -> it 'search the caption based on 1.0x speed', ->
expect(@caption.currentIndex).toEqual 1 expect(@caption.currentIndex).toEqual 1
...@@ -217,7 +215,7 @@ describe 'VideoCaption', -> ...@@ -217,7 +215,7 @@ describe 'VideoCaption', ->
beforeEach -> beforeEach ->
@caption.currentIndex = 1 @caption.currentIndex = 1
$('.subtitles li[data-index=1]').addClass 'current' $('.subtitles li[data-index=1]').addClass 'current'
@caption.onUpdatePlayTime {}, 25.000 @caption.updatePlayTime 25.000
it 'deactivate the previous caption', -> it 'deactivate the previous caption', ->
expect($('.subtitles li[data-index=1]')).not.toHaveClass 'current' expect($('.subtitles li[data-index=1]')).not.toHaveClass 'current'
...@@ -235,16 +233,16 @@ describe 'VideoCaption', -> ...@@ -235,16 +233,16 @@ describe 'VideoCaption', ->
beforeEach -> beforeEach ->
@caption.currentIndex = 1 @caption.currentIndex = 1
$('.subtitles li[data-index=1]').addClass 'current' $('.subtitles li[data-index=1]').addClass 'current'
@caption.onUpdatePlayTime {}, 15.000 @caption.updatePlayTime 15.000
it 'does not change current subtitle', -> it 'does not change current subtitle', ->
expect($('.subtitles li[data-index=1]')).toHaveClass 'current' expect($('.subtitles li[data-index=1]')).toHaveClass 'current'
describe 'onWindowResize', -> describe 'resize', ->
beforeEach -> beforeEach ->
@caption = new VideoCaption @player, 'def456' @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
$('.subtitles li[data-index=1]').addClass 'current' $('.subtitles li[data-index=1]').addClass 'current'
@caption.onWindowResize() @caption.resize()
it 'set the height of caption container', -> it 'set the height of caption container', ->
expect(parseInt($('.subtitles').css('maxHeight'))).toEqual $('.video-wrapper').height() expect(parseInt($('.subtitles').css('maxHeight'))).toEqual $('.video-wrapper').height()
...@@ -260,7 +258,7 @@ describe 'VideoCaption', -> ...@@ -260,7 +258,7 @@ describe 'VideoCaption', ->
describe 'scrollCaption', -> describe 'scrollCaption', ->
beforeEach -> beforeEach ->
@caption = new VideoCaption @player, 'def456' @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
describe 'when frozen', -> describe 'when frozen', ->
beforeEach -> beforeEach ->
...@@ -288,18 +286,18 @@ describe 'VideoCaption', -> ...@@ -288,18 +286,18 @@ describe 'VideoCaption', ->
@caption.scrollCaption() @caption.scrollCaption()
it 'scroll to current caption', -> it 'scroll to current caption', ->
expect($.fn.scrollTo).toHaveBeenCalledWith $('.subtitles .current:first', @player.element), expect($.fn.scrollTo).toHaveBeenCalledWith $('.subtitles .current:first', @caption.element),
offset: - ($('.video-wrapper').height() / 2 - $('.subtitles .current:first').height() / 2) offset: - ($('.video-wrapper').height() / 2 - $('.subtitles .current:first').height() / 2)
describe 'seekPlayer', -> describe 'seekPlayer', ->
beforeEach -> beforeEach ->
@caption = new VideoCaption @player, 'def456' @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
@time = null @time = null
$(@player).bind 'seek', (event, time) => @time = time $(@caption).bind 'seek', (event, time) => @time = time
describe 'when the video speed is 1.0x', -> describe 'when the video speed is 1.0x', ->
beforeEach -> beforeEach ->
@video.setSpeed '1.0' @caption.currentSpeed = '1.0'
$('.subtitles li[data-start="30000"]').click() $('.subtitles li[data-start="30000"]').click()
it 'trigger seek event with the correct time', -> it 'trigger seek event with the correct time', ->
...@@ -307,7 +305,7 @@ describe 'VideoCaption', -> ...@@ -307,7 +305,7 @@ describe 'VideoCaption', ->
describe 'when the video speed is not 1.0x', -> describe 'when the video speed is not 1.0x', ->
beforeEach -> beforeEach ->
@video.setSpeed '0.75' @caption.currentSpeed = '0.75'
$('.subtitles li[data-start="30000"]').click() $('.subtitles li[data-start="30000"]').click()
it 'trigger seek event with the correct time', -> it 'trigger seek event with the correct time', ->
...@@ -315,25 +313,25 @@ describe 'VideoCaption', -> ...@@ -315,25 +313,25 @@ describe 'VideoCaption', ->
describe 'toggle', -> describe 'toggle', ->
beforeEach -> beforeEach ->
@caption = new VideoCaption @player, 'def456' @caption = new VideoCaption element: $('.video'), youtubeId: 'def456', currentSpeed: '1.0'
$('.subtitles li[data-index=1]').addClass 'current' $('.subtitles li[data-index=1]').addClass 'current'
describe 'when the caption is visible', -> describe 'when the caption is visible', ->
beforeEach -> beforeEach ->
@player.element.removeClass 'closed' @caption.element.removeClass 'closed'
@caption.toggle jQuery.Event('click') @caption.toggle jQuery.Event('click')
it 'hide the caption', -> it 'hide the caption', ->
expect(@player.element).toHaveClass 'closed' expect(@caption.element).toHaveClass 'closed'
describe 'when the caption is hidden', -> describe 'when the caption is hidden', ->
beforeEach -> beforeEach ->
@player.element.addClass 'closed' @caption.element.addClass 'closed'
@caption.toggle jQuery.Event('click') @caption.toggle jQuery.Event('click')
it 'show the caption', -> it 'show the caption', ->
expect(@player.element).not.toHaveClass 'closed' expect(@caption.element).not.toHaveClass 'closed'
it 'scroll the caption', -> it 'scroll the caption', ->
expect($.fn.scrollTo).toHaveBeenCalled() expect($.fn.scrollTo).toHaveBeenCalled()
lms/static/coffee/spec/modules/video/video_control_spec.coffee
describe 'VideoControl', -> describe 'VideoControl', ->
beforeEach -> beforeEach ->
@player = jasmine.stubVideoPlayer @ jasmine.stubVideoPlayer @
$('.video-controls').html '' $('.video-controls').html ''
describe 'constructor', -> describe 'constructor', ->
it 'render the video controls', -> it 'render the video controls', ->
new VideoControl @player new VideoControl(element: $('.video-controls'))
expect($('.video-controls').html()).toContain ''' expect($('.video-controls').html()).toContain '''
<div class="slider"></div> <div class="slider"></div>
<div> <div>
...@@ -21,14 +21,8 @@ describe 'VideoControl', -> ...@@ -21,14 +21,8 @@ describe 'VideoControl', ->
</div> </div>
''' '''
it 'bind player events', ->
control = new VideoControl @player
expect($(@player)).toHandleWith 'play', control.onPlay
expect($(@player)).toHandleWith 'pause', control.onPause
expect($(@player)).toHandleWith 'ended', control.onPause
it 'bind the playback button', -> it 'bind the playback button', ->
control = new VideoControl @player control = new VideoControl(element: $('.video-controls'))
expect($('.video_control')).toHandleWith 'click', control.togglePlayback expect($('.video_control')).toHandleWith 'click', control.togglePlayback
describe 'when on a touch based device', -> describe 'when on a touch based device', ->
...@@ -36,7 +30,7 @@ describe 'VideoControl', -> ...@@ -36,7 +30,7 @@ describe 'VideoControl', ->
spyOn(window, 'onTouchBasedDevice').andReturn true spyOn(window, 'onTouchBasedDevice').andReturn true
it 'does not add the play class to video control', -> it 'does not add the play class to video control', ->
new VideoControl @player new VideoControl(element: $('.video-controls'))
expect($('.video_control')).not.toHaveClass 'play' expect($('.video_control')).not.toHaveClass 'play'
expect($('.video_control')).not.toHaveHtml 'Play' expect($('.video_control')).not.toHaveHtml 'Play'
...@@ -46,24 +40,24 @@ describe 'VideoControl', -> ...@@ -46,24 +40,24 @@ describe 'VideoControl', ->
spyOn(window, 'onTouchBasedDevice').andReturn false spyOn(window, 'onTouchBasedDevice').andReturn false
it 'add the play class to video control', -> it 'add the play class to video control', ->
new VideoControl @player new VideoControl(element: $('.video-controls'))
expect($('.video_control')).toHaveClass 'play' expect($('.video_control')).toHaveClass 'play'
expect($('.video_control')).toHaveHtml 'Play' expect($('.video_control')).toHaveHtml 'Play'
describe 'onPlay', -> describe 'play', ->
beforeEach -> beforeEach ->
@control = new VideoControl @player @control = new VideoControl(element: $('.video-controls'))
@control.onPlay() @control.play()
it 'switch playback button to play state', -> it 'switch playback button to play state', ->
expect($('.video_control')).not.toHaveClass 'play' expect($('.video_control')).not.toHaveClass 'play'
expect($('.video_control')).toHaveClass 'pause' expect($('.video_control')).toHaveClass 'pause'
expect($('.video_control')).toHaveHtml 'Pause' expect($('.video_control')).toHaveHtml 'Pause'
describe 'onPause', -> describe 'pause', ->
beforeEach -> beforeEach ->
@control = new VideoControl @player @control = new VideoControl(element: $('.video-controls'))
@control.onPause() @control.pause()
it 'switch playback button to pause state', -> it 'switch playback button to pause state', ->
expect($('.video_control')).not.toHaveClass 'pause' expect($('.video_control')).not.toHaveClass 'pause'
...@@ -72,7 +66,7 @@ describe 'VideoControl', -> ...@@ -72,7 +66,7 @@ describe 'VideoControl', ->
describe 'togglePlayback', -> describe 'togglePlayback', ->
beforeEach -> beforeEach ->
@control = new VideoControl @player @control = new VideoControl(element: $('.video-controls'))
describe 'when the control does not have play or pause class', -> describe 'when the control does not have play or pause class', ->
beforeEach -> beforeEach ->
...@@ -80,41 +74,36 @@ describe 'VideoControl', -> ...@@ -80,41 +74,36 @@ describe 'VideoControl', ->
describe 'when the video is playing', -> describe 'when the video is playing', ->
beforeEach -> beforeEach ->
spyOn(@player, 'isPlaying').andReturn true $('.video_control').addClass('play')
spyOnEvent @player, 'pause' spyOnEvent @control, 'pause'
@control.togglePlayback jQuery.Event('click') @control.togglePlayback jQuery.Event('click')
it 'does not trigger the pause event', -> it 'does not trigger the pause event', ->
expect('pause').not.toHaveBeenTriggeredOn @player expect('pause').not.toHaveBeenTriggeredOn @control
describe 'when the video is paused', -> describe 'when the video is paused', ->
beforeEach -> beforeEach ->
spyOn(@player, 'isPlaying').andReturn false $('.video_control').addClass('pause')
spyOnEvent @player, 'play' spyOnEvent @control, 'play'
@control.togglePlayback jQuery.Event('click') @control.togglePlayback jQuery.Event('click')
it 'does not trigger the play event', -> it 'does not trigger the play event', ->
expect('play').not.toHaveBeenTriggeredOn @player expect('play').not.toHaveBeenTriggeredOn @control
for className in ['play', 'pause']
describe "when the control has #{className} class", ->
beforeEach ->
$('.video_control').addClass className
describe 'when the video is playing', -> describe 'when the video is playing', ->
beforeEach -> beforeEach ->
spyOn(@player, 'isPlaying').andReturn true spyOnEvent @control, 'pause'
spyOnEvent @player, 'pause' $('.video_control').addClass 'pause'
@control.togglePlayback jQuery.Event('click') @control.togglePlayback jQuery.Event('click')
it 'trigger the pause event', -> it 'trigger the pause event', ->
expect('pause').toHaveBeenTriggeredOn @player expect('pause').toHaveBeenTriggeredOn @control
describe 'when the video is paused', -> describe 'when the video is paused', ->
beforeEach -> beforeEach ->
spyOn(@player, 'isPlaying').andReturn false spyOnEvent @control, 'play'
spyOnEvent @player, 'play' $('.video_control').addClass 'play'
@control.togglePlayback jQuery.Event('click') @control.togglePlayback jQuery.Event('click')
it 'trigger the play event', -> it 'trigger the play event', ->
expect('play').toHaveBeenTriggeredOn @player expect('play').toHaveBeenTriggeredOn @control
lms/static/coffee/spec/modules/video/video_player_spec.coffee
...@@ -15,7 +15,7 @@ describe 'VideoPlayer', -> ...@@ -15,7 +15,7 @@ describe 'VideoPlayer', ->
describe 'always', -> describe 'always', ->
beforeEach -> beforeEach ->
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
it 'instanticate current time to zero', -> it 'instanticate current time to zero', ->
expect(@player.currentTime).toEqual 0 expect(@player.currentTime).toEqual 0
...@@ -24,16 +24,16 @@ describe 'VideoPlayer', -> ...@@ -24,16 +24,16 @@ describe 'VideoPlayer', ->
expect(@player.element).toBe '#video_example' expect(@player.element).toBe '#video_example'
it 'create video control', -> it 'create video control', ->
expect(window.VideoControl).toHaveBeenCalledWith @player expect(window.VideoControl).toHaveBeenCalledWith element: $('.video-controls', @player.element)
it 'create video caption', -> it 'create video caption', ->
expect(window.VideoCaption).toHaveBeenCalledWith @player, 'def456' expect(window.VideoCaption).toHaveBeenCalledWith element: @player.element, youtubeId: 'def456', currentSpeed: '1.0'
it 'create video speed control', -> it 'create video speed control', ->
expect(window.VideoSpeedControl).toHaveBeenCalledWith @player, ['0.75', '1.0'] expect(window.VideoSpeedControl).toHaveBeenCalledWith element: $('.secondary-controls', @player.element), speeds: ['0.75', '1.0'], currentSpeed: '1.0'
it 'create video progress slider', -> it 'create video progress slider', ->
expect(window.VideoProgressSlider).toHaveBeenCalledWith @player expect(window.VideoProgressSlider).toHaveBeenCalledWith element: $('.slider', @player.element)
it 'create Youtube player', -> it 'create Youtube player', ->
expect(YT.Player).toHaveBeenCalledWith 'example' expect(YT.Player).toHaveBeenCalledWith 'example'
...@@ -48,49 +48,48 @@ describe 'VideoPlayer', -> ...@@ -48,49 +48,48 @@ describe 'VideoPlayer', ->
onReady: @player.onReady onReady: @player.onReady
onStateChange: @player.onStateChange onStateChange: @player.onStateChange
it 'bind to seek event', -> it 'bind to video control play event', ->
expect($(@player)).toHandleWith 'seek', @player.onSeek expect($(@player.control)).toHandleWith 'play', @player.play
it 'bind to updatePlayTime event', -> it 'bind to video control pause event', ->
expect($(@player)).toHandleWith 'updatePlayTime', @player.onUpdatePlayTime expect($(@player.control)).toHandleWith 'pause', @player.pause
it 'bidn to speedChange event', -> it 'bind to video caption seek event', ->
expect($(@player)).toHandleWith 'speedChange', @player.onSpeedChange expect($(@player.caption)).toHandleWith 'seek', @player.onSeek
it 'bind to play event', -> it 'bind to video speed control speedChange event', ->
expect($(@player)).toHandleWith 'play', @player.onPlay expect($(@player.speedControl)).toHandleWith 'speedChange', @player.onSpeedChange
it 'bind to paused event', -> it 'bind to video progress slider seek event', ->
expect($(@player)).toHandleWith 'pause', @player.onPause expect($(@player.progressSlider)).toHandleWith 'seek', @player.onSeek
it 'bind to ended event', -> it 'bind to video volume control volumeChange event', ->
expect($(@player)).toHandleWith 'ended', @player.onPause expect($(@player.volumeControl)).toHandleWith 'volumeChange', @player.onVolumeChange
it 'bind to key press', -> it 'bind to key press', ->
expect($(document)).toHandleWith 'keyup', @player.bindExitFullScreen expect($(document)).toHandleWith 'keyup', @player.bindExitFullScreen
it 'bind to fullscreen switching button', -> it 'bind to fullscreen switching button', ->
console.debug $('.add-fullscreen')
expect($('.add-fullscreen')).toHandleWith 'click', @player.toggleFullScreen expect($('.add-fullscreen')).toHandleWith 'click', @player.toggleFullScreen
describe 'when not on a touch based device', -> describe 'when not on a touch based device', ->
beforeEach -> beforeEach ->
spyOn(window, 'onTouchBasedDevice').andReturn false spyOn(window, 'onTouchBasedDevice').andReturn false
$('.add-fullscreen, .hide-subtitles').removeData 'qtip' $('.add-fullscreen, .hide-subtitles').removeData 'qtip'
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
it 'add the tooltip to fullscreen and subtitle button', -> it 'add the tooltip to fullscreen and subtitle button', ->
expect($('.add-fullscreen')).toHaveData 'qtip' expect($('.add-fullscreen')).toHaveData 'qtip'
expect($('.hide-subtitles')).toHaveData 'qtip' expect($('.hide-subtitles')).toHaveData 'qtip'
it 'create video volume control', -> it 'create video volume control', ->
expect(window.VideoVolumeControl).toHaveBeenCalledWith @player expect(window.VideoVolumeControl).toHaveBeenCalledWith element: $('.secondary-controls', @player.element)
describe 'when on a touch based device', -> describe 'when on a touch based device', ->
beforeEach -> beforeEach ->
spyOn(window, 'onTouchBasedDevice').andReturn true spyOn(window, 'onTouchBasedDevice').andReturn true
$('.add-fullscreen, .hide-subtitles').removeData 'qtip' $('.add-fullscreen, .hide-subtitles').removeData 'qtip'
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
it 'does not add the tooltip to fullscreen and subtitle button', -> it 'does not add the tooltip to fullscreen and subtitle button', ->
expect($('.add-fullscreen')).not.toHaveData 'qtip' expect($('.add-fullscreen')).not.toHaveData 'qtip'
...@@ -107,12 +106,6 @@ describe 'VideoPlayer', -> ...@@ -107,12 +106,6 @@ describe 'VideoPlayer', ->
spyOnEvent @player, 'updatePlayTime' spyOnEvent @player, 'updatePlayTime'
@player.onReady() @player.onReady()
it 'reset the progress to zero', ->
expect('updatePlayTime').toHaveBeenTriggeredOn @player
it 'trigger ready event on the player', ->
expect('ready').toHaveBeenTriggeredOn @player
describe 'when not on a touch based device', -> describe 'when not on a touch based device', ->
beforeEach -> beforeEach ->
spyOn(window, 'onTouchBasedDevice').andReturn false spyOn(window, 'onTouchBasedDevice').andReturn false
...@@ -133,49 +126,31 @@ describe 'VideoPlayer', -> ...@@ -133,49 +126,31 @@ describe 'VideoPlayer', ->
describe 'onStateChange', -> describe 'onStateChange', ->
beforeEach -> beforeEach ->
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
describe 'when the video is playing', ->
beforeEach ->
spyOnEvent @player, 'play'
@player.onStateChange data: YT.PlayerState.PLAYING
it 'trigger play event', ->
expect('play').toHaveBeenTriggeredOn @player
describe 'when the video is paused', ->
beforeEach ->
spyOnEvent @player, 'pause'
@player.onStateChange data: YT.PlayerState.PAUSED
it 'trigger pause event', ->
expect('pause').toHaveBeenTriggeredOn @player
describe 'when the video is unstarted', -> describe 'when the video is unstarted', ->
beforeEach -> beforeEach ->
spyOnEvent @player, 'pause' spyOn @player.control, 'pause'
@player.caption.pause = jasmine.createSpy('VideoCaption.pause')
@player.onStateChange data: YT.PlayerState.UNSTARTED @player.onStateChange data: YT.PlayerState.UNSTARTED
it 'trigger pause event', -> it 'pause the video control', ->
expect('pause').toHaveBeenTriggeredOn @player expect(@player.control.pause).toHaveBeenCalled()
describe 'when the video is ended', -> it 'pause the video caption', ->
beforeEach -> expect(@player.caption.pause).toHaveBeenCalled()
spyOnEvent @player, 'ended'
@player.onStateChange data: YT.PlayerState.ENDED
it 'trigger ended event', -> describe 'when the video is playing', ->
expect('ended').toHaveBeenTriggeredOn @player
describe 'onPlay', ->
beforeEach -> beforeEach ->
@player = new VideoPlayer @video
@anotherPlayer = jasmine.createSpyObj 'AnotherPlayer', ['pauseVideo'] @anotherPlayer = jasmine.createSpyObj 'AnotherPlayer', ['pauseVideo']
window.player = @anotherPlayer window.player = @anotherPlayer
spyOn Logger, 'log' spyOn Logger, 'log'
spyOn(window, 'setInterval').andReturn 100 spyOn(window, 'setInterval').andReturn 100
spyOn @player.control, 'play'
@player.caption.play = jasmine.createSpy('VideoCaption.play')
@player.progressSlider.play = jasmine.createSpy('VideoProgressSlider.play')
@player.player.getVideoEmbedCode.andReturn 'embedCode' @player.player.getVideoEmbedCode.andReturn 'embedCode'
@player.onPlay() @player.onStateChange data: YT.PlayerState.PLAYING
it 'log the play_video event', -> it 'log the play_video event', ->
expect(Logger.log).toHaveBeenCalledWith 'play_video', id: @player.currentTime, code: 'embedCode' expect(Logger.log).toHaveBeenCalledWith 'play_video', id: @player.currentTime, code: 'embedCode'
...@@ -190,15 +165,26 @@ describe 'VideoPlayer', -> ...@@ -190,15 +165,26 @@ describe 'VideoPlayer', ->
expect(window.setInterval).toHaveBeenCalledWith @player.update, 200 expect(window.setInterval).toHaveBeenCalledWith @player.update, 200
expect(@player.player.interval).toEqual 100 expect(@player.player.interval).toEqual 100
describe 'onPause', -> it 'play the video control', ->
expect(@player.control.play).toHaveBeenCalled()
it 'play the video caption', ->
expect(@player.caption.play).toHaveBeenCalled()
it 'play the video progress slider', ->
expect(@player.progressSlider.play).toHaveBeenCalled()
describe 'when the video is paused', ->
beforeEach -> beforeEach ->
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
window.player = @player.player window.player = @player.player
spyOn Logger, 'log' spyOn Logger, 'log'
spyOn window, 'clearInterval' spyOn window, 'clearInterval'
spyOn @player.control, 'pause'
@player.caption.pause = jasmine.createSpy('VideoCaption.pause')
@player.player.interval = 100 @player.player.interval = 100
@player.player.getVideoEmbedCode.andReturn 'embedCode' @player.player.getVideoEmbedCode.andReturn 'embedCode'
@player.onPause() @player.onStateChange data: YT.PlayerState.PAUSED
it 'log the pause_video event', -> it 'log the pause_video event', ->
expect(Logger.log).toHaveBeenCalledWith 'pause_video', id: @player.currentTime, code: 'embedCode' expect(Logger.log).toHaveBeenCalledWith 'pause_video', id: @player.currentTime, code: 'embedCode'
...@@ -210,16 +196,38 @@ describe 'VideoPlayer', -> ...@@ -210,16 +196,38 @@ describe 'VideoPlayer', ->
expect(window.clearInterval).toHaveBeenCalledWith 100 expect(window.clearInterval).toHaveBeenCalledWith 100
expect(@player.player.interval).toBeNull() expect(@player.player.interval).toBeNull()
it 'pause the video control', ->
expect(@player.control.pause).toHaveBeenCalled()
it 'pause the video caption', ->
expect(@player.caption.pause).toHaveBeenCalled()
describe 'when the video is ended', ->
beforeEach ->
spyOn @player.control, 'pause'
@player.caption.pause = jasmine.createSpy('VideoCaption.pause')
@player.onStateChange data: YT.PlayerState.ENDED
it 'pause the video control', ->
expect(@player.control.pause).toHaveBeenCalled()
it 'pause the video caption', ->
expect(@player.caption.pause).toHaveBeenCalled()
describe 'onSeek', -> describe 'onSeek', ->
beforeEach -> beforeEach ->
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
spyOn window, 'clearInterval' spyOn window, 'clearInterval'
@player.player.interval = 100 @player.player.interval = 100
spyOn @player, 'updatePlayTime'
@player.onSeek {}, 60 @player.onSeek {}, 60
it 'seek the player', -> it 'seek the player', ->
expect(@player.player.seekTo).toHaveBeenCalledWith 60, true expect(@player.player.seekTo).toHaveBeenCalledWith 60, true
it 'call updatePlayTime on player', ->
expect(@player.updatePlayTime).toHaveBeenCalledWith 60
describe 'when the player is playing', -> describe 'when the player is playing', ->
beforeEach -> beforeEach ->
@player.player.getPlayerState.andReturn YT.PlayerState.PLAYING @player.player.getPlayerState.andReturn YT.PlayerState.PLAYING
...@@ -231,19 +239,16 @@ describe 'VideoPlayer', -> ...@@ -231,19 +239,16 @@ describe 'VideoPlayer', ->
describe 'when the player is not playing', -> describe 'when the player is not playing', ->
beforeEach -> beforeEach ->
@player.player.getPlayerState.andReturn YT.PlayerState.PAUSED @player.player.getPlayerState.andReturn YT.PlayerState.PAUSED
spyOnEvent @player, 'updatePlayTime'
@player.onSeek {}, 60 @player.onSeek {}, 60
it 'set the current time', -> it 'set the current time', ->
expect(@player.currentTime).toEqual 60 expect(@player.currentTime).toEqual 60
it 'trigger updatePlayTime event', ->
expect('updatePlayTime').toHaveBeenTriggeredOn @player
describe 'onSpeedChange', -> describe 'onSpeedChange', ->
beforeEach -> beforeEach ->
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
@player.currentTime = 60 @player.currentTime = 60
spyOn @player, 'updatePlayTime'
spyOn(@video, 'setSpeed').andCallThrough() spyOn(@video, 'setSpeed').andCallThrough()
describe 'always', -> describe 'always', ->
...@@ -256,34 +261,43 @@ describe 'VideoPlayer', -> ...@@ -256,34 +261,43 @@ describe 'VideoPlayer', ->
it 'set video speed to the new speed', -> it 'set video speed to the new speed', ->
expect(@video.setSpeed).toHaveBeenCalledWith '0.75' expect(@video.setSpeed).toHaveBeenCalledWith '0.75'
it 'tell video caption that the speed has changed', ->
expect(@player.caption.currentSpeed).toEqual '0.75'
describe 'when the video is playing', -> describe 'when the video is playing', ->
beforeEach -> beforeEach ->
@player.player.getPlayerState.andReturn YT.PlayerState.PLAYING @player.player.getPlayerState.andReturn YT.PlayerState.PLAYING
spyOnEvent @player, 'updatePlayTime'
@player.onSpeedChange {}, '0.75' @player.onSpeedChange {}, '0.75'
it 'load the video', -> it 'load the video', ->
expect(@player.player.loadVideoById).toHaveBeenCalledWith 'abc123', '80.000' expect(@player.player.loadVideoById).toHaveBeenCalledWith 'abc123', '80.000'
it 'trigger updatePlayTime event', -> it 'trigger updatePlayTime event', ->
expect('updatePlayTime').toHaveBeenTriggeredOn @player expect(@player.updatePlayTime).toHaveBeenCalledWith '80.000'
describe 'when the video is not playing', -> describe 'when the video is not playing', ->
beforeEach -> beforeEach ->
@player.player.getPlayerState.andReturn YT.PlayerState.PAUSED @player.player.getPlayerState.andReturn YT.PlayerState.PAUSED
spyOnEvent @player, 'updatePlayTime'
@player.onSpeedChange {}, '0.75' @player.onSpeedChange {}, '0.75'
it 'cue the video', -> it 'cue the video', ->
expect(@player.player.cueVideoById).toHaveBeenCalledWith 'abc123', '80.000' expect(@player.player.cueVideoById).toHaveBeenCalledWith 'abc123', '80.000'
it 'trigger updatePlayTime event', -> it 'trigger updatePlayTime event', ->
expect('updatePlayTime').toHaveBeenTriggeredOn @player expect(@player.updatePlayTime).toHaveBeenCalledWith '80.000'
describe 'onVolumeChange', ->
beforeEach ->
@player = new VideoPlayer video: @video
@player.onVolumeChange undefined, 60
it 'set the volume on player', ->
expect(@player.player.setVolume).toHaveBeenCalledWith 60
describe 'update', -> describe 'update', ->
beforeEach -> beforeEach ->
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
spyOnEvent @player, 'updatePlayTime' spyOn @player, 'updatePlayTime'
describe 'when the current time is unavailable from the player', -> describe 'when the current time is unavailable from the player', ->
beforeEach -> beforeEach ->
...@@ -291,7 +305,7 @@ describe 'VideoPlayer', -> ...@@ -291,7 +305,7 @@ describe 'VideoPlayer', ->
@player.update() @player.update()
it 'does not trigger updatePlayTime event', -> it 'does not trigger updatePlayTime event', ->
expect('updatePlayTime').not.toHaveBeenTriggeredOn @player expect(@player.updatePlayTime).not.toHaveBeenCalled()
describe 'when the current time is available from the player', -> describe 'when the current time is available from the player', ->
beforeEach -> beforeEach ->
...@@ -299,25 +313,33 @@ describe 'VideoPlayer', -> ...@@ -299,25 +313,33 @@ describe 'VideoPlayer', ->
@player.update() @player.update()
it 'trigger updatePlayTime event', -> it 'trigger updatePlayTime event', ->
expect('updatePlayTime').toHaveBeenTriggeredOn @player expect(@player.updatePlayTime).toHaveBeenCalledWith(60)
describe 'onUpdatePlaytime', -> describe 'updatePlayTime', ->
beforeEach -> beforeEach ->
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
spyOn(@video, 'getDuration').andReturn 1800 spyOn(@video, 'getDuration').andReturn 1800
@player.onUpdatePlayTime {}, 60 @player.caption.updatePlayTime = jasmine.createSpy('VideoCaption.updatePlayTime')
@player.progressSlider.updatePlayTime = jasmine.createSpy('VideoProgressSlider.updatePlayTime')
@player.updatePlayTime 60
it 'update the video playback time', -> it 'update the video playback time', ->
expect($('.vidtime')).toHaveHtml '1:00 / 30:00' expect($('.vidtime')).toHaveHtml '1:00 / 30:00'
it 'update the playback time on caption', ->
expect(@player.caption.updatePlayTime).toHaveBeenCalledWith 60
it 'update the playback time on progress slider', ->
expect(@player.progressSlider.updatePlayTime).toHaveBeenCalledWith 60, 1800
describe 'toggleFullScreen', -> describe 'toggleFullScreen', ->
beforeEach -> beforeEach ->
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
@player.caption.resize = jasmine.createSpy('VideoCaption.resize')
describe 'when the video player is not full screen', -> describe 'when the video player is not full screen', ->
beforeEach -> beforeEach ->
@player.element.removeClass 'fullscreen' @player.element.removeClass 'fullscreen'
spyOnEvent @player, 'resize'
@player.toggleFullScreen(jQuery.Event("click")) @player.toggleFullScreen(jQuery.Event("click"))
it 'replace the full screen button tooltip', -> it 'replace the full screen button tooltip', ->
...@@ -329,13 +351,12 @@ describe 'VideoPlayer', -> ...@@ -329,13 +351,12 @@ describe 'VideoPlayer', ->
it 'add the fullscreen class', -> it 'add the fullscreen class', ->
expect(@player.element).toHaveClass 'fullscreen' expect(@player.element).toHaveClass 'fullscreen'
it 'trigger resize event', -> it 'tell VideoCaption to resize', ->
expect('resize').toHaveBeenTriggeredOn @player expect(@player.caption.resize).toHaveBeenCalled()
describe 'when the video player already full screen', -> describe 'when the video player already full screen', ->
beforeEach -> beforeEach ->
@player.element.addClass 'fullscreen' @player.element.addClass 'fullscreen'
spyOnEvent @player, 'resize'
@player.toggleFullScreen(jQuery.Event("click")) @player.toggleFullScreen(jQuery.Event("click"))
it 'replace the full screen button tooltip', -> it 'replace the full screen button tooltip', ->
...@@ -347,12 +368,12 @@ describe 'VideoPlayer', -> ...@@ -347,12 +368,12 @@ describe 'VideoPlayer', ->
it 'remove the fullscreen class', -> it 'remove the fullscreen class', ->
expect(@player.element).not.toHaveClass 'fullscreen' expect(@player.element).not.toHaveClass 'fullscreen'
it 'trigger resize event', -> it 'tell VideoCaption to resize', ->
expect('resize').toHaveBeenTriggeredOn @player expect(@player.caption.resize).toHaveBeenCalled()
describe 'play', -> describe 'play', ->
beforeEach -> beforeEach ->
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
describe 'when the player is not ready', -> describe 'when the player is not ready', ->
beforeEach -> beforeEach ->
...@@ -372,7 +393,7 @@ describe 'VideoPlayer', -> ...@@ -372,7 +393,7 @@ describe 'VideoPlayer', ->
describe 'isPlaying', -> describe 'isPlaying', ->
beforeEach -> beforeEach ->
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
describe 'when the video is playing', -> describe 'when the video is playing', ->
beforeEach -> beforeEach ->
...@@ -390,7 +411,7 @@ describe 'VideoPlayer', -> ...@@ -390,7 +411,7 @@ describe 'VideoPlayer', ->
describe 'pause', -> describe 'pause', ->
beforeEach -> beforeEach ->
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
@player.pause() @player.pause()
it 'delegate to the Youtube player', -> it 'delegate to the Youtube player', ->
...@@ -398,7 +419,7 @@ describe 'VideoPlayer', -> ...@@ -398,7 +419,7 @@ describe 'VideoPlayer', ->
describe 'duration', -> describe 'duration', ->
beforeEach -> beforeEach ->
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
spyOn @video, 'getDuration' spyOn @video, 'getDuration'
@player.duration() @player.duration()
...@@ -407,22 +428,8 @@ describe 'VideoPlayer', -> ...@@ -407,22 +428,8 @@ describe 'VideoPlayer', ->
describe 'currentSpeed', -> describe 'currentSpeed', ->
beforeEach -> beforeEach ->
@player = new VideoPlayer @video @player = new VideoPlayer video: @video
@video.speed = '3.0' @video.speed = '3.0'
it 'delegate to the video', -> it 'delegate to the video', ->
expect(@player.currentSpeed()).toEqual '3.0' expect(@player.currentSpeed()).toEqual '3.0'
describe 'volume', ->
beforeEach ->
@player = new VideoPlayer @video
@player.player.getVolume.andReturn 42
describe 'without value', ->
it 'return current volume', ->
expect(@player.volume()).toEqual 42
describe 'with value', ->
it 'set player volume', ->
@player.volume(60)
expect(@player.player.setVolume).toHaveBeenCalledWith(60)
lms/static/coffee/spec/modules/video/video_progress_slider_spec.coffee
describe 'VideoProgressSlider', -> describe 'VideoProgressSlider', ->
beforeEach -> beforeEach ->
@player = jasmine.stubVideoPlayer @ jasmine.stubVideoPlayer @
describe 'constructor', -> describe 'constructor', ->
describe 'on a non-touch based device', -> describe 'on a non-touch based device', ->
beforeEach -> beforeEach ->
spyOn($.fn, 'slider').andCallThrough() spyOn($.fn, 'slider').andCallThrough()
spyOn(window, 'onTouchBasedDevice').andReturn false spyOn(window, 'onTouchBasedDevice').andReturn false
@slider = new VideoProgressSlider @player @slider = new VideoProgressSlider element: $('.slider')
it 'build the slider', -> it 'build the slider', ->
expect(@slider.slider).toBe '.slider' expect(@slider.slider).toBe '.slider'
...@@ -18,7 +18,7 @@ describe 'VideoProgressSlider', -> ...@@ -18,7 +18,7 @@ describe 'VideoProgressSlider', ->
stop: @slider.onStop stop: @slider.onStop
it 'build the seek handle', -> it 'build the seek handle', ->
expect(@slider.handle).toBe '.slider .ui-slider-handle' expect(@slider.handle).toBe '.ui-slider-handle'
expect($.fn.qtip).toHaveBeenCalledWith expect($.fn.qtip).toHaveBeenCalledWith
content: "0:00" content: "0:00"
position: position:
...@@ -31,41 +31,24 @@ describe 'VideoProgressSlider', -> ...@@ -31,41 +31,24 @@ describe 'VideoProgressSlider', ->
classes: 'ui-tooltip-slider' classes: 'ui-tooltip-slider'
widget: true widget: true
it 'bind player events', ->
expect($(@player)).toHandleWith 'updatePlayTime', @slider.onUpdatePlayTime
expect($(@player)).toHandleWith 'ready', @slider.onReady
expect($(@player)).toHandleWith 'play', @slider.onPlay
describe 'on a touch-based device', -> describe 'on a touch-based device', ->
beforeEach -> beforeEach ->
spyOn($.fn, 'slider').andCallThrough() spyOn($.fn, 'slider').andCallThrough()
spyOn(window, 'onTouchBasedDevice').andReturn true spyOn(window, 'onTouchBasedDevice').andReturn true
@slider = new VideoProgressSlider @player @slider = new VideoProgressSlider element: $('.slider')
it 'does not build the slider', -> it 'does not build the slider', ->
expect(@slider.slider).toBeUndefined expect(@slider.slider).toBeUndefined
expect($.fn.slider).not.toHaveBeenCalled() expect($.fn.slider).not.toHaveBeenCalled()
it 'bind player events', -> describe 'play', ->
expect($(@player)).toHandleWith 'updatePlayTime', @slider.onUpdatePlayTime
describe 'onReady', ->
beforeEach ->
spyOn(@player, 'duration').andReturn 120
@slider = new VideoProgressSlider @player
@slider.onReady()
it 'set the max value to the length of video', ->
expect(@slider.slider.slider('option', 'max')).toEqual 120
describe 'onPlay', ->
beforeEach -> beforeEach ->
@slider = new VideoProgressSlider @player @slider = new VideoProgressSlider element: $('.slider')
spyOn($.fn, 'slider').andCallThrough() spyOn($.fn, 'slider').andCallThrough()
describe 'when the slider was already built', -> describe 'when the slider was already built', ->
beforeEach -> beforeEach ->
@slider.onPlay() @slider.play()
it 'does not build the slider', -> it 'does not build the slider', ->
expect($.fn.slider).not.toHaveBeenCalled expect($.fn.slider).not.toHaveBeenCalled
...@@ -73,7 +56,7 @@ describe 'VideoProgressSlider', -> ...@@ -73,7 +56,7 @@ describe 'VideoProgressSlider', ->
describe 'when the slider was not already built', -> describe 'when the slider was not already built', ->
beforeEach -> beforeEach ->
@slider.slider = null @slider.slider = null
@slider.onPlay() @slider.play()
it 'build the slider', -> it 'build the slider', ->
expect(@slider.slider).toBe '.slider' expect(@slider.slider).toBe '.slider'
...@@ -97,16 +80,15 @@ describe 'VideoProgressSlider', -> ...@@ -97,16 +80,15 @@ describe 'VideoProgressSlider', ->
classes: 'ui-tooltip-slider' classes: 'ui-tooltip-slider'
widget: true widget: true
describe 'onUpdatePlayTime', -> describe 'updatePlayTime', ->
beforeEach -> beforeEach ->
@slider = new VideoProgressSlider @player @slider = new VideoProgressSlider element: $('.slider')
spyOn(@player, 'duration').andReturn 120
spyOn($.fn, 'slider').andCallThrough() spyOn($.fn, 'slider').andCallThrough()
describe 'when frozen', -> describe 'when frozen', ->
beforeEach -> beforeEach ->
@slider.frozen = true @slider.frozen = true
@slider.onUpdatePlayTime {}, 20 @slider.updatePlayTime 20, 120
it 'does not update the slider', -> it 'does not update the slider', ->
expect($.fn.slider).not.toHaveBeenCalled() expect($.fn.slider).not.toHaveBeenCalled()
...@@ -114,7 +96,7 @@ describe 'VideoProgressSlider', -> ...@@ -114,7 +96,7 @@ describe 'VideoProgressSlider', ->
describe 'when not frozen', -> describe 'when not frozen', ->
beforeEach -> beforeEach ->
@slider.frozen = false @slider.frozen = false
@slider.onUpdatePlayTime {}, 20 @slider.updatePlayTime 20, 120
it 'update the max value of the slider', -> it 'update the max value of the slider', ->
expect($.fn.slider).toHaveBeenCalledWith 'option', 'max', 120 expect($.fn.slider).toHaveBeenCalledWith 'option', 'max', 120
...@@ -124,10 +106,10 @@ describe 'VideoProgressSlider', -> ...@@ -124,10 +106,10 @@ describe 'VideoProgressSlider', ->
describe 'onSlide', -> describe 'onSlide', ->
beforeEach -> beforeEach ->
@slider = new VideoProgressSlider @player @slider = new VideoProgressSlider element: $('.slider')
@time = null @time = null
$(@player).bind 'seek', (event, time) => @time = time $(@slider).bind 'seek', (event, time) => @time = time
spyOnEvent @player, 'seek' spyOnEvent @slider, 'seek'
@slider.onSlide {}, value: 20 @slider.onSlide {}, value: 20
it 'freeze the slider', -> it 'freeze the slider', ->
...@@ -137,12 +119,12 @@ describe 'VideoProgressSlider', -> ...@@ -137,12 +119,12 @@ describe 'VideoProgressSlider', ->
expect($.fn.qtip).toHaveBeenCalled() expect($.fn.qtip).toHaveBeenCalled()
it 'trigger seek event', -> it 'trigger seek event', ->
expect('seek').toHaveBeenTriggeredOn @player expect('seek').toHaveBeenTriggeredOn @slider
expect(@time).toEqual 20 expect(@time).toEqual 20
describe 'onChange', -> describe 'onChange', ->
beforeEach -> beforeEach ->
@slider = new VideoProgressSlider @player @slider = new VideoProgressSlider element: $('.slider')
@slider.onChange {}, value: 20 @slider.onChange {}, value: 20
it 'update the tooltip', -> it 'update the tooltip', ->
...@@ -150,10 +132,10 @@ describe 'VideoProgressSlider', -> ...@@ -150,10 +132,10 @@ describe 'VideoProgressSlider', ->
describe 'onStop', -> describe 'onStop', ->
beforeEach -> beforeEach ->
@slider = new VideoProgressSlider @player @slider = new VideoProgressSlider element: $('.slider')
@time = null @time = null
$(@player).bind 'seek', (event, time) => @time = time $(@slider).bind 'seek', (event, time) => @time = time
spyOnEvent @player, 'seek' spyOnEvent @slider, 'seek'
spyOn(window, 'setTimeout') spyOn(window, 'setTimeout')
@slider.onStop {}, value: 20 @slider.onStop {}, value: 20
...@@ -161,7 +143,7 @@ describe 'VideoProgressSlider', -> ...@@ -161,7 +143,7 @@ describe 'VideoProgressSlider', ->
expect(@slider.frozen).toBeTruthy() expect(@slider.frozen).toBeTruthy()
it 'trigger seek event', -> it 'trigger seek event', ->
expect('seek').toHaveBeenTriggeredOn @player expect('seek').toHaveBeenTriggeredOn @slider
expect(@time).toEqual 20 expect(@time).toEqual 20
it 'set timeout to unfreeze the slider', -> it 'set timeout to unfreeze the slider', ->
...@@ -171,7 +153,7 @@ describe 'VideoProgressSlider', -> ...@@ -171,7 +153,7 @@ describe 'VideoProgressSlider', ->
describe 'updateTooltip', -> describe 'updateTooltip', ->
beforeEach -> beforeEach ->
@slider = new VideoProgressSlider @player @slider = new VideoProgressSlider element: $('.slider')
@slider.updateTooltip 90 @slider.updateTooltip 90
it 'set the tooltip value', -> it 'set the tooltip value', ->
......
lms/static/coffee/spec/modules/video/video_speed_control_spec.coffee
describe 'VideoSpeedControl', -> describe 'VideoSpeedControl', ->
beforeEach -> beforeEach ->
@player = jasmine.stubVideoPlayer @ jasmine.stubVideoPlayer @
$('.speeds').remove() $('.speeds').remove()
describe 'constructor', -> describe 'constructor', ->
describe 'always', -> describe 'always', ->
beforeEach -> beforeEach ->
@speedControl = new VideoSpeedControl @player, @video.speeds @speedControl = new VideoSpeedControl element: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
it 'add the video speed control to player', -> it 'add the video speed control to player', ->
expect($('.secondary-controls').html()).toContain ''' expect($('.secondary-controls').html()).toContain '''
...@@ -19,9 +19,6 @@ describe 'VideoSpeedControl', -> ...@@ -19,9 +19,6 @@ describe 'VideoSpeedControl', ->
</div> </div>
''' '''
it 'bind to player speedChange event', ->
expect($(@player)).toHandleWith 'speedChange', @speedControl.onSpeedChange
it 'bind to change video speed link', -> it 'bind to change video speed link', ->
expect($('.video_speeds a')).toHandleWith 'click', @speedControl.changeVideoSpeed expect($('.video_speeds a')).toHandleWith 'click', @speedControl.changeVideoSpeed
...@@ -29,7 +26,7 @@ describe 'VideoSpeedControl', -> ...@@ -29,7 +26,7 @@ describe 'VideoSpeedControl', ->
beforeEach -> beforeEach ->
spyOn(window, 'onTouchBasedDevice').andReturn true spyOn(window, 'onTouchBasedDevice').andReturn true
$('.speeds').removeClass 'open' $('.speeds').removeClass 'open'
@speedControl = new VideoSpeedControl @player, @video.speeds @speedControl = new VideoSpeedControl element: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
it 'open the speed toggle on click', -> it 'open the speed toggle on click', ->
$('.speeds').click() $('.speeds').click()
...@@ -41,7 +38,7 @@ describe 'VideoSpeedControl', -> ...@@ -41,7 +38,7 @@ describe 'VideoSpeedControl', ->
beforeEach -> beforeEach ->
spyOn(window, 'onTouchBasedDevice').andReturn false spyOn(window, 'onTouchBasedDevice').andReturn false
$('.speeds').removeClass 'open' $('.speeds').removeClass 'open'
@speedControl = new VideoSpeedControl @player, @video.speeds @speedControl = new VideoSpeedControl element: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
it 'open the speed toggle on hover', -> it 'open the speed toggle on hover', ->
$('.speeds').mouseenter() $('.speeds').mouseenter()
...@@ -59,31 +56,31 @@ describe 'VideoSpeedControl', -> ...@@ -59,31 +56,31 @@ describe 'VideoSpeedControl', ->
describe 'changeVideoSpeed', -> describe 'changeVideoSpeed', ->
beforeEach -> beforeEach ->
@speedControl = new VideoSpeedControl @player, @video.speeds @speedControl = new VideoSpeedControl element: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
@video.setSpeed '1.0' @video.setSpeed '1.0'
describe 'when new speed is the same', -> describe 'when new speed is the same', ->
beforeEach -> beforeEach ->
spyOnEvent @player, 'speedChange' spyOnEvent @speedControl, 'speedChange'
$('li[data-speed="1.0"] a').click() $('li[data-speed="1.0"] a').click()
it 'does not trigger speedChange event', -> it 'does not trigger speedChange event', ->
expect('speedChange').not.toHaveBeenTriggeredOn @player expect('speedChange').not.toHaveBeenTriggeredOn @speedControl
describe 'when new speed is not the same', -> describe 'when new speed is not the same', ->
beforeEach -> beforeEach ->
@newSpeed = null @newSpeed = null
$(@player).bind 'speedChange', (event, newSpeed) => @newSpeed = newSpeed $(@speedControl).bind 'speedChange', (event, newSpeed) => @newSpeed = newSpeed
spyOnEvent @player, 'speedChange' spyOnEvent @speedControl, 'speedChange'
$('li[data-speed="0.75"] a').click() $('li[data-speed="0.75"] a').click()
it 'trigger player speedChange event', -> it 'trigger speedChange event', ->
expect('speedChange').toHaveBeenTriggeredOn @player expect('speedChange').toHaveBeenTriggeredOn @speedControl
expect(@newSpeed).toEqual 0.75 expect(@newSpeed).toEqual 0.75
describe 'onSpeedChange', -> describe 'onSpeedChange', ->
beforeEach -> beforeEach ->
@speedControl = new VideoSpeedControl @player, @video.speeds @speedControl = new VideoSpeedControl element: $('.secondary-controls'), speeds: @video.speeds, currentSpeed: '1.0'
$('li[data-speed="1.0"] a').addClass 'active' $('li[data-speed="1.0"] a').addClass 'active'
@speedControl.setSpeed '0.75' @speedControl.setSpeed '0.75'
......
lms/static/coffee/spec/modules/video/video_volume_control_spec.coffee
describe 'VideoVolumeControl', -> describe 'VideoVolumeControl', ->
beforeEach -> beforeEach ->
@player = jasmine.stubVideoPlayer @ jasmine.stubVideoPlayer @
$('.volume').remove() $('.volume').remove()
describe 'constructor', -> describe 'constructor', ->
beforeEach -> beforeEach ->
spyOn($.fn, 'slider') spyOn($.fn, 'slider')
@volumeControl = new VideoVolumeControl @player @volumeControl = new VideoVolumeControl element: $('.secondary-controls')
it 'initialize previousVolume to 100', -> it 'initialize currentVolume to 100', ->
expect(@volumeControl.previousVolume).toEqual 100 expect(@volumeControl.currentVolume).toEqual 100
it 'render the volume control', -> it 'render the volume control', ->
expect($('.secondary-controls').html()).toContain """ expect($('.secondary-controls').html()).toContain """
...@@ -32,7 +32,6 @@ describe 'VideoVolumeControl', -> ...@@ -32,7 +32,6 @@ describe 'VideoVolumeControl', ->
slide: @volumeControl.onChange slide: @volumeControl.onChange
it 'bind the volume control', -> it 'bind the volume control', ->
expect($(@player)).toHandleWith 'ready', @volumeControl.onReady
expect($('.volume>a')).toHandleWith 'click', @volumeControl.toggleMute expect($('.volume>a')).toHandleWith 'click', @volumeControl.toggleMute
expect($('.volume')).not.toHaveClass 'open' expect($('.volume')).not.toHaveClass 'open'
...@@ -41,27 +40,19 @@ describe 'VideoVolumeControl', -> ...@@ -41,27 +40,19 @@ describe 'VideoVolumeControl', ->
$('.volume').mouseleave() $('.volume').mouseleave()
expect($('.volume')).not.toHaveClass 'open' expect($('.volume')).not.toHaveClass 'open'
describe 'onReady', ->
beforeEach ->
@volumeControl = new VideoVolumeControl @player
spyOn $.fn, 'slider'
spyOn(@player, 'volume').andReturn 60
@volumeControl.onReady()
it 'set the max value of the slider', ->
expect($.fn.slider).toHaveBeenCalledWith 'option', 'max', 60
describe 'onChange', -> describe 'onChange', ->
beforeEach -> beforeEach ->
spyOn @player, 'volume' spyOnEvent @volumeControl, 'volumeChange'
@volumeControl = new VideoVolumeControl @player @newVolume = undefined
@volumeControl = new VideoVolumeControl element: $('.secondary-controls')
$(@volumeControl).bind 'volumeChange', (event, volume) => @newVolume = volume
describe 'when the new volume is more than 0', -> describe 'when the new volume is more than 0', ->
beforeEach -> beforeEach ->
@volumeControl.onChange undefined, value: 60 @volumeControl.onChange undefined, value: 60
it 'set the player volume', -> it 'set the player volume', ->
expect(@player.volume).toHaveBeenCalledWith 60 expect(@newVolume).toEqual 60
it 'remote muted class', -> it 'remote muted class', ->
expect($('.volume')).not.toHaveClass 'muted' expect($('.volume')).not.toHaveClass 'muted'
...@@ -71,32 +62,33 @@ describe 'VideoVolumeControl', -> ...@@ -71,32 +62,33 @@ describe 'VideoVolumeControl', ->
@volumeControl.onChange undefined, value: 0 @volumeControl.onChange undefined, value: 0
it 'set the player volume', -> it 'set the player volume', ->
expect(@player.volume).toHaveBeenCalledWith 0 expect(@newVolume).toEqual 0
it 'add muted class', -> it 'add muted class', ->
expect($('.volume')).toHaveClass 'muted' expect($('.volume')).toHaveClass 'muted'
describe 'toggleMute', -> describe 'toggleMute', ->
beforeEach -> beforeEach ->
spyOn @player, 'volume' @newVolume = undefined
@volumeControl = new VideoVolumeControl @player @volumeControl = new VideoVolumeControl element: $('.secondary-controls')
$(@volumeControl).bind 'volumeChange', (event, volume) => @newVolume = volume
describe 'when the current volume is more than 0', -> describe 'when the current volume is more than 0', ->
beforeEach -> beforeEach ->
@player.volume.andReturn 60 @volumeControl.currentVolume = 60
@volumeControl.toggleMute() @volumeControl.toggleMute()
it 'save the previous volume', -> it 'save the previous volume', ->
expect(@volumeControl.previousVolume).toEqual 60 expect(@volumeControl.previousVolume).toEqual 60
it 'set the player volume', -> it 'set the player volume', ->
expect(@player.volume).toHaveBeenCalledWith 0 expect(@newVolume).toEqual 0
describe 'when the current volume is 0', -> describe 'when the current volume is 0', ->
beforeEach -> beforeEach ->
@player.volume.andReturn 0 @volumeControl.currentVolume = 0
@volumeControl.previousVolume = 60 @volumeControl.previousVolume = 60
@volumeControl.toggleMute() @volumeControl.toggleMute()
it 'set the player volume to previous volume', -> it 'set the player volume to previous volume', ->
expect(@player.volume).toHaveBeenCalledWith 60 expect(@newVolume).toEqual 60
lms/static/coffee/spec/modules/video_spec.coffee
...@@ -57,7 +57,7 @@ describe 'Video', -> ...@@ -57,7 +57,7 @@ describe 'Video', ->
window.YT = @originalYT window.YT = @originalYT
it 'create the Video Player', -> it 'create the Video Player', ->
expect(window.VideoPlayer).toHaveBeenCalledWith @video expect(window.VideoPlayer).toHaveBeenCalledWith(video: @video)
expect(@video.player).toEqual @stubVideoPlayer expect(@video.player).toEqual @stubVideoPlayer
describe 'when the Youtube API is not ready', -> describe 'when the Youtube API is not ready', ->
...@@ -84,7 +84,7 @@ describe 'Video', -> ...@@ -84,7 +84,7 @@ describe 'Video', ->
window.YT = @originalYT window.YT = @originalYT
it 'create the Video Player for all video elements', -> it 'create the Video Player for all video elements', ->
expect(window.VideoPlayer).toHaveBeenCalledWith @video expect(window.VideoPlayer).toHaveBeenCalledWith(video: @video)
expect(@video.player).toEqual @stubVideoPlayer expect(@video.player).toEqual @stubVideoPlayer
describe 'youtubeId', -> describe 'youtubeId', ->
......
lms/static/coffee/src/_subview.coffee 0 → 100644
class @Subview
constructor: (options) ->
$.each options, (key, value) =>
@[key] = value
@initialize()
@render()
@bind()
$: (selector) ->
$(selector, @element)
initialize: ->
render: ->
bind: ->
lms/static/coffee/src/modules/video.coffee
...@@ -36,7 +36,7 @@ class @Video ...@@ -36,7 +36,7 @@ class @Video
@speed = '1.0' @speed = '1.0'
embed: -> embed: ->
@player = new VideoPlayer(this) @player = new VideoPlayer video: this
fetchMetadata: (url) -> fetchMetadata: (url) ->
@metadata = {} @metadata = {}
......
lms/static/coffee/src/modules/video/video_caption.coffee
class @VideoCaption class @VideoCaption extends Subview
constructor: (@player, @youtubeId) ->
@render()
@bind()
$: (selector) ->
@player.$(selector)
bind: -> bind: ->
$(window).bind('resize', @onWindowResize) $(window).bind('resize', @resize)
$(@player).bind('resize', @onWindowResize)
$(@player).bind('updatePlayTime', @onUpdatePlayTime)
$(@player).bind('seek', @onUpdatePlayTime)
$(@player).bind('play', @onPlay)
@$('.hide-subtitles').click @toggle @$('.hide-subtitles').click @toggle
@$('.subtitles').mouseenter(@onMouseEnter).mouseleave(@onMouseLeave) @$('.subtitles').mouseenter(@onMouseEnter).mouseleave(@onMouseLeave)
.mousemove(@onMovement).bind('mousewheel', @onMovement) .mousemove(@onMovement).bind('mousewheel', @onMovement)
...@@ -70,12 +59,16 @@ class @VideoCaption ...@@ -70,12 +59,16 @@ class @VideoCaption
return min return min
onPlay: => play: ->
@renderCaption() unless @rendered @renderCaption() unless @rendered
@playing = true
pause: ->
@playing = false
onUpdatePlayTime: (event, time) => updatePlayTime: (time) ->
# This 250ms offset is required to match the video speed # This 250ms offset is required to match the video speed
time = Math.round(Time.convert(time, @player.currentSpeed(), '1.0') * 1000 + 250) time = Math.round(Time.convert(time, @currentSpeed, '1.0') * 1000 + 250)
newIndex = @search time newIndex = @search time
if newIndex != undefined && @currentIndex != newIndex if newIndex != undefined && @currentIndex != newIndex
...@@ -86,7 +79,7 @@ class @VideoCaption ...@@ -86,7 +79,7 @@ class @VideoCaption
@currentIndex = newIndex @currentIndex = newIndex
@scrollCaption() @scrollCaption()
onWindowResize: => resize: =>
@$('.subtitles').css maxHeight: @captionHeight() @$('.subtitles').css maxHeight: @captionHeight()
@$('.subtitles .spacing:first').height(@topSpacingHeight()) @$('.subtitles .spacing:first').height(@topSpacingHeight())
@$('.subtitles .spacing:last').height(@bottomSpacingHeight()) @$('.subtitles .spacing:last').height(@bottomSpacingHeight())
...@@ -102,7 +95,7 @@ class @VideoCaption ...@@ -102,7 +95,7 @@ class @VideoCaption
onMouseLeave: => onMouseLeave: =>
clearTimeout @frozen if @frozen clearTimeout @frozen if @frozen
@frozen = null @frozen = null
@scrollCaption() if @player.isPlaying() @scrollCaption() if @playing
scrollCaption: -> scrollCaption: ->
if !@frozen && @$('.subtitles .current:first').length if !@frozen && @$('.subtitles .current:first').length
...@@ -111,8 +104,8 @@ class @VideoCaption ...@@ -111,8 +104,8 @@ class @VideoCaption
seekPlayer: (event) => seekPlayer: (event) =>
event.preventDefault() event.preventDefault()
time = Math.round(Time.convert($(event.target).data('start'), '1.0', @player.currentSpeed()) / 1000) time = Math.round(Time.convert($(event.target).data('start'), '1.0', @currentSpeed) / 1000)
$(@player).trigger('seek', time) $(@).trigger('seek', time)
calculateOffset: (element) -> calculateOffset: (element) ->
@captionHeight() / 2 - element.height() / 2 @captionHeight() / 2 - element.height() / 2
...@@ -125,16 +118,16 @@ class @VideoCaption ...@@ -125,16 +118,16 @@ class @VideoCaption
toggle: (event) => toggle: (event) =>
event.preventDefault() event.preventDefault()
if @player.element.hasClass('closed') if @element.hasClass('closed')
@$('.hide-subtitles').attr('title', 'Turn off captions') @$('.hide-subtitles').attr('title', 'Turn off captions')
@player.element.removeClass('closed') @element.removeClass('closed')
@scrollCaption() @scrollCaption()
else else
@$('.hide-subtitles').attr('title', 'Turn on captions') @$('.hide-subtitles').attr('title', 'Turn on captions')
@player.element.addClass('closed') @element.addClass('closed')
captionHeight: -> captionHeight: ->
if @player.element.hasClass('fullscreen') if @element.hasClass('fullscreen')
$(window).height() - @$('.video-controls').height() $(window).height() - @$('.video-controls').height()
else else
@$('.video-wrapper').height() @$('.video-wrapper').height()
lms/static/coffee/src/modules/video/video_control.coffee
class @VideoControl class @VideoControl extends Subview
constructor: (@player) ->
@render()
@bind()
$: (selector) ->
@player.$(selector)
bind: -> bind: ->
$(@player).bind('play', @onPlay)
.bind('pause', @onPause)
.bind('ended', @onPause)
@$('.video_control').click @togglePlayback @$('.video_control').click @togglePlayback
render: -> render: ->
@$('.video-controls').append """ @element.append """
<div class="slider"></div> <div class="slider"></div>
<div> <div>
<ul class="vcr"> <ul class="vcr">
...@@ -31,16 +21,15 @@ class @VideoControl ...@@ -31,16 +21,15 @@ class @VideoControl
unless onTouchBasedDevice() unless onTouchBasedDevice()
@$('.video_control').addClass('play').html('Play') @$('.video_control').addClass('play').html('Play')
onPlay: => play: ->
@$('.video_control').removeClass('play').addClass('pause').html('Pause') @$('.video_control').removeClass('play').addClass('pause').html('Pause')
onPause: => pause: ->
@$('.video_control').removeClass('pause').addClass('play').html('Play') @$('.video_control').removeClass('pause').addClass('play').html('Play')
togglePlayback: (event) => togglePlayback: (event) =>
event.preventDefault() event.preventDefault()
if $('.video_control').hasClass('play') || $('.video_control').hasClass('pause') if @$('.video_control').hasClass('play')
if @player.isPlaying() $(@).trigger('play')
$(@player).trigger('pause') else if @$('.video_control').hasClass('pause')
else $(@).trigger('pause')
$(@player).trigger('play')
lms/static/coffee/src/modules/video/video_player.coffee
class @VideoPlayer class @VideoPlayer extends Subview
constructor: (@video) -> initialize: ->
# Define a missing constant of Youtube API # Define a missing constant of Youtube API
YT.PlayerState.UNSTARTED = -1 YT.PlayerState.UNSTARTED = -1
@currentTime = 0 @currentTime = 0
@element = $("#video_#{@video.id}") @element = $("#video_#{@video.id}")
@render()
@bind()
$: (selector) ->
$(selector, @element)
bind: -> bind: ->
$(@).bind('seek', @onSeek) $(@control).bind('play', @play)
.bind('updatePlayTime', @onUpdatePlayTime) .bind('pause', @pause)
.bind('speedChange', @onSpeedChange) $(@caption).bind('seek', @onSeek)
.bind('play', @onPlay) $(@speedControl).bind('speedChange', @onSpeedChange)
.bind('pause', @onPause) $(@progressSlider).bind('seek', @onSeek)
.bind('ended', @onPause) if @volumeControl
$(@volumeControl).bind('volumeChange', @onVolumeChange)
$(document).keyup @bindExitFullScreen $(document).keyup @bindExitFullScreen
@$('.add-fullscreen').click @toggleFullScreen @$('.add-fullscreen').click @toggleFullScreen
...@@ -28,11 +24,12 @@ class @VideoPlayer ...@@ -28,11 +24,12 @@ class @VideoPlayer
@toggleFullScreen(event) @toggleFullScreen(event)
render: -> render: ->
new VideoControl @ @control = new VideoControl element: @$('.video-controls')
new VideoCaption @, @video.youtubeId('1.0') @caption = new VideoCaption element: @element, youtubeId: @video.youtubeId('1.0'), currentSpeed: @currentSpeed()
new VideoVolumeControl @ unless onTouchBasedDevice() unless onTouchBasedDevice()
new VideoSpeedControl @, @video.speeds @volumeControl = new VideoVolumeControl element: @$('.secondary-controls')
new VideoProgressSlider @ @speedControl = new VideoSpeedControl element: @$('.secondary-controls'), speeds: @video.speeds, currentSpeed: @currentSpeed()
@progressSlider = new VideoProgressSlider element: @$('.slider')
@player = new YT.Player @video.id, @player = new YT.Player @video.id,
playerVars: playerVars:
controls: 0 controls: 0
...@@ -52,19 +49,23 @@ class @VideoPlayer ...@@ -52,19 +49,23 @@ class @VideoPlayer
at: 'top center' at: 'top center'
onReady: => onReady: =>
$(@).trigger('ready')
$(@).trigger('updatePlayTime', 0)
unless onTouchBasedDevice() unless onTouchBasedDevice()
$('.course-content .video:first').data('video').player.play() $('.course-content .video:first').data('video').player.play()
onStateChange: (event) => onStateChange: (event) =>
switch event.data switch event.data
when YT.PlayerState.UNSTARTED
@onUnstarted()
when YT.PlayerState.PLAYING when YT.PlayerState.PLAYING
$(@).trigger('play') @onPlay()
when YT.PlayerState.PAUSED, YT.PlayerState.UNSTARTED when YT.PlayerState.PAUSED
$(@).trigger('pause') @onPause()
when YT.PlayerState.ENDED when YT.PlayerState.ENDED
$(@).trigger('ended') @onEnded()
onUnstarted: =>
@control.pause()
@caption.pause()
onPlay: => onPlay: =>
Logger.log 'play_video', id: @currentTime, code: @player.getVideoEmbedCode() Logger.log 'play_video', id: @currentTime, code: @player.getVideoEmbedCode()
...@@ -72,39 +73,55 @@ class @VideoPlayer ...@@ -72,39 +73,55 @@ class @VideoPlayer
window.player = @player window.player = @player
unless @player.interval unless @player.interval
@player.interval = setInterval(@update, 200) @player.interval = setInterval(@update, 200)
@caption.play()
@control.play()
@progressSlider.play()
onPause: => onPause: =>
Logger.log 'pause_video', id: @currentTime, code: @player.getVideoEmbedCode() Logger.log 'pause_video', id: @currentTime, code: @player.getVideoEmbedCode()
window.player = null if window.player == @player window.player = null if window.player == @player
clearInterval(@player.interval) clearInterval(@player.interval)
@player.interval = null @player.interval = null
@caption.pause()
@control.pause()
onEnded: =>
@control.pause()
@caption.pause()
onSeek: (event, time) -> onSeek: (event, time) =>
@player.seekTo(time, true) @player.seekTo(time, true)
if @isPlaying() if @isPlaying()
clearInterval(@player.interval) clearInterval(@player.interval)
@player.interval = setInterval(@update, 200) @player.interval = setInterval(@update, 200)
else else
@currentTime = time @currentTime = time
$(@).trigger('updatePlayTime', time) @updatePlayTime time
onSpeedChange: (event, newSpeed) => onSpeedChange: (event, newSpeed) =>
@currentTime = Time.convert(@currentTime, parseFloat(@currentSpeed()), newSpeed) @currentTime = Time.convert(@currentTime, parseFloat(@currentSpeed()), newSpeed)
@video.setSpeed(parseFloat(newSpeed).toFixed(2).replace /\.00$/, '.0') newSpeed = parseFloat(newSpeed).toFixed(2).replace /\.00$/, '.0'
@video.setSpeed(newSpeed)
@caption.currentSpeed = newSpeed
if @isPlaying() if @isPlaying()
@player.loadVideoById(@video.youtubeId(), @currentTime) @player.loadVideoById(@video.youtubeId(), @currentTime)
else else
@player.cueVideoById(@video.youtubeId(), @currentTime) @player.cueVideoById(@video.youtubeId(), @currentTime)
$(@).trigger('updatePlayTime', @currentTime) @updatePlayTime @currentTime
onVolumeChange: (event, volume) =>
@player.setVolume volume
update: => update: =>
if @currentTime = @player.getCurrentTime() if @currentTime = @player.getCurrentTime()
$(@).trigger('updatePlayTime', @currentTime) @updatePlayTime @currentTime
onUpdatePlayTime: (event, time) => updatePlayTime: (time) ->
progress = Time.format(time) + ' / ' + Time.format(@duration()) progress = Time.format(time) + ' / ' + Time.format(@duration())
@$(".vidtime").html(progress) @$(".vidtime").html(progress)
@caption.updatePlayTime(time)
@progressSlider.updatePlayTime(time, @duration())
toggleFullScreen: (event) => toggleFullScreen: (event) =>
event.preventDefault() event.preventDefault()
...@@ -116,26 +133,20 @@ class @VideoPlayer ...@@ -116,26 +133,20 @@ class @VideoPlayer
@element.append('<a href="#" class="exit">Exit</a>').addClass('fullscreen') @element.append('<a href="#" class="exit">Exit</a>').addClass('fullscreen')
@$('.add-fullscreen').attr('title', 'Exit fill browser') @$('.add-fullscreen').attr('title', 'Exit fill browser')
@$('.exit').click @toggleFullScreen @$('.exit').click @toggleFullScreen
$(@).trigger('resize') @caption.resize()
# Delegates # Delegates
play: -> play: =>
@player.playVideo() if @player.playVideo @player.playVideo() if @player.playVideo
isPlaying: -> isPlaying: ->
@player.getPlayerState() == YT.PlayerState.PLAYING @player.getPlayerState() == YT.PlayerState.PLAYING
pause: -> pause: =>
@player.pauseVideo() @player.pauseVideo() if @player.pauseVideo
duration: -> duration: ->
@video.getDuration() @video.getDuration()
currentSpeed: -> currentSpeed: ->
@video.speed @video.speed
volume: (value) ->
if value?
@player.setVolume value
else
@player.getVolume()
lms/static/coffee/src/modules/video/video_progress_slider.coffee
class @VideoProgressSlider class @VideoProgressSlider extends Subview
constructor: (@player) -> initialize: ->
@buildSlider() unless onTouchBasedDevice() @buildSlider() unless onTouchBasedDevice()
$(@player).bind('updatePlayTime', @onUpdatePlayTime)
$(@player).bind('ready', @onReady)
$(@player).bind('play', @onPlay)
$: (selector) ->
@player.$(selector)
buildSlider: -> buildSlider: ->
@slider = @$('.slider').slider @slider = @element.slider
range: 'min' range: 'min'
change: @onChange change: @onChange
slide: @onSlide slide: @onSlide
...@@ -17,7 +11,7 @@ class @VideoProgressSlider ...@@ -17,7 +11,7 @@ class @VideoProgressSlider
@buildHandle() @buildHandle()
buildHandle: -> buildHandle: ->
@handle = @$('.slider .ui-slider-handle') @handle = @$('.ui-slider-handle')
@handle.qtip @handle.qtip
content: "#{Time.format(@slider.slider('value'))}" content: "#{Time.format(@slider.slider('value'))}"
position: position:
...@@ -30,28 +24,25 @@ class @VideoProgressSlider ...@@ -30,28 +24,25 @@ class @VideoProgressSlider
classes: 'ui-tooltip-slider' classes: 'ui-tooltip-slider'
widget: true widget: true
onReady: => play: =>
@slider.slider('option', 'max', @player.duration()) if @slider
onPlay: =>
@buildSlider() unless @slider @buildSlider() unless @slider
onUpdatePlayTime: (event, currentTime) => updatePlayTime: (currentTime, duration) ->
if @slider && !@frozen if @slider && !@frozen
@slider.slider('option', 'max', @player.duration()) @slider.slider('option', 'max', duration)
@slider.slider('value', currentTime) @slider.slider('value', currentTime)
onSlide: (event, ui) => onSlide: (event, ui) =>
@frozen = true @frozen = true
@updateTooltip(ui.value) @updateTooltip(ui.value)
$(@player).trigger('seek', ui.value) $(@).trigger('seek', ui.value)
onChange: (event, ui) => onChange: (event, ui) =>
@updateTooltip(ui.value) @updateTooltip(ui.value)
onStop: (event, ui) => onStop: (event, ui) =>
@frozen = true @frozen = true
$(@player).trigger('seek', ui.value) $(@).trigger('seek', ui.value)
setTimeout (=> @frozen = false), 200 setTimeout (=> @frozen = false), 200
updateTooltip: (value)-> updateTooltip: (value)->
......
lms/static/coffee/src/modules/video/video_speed_control.coffee
class @VideoSpeedControl class @VideoSpeedControl extends Subview
constructor: (@player, @speeds) ->
@render()
@bind()
$: (selector) ->
@player.$(selector)
bind: -> bind: ->
$(@player).bind('speedChange', @onSpeedChange)
@$('.video_speeds a').click @changeVideoSpeed @$('.video_speeds a').click @changeVideoSpeed
if onTouchBasedDevice() if onTouchBasedDevice()
@$('.speeds').click (event) -> @$('.speeds').click (event) ->
...@@ -23,7 +15,7 @@ class @VideoSpeedControl ...@@ -23,7 +15,7 @@ class @VideoSpeedControl
$(this).removeClass('open') $(this).removeClass('open')
render: -> render: ->
@$('.secondary-controls').prepend """ @element.prepend """
<div class="speeds"> <div class="speeds">
<a href="#"> <a href="#">
<h3>Speed</h3> <h3>Speed</h3>
...@@ -36,15 +28,14 @@ class @VideoSpeedControl ...@@ -36,15 +28,14 @@ class @VideoSpeedControl
$.each @speeds, (index, speed) => $.each @speeds, (index, speed) =>
link = $('<a>').attr(href: "#").html("#{speed}x") link = $('<a>').attr(href: "#").html("#{speed}x")
@$('.video_speeds').prepend($('<li>').attr('data-speed', speed).html(link)) @$('.video_speeds').prepend($('<li>').attr('data-speed', speed).html(link))
@setSpeed(@player.currentSpeed()) @setSpeed(@currentSpeed)
changeVideoSpeed: (event) => changeVideoSpeed: (event) =>
event.preventDefault() event.preventDefault()
unless $(event.target).parent().hasClass('active') unless $(event.target).parent().hasClass('active')
$(@player).trigger 'speedChange', $(event.target).parent().data('speed') @currentSpeed = $(event.target).parent().data('speed')
$(@).trigger 'speedChange', $(event.target).parent().data('speed')
onSpeedChange: (event, speed) => @setSpeed(parseFloat(@currentSpeed).toFixed(2).replace /\.00$/, '.0')
@setSpeed(parseFloat(speed).toFixed(2).replace /\.00$/, '.0')
setSpeed: (speed) -> setSpeed: (speed) ->
@$('.video_speeds li').removeClass('active') @$('.video_speeds li').removeClass('active')
......
lms/static/coffee/src/modules/video/video_volume_control.coffee
class @VideoVolumeControl class @VideoVolumeControl extends Subview
constructor: (@player) -> initialize: ->
@previousVolume = 100 @currentVolume = 100
@render()
@bind()
$: (selector) ->
@player.$(selector)
bind: -> bind: ->
$(@player).bind('ready', @onReady)
@$('.volume').mouseenter -> @$('.volume').mouseenter ->
$(this).addClass('open') $(this).addClass('open')
@$('.volume').mouseleave -> @$('.volume').mouseleave ->
...@@ -16,7 +10,7 @@ class @VideoVolumeControl ...@@ -16,7 +10,7 @@ class @VideoVolumeControl
@$('.volume>a').click(@toggleMute) @$('.volume>a').click(@toggleMute)
render: -> render: ->
@$('.secondary-controls').prepend """ @element.prepend """
<div class="volume"> <div class="volume">
<a href="#"></a> <a href="#"></a>
<div class="volume-slider-container"> <div class="volume-slider-container">
...@@ -33,16 +27,14 @@ class @VideoVolumeControl ...@@ -33,16 +27,14 @@ class @VideoVolumeControl
change: @onChange change: @onChange
slide: @onChange slide: @onChange
onReady: =>
@slider.slider 'option', 'max', @player.volume()
onChange: (event, ui) => onChange: (event, ui) =>
@player.volume ui.value @currentVolume = ui.value
@$('.secondary-controls .volume').toggleClass 'muted', ui.value == 0 $(@).trigger 'volumeChange', @currentVolume
@$('.volume').toggleClass 'muted', @currentVolume == 0
toggleMute: => toggleMute: =>
if @player.volume() > 0 if @currentVolume > 0
@previousVolume = @player.volume() @previousVolume = @currentVolume
@slider.slider 'option', 'value', 0 @slider.slider 'option', 'value', 0
else else
@slider.slider 'option', 'value', @previousVolume @slider.slider 'option', 'value', @previousVolume
lms/static/sass/courseware/_video.scss
...@@ -476,6 +476,7 @@ section.course-content { ...@@ -476,6 +476,7 @@ section.course-content {
ol.subtitles { ol.subtitles {
width: 0px; width: 0px;
display: none;
} }
} }
...@@ -498,6 +499,7 @@ section.course-content { ...@@ -498,6 +499,7 @@ section.course-content {
ol.subtitles { ol.subtitles {
right: -(flex-grid(4)); right: -(flex-grid(4));
width: auto; width: auto;
display: block;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment