From e89c08d84dcaff8673aa0e309bab2a1a0a82d7a6 Mon Sep 17 00:00:00 2001
From: muhammad-ammar <mammar@gmail.com>
Date: Fri, 26 May 2017 18:37:14 +0500
Subject: [PATCH] show play button overley

EDUCATOR-211
---
 .../xmodule/xmodule/css/video/display.scss    | 36 +++++++----
 .../xmodule/xmodule/js/fixtures/video.html    |  2 +-
 .../xmodule/js/fixtures/video_all.html        |  4 +-
 .../xmodule/js/fixtures/video_hls.html        |  2 +-
 .../xmodule/js/fixtures/video_html5.html      |  2 +-
 .../js/fixtures/video_no_captions.html        |  2 +-
 .../js/fixtures/video_with_bumper.html        |  2 +-
 .../js/fixtures/video_yt_multiple.html        |  2 +-
 .../js/spec/video/video_player_spec.js        | 62 ++++++++++++++++---
 .../xmodule/js/src/video/02_html5_video.js    | 15 ++++-
 lms/templates/video.html                      |  2 +-
 11 files changed, 99 insertions(+), 32 deletions(-)

diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss
index ec0352401e..8f0c205160 100644
--- a/common/lib/xmodule/xmodule/css/video/display.scss
+++ b/common/lib/xmodule/xmodule/css/video/display.scss
@@ -149,6 +149,16 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
     background-color: black;
     position: relative;
 
