Avoid emitting play_video event during buffering

TNL-2178

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

 (function (undefined) {
     'use strict';
     describe('VideoPlayer Events plugin', function () {
-        var state, oldOTBD;
+        var state, oldOTBD, Logger = window.Logger;
 
         beforeEach(function () {
             oldOTBD = window.onTouchBasedDevice;
@@ -32,7 +32,8 @@
             });
         });
 
-        it('can emit "play_video" event', function () {
+        it('can emit "play_video" event when canEmitPlayVideoEvent returns true', function () {
+            spyOn(state.videoPlayer, 'canEmitPlayVideoEvent').andReturn(true);
             state.el.trigger('play');
             expect(Logger.log).toHaveBeenCalledWith('play_video', {
                 id: 'id',
@@ -41,6 +42,12 @@
             });
         });
 
+        it('can not emit "play_video" event when canEmitPlayVideoEvent returns false', function () {
+            spyOn(state.videoPlayer, 'canEmitPlayVideoEvent').andReturn(false);
+            state.el.trigger('play');
+            expect(Logger.log).not.toHaveBeenCalled();
+        });
+
         it('can emit "pause_video" event', function () {
             state.el.trigger('pause');
             expect(Logger.log).toHaveBeenCalledWith('pause_video', {

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

@@ -5,7 +5,7 @@ require(
 ['video/03_video_player.js'],
 function (VideoPlayer) {
     describe('VideoPlayer', function () {
-        var state, oldOTBD;
+        var state, oldOTBD, Logger = window.Logger, YT = window.YT;
 
         beforeEach(function () {
             oldOTBD = window.onTouchBasedDevice;
@@ -333,6 +333,46 @@ function (VideoPlayer) {
                     expect($.fn.trigger).toHaveBeenCalledWith('ended', {});
                 });
             });
+
+            describe('Video Player', function () {
+                beforeEach(function () {
+                    state = jasmine.initializePlayer();
+                    state.videoEl = $('video, iframe');
+                    spyOn(Logger, 'log');
+                });
+
+                it('will set emitPlayVideoEvent to false after onPlay is called', function () {
+                    expect(state.videoPlayer.emitPlayVideoEvent).toBeTruthy();
+                    state.videoPlayer.onPlay();
+                    expect(state.videoPlayer.emitPlayVideoEvent).toBeFalsy();
+                });
+
+                it('will set emitPlayVideoEvent to correct value in different states', function () {
+                    // Initially emitPlayVideoEvent should be set to true
+                    expect(state.videoPlayer.emitPlayVideoEvent).toBeTruthy();
+
+                    /**
+                     * @param {Integer} playerState - New state of the video player.
+                     * @param {Boolean} emitPlayVideoEvent - Expected value of emitPlayVideoEvent after 
+                     *                                       video player goes into playerState.
+                     */
+                    var verifyEmitPlayVideoEventValue = function (playerState, emitPlayVideoEvent) {
+                        state.videoPlayer.onStateChange({
+                            data: playerState
+                        });
+                        expect(state.videoPlayer.emitPlayVideoEvent).toBe(emitPlayVideoEvent);
+                    };
+
+                    verifyEmitPlayVideoEventValue(YT.PlayerState.BUFFERING, true);
+                    verifyEmitPlayVideoEventValue(YT.PlayerState.PLAYING, false);
+                    verifyEmitPlayVideoEventValue(YT.PlayerState.BUFFERING, false);
+                    verifyEmitPlayVideoEventValue(YT.PlayerState.PLAYING, false);
+                    verifyEmitPlayVideoEventValue(YT.PlayerState.PAUSED, true);
+                    verifyEmitPlayVideoEventValue(YT.PlayerState.PLAYING, false);
+                    verifyEmitPlayVideoEventValue(YT.PlayerState.ENDED, true);
+                    verifyEmitPlayVideoEventValue(YT.PlayerState.PLAYING, false);
+                });
+            });
         });
 
         describe('onSeek Youtube', function(){

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

@@ -51,7 +51,8 @@ function (HTML5Video, Resizer) {
             update: update,
             figureOutStartEndTime: figureOutStartEndTime,
             figureOutStartingTime: figureOutStartingTime,
-            updatePlayTime: updatePlayTime
+            updatePlayTime: updatePlayTime,
+            canEmitPlayVideoEvent: canEmitPlayVideoEvent
         };
 
     VideoPlayer.prototype = methodsDict;
@@ -128,6 +129,8 @@ function (HTML5Video, Resizer) {
             state.videoPlayer.PlayerState = HTML5Video.PlayerState;
         }
 
+        state.videoPlayer.emitPlayVideoEvent = true;
+
         state.videoPlayer.currentTime = 0;
 
         state.videoPlayer.goToStartTime = true;
@@ -198,6 +201,14 @@ function (HTML5Video, Resizer) {
         }
     }
 
+    function canEmitPlayVideoEvent() {
+        if (this.videoPlayer.emitPlayVideoEvent) {
+            this.videoPlayer.emitPlayVideoEvent = false;
+            return true;
+        }
+        return false;
+    }
+
     function _updateVcrAndRegion(state, isYoutube) {
         var update = function (state) {
             var duration = state.videoPlayer.duration(),
@@ -720,6 +731,7 @@ function (HTML5Video, Resizer) {
             case this.videoPlayer.PlayerState.PAUSED:
                 this.el.addClass('is-paused');
                 this.videoPlayer.onPause();
+                this.videoPlayer.emitPlayVideoEvent = true;
                 break;
             case this.videoPlayer.PlayerState.BUFFERING:
                 this.el.addClass('is-buffered');
@@ -728,6 +740,7 @@ function (HTML5Video, Resizer) {
             case this.videoPlayer.PlayerState.ENDED:
                 this.el.addClass('is-ended');
                 this.videoPlayer.onEnded();
+                this.videoPlayer.emitPlayVideoEvent = true;
                 break;
             case this.videoPlayer.PlayerState.CUED:
                 this.el.addClass('is-cued');

common/lib/xmodule/xmodule/js/src/video/09_events_plugin.js

@@ -61,7 +61,9 @@ define('video/09_events_plugin.js', [], function() {
         },
 
         onPlay: function () {
-            this.log('play_video', {currentTime: this.getCurrentTime()});
+            if (this.state.videoPlayer.canEmitPlayVideoEvent()) {
+                this.log('play_video', {currentTime: this.getCurrentTime()});
+            }
         },
 
         onPause: function () {

common/test/acceptance/tests/video/test_video_events.py

@@ -61,7 +61,6 @@ class VideoEventsTestMixin(EventsTestMixin, VideoBaseTest):
 class VideoEventsTest(VideoEventsTestMixin):
     """ Test video player event emission """
 
-    @unittest.skip('AN-5867')
     def test_video_control_events(self):
         """
         Scenario: Video component is rendered in the LMS in Youtube mode without HTML5 sources