@oat-sa/tao-core-ui 1.60.2 → 1.62.0

package/dist/mediaplayer.js

@@ -1,1876 +1,1586 @@
 define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/mimetype', 'core/store', 'ui/mediaplayer/support', 'ui/mediaplayer/players', 'handlebars', 'i18n', 'lib/dompurify/purify', 'css!ui/mediaplayer/css/player.css', 'nouislider'], function ($$1, _, async, UrlParser, eventifier, mimetype, store, support, players, Handlebars, __, DOMPurify, player_css, nouislider) { 'use strict';
 
-  $$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
-  _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
-  async = async && Object.prototype.hasOwnProperty.call(async, 'default') ? async['default'] : async;
-  UrlParser = UrlParser && Object.prototype.hasOwnProperty.call(UrlParser, 'default') ? UrlParser['default'] : UrlParser;
-  eventifier = eventifier && Object.prototype.hasOwnProperty.call(eventifier, 'default') ? eventifier['default'] : eventifier;
-  mimetype = mimetype && Object.prototype.hasOwnProperty.call(mimetype, 'default') ? mimetype['default'] : mimetype;
-  store = store && Object.prototype.hasOwnProperty.call(store, 'default') ? store['default'] : store;
-  support = support && Object.prototype.hasOwnProperty.call(support, 'default') ? support['default'] : support;
-  players = players && Object.prototype.hasOwnProperty.call(players, 'default') ? players['default'] : players;
-  Handlebars = Handlebars && Object.prototype.hasOwnProperty.call(Handlebars, 'default') ? Handlebars['default'] : Handlebars;
-  __ = __ && Object.prototype.hasOwnProperty.call(__, 'default') ? __['default'] : __;
-  DOMPurify = DOMPurify && Object.prototype.hasOwnProperty.call(DOMPurify, 'default') ? DOMPurify['default'] : DOMPurify;
-
-  function _typeof(obj) {
-    "@babel/helpers - typeof";
-
-    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-      return typeof obj;
-    } : function (obj) {
-      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    }, _typeof(obj);
-  }
-
-  function Helpers0 (hb) {
-    //register a i18n helper
-    hb.registerHelper('__', function (key) {
-      return __(key);
-    });
-    /**
-     * Register dompurify helper
-     *
-     * https://github.com/cure53/DOMPurify
-     * with config SAFE_FOR_TEMPLATES: true
-     * to make output safe for template systems
-     */
-
-    hb.registerHelper('dompurify', function (context) {
-      return DOMPurify.sanitize(context);
-    });
-    /**
-     * Register join helper
-     *
-     * Example :
-     * var values = {a:v1, b:v2, c:v3};
-     * Using {{{join attributes '=' ' ' '"'}}} will return : a="v1" b="v2" c="v3"
-     * Using {{{join values null ' or ' '*'}}} will return : *v1* or *v2* or *v3*
+    $$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
+    _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
+    async = async && Object.prototype.hasOwnProperty.call(async, 'default') ? async['default'] : async;
+    UrlParser = UrlParser && Object.prototype.hasOwnProperty.call(UrlParser, 'default') ? UrlParser['default'] : UrlParser;
+    eventifier = eventifier && Object.prototype.hasOwnProperty.call(eventifier, 'default') ? eventifier['default'] : eventifier;
+    mimetype = mimetype && Object.prototype.hasOwnProperty.call(mimetype, 'default') ? mimetype['default'] : mimetype;
+    store = store && Object.prototype.hasOwnProperty.call(store, 'default') ? store['default'] : store;
+    support = support && Object.prototype.hasOwnProperty.call(support, 'default') ? support['default'] : support;
+    players = players && Object.prototype.hasOwnProperty.call(players, 'default') ? players['default'] : players;
+    Handlebars = Handlebars && Object.prototype.hasOwnProperty.call(Handlebars, 'default') ? Handlebars['default'] : Handlebars;
+    __ = __ && Object.prototype.hasOwnProperty.call(__, 'default') ? __['default'] : __;
+    DOMPurify = DOMPurify && Object.prototype.hasOwnProperty.call(DOMPurify, 'default') ? DOMPurify['default'] : DOMPurify;
+
+    /**
+     * This program is free software; you can redistribute it and/or
+     * modify it under the terms of the GNU General Public License
+     * as published by the Free Software Foundation; under version 2
+     * of the License (non-upgradable).
+     *
+     * This program is distributed in the hope that it will be useful,
+     * but WITHOUT ANY WARRANTY; without even the implied warranty of
+     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     * GNU General Public License for more details.
+     *
+     * You should have received a copy of the GNU General Public License
+     * along with this program; if not, write to the Free Software
+     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+     *
+     * Copyright (c) 2013-2019 (original work) Open Assessment Technologies SA (under the project TAO-PRODUCT);
+     *
+     *
      */
+    function Helpers0 (hb) {
+      //register a i18n helper
+      hb.registerHelper('__', function (key) {
+        return __(key);
+      });
 
-    hb.registerHelper('join', function (arr, keyValueGlue, fragmentGlue, wrapper) {
-      var fragments = [];
-      keyValueGlue = typeof keyValueGlue === 'string' ? keyValueGlue : undefined;
-      fragmentGlue = typeof fragmentGlue === 'string' ? fragmentGlue : ' ';
-      wrapper = typeof wrapper === 'string' ? wrapper : '"';
-
-      _.forIn(arr, function (value, key) {
-        var fragment = '';
+      /**
+       * Register dompurify helper
+       *
+       * https://github.com/cure53/DOMPurify
+       * with config SAFE_FOR_TEMPLATES: true
+       * to make output safe for template systems
+       */
+      hb.registerHelper('dompurify', function (context) {
+        return DOMPurify.sanitize(context);
+      });
 
-        if (value !== null || value !== undefined) {
-          if (typeof value === 'boolean') {
-            value = value ? 'true' : 'false';
-          } else if (_typeof(value) === 'object') {
-            value = _.values(value).join(' ');
+      /**
+       * Register join helper
+       *
+       * Example :
+       * var values = {a:v1, b:v2, c:v3};
+       * Using {{{join attributes '=' ' ' '"'}}} will return : a="v1" b="v2" c="v3"
+       * Using {{{join values null ' or ' '*'}}} will return : *v1* or *v2* or *v3*
+       */
+      hb.registerHelper('join', function (arr, keyValueGlue, fragmentGlue, wrapper) {
+        var fragments = [];
+        keyValueGlue = typeof keyValueGlue === 'string' ? keyValueGlue : undefined;
+        fragmentGlue = typeof fragmentGlue === 'string' ? fragmentGlue : ' ';
+        wrapper = typeof wrapper === 'string' ? wrapper : '"';
+        _.forIn(arr, function (value, key) {
+          var fragment = '';
+          if (value !== null || value !== undefined) {
+            if (typeof value === 'boolean') {
+              value = value ? 'true' : 'false';
+            } else if (typeof value === 'object') {
+              value = _.values(value).join(' ');
+            }
+          } else {
+            value = '';
           }
-        } else {
-          value = '';
-        }
+          if (keyValueGlue !== undefined) {
+            fragment += key + keyValueGlue;
+          }
+          fragment += wrapper + value + wrapper;
+          fragments.push(fragment);
+        });
+        return fragments.join(fragmentGlue);
+      });
 
-        if (keyValueGlue !== undefined) {
-          fragment += key + keyValueGlue;
+      //register a classic "for loop" helper
+      //it also adds a local variable "i" as the index in each iteration loop
+      hb.registerHelper('for', function (startIndex, stopIndex, increment, options) {
+        var ret = '';
+        startIndex = parseInt(startIndex);
+        stopIndex = parseInt(stopIndex);
+        increment = parseInt(increment);
+        for (var i = startIndex; i < stopIndex; i += increment) {
+          ret += options.fn(_.extend({}, this, {
+            i: i
+          }));
+        }
+        return ret;
+      });
+      hb.registerHelper('equal', function (var1, var2, options) {
+        if (var1 == var2) {
+          return options.fn(this);
+        } else {
+          return options.inverse(this);
         }
-
-        fragment += wrapper + value + wrapper;
-        fragments.push(fragment);
       });
 
-      return fragments.join(fragmentGlue);
-    }); //register a classic "for loop" helper
-    //it also adds a local variable "i" as the index in each iteration loop
-
-    hb.registerHelper('for', function (startIndex, stopIndex, increment, options) {
-      var ret = '';
-      startIndex = parseInt(startIndex);
-      stopIndex = parseInt(stopIndex);
-      increment = parseInt(increment);
-
-      for (var i = startIndex; i < stopIndex; i += increment) {
-        ret += options.fn(_.extend({}, this, {
-          i: i
-        }));
-      }
-
-      return ret;
-    });
-    hb.registerHelper('equal', function (var1, var2, options) {
-      if (var1 == var2) {
-        return options.fn(this);
-      } else {
-        return options.inverse(this);
-      }
-    }); // register a "get property" helper
-    // it gets the named property from the provided context
-
-    hb.registerHelper('property', function (name, context) {
-      return context[name] || '';
-    }); // register an 'includes' helper
-    // it checks if value is in array
-
-    hb.registerHelper('includes', function (haystack, needle, options) {
-      if (_.contains(haystack, needle)) {
-        return options.fn(this);
-      }
-    });
-  }
-
-  if (!Helpers0.__initialized) {
-    Helpers0(Handlebars);
-    Helpers0.__initialized = true;
-  }
-  var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
-    this.compilerInfo = [4,'>= 1.0.0'];
-  helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
-    var buffer = "", stack1, helper, options, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing;
-
-
-    buffer += "<div class=\"mediaplayer ";
-    if (helper = helpers.type) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-    else { helper = (depth0 && depth0.type); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-    buffer += escapeExpression(stack1)
-      + "\">\r\n    <div class=\"player\">\r\n        <div class=\"player-overlay\">\r\n            <a class=\"action play\" data-control=\"play\"><span class=\"icon icon-play\" title=\""
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Play", options) : helperMissing.call(depth0, "__", "Play", options)))
-      + "\"></span></a>\r\n            <a class=\"action play\" data-control=\"pause\"><span class=\"icon icon-pause\" title=\""
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Pause", options) : helperMissing.call(depth0, "__", "Pause", options)))
-      + "\"></span></a>\r\n            <a class=\"action reload\" data-control=\"start\">\r\n                <span class=\"icon icon-play\" title=\""
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Start", options) : helperMissing.call(depth0, "__", "Start", options)))
-      + "\"></span>\r\n                <div class=\"message\">"
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Click to start", options) : helperMissing.call(depth0, "__", "Click to start", options)))
-      + "</div>\r\n            </a>\r\n            <a class=\"action reload\" data-control=\"reload\">\r\n                <div class=\"icon icon-reload\" title=\""
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Reload", options) : helperMissing.call(depth0, "__", "Reload", options)))
-      + "\"></div>\r\n                <div class=\"message\">"
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "You are encountering a prolonged connectivity loss.", options) : helperMissing.call(depth0, "__", "You are encountering a prolonged connectivity loss.", options)))
-      + " "
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Click to reload.", options) : helperMissing.call(depth0, "__", "Click to reload.", options)))
-      + "</div>\r\n            </a>\r\n        </div>\r\n    </div>\r\n    <div class=\"controls\">\r\n        <div class=\"bar\">\r\n            <div class=\"control actions playback\">\r\n                <a class=\"action play\" data-control=\"play\" title=\""
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Play", options) : helperMissing.call(depth0, "__", "Play", options)))
-      + "\"><span class=\"icon icon-play\"></span></a>\r\n                <a class=\"action play\" data-control=\"pause\" title=\""
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Pause", options) : helperMissing.call(depth0, "__", "Pause", options)))
-      + "\"><span class=\"icon icon-pause\"></span></a>\r\n            </div>\r\n            <div class=\"control seek\"><div class=\"slider\"></div></div>\r\n            <div class=\"control infos timer\">\r\n                <span class=\"info time\" data-control=\"time-cur\" title=\""
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Current playback position", options) : helperMissing.call(depth0, "__", "Current playback position", options)))
-      + "\">--:--</span>\r\n                <span class=\"info time\" data-control=\"time-end\" title=\""
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Total duration", options) : helperMissing.call(depth0, "__", "Total duration", options)))
-      + "\">--:--</span>\r\n            </div>\r\n            <div class=\"control actions sound\">\r\n                <div class=\"volume\"><div class=\"slider\"></div></div>\r\n                <a class=\"action mute\" data-control=\"mute\" title=\""
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Mute", options) : helperMissing.call(depth0, "__", "Mute", options)))
-      + "\"><span class=\"icon icon-sound\"></span></a>\r\n                <a class=\"action mute\" data-control=\"unmute\" title=\""
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Restore sound", options) : helperMissing.call(depth0, "__", "Restore sound", options)))
-      + "\"><span class=\"icon icon-mute\"></span></a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"error\">\r\n        <div class=\"message\">"
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "This media cannot be played!", options) : helperMissing.call(depth0, "__", "This media cannot be played!", options)))
-      + "</div>\r\n    </div>\r\n</div>\r\n";
-    return buffer;
-    });
-  function playerTpl(data, options, asString) {
-    var html = Template(data, options);
-    return (asString || true) ? html : $(html);
-  }
-
-  /**
-   * This program is free software; you can redistribute it and/or
-   * modify it under the terms of the GNU General Public License
-   * as published by the Free Software Foundation; under version 2
-   * of the License (non-upgradable).
-   *
-   * This program is distributed in the hope that it will be useful,
-   * but WITHOUT ANY WARRANTY; without even the implied warranty of
-   * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-   * GNU General Public License for more details.
-   *
-   * You should have received a copy of the GNU General Public License
-   * along with this program; if not, write to the Free Software
-   * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-   *
-   * Copyright (c) 2015-2021 (original work) Open Assessment Technologies SA ;
-   */
-  /**
-   * CSS namespace
-   * @type {String}
-   */
-
-  var ns = '.mediaplayer';
-  /**
-   * Minimum value of the volume
-   * @type {Number}
-   */
-
-  var volumeMin = 0;
-  /**
-   * Maximum value of the volume
-   * @type {Number}
-   */
-
-  var volumeMax = 100;
-  /**
-   * Threshold (minimum required space above the player) to display the volume
-   * above the bar.
-   * @type {Number}
-   */
-
-  var volumePositionThreshold = 200;
-  /**
-   * Some default values
-   * @type {Object}
-   */
+      // register a "get property" helper
+      // it gets the named property from the provided context
+      hb.registerHelper('property', function (name, context) {
+        return context[name] || '';
+      });
 
