Merge pull request #15199 from edx/ammar/edu-211-html5-player-overlay-play-button

show play button overlay

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;
       }
     }
 

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>

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">

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">

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>

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>

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>

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>

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));

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) {

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>