+    &:hover {
+      .btn-play {
+        color: $uxpl-blue-base;
+      }
+
+      .btn-play:after {
+        background: $white;
+      }
+    }
+
     .video-player-pre,
     .video-player-post {
        height: 50px;
@@ -182,21 +192,23 @@ $cool-dark: rgb(79, 89, 93); // UXPL cool dark
       @include transform(translate(-50%, -50%));
       position: absolute;
       z-index: 1;
-      background: rgba(0, 0, 0, 0.7);
-      top: 50%;
+      top: 46%;
       left: 50%;
-      padding: 30px;
-      border-radius: 25%;
+      font-size: 4em;
+      cursor: pointer;
 
-      &:after{
+      &:after {
+        background: $white;
+        position: absolute;
+        width: 50%;
+        height: 50%;
         content: '';
-        display: block;
-        width: 0px;
-        height: 0px;
-        border-style: solid;
-        border-width: 30px 0 30px 50px;
-        border-color: transparent transparent transparent $white;
-        position: relative;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        margin: auto;
+        z-index: -1;
       }
     }
 
diff --git a/common/lib/xmodule/xmodule/js/fixtures/video.html b/common/lib/xmodule/xmodule/js/fixtures/video.html
index fa9de67d6a..562aa82a3e 100644
--- a/common/lib/xmodule/xmodule/js/fixtures/video.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/video.html
@@ -11,7 +11,7 @@
         <div class="tc-wrapper">
           <article class="video-wrapper">
             <span tabindex="0" class="spinner" aria-hidden="false" aria-label="${_('Loading video player')}"></span>
-            <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
+            <span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
             <div class="video-player-pre"></div>
             <section class="video-player">
               <iframe id="id"></iframe>
diff --git a/common/lib/xmodule/xmodule/js/fixtures/video_all.html b/common/lib/xmodule/xmodule/js/fixtures/video_all.html
index d5d50b5709..eec92febe9 100644
--- a/common/lib/xmodule/xmodule/js/fixtures/video_all.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/video_all.html
@@ -11,7 +11,7 @@
         <div class="tc-wrapper">
           <article class="video-wrapper">
             <span tabindex="0" class="spinner" aria-hidden="false" aria-label="Loading video player"></span>
-            <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="Play video"></span>
+            <span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="Play video"></span>
             <div class="video-player-pre"></div>
             <section class="video-player">
               <div id="id"></div>
@@ -29,7 +29,7 @@
         </div>
 
         <div class="focus_grabber last"></div>
-        
+
         <h3 class="hd hd-4 downloads-heading sr" id="video-download-transcripts">Downloads and transcripts</h3>
         <div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts">
             <div class="wrapper-download-video">
diff --git a/common/lib/xmodule/xmodule/js/fixtures/video_hls.html b/common/lib/xmodule/xmodule/js/fixtures/video_hls.html
index e50a49a608..f0742ca8ee 100644
--- a/common/lib/xmodule/xmodule/js/fixtures/video_hls.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/video_hls.html
@@ -11,7 +11,7 @@
         <div class="tc-wrapper">
           <article class="video-wrapper">
             <span tabindex="0" class="spinner" aria-hidden="false" aria-label="${_('Loading video player')}"></span>
-            <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
+            <span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
             <section class="video-player">
               <div id="id"></div>
               <h4 class="hd hd-4 video-hls-error is-hidden">
diff --git a/common/lib/xmodule/xmodule/js/fixtures/video_html5.html b/common/lib/xmodule/xmodule/js/fixtures/video_html5.html
index 904b0babc4..4e2a9dba0a 100644
--- a/common/lib/xmodule/xmodule/js/fixtures/video_html5.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/video_html5.html
@@ -11,7 +11,7 @@
         <div class="tc-wrapper">
           <article class="video-wrapper">
             <span tabindex="0" class="spinner" aria-hidden="false" aria-label="${_('Loading video player')}"></span>
-            <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
+            <span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
             <section class="video-player">
               <div id="id"></div>
             </section>
diff --git a/common/lib/xmodule/xmodule/js/fixtures/video_no_captions.html b/common/lib/xmodule/xmodule/js/fixtures/video_no_captions.html
index f2d0308dd1..a496d91992 100644
--- a/common/lib/xmodule/xmodule/js/fixtures/video_no_captions.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/video_no_captions.html
@@ -11,7 +11,7 @@
         <div class="tc-wrapper">
           <article class="video-wrapper">
             <span tabindex="0" class="spinner" aria-hidden="false" aria-label="${_('Loading video player')}"></span>
-            <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
+            <span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
             <section class="video-player">
               <iframe id="id"></iframe>
             </section>
diff --git a/common/lib/xmodule/xmodule/js/fixtures/video_with_bumper.html b/common/lib/xmodule/xmodule/js/fixtures/video_with_bumper.html
index f1ebfdb541..e6fbe0a330 100644
--- a/common/lib/xmodule/xmodule/js/fixtures/video_with_bumper.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/video_with_bumper.html
@@ -13,7 +13,7 @@
         <div class="tc-wrapper">
           <article class="video-wrapper">
             <span tabindex="0" class="spinner" aria-hidden="false" aria-label="${_('Loading video player')}"></span>
-            <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
+            <span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
             <div class="video-player-pre"></div>
             <section class="video-player">
               <iframe id="id"></iframe>
diff --git a/common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html b/common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html
index ee375aca15..6cdb9698b0 100644
--- a/common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/video_yt_multiple.html
@@ -11,7 +11,7 @@
         <div class="tc-wrapper">
           <article class="video-wrapper">
             <span tabindex="0" class="spinner" aria-hidden="false" aria-label="${_('Loading video player')}"></span>
-            <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
+            <span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
             <div class="video-player-pre"></div>
             <section class="video-player">
               <iframe id="id1"></iframe>
diff --git a/common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js b/common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js
index 8a34019f36..d4784df0ca 100644
--- a/common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js
+++ b/common/lib/xmodule/xmodule/js/spec/video/video_player_spec.js
@@ -5,10 +5,13 @@
 ['video/03_video_player.js', 'hls'],
 function(VideoPlayer, HLS) {
     describe('VideoPlayer', function() {
-        var state, oldOTBD, empty_arguments;
+        var STATUS = window.STATUS,
+            state,
+            oldOTBD,
+            emptyArguments;
 
         (function() {
-            empty_arguments = arguments;
+            emptyArguments = arguments;
         })();
 
         beforeEach(function() {
@@ -219,8 +222,8 @@ function(VideoPlayer, HLS) {
                 });
 
                 it('trigger pause and ended events', function() {
-                    expect($.fn.trigger).toHaveBeenCalledWith('pause', empty_arguments);
-                    expect($.fn.trigger).toHaveBeenCalledWith('ended', empty_arguments);
+                    expect($.fn.trigger).toHaveBeenCalledWith('pause', emptyArguments);
+                    expect($.fn.trigger).toHaveBeenCalledWith('ended', emptyArguments);
                 });
             });
         });
@@ -242,7 +245,7 @@ function(VideoPlayer, HLS) {
                 });
 
                 it('pause the video caption', function() {
-                    expect($.fn.trigger).toHaveBeenCalledWith('pause', empty_arguments);
+                    expect($.fn.trigger).toHaveBeenCalledWith('pause', emptyArguments);
                 });
             });
 
