@oat-sa/tao-core-ui 1.6.2 → 1.6.3

package/dist/mediaplayer/players/html5.js

@@ -1,4 +1,4 @@
-define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support', 'handlebars', 'i18n', 'lodash', 'lib/dompurify/purify'], function ($$1, UrlParser, eventifier, support, Handlebars, __, _, DOMPurify) { 'use strict';
+define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support', 'handlebars', 'i18n', 'lodash', 'lib/dompurify/purify', 'ui/mediaplayer/utils/reminder', 'ui/mediaplayer/utils/timeObserver'], function ($$1, UrlParser, eventifier, support, Handlebars, __, _, DOMPurify, reminderManagerFactory, timeObserverFactory) { 'use strict';
 
   $$1 = $$1 && $$1.hasOwnProperty('default') ? $$1['default'] : $$1;
   UrlParser = UrlParser && UrlParser.hasOwnProperty('default') ? UrlParser['default'] : UrlParser;
@@ -8,6 +8,8 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
   __ = __ && __.hasOwnProperty('default') ? __['default'] : __;
   _ = _ && _.hasOwnProperty('default') ? _['default'] : _;
   DOMPurify = DOMPurify && DOMPurify.hasOwnProperty('default') ? DOMPurify['default'] : DOMPurify;
+  reminderManagerFactory = reminderManagerFactory && reminderManagerFactory.hasOwnProperty('default') ? reminderManagerFactory['default'] : reminderManagerFactory;
+  timeObserverFactory = timeObserverFactory && timeObserverFactory.hasOwnProperty('default') ? timeObserverFactory['default'] : timeObserverFactory;
 
   function _typeof(obj) {
     "@babel/helpers - typeof";
@@ -261,47 +263,56 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
    */
   /**
    * CSS namespace
-   * @type {String}
+   * @type {string}
    */
 
   var ns = '.mediaplayer';
   /**
    * Range value of the volume
-   * @type {Number}
+   * @type {number}
    */
 
   var volumeRange = 100;
+  /**
+   * Delay before considering a media stalled
+   * @type {number}
+   */
+
+  var stalledDetectionDelay = 2000;
   /**
    * List of media events that can be listened to for debugging
-   * @type {String[]}
+   * @type {string[]}
    */
 
   var mediaEvents = ['abort', 'canplay', 'canplaythrough', 'canshowcurrentframe', 'dataunavailable', 'durationchange', 'emptied', 'empty', 'ended', 'error', 'loadeddata', 'loadedfirstframe', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting'];
   /**
    * List of player events that can be listened to for debugging
-   * @type {String[]}
+   * @type {string[]}
    */
 
-  var playerEvents = ['end', 'error', 'pause', 'play', 'playing', 'ready', 'recovererror', 'resize', 'stalled', 'timeupdate'];
+  var playerEvents = ['end', 'error', 'pause', 'play', 'playing', 'ready', 'resize', 'stalled', 'timeupdate'];
   /**
    * Defines a player object dedicated to the native HTML5 player
    * @param {jQuery} $container - Where to render the player
-   * @param {Object} config - The list of config entries
+   * @param {object} config - The list of config entries
    * @param {Array} config.sources - The list of media sources
-   * @param {String} [config.type] - The type of player (video or audio) (default: video)
-   * @param {Boolean} [config.preview] - Enables the media preview (load media metadata)
-   * @param {Boolean} [config.debug] - Enables the debug mode
-   * @returns {Object} player
+   * @param {string} [config.type] - The type of player (video or audio) (default: video)
+   * @param {boolean} [config.preview] - Enables the media preview (load media metadata)
+   * @param {boolean} [config.debug] - Enables the debug mode
+   * @param {number} [config.config.stalledDetectionDelay] - The delay before considering a media is stalled
+   * @returns {object} player
    */
 
   function html5PlayerFactory($container) {
     var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var type = config.type || 'video';
     var sources = config.sources || [];
+    var updateObserver = reminderManagerFactory();
+    var timeObserver = timeObserverFactory();
+    config.stalledDetectionDelay = config.stalledDetectionDelay || stalledDetectionDelay;
     var $media;
     var media;
-    var playback = false;
-    var stalled = false;
+    var state = {};
 
     var getDebugContext = function getDebugContext(action) {
       var networkState = media && media.networkState;
@@ -317,10 +328,10 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
         args[_key - 1] = arguments[_key];
       }
 
-      return config.debug && (_window$console = window.console).log.apply(_window$console, [getDebugContext(action)].concat(args));
+      return (config.debug === true || config.debug === action) && (_window$console = window.console).log.apply(_window$console, [getDebugContext(action)].concat(args));
     };
 
-    var player = {
+    return eventifier({
       init: function init() {
         var _this = this;
 
@@ -331,6 +342,7 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
         var poster = '';
         var link = '';
         var result = false;
+        state = {};
         sources.forEach(function (source) {
           if (!page.sameDomain(source.src)) {
             cors = true;
@@ -351,54 +363,105 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
           link: link
         }));
         $container.append($media);
-        playback = false;
-        stalled = false;
         media = $media.get(0);
-        result = !!(media && support.checkSupport(media)); // remove the browser native controls if we can use the API instead
+        result = !!(media && support.checkSupport(media)); // Remove the browser native controls if we can use the API instead
 
         if (support.canControl()) {
           $media.removeAttr('controls');
-        }
+        } // Detect stalled video when the timer suddenly jump to the end
+
 
+        timeObserver.removeAllListeners().on('irregularity', function (position) {
+          if (state.playback && state.stallDetection) {
+            _this.stalled(position);
+          }
+        });
         $media.on("play".concat(ns), function () {
-          playback = true;
+          state.playback = true;
+          state.playedViaApi = false;
+          timeObserver.init(media.currentTime, media.duration);
 
           _this.trigger('play');
         }).on("pause".concat(ns), function () {
+          if (state.stallDetection && !state.pausedViaApi && updateObserver.running && updateObserver.elapsed < 100) {
+            // The pause event may be triggered after a connectivity issue as the player is out of data
+            _this.stalled();
+          }
+
+          state.pausedViaApi = false;
+          state.playing = false;
+          updateObserver.stop();
+
           _this.trigger('pause');
+        }).on("seeked".concat(ns), function () {
+          // When the user try changing the current playing position while the network is down,
+          // the player will end the playback by moving straight to the end.
+          if (state.seekedViaApi && Math.floor(state.seekAt) !== Math.floor(media.currentTime)) {
+            state.stallDetection = true;
+          }
+
+          state.seekedViaApi = false;
         }).on("ended".concat(ns), function () {
-          playback = false;
+          updateObserver.forget().stop();
+          timeObserver.update(media.currentTime);
+          state.playback = false;
+          state.playing = false;
 
           _this.trigger('end');
         }).on("timeupdate".concat(ns), function () {
+          state.playing = true;
+          updateObserver.start();
+          timeObserver.update(media.currentTime);
+
           _this.trigger('timeupdate');
         }).on('loadstart', function () {
-          if (stalled) {
-            return;
-          }
-
           if (media.networkState === HTMLMediaElement.NETWORK_NO_SOURCE) {
             _this.trigger('error');
           }
 
           if (!config.preview && media.networkState === HTMLMediaElement.NETWORK_IDLE) {
             _this.trigger('ready');
-          }
+          } // The media may be unreachable straight from the beginning
+
+
+          _this.detectStalledNetwork();
+        }).on("waiting".concat(ns), function () {
+          // The "waiting" event means the player is pending data,
+          // it may be the symptom of a connectivity issue
+          _this.detectStalledNetwork();
         }).on("error".concat(ns), function () {
-          if (media.networkState === HTMLMediaElement.NETWORK_NO_SOURCE) {
+          if (media.networkState === HTMLMediaElement.NETWORK_NO_SOURCE || media.error instanceof MediaError && media.error.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
+            // No source means the player does not support the supplied media.
+            // Or it can be more explicit with the not supported error.
+            // There is nothing that we can do from this stage.
             _this.trigger('error');
           } else {
-            _this.trigger('recovererror', media.networkState === HTMLMediaElement.NETWORK_LOADING);
+            // Other errors need special attention as they can be recoverable
+            _this.handleError(media.error);
           }
-        }).on("canplay".concat(ns), function () {
+        }).on('loadedmetadata', function () {
+          timeObserver.init(media.currentTime, media.duration);
 
-          _this.trigger('ready');
+          _this.ready();
+        }).on("canplay".concat(ns), function () {
+          if (!state.stalled) {
+            _this.ready();
+          }
         }).on("stalled".concat(ns), function () {
-          stalled = true;
-
-          _this.trigger('stalled');
+          // The "stalled" event may be triggered once the player is halted after initialisation,
+          // but this does not mean the playback is actually stalled, hence we only take care of the playing state
+          if (state.playing && !media.paused) {
+            _this.handleError(media.error);
+          }
         }).on("playing".concat(ns), function () {
-          stalled = false;
+          if (state.stallDetection) {
+            // The "playing" event may occur after a connectivity issue.
+            // For the sake of the stall detection, we need to discard this event
+            return;
+          }
+
+          updateObserver.forget().start();
+          state.playing = true;
 
           _this.trigger('playing');
         }); // install debug logger
@@ -421,18 +484,120 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
           });
         }
 
-        sources.forEach(function (source) {
-          var src = source.src,
-              type = source.type;
-
-          _this.addMedia(src, type);
-        });
+        result = result && sources.reduce(function (supported, source) {
+          return _this.addMedia(source.src, source.type) || supported;
+        }, false);
         return result;
       },
+      handleError: function handleError(error) {
+        var _this2 = this;
+
+        // Discard legitimate and non-blocking errors
+        switch (error && error.name) {
+          case 'NotAllowedError':
+            debug('api call', 'handleError', 'the autoplay is not allowed without a user interaction', error);
+            return;
+
+          case 'AbortError':
+            debug('api call', 'handleError', 'the action has been aborted for some reason', error);
+            return;
+        }
+
+        debug('api call', 'handleError', error); // Detect if the playback can continue a bit
+
+        var canContinueTemporarily = media && (media.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA || media.readyState === HTMLMediaElement.HAVE_FUTURE_DATA || media.readyState === HTMLMediaElement.HAVE_CURRENT_DATA); // If a connectivity error occurs we may need to enter in stalled mode unless we can wait a bit
+
+        if (error instanceof MediaError && (error.code === MediaError.MEDIA_ERR_NETWORK || error.code === MediaError.MEDIA_ERR_DECODE) && !canContinueTemporarily) {
+          this.stalled();
+          return;
+        } // To this point, there is a big chance the media is stalled.
+        // We start an observer to remind as soon as an irregularity occurs on the time update
+
+
+        state.stallDetection = true;
+        updateObserver.remind(function () {
+          // The last time update is a bit old, the media is most probably stalled now
+          if (updateObserver.elapsed >= config.stalledDetectionDelay) {
+            _this2.stalled();
+          }
+        }, config.stalledDetectionDelay);
+        updateObserver.start();
+      },
+      ready: function ready() {
+        if (!state.ready) {
+          state.ready = true;
+          this.trigger('ready');
+        }
+      },
+      detectStalledNetwork: function detectStalledNetwork() {
+        var _this3 = this;
+
+        // Install an observer that will watch the network state after a small delay.
+        // It is needed since the network state may need time to settle.
+        setTimeout(function () {
+          if (media && media.networkState === HTMLMediaElement.NETWORK_NO_SOURCE && media.readyState === HTMLMediaElement.HAVE_NOTHING) {
+            if (!state.ready) {
+              _this3.trigger('ready');
+            }
+
+            _this3.stalled();
+          }
+        }, config.stalledDetectionDelay);
+      },
+      stalled: function stalled(position) {
+        debug('api call', 'stalled');
+
+        if (media) {
+          if ('undefined' !== typeof position) {
+            state.stalledAt = position;
+          } else {
+            state.stalledAt = timeObserver.position;
+          }
+        }
+
+        state.stalled = true;
+        state.stallDetection = false;
+        updateObserver.forget().stop();
+        this.pause();
+        this.trigger('stalled');
+      },
+      recover: function recover() {
+        debug('api call', 'recover');
+        state.stalled = false;
+        state.stallDetection = false;
+
+        if (media) {
+          // Special processing of video player to prevent visual glitch while reloading
+          if (media.tagName === 'VIDEO') {
+            // Temporarily set the size of the media to prevent a shrink while reloading it
+            $media.width($media.width());
+            $media.height($media.height());
+            $media.on('loadedmetadata.recover', function () {
+              $media.off('loadedmetadata.recover');
+              $media.css({
+                width: '',
+                height: ''
+              });
+            });
+          }
+
+          media.load();
+
+          if (state.stalledAt) {
+            this.seek(state.stalledAt);
+          }
+
+          if (state.playback && !state.playing || state.playedViaApi) {
+            this.play();
+          }
+        }
+      },
       destroy: function destroy() {
         debug('api call', 'destroy');
         this.stop();
         this.removeAllListeners();
+        updateObserver.forget();
+        timeObserver.removeAllListeners();
 
         if ($media) {
           $media.off(ns).remove();
@@ -440,8 +605,7 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
 
         $media = void 0;
         media = void 0;
-        playback = false;
-        stalled = false;
+        state = {};
       },
       getMedia: function getMedia() {
         debug('api call', 'getMedia', media);
@@ -506,40 +670,54 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
 
         if (media) {
           media.currentTime = parseFloat(time);
+          state.seekedViaApi = true;
+          state.seekAt = media.currentTime;
+          timeObserver.seek(media.currentTime);
 
-          if (!playback) {
+          if (!state.playback) {
             this.play();
           }
         }
       },
       play: function play() {
+        var _this4 = this;
+
         debug('api call', 'play');
 
         if (media) {
-          media.play().catch(function (err) {
-            return debug('playback error', err);
-          });
+          state.playedViaApi = true;
+          var startPlayPromise = media.play();
+
+          if ('undefined' !== typeof startPlayPromise) {
+            startPlayPromise.catch(function (error) {
+              return _this4.handleError(error);
+            });
+          }
         }
       },
       pause: function pause() {
         debug('api call', 'pause');
 
         if (media) {
+          if (!media.paused) {
+            state.pausedViaApi = true;
+          }
+
           media.pause();
         }
       },
       stop: function stop() {
         debug('api call', 'stop');
 
-        if (media && playback) {
+        if (media && media.duration && state.playback && !state.stalled) {
           media.currentTime = media.duration;
         }
       },
-      mute: function mute(state) {
-        debug('api call', 'mute', state);
+      mute: function mute(muted) {
+        debug('api call', 'mute', muted);
 
         if (media) {
-          media.muted = !!state;
+          media.muted = !!muted;
         }
       },
       isMuted: function isMuted() {
@@ -552,11 +730,11 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
         debug('api call', 'isMuted', mute);
         return mute;
       },
-      addMedia: function addMedia(src, type) {
-        debug('api call', 'addMedia', src, type);
+      addMedia: function addMedia(src, srcType) {
+        debug('api call', 'addMedia', src, srcType);
 
         if (media) {
-          if (!support.checkSupport(media, type)) {
+          if (!support.checkSupport(media, srcType)) {
             return false;
           }
         }
@@ -564,25 +742,24 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
         if (src && $media) {
           $media.append(sourceTpl({
             src: src,
-            type: type
+            type: srcType
           }));
           return true;
         }
 
         return false;
       },
-      setMedia: function setMedia(src, type) {
-        debug('api call', 'setMedia', src, type);
+      setMedia: function setMedia(src, srcType) {
+        debug('api call', 'setMedia', src, srcType);
 
         if ($media) {
           $media.empty();
-          return this.addMedia(src, type);
+          return this.addMedia(src, srcType);
         }
 
         return false;
       }
-    };
-    return eventifier(player);
+    });
   }
 
   return html5PlayerFactory;

package/dist/mediaplayer/support.js

@@ -21,11 +21,13 @@ define(function () { 'use strict';
     /**
      * A Regex to detect Apple mobile browsers
      * @type {RegExp}
+     * @private
      */
     var reAppleMobiles = /ip(hone|od)/i;
     /**
      * A list of MIME types with codec declaration
      * @type {Object}
+     * @private
      */
 
     var supportedMimeTypes = {
@@ -39,11 +41,23 @@ define(function () { 'use strict';
       'audio/ogg': 'audio/ogg; codecs="vorbis"',
       'audio/wav': 'audio/wav; codecs="1"'
     };
+    /**
+     * Checks support for a MIME type.
+     * @param {HTMLMediaElement} media The media element on which check support
+     * @param {String} mimeType A MIME type to check the support for
+     * @returns {string}
+     * @private
+     */
+
+    var findSupport = function findSupport(media, mimeType) {
+      return media.canPlayType(mimeType).replace(/no/, '');
+    };
     /**
      * Support detection
      * @type {Object}
      */
 
+
     var support = {
       /**
        * Checks if the browser can play media
@@ -53,13 +67,13 @@ define(function () { 'use strict';
        * @private
        */
       checkSupport: function checkSupport(media, mimeType) {
-        var support = !!media.canPlayType;
+        var support = media.canPlayType;
 
         if (support && mimeType) {
-          return !!media.canPlayType(supportedMimeTypes[mimeType] || mimeType).replace(/no/, '');
+          return !!(supportedMimeTypes[mimeType] && findSupport(media, supportedMimeTypes[mimeType]) || findSupport(media, mimeType));
         }
 
-        return support;
+        return !!support;
       },
 
       /**