Merge pull request #3153 from edx/anton/caption_refactor

Refactor video caption module.

common/lib/xmodule/xmodule/js/spec/video/video_caption_spec.js

@@ -123,28 +123,16 @@
 
                 it('bind the hide caption button', function () {
                     state = jasmine.initializePlayer();
-                    expect($('.hide-subtitles')).toHandleWith(
-                        'click', state.videoCaption.toggle
-                    );
+                    expect($('.hide-subtitles')).toHandle('click');
                 });
 
                 it('bind the mouse movement', function () {
                     state = jasmine.initializePlayer();
-                    expect($('.subtitles')).toHandleWith(
-                        'mouseover', state.videoCaption.onMouseEnter
-                    );
-                    expect($('.subtitles')).toHandleWith(
-                        'mouseout', state.videoCaption.onMouseLeave
-                    );
-                    expect($('.subtitles')).toHandleWith(
-                        'mousemove', state.videoCaption.onMovement
-                    );
-                    expect($('.subtitles')).toHandleWith(
-                        'mousewheel', state.videoCaption.onMovement
-                    );
-                    expect($('.subtitles')).toHandleWith(
-                        'DOMMouseScroll', state.videoCaption.onMovement
-                    );
+                    expect($('.subtitles')).toHandle('mouseover');
+                    expect($('.subtitles')).toHandle('mouseout');
+                    expect($('.subtitles')).toHandle('mousemove');
+                    expect($('.subtitles')).toHandle('mousewheel');
+                    expect($('.subtitles')).toHandle('DOMMouseScroll');
                  });
 
                  it('bind the scroll', function () {
@@ -859,7 +847,7 @@
                 runs(function () {
                     videoControl = state.videoControl;
                     $('.subtitles li[data-index=1]').addClass('current');
-                    state.videoCaption.resize();
+                    state.videoCaption.onResize();
                 });
             });
 

common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js