@@ -281,7 +284,7 @@ function(VideoPlayer, HLS) {
                 });
 
                 it('play the video caption', function() {
-                    expect($.fn.trigger).toHaveBeenCalledWith('play', empty_arguments);
+                    expect($.fn.trigger).toHaveBeenCalledWith('play', emptyArguments);
                 });
             });
 
@@ -314,7 +317,7 @@ function(VideoPlayer, HLS) {
                 });
 
                 it('pause the video caption', function() {
-                    expect($.fn.trigger).toHaveBeenCalledWith('pause', empty_arguments);
+                    expect($.fn.trigger).toHaveBeenCalledWith('pause', emptyArguments);
                 });
             });
 
@@ -334,7 +337,7 @@ function(VideoPlayer, HLS) {
                 });
 
                 it('pause the video caption', function() {
-                    expect($.fn.trigger).toHaveBeenCalledWith('ended', empty_arguments);
+                    expect($.fn.trigger).toHaveBeenCalledWith('ended', emptyArguments);
                 });
             });
         });
@@ -1011,6 +1014,49 @@ function(VideoPlayer, HLS) {
                 );
             });
         });
+
+        describe('Overlay Play Button', function() {
+            var playButtonOverlaySelector = '.video-wrapper .btn-play.fa.fa-youtube-play.fa-2x';
+            beforeEach(function() {
+                state = jasmine.initializePlayer();
+            });
+
+            it('shows the play button after player is ready', function(done) {
+                jasmine.waitUntil(function() {
+                    return state.videoPlayer.player.getPlayerState() !== STATUS.UNSTARTED;
+                }).then(function() {
+                    expect($(playButtonOverlaySelector)).not.toHaveClass('is-hidden');
+                }).always(done);
+            });
+
+            it('hides the play button on play', function(done) {
+                $(state.videoPlayer.player.videoEl).trigger('click');  // play
+                jasmine.waitUntil(function() {
+                    return state.videoPlayer.player.getPlayerState() === STATUS.PLAYING;
+                }).then(function() {
+                    expect($(playButtonOverlaySelector)).toHaveClass('is-hidden');
+                }).always(done);
+            });
+
+            it('plays the video when overlay button is clicked', function() {
+                $('.video-wrapper .btn-play').trigger('click');  // play
+                expect(state.videoPlayer.player.getPlayerState()).toEqual(STATUS.PLAYING);
+                expect($(playButtonOverlaySelector)).toHaveClass('is-hidden');
+            });
+
+            it('shows the play button on pause', function(done) {
+                $(state.videoPlayer.player.videoEl).trigger('click');  // play
+                expect(state.videoPlayer.player.getPlayerState()).toEqual(STATUS.PLAYING);
+                $(state.videoPlayer.player.videoEl).trigger('click');  // pause
+                expect(state.videoPlayer.player.getPlayerState()).toEqual(STATUS.PAUSED);
+                jasmine.waitUntil(function() {
+                    return $(playButtonOverlaySelector).attr('class').split(' ')
+                            .indexOf('is-hidden') === -1;
+                }).then(function() {
+                    expect($(playButtonOverlaySelector)).not.toHaveClass('is-hidden');
+                }).always(done);
+            });
+        });
     });
 });
 }(RequireJS.requirejs, RequireJS.require, RequireJS.define));
