fix poster display issue with hls

EDUCATOR-2606

common/lib/xmodule/xmodule/js/src/video/02_html5_hls_video.js

@@ -6,8 +6,8 @@
 
 (function(requirejs, require, define) {
     'use strict';
-    define('video/02_html5_hls_video.js', ['video/02_html5_video.js', 'hls'],
-    function(HTML5Video, HLS) {
+    define('video/02_html5_hls_video.js', ['underscore', 'video/02_html5_video.js', 'hls'],
+    function(_, HTML5Video, HLS) {
         var HLSVideo = {};
 
         HLSVideo.Player = (function() {
@@ -20,20 +20,29 @@
             function Player(el, config) {
                 var self = this;
 
+                this.config = config;
+
                 // do common initialization independent of player type
                 this.init(el, config);
 
+                _.bindAll(this, 'playVideo', 'pauseVideo', 'onReady');
+
                 // If we have only HLS sources and browser doesn't support HLS then show error message.
                 if (config.HLSOnlySources && !config.canPlayHLS) {
                     this.showErrorMessage(null, '.video-hls-error');
                     return;
                 }
 
+                this.config.state.el.on('initialize', _.once(function() {
+                    console.log('[HLS Video]: HLS Player initialized');
+                    self.showPlayButton();
+                }));
+
                 // Safari has native support to play HLS videos
                 if (config.browserIsSafari) {
                     this.videoEl.attr('src', config.videoSources[0]);
                 } else {
-                    this.hls = new HLS();
+                    this.hls = new HLS({autoStartLoad: false});
                     this.hls.loadSource(config.videoSources[0]);
                     this.hls.attachMedia(this.video);
 
@@ -49,6 +58,7 @@
                                 };
                             })
                         );
+                        self.config.onReadyHLS();
                     });
                     this.hls.on(HLS.Events.LEVEL_SWITCHED, function(event, data) {
                         var level = self.hls.levels[data.level];
@@ -66,6 +76,31 @@
             Player.prototype = Object.create(HTML5Video.Player.prototype);
             Player.prototype.constructor = Player;
 
+            Player.prototype.playVideo = function() {
+                HTML5Video.Player.prototype.updatePlayerLoadingState.apply(this, ['show']);
+                if (!this.config.browserIsSafari) {
+                    this.hls.startLoad();
+                }
+                HTML5Video.Player.prototype.playVideo.apply(this);
+            };
+
+            Player.prototype.pauseVideo = function() {
+                HTML5Video.Player.prototype.pauseVideo.apply(this);
+                HTML5Video.Player.prototype.updatePlayerLoadingState.apply(this, ['hide']);
+                if (!this.config.browserIsSafari) {
+                    this.hls.stopLoad();
+                }
+            };
+
+            Player.prototype.onPlaying = function() {
+                HTML5Video.Player.prototype.onPlaying.apply(this);
+                HTML5Video.Player.prototype.updatePlayerLoadingState.apply(this, ['hide']);
+            };
+
+            Player.prototype.onReady = function() {
+                this.config.events.onReady(null);
+            };
+
             /**
              * Handler for HLS video errors. This only takes care of fatal erros, non-fatal errors
              * are automatically handled by hls.js

common/lib/xmodule/xmodule/js/src/video/02_html5_video.js

@@ -95,6 +95,38 @@ function(_) {
             this.videoEl.on('error', this.onError.bind(this));
         }
 
+        Player.prototype.showPlayButton = function() {
+            this.videoOverlayEl.removeClass('is-hidden');
+        };
+
+        Player.prototype.hidePlayButton = function() {
+            this.videoOverlayEl.addClass('is-hidden');
+        };
+
+        Player.prototype.showLoading = function() {
+            this.el
+                .removeClass('is-initialized')
+                .find('.spinner')
+                .removeAttr('tabindex')
+                .attr({'aria-hidden': 'false'});
+        };
+
+        Player.prototype.hideLoading = function() {
+            this.el
+                .addClass('is-initialized')
+                .find('.spinner')
+                .attr({'aria-hidden': 'false', tabindex: -1});
+        };
+
+        Player.prototype.updatePlayerLoadingState = function(state) {
+            if (state === 'show') {
+                this.hidePlayButton();
+                this.showLoading();
+            } else if (state === 'hide') {
+                this.hideLoading();
+            }
+        };
+
         Player.prototype.callStateChangeCallback = function() {
             if ($.isFunction(this.config.events.onStateChange)) {
                 this.config.events.onStateChange({
@@ -211,11 +243,15 @@ function(_) {
             this.videoEl.remove();
         };
 
+        Player.prototype.onReady = function() {
+            this.config.events.onReady(null);
+            this.showPlayButton();
+        };
+
         Player.prototype.onLoadedMetadata = function() {
             this.playerState = HTML5Video.PlayerState.PAUSED;
             if ($.isFunction(this.config.events.onReady)) {
-                this.config.events.onReady(null);
-                this.videoOverlayEl.removeClass('is-hidden');
+                this.onReady();
             }
         };
 
@@ -234,7 +270,7 @@ function(_) {
         Player.prototype.onPause = function() {
             this.playerState = HTML5Video.PlayerState.PAUSED;
             this.callStateChangeCallback();
-            this.videoOverlayEl.removeClass('is-hidden');
+            this.showPlayButton();
         };
 
         Player.prototype.onEnded = function() {

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

@@ -179,6 +179,8 @@ function(HTML5Video, HTML5HLSVideo, Resizer, HLS, _, Time) {
                 state.videoPlayer.player = new HTML5HLSVideo.Player(
                     state.el,
                     _.extend({}, commonPlayerConfig, {
+                        state: state,
+                        onReadyHLS: function() { dfd.resolve(); },
                         videoSources: state.HLSVideoSources,
                         canPlayHLS: state.canPlayHLS,
                         HLSOnlySources: state.HLSOnlySources