@@ -26,7 +26,6 @@ function (VideoPlayer) {
             describe('always', function () {
                 beforeEach(function () {
                     state = jasmine.initializePlayer();
-
                     state.videoEl = $('video, iframe');
                 });
 
@@ -211,7 +210,7 @@ function (VideoPlayer) {
                     state.videoEl = $('video, iframe');
 
                     spyOn(state.videoControl, 'pause').andCallThrough();
-                    spyOn(state.videoCaption, 'pause').andCallThrough();
+                    spyOn($.fn, 'trigger').andCallThrough();
 
                     state.videoPlayer.onStateChange({
                         data: YT.PlayerState.PAUSED
@@ -223,7 +222,7 @@ function (VideoPlayer) {
                 });
 
                 it('pause the video caption', function () {
-                    expect(state.videoCaption.pause).toHaveBeenCalled();
+                    expect($.fn.trigger).toHaveBeenCalledWith('pause', {});
                 });
             });
 
@@ -245,7 +244,7 @@ function (VideoPlayer) {
                     spyOn(state.videoPlayer, 'log').andCallThrough();
                     spyOn(window, 'setInterval').andReturn(100);
                     spyOn(state.videoControl, 'play');
-                    spyOn(state.videoCaption, 'play');
+                    spyOn($.fn, 'trigger').andCallThrough();
 
                     state.videoPlayer.onStateChange({
                         data: YT.PlayerState.PLAYING
@@ -281,7 +280,7 @@ function (VideoPlayer) {
                 });
 
                 it('play the video caption', function () {
-                    expect(state.videoCaption.play).toHaveBeenCalled();
+                    expect($.fn.trigger).toHaveBeenCalledWith('play', {});
                 });
             });
 
@@ -295,7 +294,7 @@ function (VideoPlayer) {
 
                     spyOn(state.videoPlayer, 'log').andCallThrough();
                     spyOn(state.videoControl, 'pause').andCallThrough();
-                    spyOn(state.videoCaption, 'pause').andCallThrough();
+                    spyOn($.fn, 'trigger').andCallThrough();
 
                     state.videoPlayer.onStateChange({
                         data: YT.PlayerState.PLAYING
@@ -323,7 +322,7 @@ function (VideoPlayer) {
                 });
 
                 it('pause the video caption', function () {
-                    expect(state.videoCaption.pause).toHaveBeenCalled();
+                    expect($.fn.trigger).toHaveBeenCalledWith('pause', {});
                 });
             });
 
@@ -334,7 +333,7 @@ function (VideoPlayer) {
                     state.videoEl = $('video, iframe');
 
                     spyOn(state.videoControl, 'pause').andCallThrough();
-                    spyOn(state.videoCaption, 'pause').andCallThrough();
+                    spyOn($.fn, 'trigger').andCallThrough();
 
                     state.videoPlayer.onStateChange({
                         data: YT.PlayerState.ENDED
@@ -346,7 +345,7 @@ function (VideoPlayer) {
                 });
 
                 it('pause the video caption', function () {
-                    expect(state.videoCaption.pause).toHaveBeenCalled();
+                    expect($.fn.trigger).toHaveBeenCalledWith('ended', {});
                 });
             });
         });
@@ -709,6 +708,7 @@ function (VideoPlayer) {
         describe('updatePlayTime with invalid endTime', function () {
             beforeEach(function () {
                 state = {
+                    el: $('#video_id'),
                     videoPlayer: {
                         duration: function () {
                             // The video will be 60 seconds long.
@@ -756,10 +756,7 @@ function (VideoPlayer) {
             describe('when the video player is not full screen', function () {
                 beforeEach(function () {
                     state = jasmine.initializePlayer();
-
                     state.videoEl = $('video, iframe');
-
-                    spyOn(state.videoCaption, 'resize').andCallThrough();
                     spyOn($.fn, 'trigger').andCallThrough();
                     state.videoControl.toggleFullScreen(jQuery.Event('click'));
                 });
@@ -774,7 +771,7 @@ function (VideoPlayer) {
                 });
 
                 it('tell VideoCaption to resize', function () {
-                    expect(state.videoCaption.resize).toHaveBeenCalled();
+                    expect($.fn.trigger).toHaveBeenCalledWith('fullscreen', [true]);
                     expect(state.resizer.setMode).toHaveBeenCalledWith('both');
                     expect(state.resizer.delta.substract).toHaveBeenCalled();
                 });
@@ -783,11 +780,8 @@ function (VideoPlayer) {
             describe('when the video player already full screen', function () {
                 beforeEach(function () {
                     state = jasmine.initializePlayer();
-
                     state.videoEl = $('video, iframe');
-
-                    spyOn(state.videoCaption, 'resize').andCallThrough();
-
+                    spyOn($.fn, 'trigger').andCallThrough();
                     state.el.addClass('video-fullscreen');
                     state.videoControl.fullScreenState = true;
                     state.videoControl.isFullScreen = true;
@@ -806,7 +800,7 @@ function (VideoPlayer) {
                 });
 
                 it('tell VideoCaption to resize', function () {
-                    expect(state.videoCaption.resize).toHaveBeenCalled();
+                    expect($.fn.trigger).toHaveBeenCalledWith('fullscreen', [false]);
                     expect(state.resizer.setMode)
                         .toHaveBeenCalledWith('width');
                     expect(state.resizer.delta.reset).toHaveBeenCalled();

common/lib/xmodule/xmodule/js/src/video/03_video_player.js

@@ -223,20 +223,20 @@ function (HTML5Video, Resizer) {
                 container: state.container
             })
             .callbacks.once(function() {
-                state.trigger('videoCaption.resize', null);
+                state.el.trigger('caption:resize');
             })
             .setMode('width');
 
         // Update captions size when controls becomes visible on iPad or Android
         if (/iPad|Android/i.test(state.isTouch[0])) {
             state.el.on('controls:show', function () {
-                state.trigger('videoCaption.resize', null);
+                state.el.trigger('caption:resize');
             });
         }
 
         $(window).on('resize', _.debounce(function () {
             state.trigger('videoControl.updateControlsHeight', null);
-            state.trigger('videoCaption.resize', null);
+            state.el.trigger('caption:resize');
             state.resizer.align();
         }, 100));
     }
@@ -271,7 +271,7 @@ function (HTML5Video, Resizer) {
         });
 
         _updateVcrAndRegion(state, true);
-        state.trigger('videoCaption.fetchCaption', null);
+        state.el.trigger('caption:fetch');
         state.resizer.setElement(state.el.find('iframe')).align();
     }
 
@@ -447,10 +447,6 @@ function (HTML5Video, Resizer) {
             end: true
         });
 
-        if (this.config.showCaptions) {
-            this.trigger('videoCaption.pause', null);
-        }
-
         if (this.videoPlayer.skipOnEndedStartEndReset) {
             this.videoPlayer.skipOnEndedStartEndReset = undefined;
         }
@@ -475,11 +471,6 @@ function (HTML5Video, Resizer) {
         delete this.videoPlayer.updateInterval;
 
         this.trigger('videoControl.pause', null);
-
-        if (this.config.showCaptions) {
-            this.trigger('videoCaption.pause', null);
-        }
-
         this.saveState(true);
         this.el.trigger('pause', arguments);
     }
@@ -501,17 +492,10 @@ function (HTML5Video, Resizer) {
         }
 
         this.trigger('videoControl.play', null);
-
         this.trigger('videoProgressSlider.notifyThroughHandleEnd', {
             end: false
         });
-
-        if (this.config.showCaptions) {
-            this.trigger('videoCaption.play', null);
-        }
-
         this.videoPlayer.ready();
-
         this.el.trigger('play', arguments);
     }
 
@@ -803,7 +787,7 @@ function (HTML5Video, Resizer) {
             }
         );
 
-        this.trigger('videoCaption.updatePlayTime', time);
+        this.el.trigger('caption:update', [time]);
     }
 
     function isEnded() {

common/lib/xmodule/xmodule/js/src/video/04_video_control.js

@@ -277,7 +277,6 @@ function () {
             .attr('title', text)
             .text(text);
 
-        this.trigger('videoCaption.resize', null);
         this.el.trigger('fullscreen', [this.isFullScreen]);
     }