diff --git a/common/lib/xmodule/xmodule/js/src/video/02_html5_video.js b/common/lib/xmodule/xmodule/js/src/video/02_html5_video.js
index b92c3666f7..49387481a8 100644
--- a/common/lib/xmodule/xmodule/js/src/video/02_html5_video.js
+++ b/common/lib/xmodule/xmodule/js/src/video/02_html5_video.js
@@ -212,22 +212,26 @@ function(_) {
             this.playerState = HTML5Video.PlayerState.PAUSED;
             if ($.isFunction(this.config.events.onReady)) {
                 this.config.events.onReady(null);
+                this.videoOverlayEl.removeClass('is-hidden');
             }
         };
 
         Player.prototype.onPlay = function() {
             this.playerState = HTML5Video.PlayerState.BUFFERING;
             this.callStateChangeCallback();
+            this.videoOverlayEl.addClass('is-hidden');
         };
 
         Player.prototype.onPlaying = function() {
             this.playerState = HTML5Video.PlayerState.PLAYING;
             this.callStateChangeCallback();
+            this.videoOverlayEl.addClass('is-hidden');
         };
 
         Player.prototype.onPause = function() {
             this.playerState = HTML5Video.PlayerState.PAUSED;
             this.callStateChangeCallback();
+            this.videoOverlayEl.removeClass('is-hidden');
         };
 
         Player.prototype.onEnded = function() {
@@ -244,7 +248,7 @@ function(_) {
                     'durationchange', 'volumechange'
                 ],
                 self = this,
-                errorMessage;
+                callback;
 
             this.config = config;
             this.logs = [];
@@ -257,6 +261,9 @@ function(_) {
             // Get the jQuery object and set error event handlers
             this.videoEl = $(this.video);
 
+            // Video player overlay play button
+            this.videoOverlayEl = this.el.find('.video-wrapper .btn-play');
+
             // The player state is used by other parts of the VideoPlayer to
             // determine what the video is currently doing.
             this.playerState = HTML5Video.PlayerState.UNSTARTED;
@@ -265,7 +272,7 @@ function(_) {
 
             // Attach a 'click' event on the <video> element. It will cause the
             // video to pause/play.
-            this.videoEl.on('click', function() {
+            callback = function() {
                 var PlayerState = HTML5Video.PlayerState;
 
                 if (self.playerState === PlayerState.PLAYING) {
@@ -275,7 +282,9 @@ function(_) {
                     self.playerState = PlayerState.PLAYING;
                     self.playVideo();
                 }
-            });
+            };
+            this.videoEl.on('click', callback);
+            this.videoOverlayEl.on('click', callback);
 
             this.debug = false;
             $.each(events, function(index, eventName) {
diff --git a/lms/templates/video.html b/lms/templates/video.html
index 67ec7cd87d..4cebc37f9a 100644
--- a/lms/templates/video.html
+++ b/lms/templates/video.html
@@ -21,7 +21,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string
     <div class="tc-wrapper">
       <div class="video-wrapper">
           <span tabindex="0" class="spinner" aria-hidden="false" aria-label="${_('Loading video player')}"></span>
-          <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
+          <span tabindex="-1" class="btn-play fa fa-youtube-play fa-2x is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
           <div class="video-player-pre"></div>
           <div class="video-player">
               <div id="${id}"></div>