-  var defaults = {
-    type: 'video/mp4',
-    video: {
-      width: '100%',
-      height: 'auto'
-    },
-    audio: {
-      width: '100%',
-      height: 'auto'
-    },
-    youtube: {
-      width: 640,
-      height: 360
-    },
-    options: {
-      volume: 80,
-      startMuted: false,
-      maxPlays: 0,
-      replayTimeout: 0,
-      canPause: true,
-      canSeek: true,
-      loop: false,
-      autoStart: false,
-      preview: true,
-      debug: false
+      // register an 'includes' helper
+      // it checks if value is in array
+      hb.registerHelper('includes', function (haystack, needle, options) {
+        if (_.contains(haystack, needle)) {
+          return options.fn(this);
+        }
+      });
     }
-  };
-  /**
-   * Ensures a value is a number
-   * @param {Number|String} value
-   * @returns {Number}
-   */
-
-  var ensureNumber = function ensureNumber(value) {
-    var floatValue = parseFloat(value);
-    return isFinite(floatValue) ? floatValue : 0;
-  };
-  /**
-   * Format a number to string with leading zeros
-   * @param {Number} n
-   * @param {Number} len
-   * @returns {String}
-   */
 
-
-  var leadingZero = function leadingZero(n, len) {
-    var value = n.toString();
-
-    while (value.length < len) {
-      value = "0".concat(value);
+    if (!Helpers0.__initialized) {
+      Helpers0(Handlebars);
+      Helpers0.__initialized = true;
     }
-
-    return value;
-  };
-  /**
-   * Formats a time value to string
-   * @param {Number} time
-   * @returns {String}
-   */
-
-
-  var timerFormat = function timerFormat(time) {
-    var seconds = Math.floor(time % 60);
-    var minutes = Math.floor(time / 60) % 60;
-    var hours = Math.floor(time / 3600);
-    var parts = [];
-
-    if (hours) {
-      parts.push(hours);
+    var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+      this.compilerInfo = [4,'>= 1.0.0'];
+    helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
+      var buffer = "", stack1, helper, options, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing;
+
+
+      buffer += "<div class=\"mediaplayer ";
+      if (helper = helpers.type) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+      else { helper = (depth0 && depth0.type); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+      buffer += escapeExpression(stack1)
+        + "\">\n    <div class=\"player\">\n        <div class=\"player-overlay\">\n            <a class=\"action play\" data-control=\"play\"><span class=\"icon icon-play\" title=\""
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Play", options) : helperMissing.call(depth0, "__", "Play", options)))
+        + "\"></span></a>\n            <a class=\"action play\" data-control=\"pause\"><span class=\"icon icon-pause\" title=\""
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Pause", options) : helperMissing.call(depth0, "__", "Pause", options)))
+        + "\"></span></a>\n            <a class=\"action reload\" data-control=\"start\">\n                <span class=\"icon icon-play\" title=\""
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Start", options) : helperMissing.call(depth0, "__", "Start", options)))
+        + "\"></span>\n                <div class=\"message\">"
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Click to start", options) : helperMissing.call(depth0, "__", "Click to start", options)))
+        + "</div>\n            </a>\n            <a class=\"action reload\" data-control=\"reload\">\n                <div class=\"icon icon-reload\" title=\""
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Reload", options) : helperMissing.call(depth0, "__", "Reload", options)))
+        + "\"></div>\n                <div class=\"message\">"
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "You are encountering a prolonged connectivity loss.", options) : helperMissing.call(depth0, "__", "You are encountering a prolonged connectivity loss.", options)))
+        + " "
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Click to reload.", options) : helperMissing.call(depth0, "__", "Click to reload.", options)))
+        + "</div>\n            </a>\n        </div>\n    </div>\n    <div class=\"controls\">\n        <div class=\"bar\">\n            <div class=\"control actions playback\">\n                <a class=\"action play\" data-control=\"play\" title=\""
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Play", options) : helperMissing.call(depth0, "__", "Play", options)))
+        + "\"><span class=\"icon icon-play\"></span></a>\n                <a class=\"action play\" data-control=\"pause\" title=\""
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Pause", options) : helperMissing.call(depth0, "__", "Pause", options)))
+        + "\"><span class=\"icon icon-pause\"></span></a>\n            </div>\n            <div class=\"control seek\"><div class=\"slider\"></div></div>\n            <div class=\"control infos timer\">\n                <span class=\"info time\" data-control=\"time-cur\" title=\""
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Current playback position", options) : helperMissing.call(depth0, "__", "Current playback position", options)))
+        + "\">--:--</span>\n                <span class=\"info time\" data-control=\"time-end\" title=\""
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Total duration", options) : helperMissing.call(depth0, "__", "Total duration", options)))
+        + "\">--:--</span>\n            </div>\n            <div class=\"control actions sound\">\n                <div class=\"volume\"><div class=\"slider\"></div></div>\n                <a class=\"action mute\" data-control=\"mute\" title=\""
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Mute", options) : helperMissing.call(depth0, "__", "Mute", options)))
+        + "\"><span class=\"icon icon-sound\"></span></a>\n                <a class=\"action mute\" data-control=\"unmute\" title=\""
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Restore sound", options) : helperMissing.call(depth0, "__", "Restore sound", options)))
+        + "\"><span class=\"icon icon-mute\"></span></a>\n            </div>\n        </div>\n    </div>\n    <div class=\"error\">\n        <div class=\"message\">"
+        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "This media cannot be played!", options) : helperMissing.call(depth0, "__", "This media cannot be played!", options)))
+        + "</div>\n    </div>\n</div>\n";
+      return buffer;
+      });
+    function playerTpl(data, options, asString) {
+      var html = Template(data, options);
+      return (asString || true) ? html : $(html);
     }
 
-    parts.push(leadingZero(minutes, 2));
-    parts.push(leadingZero(seconds, 2));
-    return parts.join(':');
-  };
-  /**
-   * Checks if a type needs to be adjusted
-   * @param {String} type
-   * @returns {Boolean}
-   */
-
-
-  var needTypeAdjust = function needTypeAdjust(type) {
-    return 'string' === typeof type && type.indexOf('application') === 0;
-  };
-  /**
-   * Adjust bad type by apllying heuristic on URI
-   * @param {Object|String} source
-   * @returns {String}
-   */
-
-
-  var getAdjustedType = function getAdjustedType(source) {
-    var type = 'video/ogg';
-    var url = source && source.src || source;
-    var ext = url && url.substr(-4);
-
-    if (ext === '.ogg' || ext === '.oga') {
-      type = 'audio/ogg';
-    }
+    /**
+     * This program is free software; you can redistribute it and/or
+     * modify it under the terms of the GNU General Public License
+     * as published by the Free Software Foundation; under version 2
+     * of the License (non-upgradable).
+     *
+     * This program is distributed in the hope that it will be useful,
+     * but WITHOUT ANY WARRANTY; without even the implied warranty of
+     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     * GNU General Public License for more details.
+     *
+     * You should have received a copy of the GNU General Public License
+     * along with this program; if not, write to the Free Software
+     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+     *
+     * Copyright (c) 2015-2021 (original work) Open Assessment Technologies SA ;
+     */
 
-    return type;
-  };
-  /**
-   * Extract a list of media sources from a config object
-   * @param {Object} config
-   * @returns {Array}
-   */
+    /**
+     * CSS namespace
+     * @type {String}
+     */
+    const ns = '.mediaplayer';
 
+    /**
+     * Minimum value of the volume
+     * @type {Number}
+     */
+    const volumeMin = 0;
 
-  var configToSources = function configToSources(config) {
-    var sources = config.sources || [];
-    var url = config.url;
+    /**
+     * Maximum value of the volume
+     * @type {Number}
+     */
+    const volumeMax = 100;
 
-    if (!_.isArray(sources)) {
-      sources = [sources];
-    }
+    /**
+     * Threshold (minimum required space above the player) to display the volume
+     * above the bar.
+     * @type {Number}
+     */
+    const volumePositionThreshold = 200;
 
-    if (url) {
-      if (!_.isArray(config.url)) {
-        url = [url];
+    /**
+     * Some default values
+     * @type {Object}
+     */
+    const defaults = {
+      type: 'video/mp4',
+      video: {
+        width: '100%',
+        height: 'auto'
+      },
+      audio: {
+        width: '100%',
+        height: 'auto'
+      },
+      youtube: {
+        width: 640,
+        height: 360
+      },
+      options: {
+        volume: 80,
+        startMuted: false,
+        maxPlays: 0,
+        replayTimeout: 0,
+        canPause: true,
+        canSeek: true,
+        loop: false,
+        autoStart: false,
+        preview: true,
+        debug: false
       }
+    };
 
-      sources = sources.concat(url);
-    }
-
-    return sources;
-  };
-  /**
-   * Checks if the browser can play media
-   * @param {String} sizeProps Width or Height
-   * @returns {Boolean}
-   */
-
-
-  var isResponsiveSize = function isResponsiveSize(sizeProps) {
-    return /%/.test(sizeProps) || sizeProps === 'auto';
-  };
-  /**
-   * Builds a media player instance
-   * @param {Object} config
-   * @param {String} config.type - The type of media to play, say `audio`, `video`, or `youtube`. The default is `video`.
-   * It might also contain the MIME type of the media as a shorthand.
-   * @param {String|Array} [config.url] - The URL to the media. If several media are proposed as alternatives,
-   * please look at the `sources` option instead.
-   * @param {String} [config.mimeType] - The MIME type of the media. If omitted, the player will try to extract it
-   * from the `type` property, otherwise it will request the server to get the content-type.
-   * @param {Array} [config.sources] - A list of URL if several media can be proposed. Each entry may be either a
-   * string (single URL), or an object containing both the URL and the MIME type ({src: string, type: string}).
-   * @param {String|jQuery|HTMLElement} [config.renderTo] - An optional container in which renders the player
-   * @param {Boolean} [config.canSeek] - The player allows to reach an arbitrary position within the media using the duration bar
-   * @param {Boolean} [config.loop] - The media will be played continuously
-   * @param {Boolean} [config.canPause] - The player can be paused
-   * @param {Boolean} [config.startMuted] - The player should be initially muted
-   * @param {Boolean} [config.autoStart] - The player starts as soon as it is displayed
-   * @param {Number} [config.autoStartAt] - The time position at which the player should start
-   * @param {Number} [config.maxPlays] - Sets a few number of plays (default: infinite)
-   * @param {Number} [config.replayTimeout] - disable the possibility to replay a media after this timeout, in seconds (default: 0)
-   * @param {Number} [config.volume] - Sets the sound volume (default: 80)
-   * @param {Number} [config.width] - Sets the width of the player (default: depends on media type)
-   * @param {Number} [config.height] - Sets the height of the player (default: depends on media type)
-   * @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
-   * @event render - Event triggered when the player is rendering
-   * @event error - Event triggered when the player throws an unrecoverable error
-   * @event ready - Event triggered when the player is fully ready
-   * @event play - Event triggered when the playback is starting
-   * @event update - Event triggered while the player is playing
-   * @event pause - Event triggered when the playback is paused
-   * @event ended - Event triggered when the playback is ended
-   * @event limitreached - Event triggered when the play limit has been reached
-   * @event destroy - Event triggered when the player is destroying
-   * @returns {mediaplayer}
-   */
+    /**
+     * Ensures a value is a number
+     * @param {Number|String} value
+     * @returns {Number}
+     */
+    const ensureNumber = value => {
+      const floatValue = parseFloat(value);
+      return isFinite(floatValue) ? floatValue : 0;
+    };
 
+    /**
+     * Format a number to string with leading zeros
+     * @param {Number} n
+     * @param {Number} len
+     * @returns {String}
+     */
+    const leadingZero = (n, len) => {
+      let value = n.toString();
+      while (value.length < len) {
+        value = `0${value}`;
+      }
+      return value;
+    };
 
-  function mediaplayerFactory(config) {
-    /**
-     * Defines a media player object
-     * @type {Object}
+    /**
+     * Formats a time value to string
+     * @param {Number} time
+     * @returns {String}
      */
-    var mediaplayer = {
-      /**
-       * Initializes the media player
-       * @param {Object} config
-       * @returns {mediaplayer}
-       */
-      init: function init(config) {
-        var _this = this;
+    const timerFormat = time => {
+      const seconds = Math.floor(time % 60);
+      const minutes = Math.floor(time / 60) % 60;
+      const hours = Math.floor(time / 3600);
+      const parts = [];
+      if (hours) {
+        parts.push(hours);
+      }
+      parts.push(leadingZero(minutes, 2));
+      parts.push(leadingZero(seconds, 2));
+      return parts.join(':');
+    };
 
-        // load the config set, discard null values in order to allow defaults to be set
-        this.config = _.omit(config || {}, function (value) {
-          return typeof value === 'undefined' || value === null;
-        });
+    /**
+     * Checks if a type needs to be adjusted
+     * @param {String} type
+     * @returns {Boolean}
+     */
+    const needTypeAdjust = type => {
+      return 'string' === typeof type && type.indexOf('application') === 0;
+    };
 
-        _.defaults(this.config, defaults.options);
+    /**
+     * Adjust bad type by apllying heuristic on URI
+     * @param {Object|String} source
+     * @returns {String}
+     */
+    const getAdjustedType = source => {
+      let type = 'video/ogg';
+      const url = source && source.src || source;
+      const ext = url && url.substr(-4);
+      if (ext === '.ogg' || ext === '.oga') {
+        type = 'audio/ogg';
+      }
+      return type;
+    };
 
-        if (!this.config.mimeType && 'string' === typeof this.config.type && this.config.type.indexOf('/') > 0) {
-          this.config.mimeType = this.config.type;
+    /**
+     * Extract a list of media sources from a config object
+     * @param {Object} config
+     * @returns {Array}
+     */
+    const configToSources = config => {
+      let sources = config.sources || [];
+      let url = config.url;
+      if (!_.isArray(sources)) {
+        sources = [sources];
+      }
+      if (url) {
+        if (!_.isArray(config.url)) {
+          url = [url];
         }
+        sources = sources.concat(url);
+      }
+      return sources;
+    };
 
-        this._setType(this.config.type || defaults.type);
-
-        this._reset();
-
-        this._updateVolumeFromStore();
-
-        this._initEvents();
-
-        this._initSources(function () {
-          if (!_this.is('youtube')) {
-            _.forEach(_this.config.sources, function (source) {
-              if (source && source.type && source.type.indexOf('audio') === 0) {
-                _this._setType(source.type);
-
-                _this._initType();
+    /**
+     * Checks if the browser can play media
+     * @param {String} sizeProps Width or Height
+     * @returns {Boolean}
+     */
+    const isResponsiveSize = sizeProps => {
+      return /%/.test(sizeProps) || sizeProps === 'auto';
+    };
 
-                return false;
-              }
-            });
+    /**
+     * Builds a media player instance
+     * @param {Object} config
+     * @param {String} config.type - The type of media to play, say `audio`, `video`, or `youtube`. The default is `video`.
+     * It might also contain the MIME type of the media as a shorthand.
+     * @param {String|Array} [config.url] - The URL to the media. If several media are proposed as alternatives,
+     * please look at the `sources` option instead.
+     * @param {String} [config.mimeType] - The MIME type of the media. If omitted, the player will try to extract it
+     * from the `type` property, otherwise it will request the server to get the content-type.
+     * @param {Array} [config.sources] - A list of URL if several media can be proposed. Each entry may be either a
+     * string (single URL), or an object containing both the URL and the MIME type ({src: string, type: string}).
+     * @param {String|jQuery|HTMLElement} [config.renderTo] - An optional container in which renders the player
+     * @param {Boolean} [config.canSeek] - The player allows to reach an arbitrary position within the media using the duration bar
+     * @param {Boolean} [config.loop] - The media will be played continuously
+     * @param {Boolean} [config.canPause] - The player can be paused
+     * @param {Boolean} [config.startMuted] - The player should be initially muted
+     * @param {Boolean} [config.autoStart] - The player starts as soon as it is displayed
+     * @param {Number} [config.autoStartAt] - The time position at which the player should start
+     * @param {Number} [config.maxPlays] - Sets a few number of plays (default: infinite)
+     * @param {Number} [config.replayTimeout] - disable the possibility to replay a media after this timeout, in seconds (default: 0)
+     * @param {Number} [config.volume] - Sets the sound volume (default: 80)
+     * @param {Number} [config.width] - Sets the width of the player (default: depends on media type)
+     * @param {Number} [config.height] - Sets the height of the player (default: depends on media type)
+     * @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
+     * @event render - Event triggered when the player is rendering
+     * @event error - Event triggered when the player throws an unrecoverable error
+     * @event ready - Event triggered when the player is fully ready
+     * @event play - Event triggered when the playback is starting
+     * @event update - Event triggered while the player is playing
+     * @event pause - Event triggered when the playback is paused
+     * @event ended - Event triggered when the playback is ended
+     * @event limitreached - Event triggered when the play limit has been reached
+     * @event destroy - Event triggered when the player is destroying
+     * @returns {mediaplayer}
+     */
+    function mediaplayerFactory(config) {
+      /**
+       * Defines a media player object
+       * @type {Object}
+       */
+      const mediaplayer = {
+        /**
+         * Initializes the media player
+         * @param {Object} config
+         * @returns {mediaplayer}
+         */
+        init(config) {
+          // load the config set, discard null values in order to allow defaults to be set
+          this.config = _.omit(config || {}, value => typeof value === 'undefined' || value === null);
+          _.defaults(this.config, defaults.options);
+          if (!this.config.mimeType && 'string' === typeof this.config.type && this.config.type.indexOf('/') > 0) {
+            this.config.mimeType = this.config.type;
           }
-
-          if (_this.config.renderTo) {
-            _.defer(function () {
-              return _this.render();
-            });
+          this._setType(this.config.type || defaults.type);
+          this._reset();
+          this._updateVolumeFromStore();
+          this._initEvents();
+          this._initSources(() => {
+            if (!this.is('youtube')) {
+              _.forEach(this.config.sources, source => {
+                if (source && source.type && source.type.indexOf('audio') === 0) {
+                  this._setType(source.type);
+                  this._initType();
+                  return false;
+                }
+              });
+            }
+            if (this.config.renderTo) {
+              _.defer(() => this.render());
+            }
+          });
+          return this;
+        },
+        /**
+         * Uninstalls the media player
+         * @returns {mediaplayer}
+         */
+        destroy() {
+          /**
+           * Triggers a destroy event
+           * @event mediaplayer#destroy
+           */
+          this.trigger('destroy');
+          if (this.player) {
+            this.player.destroy();
           }
-        });
-
-        return this;
-      },
-
-      /**
-       * Uninstalls the media player
-       * @returns {mediaplayer}
-       */
-      destroy: function destroy() {
-        /**
-         * Triggers a destroy event
-         * @event mediaplayer#destroy
+          if (this.$component) {
+            this._unbindEvents();
+            this._destroySlider(this.$seekSlider);
+            this._destroySlider(this.$volumeSlider);
+            this.$component.remove();
+          }
+          this._reset();
+          return this;
+        },
+        /**
+         * Renders the media player according to the media type
+         * @param {String|jQuery|HTMLElement} [to]
+         * @returns {mediaplayer}
          */
-        this.trigger('destroy');
-
-        if (this.player) {
-          this.player.destroy();
-        }
-
-        if (this.$component) {
-          this._unbindEvents();
-
-          this._destroySlider(this.$seekSlider);
-
-          this._destroySlider(this.$volumeSlider);
-
-          this.$component.remove();
-        }
-
-        this._reset();
-
-        return this;
-      },
-
-      /**
-       * Renders the media player according to the media type
-       * @param {String|jQuery|HTMLElement} [to]
-       * @returns {mediaplayer}
-       */
-      render: function render(to) {
-        var renderTo = to || this.config.renderTo || this.$container;
-
-        if (this.$component) {
-          this.destroy();
-        }
-
-        this._initState();
-
-        this._buildDom();
-
-        if (this.config.preview) {
-          this._updateDuration(0);
-
-          this._updatePosition(0);
-        }
-
-        this._bindEvents();
-
-        this._playingState(false, true);
-
-        this._initPlayer();
-
-        this._initSize(); // Resize for old items with defined height to avoid big jump
-
-
-        if (this.config.height && this.config.height !== 'auto') {
-          this.resize('100%', 'auto');
-        } else {
-          this.resize(this.config.width, this.config.height);
-        }
-
-        this.config.is.rendered = true;
-
-        if (renderTo) {
-          this.$container = $$1(renderTo).append(this.$component);
-        } // add class if it is stalled
+        render(to) {
+          const renderTo = to || this.config.renderTo || this.$container;
+          if (this.$component) {
+            this.destroy();
+          }
+          this._initState();
+          this._buildDom();
+          if (this.config.preview) {
+            this._updateDuration(0);
+            this._updatePosition(0);
+          }
+          this._bindEvents();
+          this._playingState(false, true);
+          this._initPlayer();
+          this._initSize();
+
+          // Resize for old items with defined height to avoid big jump
+          if (this.config.height && this.config.height !== 'auto') {
+            this.resize('100%', 'auto');
+          } else {
+            this.resize(this.config.width, this.config.height);
+          }
+          this.config.is.rendered = true;
+          if (renderTo) {
+            this.$container = $$1(renderTo).append(this.$component);
+          }
 
+          // add class if it is stalled
+          if (this.is('stalled')) {
+            this._setState('stalled', true);
+          }
 
-        if (this.is('stalled')) {
-          this._setState('stalled', true);
-        }
-        /**
-         * Triggers a render event
-         * @event mediaplayer#render
-         * @param {jQuery} $component
+          /**
+           * Triggers a render event
+           * @event mediaplayer#render
+           * @param {jQuery} $component
+           */
+          this.trigger('render', this.$component);
+          return this;
+        },
+        /**
+         * Reloads media player after it was stalled
          */
-
-
-        this.trigger('render', this.$component);
-        return this;
-      },
-
-      /**
-       * Reloads media player after it was stalled
-       */
-      reload: function reload() {
-        /**
-         * Triggers a reload event
-         * @event mediaplayer#reload
+        reload() {
+          /**
+           * Triggers a reload event
+           * @event mediaplayer#reload
+           */
+          this.trigger('reload');
+          if (this.player) {
+            this.player.recover();
+          }
+          this._setState('stalled', false);
+          this.setInitialStates();
+        },
+        /**
+         * Set initial states
          */
-        this.trigger('reload');
-
-        if (this.player) {
-          this.player.recover();
-        }
-
-        this._setState('stalled', false);
-
-        this.setInitialStates();
-      },
-
-      /**
-       * Set initial states
-       */
-      setInitialStates: function setInitialStates() {
-        if (!this.is('stalled')) {
-          this._setState('ready', true);
-        }
-
-        this._setState('canplay', true);
-
-        this._setState('canpause', this.config.canPause);
-
-        this._setState('canseek', this.config.canSeek);
-
-        this._setState('loading', false);
-      },
-
-      /**
-       * Sets the start position inside the media
-       * @param {Number} time - The start position in seconds
-       * @param {*} [internal] - Internal use
-       * @returns {mediaplayer}
-       */
-      seek: function seek(time, internal) {
-        if (this._canPlay()) {
-          this._updatePosition(time, internal);
-
-          this.execute('seek', this.position);
-
-          if (!this.is('ready')) {
-            this.autoStartAt = this.position;
+        setInitialStates() {
+          if (!this.is('stalled')) {
+            this._setState('ready', true);
           }
-
-          this.loop = !!this.config.loop;
-        }
-
-        return this;
-      },
-
-      /**
-       * Plays the media
-       * @param {Number} [time] - An optional start position in seconds
-       * @returns {mediaplayer}
-       */
-      play: function play(time) {
-        if (this._canPlay()) {
-          if (typeof time !== 'undefined') {
-            this.seek(time);
+          this._setState('canplay', true);
+          this._setState('canpause', this.config.canPause);
+          this._setState('canseek', this.config.canSeek);
+          this._setState('loading', false);
+        },
+        /**
+         * Sets the start position inside the media
+         * @param {Number} time - The start position in seconds
+         * @param {*} [internal] - Internal use
+         * @returns {mediaplayer}
+         */
+        seek(time, internal) {
+          if (this._canPlay()) {
+            this._updatePosition(time, internal);
+            this.execute('seek', this.position);
+            if (!this.is('ready')) {
+              this.autoStartAt = this.position;
+            }
+            this.loop = !!this.config.loop;
           }
-
-          this.execute('play');
-
-          if (!this.is('ready')) {
-            this.autoStart = true;
+          return this;
+        },
+        /**
+         * Plays the media
+         * @param {Number} [time] - An optional start position in seconds
+         * @returns {mediaplayer}
+         */
+        play(time) {
+          if (this._canPlay()) {
+            if (typeof time !== 'undefined') {
+              this.seek(time);
+            }
+            this.execute('play');
+            if (!this.is('ready')) {
+              this.autoStart = true;
+            }
+            this.loop = !!this.config.loop;
+            if (this.timerId) {
+              cancelAnimationFrame(this.timerId);
+            }
           }
-
-          this.loop = !!this.config.loop;
-
-          if (this.timerId) {
-            cancelAnimationFrame(this.timerId);
+          return this;
+        },
+        /**
+         * Pauses the media
+         * @param {Number} [time] - An optional time position in seconds
+         * @returns {mediaplayer}
+         */
+        pause(time) {
+          if (this._canPause()) {
+            if (typeof time !== 'undefined') {
+              this.seek(time);
+            }
+            this.execute('pause');
+            if (!this.is('ready')) {
+              this.autoStart = false;
+            }
           }
-        }
-
-        return this;
-      },
-
-      /**
-       * Pauses the media
-       * @param {Number} [time] - An optional time position in seconds
-       * @returns {mediaplayer}
-       */
-      pause: function pause(time) {
-        if (this._canPause()) {
-          if (typeof time !== 'undefined') {
-            this.seek(time);
+          return this;
+        },
+        /**
+         * Resumes the media
+         * @returns {mediaplayer}
+         */
+        resume() {
+          if (this._canResume()) {
+            this.play();
           }
-
-          this.execute('pause');
-
+          return this;
+        },
+        /**
+         * Stops the playback
+         * @returns {mediaplayer}
+         */
+        stop() {
+          this.loop = false;
+          this.execute('stop');
           if (!this.is('ready')) {
             this.autoStart = false;
           }
-        }
-
-        return this;
-      },
-
-      /**
-       * Resumes the media
-       * @returns {mediaplayer}
-       */
-      resume: function resume() {
-        if (this._canResume()) {
+          return this;
+        },
+        /**
+         * Starts the media
+         * @returns {mediaplayer}
+         */
+        start() {
+          this._setState('preview', true);
+          this._setState('loading', true);
           this.play();
-        }
-
-        return this;
-      },
-
-      /**
-       * Stops the playback
-       * @returns {mediaplayer}
-       */
-      stop: function stop() {
-        this.loop = false;
-        this.execute('stop');
-
-        if (!this.is('ready')) {
-          this.autoStart = false;
-        }
-
-        return this;
-      },
-
-      /**
-       * Starts the media
-       * @returns {mediaplayer}
-       */
-      start: function start() {
-        this._setState('preview', true);
-
-        this._setState('loading', true);
-
-        this.play();
-      },
-
-      /**
-       * Restarts the media from the beginning
-       * @returns {mediaplayer}
-       */
-      restart: function restart() {
-        this.play(0);
-        return this;
-      },
-
-      /**
-       * Rewind the media to the beginning
-       * @returns {mediaplayer}
-       */
-      rewind: function rewind() {
-        this.seek(0);
-        return this;
-      },
-
-      /**
-       * Mutes the media
-       * @param {Boolean} [state] - A flag to set the mute state (default: true)
-       * @returns {mediaplayer}
-       */
-      mute: function mute(state) {
-        if (typeof state === 'undefined') {
-          state = true;
-        }
-
-        this.execute('mute', state);
-
-        this._setState('muted', state);
-
-        if (!this.is('ready')) {
-          this.startMuted = state;
-        }
-
-        return this;
-      },
-
-      /**
-       * Restore the sound of the media after a mute
-       * @returns {mediaplayer}
-       */
-      unmute: function unmute() {
-        this.mute(false);
-        return this;
-      },
-
-      /**
-       * Sets the sound volume of the media being played
-       * @param {Number} value - A value between 0 and 100
-       * @param {*} [internal] - Internal use
-       * @returns {mediaplayer}
-       */
-      setVolume: function setVolume(value, internal) {
-        this._updateVolume(value, internal);
-
-        this.execute('setVolume', this.volume);
-        return this;
-      },
-
-      /**
-       * Gets the sound volume applied to the media being played
-       * @returns {Number} Returns a value between 0 and 100
-       */
-      getVolume: function getVolume() {
-        return this.volume;
-      },
-
-      /**
-       * Gets the current displayed position inside the media
-       * @returns {Number}
-       */
-      getPosition: function getPosition() {
-        return this.position;
-      },
-
-      /**
-       * Gets the duration of the media
-       * @returns {Number}
-       */
-      getDuration: function getDuration() {
-        return this.duration;
-      },
-
-      /**
-       * Gets the number of times the media has been played
-       * @returns {Number}
-       */
-      getTimesPlayed: function getTimesPlayed() {
-        return this.timesPlayed;
-      },
-
-      /**
-       * Gets the type of player
-       * @returns {String}
-       */
-      getType: function getType() {
-        return this.type;
-      },
-
-      /**
-       * Gets the DOM container
-       * @returns {jQuery}
-       */
-      getContainer: function getContainer() {
-        if (!this.$container && this.$component) {
-          var $container = this.$component.parent();
-
-          if ($container.length) {
-            this.$container = $container;
+        },
+        /**
+         * Restarts the media from the beginning
+         * @returns {mediaplayer}
+         */
+        restart() {
+          this.play(0);
+          return this;
+        },
+        /**
+         * Rewind the media to the beginning
+         * @returns {mediaplayer}
+         */
+        rewind() {
+          this.seek(0);
+          return this;
+        },
+        /**
+         * Mutes the media
+         * @param {Boolean} [state] - A flag to set the mute state (default: true)
+         * @returns {mediaplayer}
+         */
+        mute(state) {
+          if (typeof state === 'undefined') {
+            state = true;
           }
-        }
-
-        return this.$container;
-      },
-
-      /**
-       * Gets the underlying DOM element
-       * @returns {jQuery}
-       */
-      getElement: function getElement() {
-        return this.$component;
-      },
-
-      /**
-       * Gets the list of media
-       * @returns {Array}
-       */
-      getSources: function getSources() {
-        return this.config.sources.slice();
-      },
-
-      /**
-       * Sets the media source. If a source has been already set, it will be replaced.
-       * @param {String|Object} src - The media URL, or an object containing the source and the type
-       * @param {Function} [callback] - A function called to provide the added media source object
-       * @returns {mediaplayer}
-       */
-      setSource: function setSource(src, callback) {
-        var _this2 = this;
-
-        this._getSource(src, function (source) {
-          _this2.config.sources = [source];
-
-          if (_this2.is('rendered')) {
-            _this2.player.setMedia(source.src, source.type);
+          this.execute('mute', state);
+          this._setState('muted', state);
+          if (!this.is('ready')) {
+            this.startMuted = state;
           }
-
-          if (callback) {
-            callback.call(_this2, source);
+          return this;
+        },
+        /**
+         * Restore the sound of the media after a mute
+         * @returns {mediaplayer}
+         */
+        unmute() {
+          this.mute(false);
+          return this;
+        },
+        /**
+         * Sets the sound volume of the media being played
+         * @param {Number} value - A value between 0 and 100
+         * @param {*} [internal] - Internal use
+         * @returns {mediaplayer}
+         */
+        setVolume(value, internal) {
+          this._updateVolume(value, internal);
+          this.execute('setVolume', this.volume);
+          return this;
+        },
+        /**
+         * Gets the sound volume applied to the media being played
+         * @returns {Number} Returns a value between 0 and 100
+         */
+        getVolume() {
+          return this.volume;
+        },
+        /**
+         * Gets the current displayed position inside the media
+         * @returns {Number}
+         */
+        getPosition() {
+          return this.position;
+        },
+        /**
+         * Gets the duration of the media
+         * @returns {Number}
+         */
+        getDuration() {
+          return this.duration;
+        },
+        /**
+         * Gets the number of times the media has been played
+         * @returns {Number}
+         */
+        getTimesPlayed() {
+          return this.timesPlayed;
+        },
+        /**
+         * Gets the type of player
+         * @returns {String}
+         */
+        getType() {
+          return this.type;
+        },
+        /**
+         * Gets the DOM container
+         * @returns {jQuery}
+         */
+        getContainer() {
+          if (!this.$container && this.$component) {
+            let $container = this.$component.parent();
+            if ($container.length) {
+              this.$container = $container;
+            }
           }
-        });
-
-        return this;
-      },
-
-      /**
-       * Adds a media source.
-       * @param {String|Object} src - The media URL, or an object containing the source and the type
-       * @param {Function} [callback] - A function called to provide the added media source object
-       * @returns {mediaplayer}
-       */
-      addSource: function addSource(src, callback) {
-        var _this3 = this;
-
-        this._getSource(src, function (source) {
-          _this3.config.sources.push(source);
-
-          if (_this3.is('rendered')) {
-            _this3.player.addMedia(source.src, source.type);
+          return this.$container;
+        },
+        /**
+         * Gets the underlying DOM element
+         * @returns {jQuery}
+         */
+        getElement() {
+          return this.$component;
+        },
+        /**
+         * Gets the list of media
+         * @returns {Array}
+         */
+        getSources() {
+          return this.config.sources.slice();
+        },
+        /**
+         * Sets the media source. If a source has been already set, it will be replaced.
+         * @param {String|Object} src - The media URL, or an object containing the source and the type
+         * @param {Function} [callback] - A function called to provide the added media source object
+         * @returns {mediaplayer}
+         */
+        setSource(src, callback) {
+          this._getSource(src, source => {
+            this.config.sources = [source];
+            if (this.is('rendered')) {
+              this.player.setMedia(source.src, source.type);
+            }
+            if (callback) {
+              callback.call(this, source);
+            }
+          });
+          return this;
+        },
+        /**
+         * Adds a media source.
+         * @param {String|Object} src - The media URL, or an object containing the source and the type
+         * @param {Function} [callback] - A function called to provide the added media source object
+         * @returns {mediaplayer}
+         */
+        addSource(src, callback) {
+          this._getSource(src, source => {
+            this.config.sources.push(source);
+            if (this.is('rendered')) {
+              this.player.addMedia(source.src, source.type);
+            }
+            if (callback) {
+              callback.call(this, source);
+            }
+          });
+          return this;
+        },
+        /**
+         * Tells if the media is in a particular state
+         * @param {String} state
+         * @returns {Boolean}
+         */
+        is(state) {
+          return !!this.config.is[state];
+        },
+        /**
+         * Changes the size of the player
+         * @param {Number} width
+         * @param {Number} height
+         * @returns {mediaplayer}
+         */
+        resize(width, height) {
+          if (isResponsiveSize(width) && !isResponsiveSize(height) || this.is('youtube')) {
+            // responsive width height should be auto
+            // for youtube iframe height is limited by ration
+            height = 'auto';
           }
-
-          if (callback) {
-            callback.call(_this3, source);
+          this.execute('setSize', width, height);
+          return this;
+        },
+        /**
+         * Enables the media player
+         * @returns {mediaplayer}
+         */
+        enable() {
+          this._fromState('disabled');
+          return this;
+        },
+        /**
+         * Disables the media player
+         * @returns {mediaplayer}
+         */
+        disable() {
+          this._toState('disabled');
+          this.trigger('disabled');
+          return this;
+        },
+        /**
+         * Shows the media player
+         * @returns {mediaplayer}
+         */
+        show() {
+          this._fromState('hidden');
+          return this;
+        },
+        /**
+         * hides the media player
+         * @returns {mediaplayer}
+         */
+        hide() {
+          this._toState('hidden');
+          return this;
+        },
+        /**
+         * get media original size
+         * @returns {Object}
+         */
+        getMediaOriginalSize() {
+          if (this.is('youtube')) {
+            return defaults.youtube;
           }
-        });
-
-        return this;
-      },
-
-      /**
-       * Tells if the media is in a particular state
-       * @param {String} state
-       * @returns {Boolean}
-       */
-      is: function is(state) {
-        return !!this.config.is[state];
-      },
-
-      /**
-       * Changes the size of the player
-       * @param {Number} width
-       * @param {Number} height
-       * @returns {mediaplayer}
-       */
-      resize: function resize(width, height) {
-        if (isResponsiveSize(width) && !isResponsiveSize(height) || this.is('youtube')) {
-          // responsive width height should be auto
-          // for youtube iframe height is limited by ration
-          height = 'auto';
-        }
-
-        this.execute('setSize', width, height);
-        return this;
-      },
-
-      /**
-       * Enables the media player
-       * @returns {mediaplayer}
-       */
-      enable: function enable() {
-        this._fromState('disabled');
-
-        return this;
-      },
-
-      /**
-       * Disables the media player
-       * @returns {mediaplayer}
-       */
-      disable: function disable() {
-        this._toState('disabled');
-
-        this.trigger('disabled');
-        return this;
-      },
-
-      /**
-       * Shows the media player
-       * @returns {mediaplayer}
-       */
-      show: function show() {
-        this._fromState('hidden');
-
-        return this;
-      },
-
-      /**
-       * hides the media player
-       * @returns {mediaplayer}
-       */
-      hide: function hide() {
-        this._toState('hidden');
-
-        return this;
-      },
-
-      /**
-       * get media original size
-       * @returns {Object}
-       */
-      getMediaOriginalSize: function getMediaOriginalSize() {
-        if (this.is('youtube')) {
-          return defaults.youtube;
-        }
-
-        if (this.is('video') && this.player) {
-          return this.player.getMediaSize();
-        }
-
-        return {};
-      },
-
-      /**
-       * Ensures the right media type is set
-       * @param {String} type
-       * @private
-       */
-      _setType: function _setType(type) {
-        if (type.indexOf('youtube') !== -1) {
-          this.type = 'youtube';
-        } else if (type.indexOf('audio') === 0) {
-          this.type = 'audio';
-        } else {
-          this.type = 'video';
-        }
-      },
-
-      /**
-       * Ensures the type is correctly applied
-       * @private
-       */
-      _initType: function _initType() {
-        var is = this.config.is;
-        is.youtube = 'youtube' === this.type;
-        is.video = 'video' === this.type || 'youtube' === this.type;
-        is.audio = 'audio' === this.type;
-      },
-
-      /**
-       * Gets a source descriptor.
-       * @param {String|Object} src - The media URL, or an object containing the source and the type
-       * @param {Function} callback - A function called to provide the media source object
-       */
-      _getSource: function _getSource(src, callback) {
-        var _this4 = this;
-
-        var source;
-
-        var done = function done() {
-          if (needTypeAdjust(source.type)) {
-            source.type = getAdjustedType(source);
+          if (this.is('video') && this.player) {
+            return this.player.getMediaSize();
           }
-
-          callback.call(_this4, source);
-        };
-
-        if (_.isString(src)) {
-          source = {
-            src: src
-          };
-        } else {
-          source = _.clone(src);
-        }
-
-        if (!source.type) {
-          if (this.is('youtube')) {
-            source.type = defaults.type;
-          } else if (this.config.mimeType) {
-            source.type = this.config.mimeType;
+          return {};
+        },
+        /**
+         * Ensures the right media type is set
+         * @param {String} type
+         * @private
+         */
+        _setType(type) {
+          if (type.indexOf('youtube') !== -1) {
+            this.type = 'youtube';
+          } else if (type.indexOf('audio') === 0) {
+            this.type = 'audio';
+          } else {
+            this.type = 'video';
           }
-        }
-
-        if (!source.type) {
-          mimetype.getResourceType(source.src, function (err, type) {
-            if (err) {
-              type = defaults.type;
+        },
+        /**
+         * Ensures the type is correctly applied
+         * @private
+         */
+        _initType() {
+          const is = this.config.is;
+          is.youtube = 'youtube' === this.type;
+          is.video = 'video' === this.type || 'youtube' === this.type;
+          is.audio = 'audio' === this.type;
+        },
+        /**
+         * Gets a source descriptor.
+         * @param {String|Object} src - The media URL, or an object containing the source and the type
+         * @param {Function} callback - A function called to provide the media source object
+         */
+        _getSource(src, callback) {
+          let source;
+          const done = () => {
+            if (needTypeAdjust(source.type)) {
+              source.type = getAdjustedType(source);
             }
-
-            source.type = type;
-            done();
-          });
-        } else {
-          done();
-        }
-      },
-
-      /**
-       * Ensures the sources are correctly set
-       * @param {Function} callback - A function called once all sources have been initialized
-       * @private
-       */
-      _initSources: function _initSources(callback) {
-        var _this5 = this;
-
-        var sources = configToSources(this.config);
-        this.config.sources = [];
-        async.each(sources, function (source, cb) {
-          _this5.addSource(source, function (src) {
-            return cb(null, src);
-          });
-        }, callback);
-      },
-
-      /**
-       * Installs the events manager onto the instance
-       * @private
-       */
-      _initEvents: function _initEvents() {
-        eventifier(this);
-        var triggerEvent = this.trigger;
-
-        this.trigger = function trigger(eventName) {
-          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-            args[_key - 1] = arguments[_key];
+            callback.call(this, source);
+          };
+          if (_.isString(src)) {
+            source = {
+              src: src
+            };
+          } else {
+            source = _.clone(src);
           }
-
-          if (this.$component) {
-            var _this$$component;
-
-            (_this$$component = this.$component).trigger.apply(_this$$component, [eventName + ns].concat(args));
+          if (!source.type) {
+            if (this.is('youtube')) {
+              source.type = defaults.type;
+            } else if (this.config.mimeType) {
+              source.type = this.config.mimeType;
+            }
           }
-
-          return triggerEvent.call.apply(triggerEvent, [this, eventName].concat(args));
-        };
-      },
-
-      /**
-       * Ensures the right size is set according to the media type
-       * @private
-       */
-      _initSize: function _initSize() {
-        var type = this.is('video') ? 'video' : 'audio';
-        var mediaConfig = defaults[type] || defaults.video;
-        this.config.width = this.config.width || mediaConfig.width;
-        this.config.height = this.config.height || mediaConfig.height;
-
-        if (isResponsiveSize(this.config.width) && !isResponsiveSize(this.config.height) || this.is('youtube')) {
-          // responsive width height should be auto
-          // for youtube iframe height is limited by ration
-          this.config.height = 'auto';
-        }
-      },
-
-      /**
-       * Initializes the right player instance
-       * @private
-       */
-      _initPlayer: function _initPlayer() {
-        var _this6 = this;
-
-        var playerFactory = players[this.type];
-        var error;
-
-        if (support.canPlay(this.type)) {
-          if (_.isFunction(playerFactory)) {
-            var playerConfig = {
-              type: this.getType(),
-              sources: this.getSources(),
-              preview: this.config.preview,
-              debug: this.config.debug,
-              stalledDetectionDelay: this.config.stalledDetectionDelay
-            };
-            this.player = playerFactory(this.$player, playerConfig).on('resize', function (width, height) {
-              if (_this6.$component) {
-                _this6.$component.width(width).height(height);
+          if (!source.type) {
+            mimetype.getResourceType(source.src, (err, type) => {
+              if (err) {
+                type = defaults.type;
               }
-            }).on('ready', function () {
-              return _this6._onReady();
-            }).on('play', function () {
-              return _this6._onPlay();
-            }).on('pause', function () {
-              return _this6._onPause();
-            }).on('timeupdate', function () {
-              return _this6._onTimeUpdate();
-            }).on('stalled', function () {
-              return _this6._onStalled();
-            }).on('playing', function () {
-              return _this6._onPlaying();
-            }).on('end', function () {
-              return _this6._onEnd();
-            }).on('error', function () {
-              return _this6._onError();
+              source.type = type;
+              done();
             });
+          } else {
+            done();
           }
-
-          if (this.player) {
-            error = !this.player.init();
+        },
+        /**
+         * Ensures the sources are correctly set
+         * @param {Function} callback - A function called once all sources have been initialized
+         * @private
+         */
+        _initSources(callback) {
+          const sources = configToSources(this.config);
+          this.config.sources = [];
+          async.each(sources, (source, cb) => {
+            this.addSource(source, src => cb(null, src));
+          }, callback);
+        },
+        /**
+         * Installs the events manager onto the instance
+         * @private
+         */
+        _initEvents() {
+          eventifier(this);
+          const triggerEvent = this.trigger;
+          this.trigger = function trigger(eventName) {
+            for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+              args[_key - 1] = arguments[_key];
+            }
+            if (this.$component) {
+              this.$component.trigger(eventName + ns, ...args);
+            }
+            return triggerEvent.call(this, eventName, ...args);
+          };
+        },
+        /**
+         * Ensures the right size is set according to the media type
+         * @private
+         */
+        _initSize() {
+          const type = this.is('video') ? 'video' : 'audio';
+          const mediaConfig = defaults[type] || defaults.video;
+          this.config.width = this.config.width || mediaConfig.width;
+          this.config.height = this.config.height || mediaConfig.height;
+          if (isResponsiveSize(this.config.width) && !isResponsiveSize(this.config.height) || this.is('youtube')) {
+            // responsive width height should be auto
+            // for youtube iframe height is limited by ration
+            this.config.height = 'auto';
+          }
+        },
+        /**
+         * Initializes the right player instance
+         * @private
+         */
+        _initPlayer() {
+          const playerFactory = players[this.type];
+          let error;
+          if (support.canPlay(this.type)) {
+            if (_.isFunction(playerFactory)) {
+              const playerConfig = {
+                type: this.getType(),
+                sources: this.getSources(),
+                preview: this.config.preview,
+                debug: this.config.debug,
+                stalledDetectionDelay: this.config.stalledDetectionDelay
+              };
+              this.player = playerFactory(this.$player, playerConfig).on('resize', (width, height) => {
+                if (this.$component) {
+                  this.$component.width(width).height(height);
+                }
+              }).on('ready', () => this._onReady()).on('play', () => this._onPlay()).on('pause', () => this._onPause()).on('timeupdate', () => this._onTimeUpdate()).on('stalled', () => this._onStalled()).on('playing', () => this._onPlaying()).on('end', () => this._onEnd()).on('error', () => this._onError());
+            }
+            if (this.player) {
+              error = !this.player.init();
+            } else {
+              error = true;
+            }
           } else {
             error = true;
           }
-        } else {
-          error = true;
-        }
-
-        this._setState('error', error);
-
-        this._setState('nogui', !support.canControl());
-
-        this._setState('preview', this.config.preview);
-
-        this._setState('loading', !error);
-
-        if (error) {
-          this._setState('ready', true);
-
-          this.trigger('ready');
-        }
-      },
-
-      /**
-       * Initializes the player state
-       * @private
-       */
-      _initState: function _initState() {
-        var isCORS = false;
-        var page;
-
-        if (!this.is('youtube')) {
-          page = new UrlParser(window.location);
-          isCORS = _.some(this.config.sources, function (source) {
-            return !page.sameDomain(source.src);
-          });
-        }
-
-        this._setState('cors', isCORS);
-
-        this._setState('ready', false);
-      },
-
-      /**
-       * Resets the internals attributes
-       * @private
-       */
-      _reset: function _reset() {
-        this.config.is = {};
-
-        this._initType();
-
-        this.$component = null;
-        this.$container = null;
-        this.$player = null;
-        this.$controls = null;
-        this.$seek = null;
-        this.$seekSlider = null;
-        this.$sound = null;
-        this.$volume = null;
-        this.$volumeControl = null;
-        this.$volumeSlider = null;
-        this.$position = null;
-        this.$duration = null;
-        this.player = null;
-        this.duration = 0;
-        this.position = 0;
-        this.timesPlayed = 0;
-        this.volume = this.config.volume;
-        this.autoStart = this.config.autoStart;
-        this.autoStartAt = this.config.autoStartAt;
-        this.startMuted = this.config.startMuted;
-      },
-
-      /**
-       * Builds the DOM content
-       * @private
-       */
-      _buildDom: function _buildDom() {
-        var configForTemplate = _.clone(this.config);
-
-        configForTemplate.type = this.type;
-        this.$component = $$1(playerTpl(configForTemplate));
-        this.$player = this.$component.find('.player');
-        this.$controls = this.$component.find('.controls');
-        this.$seek = this.$controls.find('.seek .slider');
-        this.$sound = this.$controls.find('.sound');
-        this.$volumeControl = this.$controls.find('.volume');
-        this.$volume = this.$controls.find('.volume .slider');
-        this.$position = this.$controls.find('[data-control="time-cur"]');
-        this.$duration = this.$controls.find('[data-control="time-end"]');
-        this.$volumeSlider = this._renderSlider(this.$volume, this.volume, volumeMin, volumeMax, true);
-      },
-
-      /**
-       * Renders a slider onto an element
-       * @param {jQuery} $elt - The element on which renders the slider
-       * @param {Number} [value] - The current value of the slider
-       * @param {Number} [min] - The min value of the slider
-       * @param {Number} [max] - The max value of the slider
-       * @param {Boolean} [vertical] - Tells if the slider must be vertical
-       * @returns {jQuery} - Returns the element
-       * @private
-       */
-      _renderSlider: function _renderSlider($elt, value, min, max, vertical) {
-        var orientation, direction;
-
-        if (vertical) {
-          orientation = 'vertical';
-          direction = 'rtl';
-        } else {
-          orientation = 'horizontal';
-          direction = 'ltr';
-        }
-
-        return $elt.noUiSlider({
-          start: ensureNumber(value) || 0,
-          step: 1,
-          connect: 'lower',
-          orientation: orientation,
-          direction: direction,
-          animate: true,
-          range: {
-            min: ensureNumber(min) || 0,
-            max: ensureNumber(max) || 0
+          this._setState('error', error);
+          this._setState('nogui', !support.canControl());
+          this._setState('preview', this.config.preview);
+          this._setState('loading', !error);
+          if (error) {
+            this._setState('ready', true);
+            this.trigger('ready');
           }
-        });
-      },
-
-      /**
-       * Destroys a slider bound to an element
-       * @param {jQuery} $elt
-       * @private
-       */
-      _destroySlider: function _destroySlider($elt) {
-        if ($elt) {
-          $elt.get(0).destroy();
-        }
-      },
-
-      /**
-       * Binds events onto the rendered player
-       * @private
-       */
-      _bindEvents: function _bindEvents() {
-        var _this7 = this;
-
-        var overing = false;
-        this.$component.on("contextmenu".concat(ns), function (event) {
-          return event.preventDefault();
-        });
-        this.$controls.on("click".concat(ns), '.action', function (event) {
-          var $target = $$1(event.target);
-          var $action = $target.closest('.action');
-          var id = $action.data('control');
-
-          if (_.isFunction(_this7[id])) {
-            _this7[id]();
+        },
+        /**
+         * Initializes the player state
+         * @private
+         */
+        _initState() {
+          let isCORS = false;
+          let page;
+          if (!this.is('youtube')) {
+            page = new UrlParser(window.location);
+            isCORS = _.some(this.config.sources, source => !page.sameDomain(source.src));
           }
-        });
-        this.$player.on("click".concat(ns), function (event) {
-          var $target = $$1(event.target);
-          var $action = $target.closest('.action'); // if action was clicked
-
-          if ($action.length) {
-            var id = $action.data('control');
-
-            if (_.isFunction(_this7[id])) {
-              _this7[id]();
-            }
+          this._setState('cors', isCORS);
+          this._setState('ready', false);
+        },
+        /**
+         * Resets the internals attributes
+         * @private
+         */
+        _reset() {
+          this.config.is = {};
+          this._initType();
+          this.$component = null;
+          this.$container = null;
+          this.$player = null;
+          this.$controls = null;
+          this.$seek = null;
+          this.$seekSlider = null;
+          this.$sound = null;
+          this.$volume = null;
+          this.$volumeControl = null;
+          this.$volumeSlider = null;
+          this.$position = null;
+          this.$duration = null;
+          this.player = null;
+          this.duration = 0;
+          this.position = 0;
+          this.timesPlayed = 0;
+          this.volume = this.config.volume;
+          this.autoStart = this.config.autoStart;
+          this.autoStartAt = this.config.autoStartAt;
+          this.startMuted = this.config.startMuted;
+        },
+        /**
+         * Builds the DOM content
+         * @private
+         */
+        _buildDom() {
+          const configForTemplate = _.clone(this.config);
+          configForTemplate.type = this.type;
+          this.$component = $$1(playerTpl(configForTemplate));
+          this.$player = this.$component.find('.player');
+          this.$controls = this.$component.find('.controls');
+          this.$seek = this.$controls.find('.seek .slider');
+          this.$sound = this.$controls.find('.sound');
+          this.$volumeControl = this.$controls.find('.volume');
+          this.$volume = this.$controls.find('.volume .slider');
+          this.$position = this.$controls.find('[data-control="time-cur"]');
+          this.$duration = this.$controls.find('[data-control="time-end"]');
+          this.$volumeSlider = this._renderSlider(this.$volume, this.volume, volumeMin, volumeMax, true);
+        },
+        /**
+         * Renders a slider onto an element
+         * @param {jQuery} $elt - The element on which renders the slider
+         * @param {Number} [value] - The current value of the slider
+         * @param {Number} [min] - The min value of the slider
+         * @param {Number} [max] - The max value of the slider
+         * @param {Boolean} [vertical] - Tells if the slider must be vertical
+         * @returns {jQuery} - Returns the element
+         * @private
+         */
+        _renderSlider($elt, value, min, max, vertical) {
+          let orientation, direction;
+          if (vertical) {
+            orientation = 'vertical';
+            direction = 'rtl';
           } else {
-            // default action is toggle play
-            if (_this7.is('playing')) {
-              _this7.pause();
-            } else {
-              _this7.play();
+            orientation = 'horizontal';
+            direction = 'ltr';
+          }
+          return $elt.noUiSlider({
+            start: ensureNumber(value) || 0,
+            step: 1,
+            connect: 'lower',
+            orientation: orientation,
+            direction: direction,
+            animate: true,
+            range: {
+              min: ensureNumber(min) || 0,
+              max: ensureNumber(max) || 0
             }
+          });
+        },
+        /**
+         * Destroys a slider bound to an element
+         * @param {jQuery} $elt
+         * @private
+         */
+        _destroySlider($elt) {
+          if ($elt) {
+            $elt.get(0).destroy();
           }
-        });
-        this.$seek.on("change".concat(ns), function (event, value) {
-          _this7.seek(value, true);
-        });
-        $$1(document).on("updateVolume".concat(ns), function (event, value) {
-          _this7.setVolume(value);
-        });
-        this.$volume.on("change".concat(ns), function (event, value) {
-          _this7.unmute();
-
-          $$1(document).trigger("updateVolume".concat(ns), value);
-
-          _this7.setVolume(value, true);
-        });
-        this.$sound.on("mouseover".concat(ns), 'a', function () {
-          var position;
-
-          if (!overing && !_this7.$volumeControl.hasClass('up') && !_this7.$volumeControl.hasClass('down')) {
-            overing = true;
-            position = _this7.$controls[0].getBoundingClientRect();
-
-            if (position && position.top && position.top < volumePositionThreshold) {
-              _this7.$volumeControl.addClass('down');
+        },
+        /**
+         * Binds events onto the rendered player
+         * @private
+         */
+        _bindEvents() {
+          let overing = false;
+          this.$component.on(`contextmenu${ns}`, event => event.preventDefault());
+          this.$controls.on(`click${ns}`, '.action', event => {
+            const $target = $$1(event.target);
+            const $action = $target.closest('.action');
+            const id = $action.data('control');
+            if (_.isFunction(this[id])) {
+              this[id]();
+            }
+          });
+          this.$player.on(`click${ns}`, event => {
+            const $target = $$1(event.target);
+            const $action = $target.closest('.action');
+
+            // if action was clicked
+            if ($action.length) {
+              const id = $action.data('control');
+              if (_.isFunction(this[id])) {
+                this[id]();
+              }
             } else {
-              _this7.$volumeControl.addClass('up');
-            } //close the volume control after 15s
-
-
-            _this7.overingTimer = _.delay(function () {
-              if (_this7.$volumeControl) {
-                _this7.$volumeControl.removeClass('up down');
+              // default action is toggle play
+              if (this.is('playing')) {
+                this.pause();
+              } else {
+                this.play();
+              }
+            }
+          });
+          this.$seek.on(`change${ns}`, (event, value) => {
+            this.seek(value, true);
+          });
+          $$1(document).on(`updateVolume${ns}`, (event, value) => {
+            this.setVolume(value);
+          });
+          this.$volume.on(`change${ns}`, (event, value) => {
+            this.unmute();
+            $$1(document).trigger(`updateVolume${ns}`, value);
+            this.setVolume(value, true);
+          });
+          this.$sound.on(`mouseover${ns}`, 'a', () => {
+            let position;
+            if (!overing && !this.$volumeControl.hasClass('up') && !this.$volumeControl.hasClass('down')) {
+              overing = true;
+              position = this.$controls[0].getBoundingClientRect();
+              if (position && position.top && position.top < volumePositionThreshold) {
+                this.$volumeControl.addClass('down');
+              } else {
+                this.$volumeControl.addClass('up');
               }
 
-              overing = false;
-            }, 15000);
-
-            _this7.$volumeControl.one("mouseleave".concat(ns), function () {
-              _this7.$volumeControl.removeClass('up down');
-
-              overing = false;
-            });
+              //close the volume control after 15s
+              this.overingTimer = _.delay(() => {
+                if (this.$volumeControl) {
+                  this.$volumeControl.removeClass('up down');
+                }
+                overing = false;
+              }, 15000);
+              this.$volumeControl.one(`mouseleave${ns}`, () => {
+                this.$volumeControl.removeClass('up down');
+                overing = false;
+              });
+            }
+          });
+        },
+        /**
+         * Unbinds events from the rendered player
+         * @private
+         */
+        _unbindEvents() {
+          this.$component.off(ns);
+          this.$player.off(ns);
+          this.$controls.off(ns);
+          this.$seek.off(ns);
+          this.$volume.off(ns);
+
+          //if the volume is opened and the player destroyed,
+          //prevent the callback to run
+          if (this.overingTimer) {
+            clearTimeout(this.overingTimer);
+          }
+          $$1(document).off(ns);
+        },
+        /**
+         * Updates the volume slider
+         * @param {Number} value
+         * @private
+         */
+        _updateVolumeSlider(value) {
+          if (this.$volumeSlider) {
+            this.$volumeSlider.val(value);
+          }
+        },
+        /**
+         * Updates the displayed volume
+         * @param {Number} value
+         * @param {*} [internal]
+         * @private
+         */
+        _updateVolume(value, internal) {
+          this.volume = Math.max(volumeMin, Math.min(volumeMax, parseFloat(value)));
+          this._storeVolume(this.volume);
+          if (!internal) {
+            this._updateVolumeSlider(value);
+          }
+        },
+        /**
+         * Updates the time slider
+         * @param {Number} value
+         * @private
+         */
+        _updatePositionSlider(value) {
+          if (this.$seekSlider) {
+            this.$seekSlider.val(value);
+          }
+        },
+        /**
+         * Updates the time label
+         * @param {Number} value
+         * @private
+         */
+        _updatePositionLabel(value) {
+          if (this.$position) {
+            this.$position.text(timerFormat(value));
+          }
+        },
+        /**
+         * Updates the displayed time position
+         * @param {Number} value
+         * @param {*} [internal]
+         * @private
+         */
+        _updatePosition(value, internal) {
+          this.position = Math.max(0, Math.min(this.duration || +Infinity, parseFloat(value)));
+          if (!internal && this.duration) {
+            this._updatePositionSlider(this.position);
+          }
+          this._updatePositionLabel(this.position);
+        },
+        /**
+         * Updates the duration slider
+         * @param {Number} value
+         * @private
+         */
+        _updateDurationSlider(value) {
+          if (this.$seekSlider) {
+            this._destroySlider(this.$seekSlider);
+            this.$seekSlider = null;
           }
-        });
-      },
-
-      /**
-       * Unbinds events from the rendered player
-       * @private
-       */
-      _unbindEvents: function _unbindEvents() {
-        this.$component.off(ns);
-        this.$player.off(ns);
-        this.$controls.off(ns);
-        this.$seek.off(ns);
-        this.$volume.off(ns); //if the volume is opened and the player destroyed,
-        //prevent the callback to run
-
-        if (this.overingTimer) {
-          clearTimeout(this.overingTimer);
-        }
-
-        $$1(document).off(ns);
-      },
-
-      /**
-       * Updates the volume slider
-       * @param {Number} value
-       * @private
-       */
-      _updateVolumeSlider: function _updateVolumeSlider(value) {
-        if (this.$volumeSlider) {
-          this.$volumeSlider.val(value);
-        }
-      },
-
-      /**
-       * Updates the displayed volume
-       * @param {Number} value
-       * @param {*} [internal]
-       * @private
-       */
-      _updateVolume: function _updateVolume(value, internal) {
-        this.volume = Math.max(volumeMin, Math.min(volumeMax, parseFloat(value)));
-
-        this._storeVolume(this.volume);
-
-        if (!internal) {
-          this._updateVolumeSlider(value);
-        }
-      },
-
-      /**
-       * Updates the time slider
-       * @param {Number} value
-       * @private
-       */
-      _updatePositionSlider: function _updatePositionSlider(value) {
-        if (this.$seekSlider) {
-          this.$seekSlider.val(value);
-        }
-      },
-
-      /**
-       * Updates the time label
-       * @param {Number} value
-       * @private
-       */
-      _updatePositionLabel: function _updatePositionLabel(value) {
-        if (this.$position) {
-          this.$position.text(timerFormat(value));
-        }
-      },
-
-      /**
-       * Updates the displayed time position
-       * @param {Number} value
-       * @param {*} [internal]
-       * @private
-       */
-      _updatePosition: function _updatePosition(value, internal) {
-        this.position = Math.max(0, Math.min(this.duration || +Infinity, parseFloat(value)));
-
-        if (!internal && this.duration) {
-          this._updatePositionSlider(this.position);
-        }
-
-        this._updatePositionLabel(this.position);
-      },
-
-      /**
-       * Updates the duration slider
-       * @param {Number} value
-       * @private
-       */
-      _updateDurationSlider: function _updateDurationSlider(value) {
-        if (this.$seekSlider) {
-          this._destroySlider(this.$seekSlider);
-
-          this.$seekSlider = null;
-        }
-
-        if (value && isFinite(value)) {
-          this.$seekSlider = this._renderSlider(this.$seek, 0, 0, value);
-          this.$seekSlider.attr('disabled', !this.config.canSeek);
-        }
-      },
-
-      /**
-       * Updates the duration label
-       * @param {Number} value
-       * @private
-       */
-      _updateDurationLabel: function _updateDurationLabel(value) {
-        if (this.$duration) {
           if (value && isFinite(value)) {
-            this.$duration.text(timerFormat(value)).show();
-          } else {
-            this.$duration.hide();
+            this.$seekSlider = this._renderSlider(this.$seek, 0, 0, value);
+            this.$seekSlider.attr('disabled', !this.config.canSeek);
           }
-        }
-      },
-
-      /**
-       * Updates the displayed duration
-       * @param {Number|String} value
-       * @private
-       */
-      _updateDuration: function _updateDuration(value) {
-        var duration = Math.abs(parseFloat(value));
-
-        if (duration !== this.duration) {
-          this.duration = duration;
-
-          this._updateDurationSlider(this.duration);
-
-          this._updateDurationLabel(this.duration);
-        }
-      },
-
-      /**
-       * Event called when the media is ready
-       * @private
-       */
-      _onReady: function _onReady() {
-        if (this.is('error')) {
-          this._setState('error', false);
-        }
-
-        var duration = this.player.getDuration();
-        var timePreview = this.config.preview || duration;
-
-        if (timePreview) {
-          this._updateDuration(duration);
-        }
-
-        this.setInitialStates();
-        /**
-         * Triggers a media ready event
-         * @event mediaplayer#ready
+        },
+        /**
+         * Updates the duration label
+         * @param {Number} value
+         * @private
          */
+        _updateDurationLabel(value) {
+          if (this.$duration) {
+            if (value && isFinite(value)) {
+              this.$duration.text(timerFormat(value)).show();
+            } else {
+              this.$duration.hide();
+            }
+          }
+        },
+        /**
+         * Updates the displayed duration
+         * @param {Number|String} value
+         * @private
+         */
+        _updateDuration(value) {
+          const duration = Math.abs(parseFloat(value));
+          if (duration !== this.duration) {
+            this.duration = duration;
+            this._updateDurationSlider(this.duration);
+            this._updateDurationLabel(this.duration);
+          }
+        },
+        /**
+         * Event called when the media is ready
+         * @private
+         */
+        _onReady() {
+          if (this.is('error')) {
+            this._setState('error', false);
+          }
+          const duration = this.player.getDuration();
+          const timePreview = this.config.preview || duration;
+          if (timePreview) {
+            this._updateDuration(duration);
+          }
+          this.setInitialStates();
 
-        this.trigger('ready'); // set the initial state
-
-        this.setVolume(this.volume);
-        this.mute(!!this.startMuted);
-
-        if (this.autoStartAt) {
-          this.seek(this.autoStartAt);
-        } else if (this.autoStart) {
-          this.play();
-        }
-
-        if (this.config.preview && this.$container && this.config.height && this.config.height !== 'auto') {
-          this._setMaxHeight();
-        }
-      },
-
-      /**
-       * Set max height limit for container
-       * using by old media items with defined height.
-       * @private
-       */
-      _setMaxHeight: function _setMaxHeight() {
-        var $video = this.$container.find('video.video');
-        var controlsHeight = parseInt(window.getComputedStyle(this.$controls[0]).height);
-        var scale = $video.height() / this.config.height;
-        var playerWidth = this.$container.find('.player').width();
-        var videoWidth = $video.width() / scale;
+          /**
+           * Triggers a media ready event
+           * @event mediaplayer#ready
+           */
+          this.trigger('ready');
 
-        if (videoWidth > playerWidth) {
-          this.execute('setSize', '100%', 'auto');
-        } else {
-          this.$component.css({
-            maxHeight: "".concat(this.config.height + controlsHeight, "px")
+          // set the initial state
+          this.setVolume(this.volume);
+          this.mute(!!this.startMuted);
+          if (this.autoStartAt) {
+            this.seek(this.autoStartAt);
+          } else if (this.autoStart) {
+            this.play();
+          }
+          if (this.config.preview && this.$container && this.config.height && this.config.height !== 'auto') {
+            this._setMaxHeight();
+          }
+        },
+        /**
+         * Set max height limit for container
+         * using by old media items with defined height.
+         * @private
+         */
+        _setMaxHeight() {
+          const $video = this.$container.find('video.video');
+          const controlsHeight = parseInt(window.getComputedStyle(this.$controls[0]).height);
+          const scale = $video.height() / this.config.height;
+          const playerWidth = this.$container.find('.player').width();
+          const videoWidth = $video.width() / scale;
+          if (videoWidth > playerWidth) {
+            this.execute('setSize', '100%', 'auto');
+          } else {
+            this.$component.css({
+              maxHeight: `${this.config.height + controlsHeight}px`
+            });
+            this.execute('setSize', Math.floor(videoWidth), 'auto');
+          }
+        },
+        /**
+         * Update volume in DBIndex store
+         * @param {Number} volume
+         * @returns {Promise}
+         * @private
+         */
+        _storeVolume(volume) {
+          return store('mediaVolume').then(volumeStore => volumeStore.setItem('volume', volume));
+        },
+        /**
+         * Get volume from DBIndex store
+         * @returns {Promise}
+         * @private
+         */
+        _updateVolumeFromStore() {
+          return store('mediaVolume').then(volumeStore => volumeStore.getItem('volume')).then(volume => {
+            if (_.isNumber(volume)) {
+              this.volume = Math.max(volumeMin, Math.min(volumeMax, parseFloat(volume)));
+              this.setVolume(this.volume);
+            }
           });
-          this.execute('setSize', Math.floor(videoWidth), 'auto');
-        }
-      },
+        },
+        /**
+         * Event called when the media throws unrecoverable error
+         * @private
+         */
+        _onError() {
+          this._setState('error', true);
+          this._setState('loading', false);
 
-      /**
-       * Update volume in DBIndex store
-       * @param {Number} volume
-       * @returns {Promise}
-       * @private
-       */
-      _storeVolume: function _storeVolume(volume) {
-        return store('mediaVolume').then(function (volumeStore) {
-          return volumeStore.setItem('volume', volume);
-        });
-      },
+          /**
+           * Triggers an unrecoverable media error event
+           * @event mediaplayer#error
+           */
+          this.trigger('error');
+        },
+        /**
+         * Event called when the media is played
+         * @private
+         */
+        _onPlay() {
+          this._playingState(true);
+          this._setState('preview', true);
 
-      /**
-       * Get volume from DBIndex store
-       * @returns {Promise}
-       * @private
-       */
-      _updateVolumeFromStore: function _updateVolumeFromStore() {
-        var _this8 = this;
+          /**
+           * Triggers a media playback event
+           * @event mediaplayer#play
+           */
+          this.trigger('play', this.player && this.player.getMedia());
+        },
+        /**
+         * Event called when the media is paused
+         * @private
+         */
+        _onPause() {
+          this._playingState(false);
 
-        return store('mediaVolume').then(function (volumeStore) {
-          return volumeStore.getItem('volume');
-        }).then(function (volume) {
-          if (_.isNumber(volume)) {
-            _this8.volume = Math.max(volumeMin, Math.min(volumeMax, parseFloat(volume)));
+          /**
+           * Triggers a media paused event
+           * @event mediaplayer#pause
+           */
+          this.trigger('pause');
+        },
+        /**
+         * Event called when the media is ended
+         * @private
+         */
+        _onEnd() {
+          this.timesPlayed++;
+          this._playingState(false, true);
+          this._updatePosition(0);
 
-            _this8.setVolume(_this8.volume);
+          // disable when the play limit is reached
+          if (this._playLimitReached()) {
+            if (!this.is('disabled')) {
+              this.disable();
+            }
+            /**
+             * Triggers a play limit reached event
+             * @event mediaplayer#limitreached
+             */
+            this.trigger('limitreached');
+          } else if (this.loop) {
+            this.restart();
+          } else if (parseInt(this.config.replayTimeout, 10) > 0) {
+            this.replayTimeoutStartMs = new window.Date().getTime();
+            this._replayTimeout();
           }
-        });
-      },
-
-      /**
-       * Event called when the media throws unrecoverable error
-       * @private
-       */
-      _onError: function _onError() {
-        this._setState('error', true);
 
-        this._setState('loading', false);
-        /**
-         * Triggers an unrecoverable media error event
-         * @event mediaplayer#error
+          /**
+           * Triggers a media ended event
+           * @event mediaplayer#ended
+           */
+          this.trigger('ended');
+        },
+        /**
+         * Event called when the playback is playing
+         * @private
          */
-
-
-        this.trigger('error');
-      },
-
-      /**
-       * Event called when the media is played
-       * @private
-       */
-      _onPlay: function _onPlay() {
-        this._playingState(true);
-
-        this._setState('preview', true);
-        /**
-         * Triggers a media playback event
-         * @event mediaplayer#play
+        _onPlaying() {
+          this._setState('preview', true);
+          this._setState('stalled', false);
+          this._setState('ready', true);
+        },
+        /**
+         * Event called when the playback is stalled
+         * @private
          */
-
-
-        this.trigger('play', this.player && this.player.getMedia());
-      },
-
-      /**
-       * Event called when the media is paused
-       * @private
-       */
-      _onPause: function _onPause() {
-        this._playingState(false);
-        /**
-         * Triggers a media paused event
-         * @event mediaplayer#pause
+        _onStalled() {
+          this._setState('stalled', true);
+          this._setState('ready', false);
+        },
+        /**
+         * Event called when the time position has changed
+         * @private
          */
+        _onTimeUpdate() {
+          this._updatePosition(this.player.getPosition());
 
-
-        this.trigger('pause');
-      },
-
-      /**
-       * Event called when the media is ended
-       * @private
-       */
-      _onEnd: function _onEnd() {
-        this.timesPlayed++;
-
-        this._playingState(false, true);
-
-        this._updatePosition(0); // disable when the play limit is reached
-
-
-        if (this._playLimitReached()) {
-          if (!this.is('disabled')) {
+          /**
+           * Triggers a media time update event
+           * @event mediaplayer#update
+           */
+          this.trigger('update');
+        },
+        /**
+         * Run a timer to disable the possibility of replaying a media
+         * @private
+         */
+        _replayTimeout() {
+          const nowMs = new window.Date().getTime(),
+            elapsedSeconds = Math.floor((nowMs - this.replayTimeoutStartMs) / 1000);
+          this.timerId = requestAnimationFrame(this._replayTimeout.bind(this));
+          if (elapsedSeconds >= parseInt(this.config.replayTimeout, 10)) {
             this.disable();
+            cancelAnimationFrame(this.timerId);
           }
-          /**
-           * Triggers a play limit reached event
-           * @event mediaplayer#limitreached
-           */
-
-
-          this.trigger('limitreached');
-        } else if (this.loop) {
-          this.restart();
-        } else if (parseInt(this.config.replayTimeout, 10) > 0) {
-          this.replayTimeoutStartMs = new window.Date().getTime();
-
-          this._replayTimeout();
-        }
-        /**
-         * Triggers a media ended event
-         * @event mediaplayer#ended
+        },
+        /**
+         * Checks if the play limit has been reached
+         * @returns {Boolean}
+         * @private
          */
-
-
-        this.trigger('ended');
-      },
-
-      /**
-       * Event called when the playback is playing
-       * @private
-       */
-      _onPlaying: function _onPlaying() {
-        this._setState('preview', true);
-
-        this._setState('stalled', false);
-
-        this._setState('ready', true);
-      },
-
-      /**
-       * Event called when the playback is stalled
-       * @private
-       */
-      _onStalled: function _onStalled() {
-        this._setState('stalled', true);
-
-        this._setState('ready', false);
-      },
-
-      /**
-       * Event called when the time position has changed
-       * @private
-       */
-      _onTimeUpdate: function _onTimeUpdate() {
-        this._updatePosition(this.player.getPosition());
-        /**
-         * Triggers a media time update event
-         * @event mediaplayer#update
+        _playLimitReached() {
+          return this.config.maxPlays && this.timesPlayed >= this.config.maxPlays;
+        },
+        /**
+         * Checks if the media can be played
+         * @returns {Boolean}
+         * @private
          */
-
-
-        this.trigger('update');
-      },
-
-      /**
-       * Run a timer to disable the possibility of replaying a media
-       * @private
-       */
-      _replayTimeout: function _replayTimeout() {
-        var nowMs = new window.Date().getTime(),
-            elapsedSeconds = Math.floor((nowMs - this.replayTimeoutStartMs) / 1000);
-        this.timerId = requestAnimationFrame(this._replayTimeout.bind(this));
-
-        if (elapsedSeconds >= parseInt(this.config.replayTimeout, 10)) {
-          this.disable();
-          cancelAnimationFrame(this.timerId);
-        }
-      },
-
-      /**
-       * Checks if the play limit has been reached
-       * @returns {Boolean}
-       * @private
-       */
-      _playLimitReached: function _playLimitReached() {
-        return this.config.maxPlays && this.timesPlayed >= this.config.maxPlays;
-      },
-
-      /**
-       * Checks if the media can be played
-       * @returns {Boolean}
-       * @private
-       */
-      _canPlay: function _canPlay() {
-        return (this.is('ready') || this.is('stalled')) && !this.is('disabled') && !this.is('hidden') && !this._playLimitReached();
-      },
-
-      /**
-       * Checks if the media can be paused
-       * @returns {Boolean}
-       * @private
-       */
-      _canPause: function _canPause() {
-        return !!this.config.canPause;
-      },
-
-      /**
-       * Checks if the media can be sought
-       * @returns {Boolean}
-       * @private
-       */
-      _canSeek: function _canSeek() {
-        return !!this.config.canSeek;
-      },
-
-      /**
-       * Checks if the playback can be resumed
-       * @returns {Boolean}
-       * @private
-       */
-      _canResume: function _canResume() {
-        return this.is('paused') && this._canPlay();
-      },
-
-      /**
-       * Sets the media is in a particular state
-       * @param {String} name
-       * @param {Boolean} value
-       * @returns {mediaplayer}
-       */
-      _setState: function _setState(name, value) {
-        value = !!value;
-        this.config.is[name] = value;
-
-        if (this.$component) {
-          this.$component.toggleClass(name, value);
-        }
-
-        return this;
-      },
-
-      /**
-       * Restores the media player from a particular state and resumes the playback
-       * @param {String} stateName
-       * @returns {mediaplayer}
-       * @private
-       */
-      _fromState: function _fromState(stateName) {
-        this._setState(stateName, false);
-
-        this.resume();
-        return this;
-      },
-
-      /**
-       * Sets the media player to a particular state and pauses the playback
-       * @param {String} stateName
-       * @returns {mediaplayer}
-       * @private
-       */
-      _toState: function _toState(stateName) {
-        this.pause();
-
-        this._setState(stateName, true);
-
-        return this;
-      },
-
-      /**
-       * Sets the playing state
-       * @param {Boolean} state
-       * @param {Boolean} [ended]
-       * @returns {mediaplayer}
-       * @private
-       */
-      _playingState: function _playingState(state, ended) {
-        this._setState('playing', !!state);
-
-        this._setState('paused', !state);
-
-        this._setState('ended', !!ended);
-
-        return this;
-      },
-
-      /**
-       * Executes a command onto the media
-       * @param {String} command - The name of the command to execute
-       * @param {*} args - additional arguments
-       * @returns {*}
-       * @private
-       */
-      execute: function execute(command) {
-        if (this.player && 'function' === typeof this.player[command]) {
-          var _this$player;
-
-          for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-            args[_key2 - 1] = arguments[_key2];
+        _canPlay() {
+          return (this.is('ready') || this.is('stalled')) && !this.is('disabled') && !this.is('hidden') && !this._playLimitReached();
+        },
+        /**
+         * Checks if the media can be paused
+         * @returns {Boolean}
+         * @private
+         */
+        _canPause() {
+          return !!this.config.canPause;
+        },
+        /**
+         * Checks if the media can be sought
+         * @returns {Boolean}
+         * @private
+         */
+        _canSeek() {
+          return !!this.config.canSeek;
+        },
+        /**
+         * Checks if the playback can be resumed
+         * @returns {Boolean}
+         * @private
+         */
+        _canResume() {
+          return this.is('paused') && this._canPlay();
+        },
+        /**
+         * Sets the media is in a particular state
+         * @param {String} name
+         * @param {Boolean} value
+         * @returns {mediaplayer}
+         */
+        _setState(name, value) {
+          value = !!value;
+          this.config.is[name] = value;
+          if (this.$component) {
+            this.$component.toggleClass(name, value);
+          }
+          return this;
+        },
+        /**
+         * Restores the media player from a particular state and resumes the playback
+         * @param {String} stateName
+         * @returns {mediaplayer}
+         * @private
+         */
+        _fromState(stateName) {
+          this._setState(stateName, false);
+          this.resume();
+          return this;
+        },
+        /**
+         * Sets the media player to a particular state and pauses the playback
+         * @param {String} stateName
+         * @returns {mediaplayer}
+         * @private
+         */
+        _toState(stateName) {
+          this.pause();
+          this._setState(stateName, true);
+          return this;
+        },
+        /**
+         * Sets the playing state
+         * @param {Boolean} state
+         * @param {Boolean} [ended]
+         * @returns {mediaplayer}
+         * @private
+         */
+        _playingState(state, ended) {
+          this._setState('playing', !!state);
+          this._setState('paused', !state);
+          this._setState('ended', !!ended);
+          return this;
+        },
+        /**
+         * Executes a command onto the media
+         * @param {String} command - The name of the command to execute
+         * @param {*} args - additional arguments
+         * @returns {*}
+         * @private
+         */
+        execute(command) {
+          if (this.player && 'function' === typeof this.player[command]) {
+            for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+              args[_key2 - 1] = arguments[_key2];
+            }
+            return this.player[command](...args);
           }
-
-          return (_this$player = this.player)[command].apply(_this$player, args);
         }
-      }
-    };
-    return mediaplayer.init(config);
-  }
-  /**
-   * Tells if the browser can play audio and video
-   * @param {String} [type] The type of media (audio or video)
-   * @param {String} [mime] A media MIME type to check
-   * @type {Boolean}
-   */
-
-
-  mediaplayerFactory.canPlay = function canPlay(type, mime) {
-    return support.canPlay(type, mime);
-  };
-  /**
-   * Tells if the browser can play audio
-   * @param {String} [mime] A media MIME type to check
-   * @type {Boolean}
-   */
-
-
-  mediaplayerFactory.canPlayAudio = function canPlayAudio(mime) {
-    return support.canPlayAudio(mime);
-  };
-  /**
-   * Tells if the browser can play video
-   * @param {String} [mime] A media MIME type to check
-   * @type {Boolean}
-   */
+      };
+      return mediaplayer.init(config);
+    }
 
+    /**
+     * Tells if the browser can play audio and video
+     * @param {String} [type] The type of media (audio or video)
+     * @param {String} [mime] A media MIME type to check
+     * @type {Boolean}
+     */
+    mediaplayerFactory.canPlay = function canPlay(type, mime) {
+      return support.canPlay(type, mime);
+    };
 
-  mediaplayerFactory.canPlayVideo = function canPlayVideo(mime) {
-    return support.canPlayVideo(mime);
-  };
-  /**
-   * Checks if the browser allows to control the media playback
-   * @returns {Boolean}
-   */
+    /**
+     * Tells if the browser can play audio
+     * @param {String} [mime] A media MIME type to check
+     * @type {Boolean}
+     */
+    mediaplayerFactory.canPlayAudio = function canPlayAudio(mime) {
+      return support.canPlayAudio(mime);
+    };
 
+    /**
+     * Tells if the browser can play video
+     * @param {String} [mime] A media MIME type to check
+     * @type {Boolean}
+     */
+    mediaplayerFactory.canPlayVideo = function canPlayVideo(mime) {
+      return support.canPlayVideo(mime);
+    };
 
-  mediaplayerFactory.canControl = function canControl() {
-    return support.canControl();
-  };
+    /**
+     * Checks if the browser allows to control the media playback
+     * @returns {Boolean}
+     */
+    mediaplayerFactory.canControl = function canControl() {
+      return support.canControl();
+    };
 
-  return mediaplayerFactory;
+    return mediaplayerFactory;
 
 });