@oat-sa/tao-core-ui 1.58.1 → 1.58.2

package/dist/mediaplayer.js

@@ -1,1831 +1,1876 @@
 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;
-
+  $$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);
+    });
     /**
-     * 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);
-     *
+     * Register dompurify helper
      *
+     * https://github.com/cure53/DOMPurify
+     * with config SAFE_FOR_TEMPLATES: true
+     * to make output safe for template systems
      */
-    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*
-       */
-
-      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 : '"';
+    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*
+     */
 
-        _.forIn(arr, function (value, key) {
-          var fragment = '';
+    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 : '"';
 
-          if (value !== null || value !== undefined) {
-            if (typeof value === 'boolean') {
-              value = value ? 'true' : 'false';
-            } else if (typeof value === 'object') {
-              value = _.values(value).join(' ');
-            }
-          } else {
-            value = '';
-          }
+      _.forIn(arr, function (value, key) {
+        var fragment = '';
 
-          if (keyValueGlue !== undefined) {
-            fragment += key + keyValueGlue;
+        if (value !== null || value !== undefined) {
+          if (typeof value === 'boolean') {
+            value = value ? 'true' : 'false';
+          } else if (_typeof(value) === 'object') {
+            value = _.values(value).join(' ');
           }
-
-          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);
+          value = '';
         }
-      }); // 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 (keyValueGlue !== undefined) {
+          fragment += key + keyValueGlue;
         }
-      });
-    }
 
-    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)
-        + "\">\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;
+        fragment += wrapper + value + wrapper;
+        fragments.push(fragment);
       });
-    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}
-     */
-
-    const ns = '.mediaplayer';
-    /**
-     * Minimum value of the volume
-     * @type {Number}
-     */
-
-    const volumeMin = 0;
-    /**
-     * Maximum value of the volume
-     * @type {Number}
-     */
 
-    const volumeMax = 100;
-    /**
-     * Threshold (minimum required space above the player) to display the volume
-     * above the bar.
-     * @type {Number}
-     */
+      return fragments.join(fragmentGlue);
+    }); //register a classic "for loop" helper
+    //it also adds a local variable "i" as the index in each iteration loop
 
-    const volumePositionThreshold = 200;
-    /**
-     * Some default values
-     * @type {Object}
-     */
+    hb.registerHelper('for', function (startIndex, stopIndex, increment, options) {
+      var ret = '';
+      startIndex = parseInt(startIndex);
+      stopIndex = parseInt(stopIndex);
+      increment = parseInt(increment);
 
-    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
+      for (var i = startIndex; i < stopIndex; i += increment) {
+        ret += options.fn(_.extend({}, this, {
+          i: i
+        }));
       }
-    };
-    /**
-     * 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 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
 
-      return value;
-    };
-    /**
-     * Formats a time value to string
-     * @param {Number} time
-     * @returns {String}
-     */
-
-
-    const timerFormat = time => {
-      const seconds = Math.floor(time % 60);
-      const minutes = Math.floor(time / 60) % 60;
-      const hours = Math.floor(time / 3600);
-      const parts = [];
+    hb.registerHelper('property', function (name, context) {
+      return context[name] || '';
+    }); // register an 'includes' helper
+    // it checks if value is in array
 
-      if (hours) {
-        parts.push(hours);
+    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)
+      + "\">\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);
+  }
+
+  /**
+   * 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}
+   */
+
+  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
+    }
+  };
+  /**
+   * 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);
+    }
 
-      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}
-     */
-
-
-    const needTypeAdjust = type => {
-      return 'string' === typeof type && type.indexOf('application') === 0;
-    };
-    /**
-     * Adjust bad type by apllying heuristic on URI
-     * @param {Object|String} source
-     * @returns {String}
-     */
+    return value;
+  };
+  /**
+   * Formats a time value to string
+   * @param {Number} time
+   * @returns {String}
+   */
 
 
-    const getAdjustedType = source => {
-      let type = 'video/ogg';
-      const url = source && source.src || source;
-      const ext = url && url.substr(-4);
+  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 (ext === '.ogg' || ext === '.oga') {
-        type = 'audio/ogg';
-      }
+    if (hours) {
+      parts.push(hours);
+    }
 
-      return type;
-    };
-    /**
-     * Extract a list of media sources from a config object
-     * @param {Object} config
-     * @returns {Array}
-     */
+    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';
+    }
 
+    return 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];
-      }
+  var configToSources = function configToSources(config) {
+    var sources = config.sources || [];
+    var url = config.url;
 
-      if (url) {
-        if (!_.isArray(config.url)) {
-          url = [url];
-        }
+    if (!_.isArray(sources)) {
+      sources = [sources];
+    }
 
-        sources = sources.concat(url);
+    if (url) {
+      if (!_.isArray(config.url)) {
+        url = [url];
       }
 
-      return sources;
-    };
-    /**
-     * Checks if the browser can play media
-     * @param {String} sizeProps Width or Height
-     * @returns {Boolean}
-     */
-
+      sources = sources.concat(url);
+    }
 
-    const isResponsiveSize = sizeProps => {
-      return /%/.test(sizeProps) || sizeProps === 'auto';
-    };
+    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}
+   */
+
+
+  function mediaplayerFactory(config) {
     /**
-     * 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}
+     * Defines a media player object
+     * @type {Object}
      */
-
-
-    function mediaplayerFactory(config) {
+    var mediaplayer = {
       /**
-       * Defines a media player object
-       * @type {Object}
+       * Initializes the media player
+       * @param {Object} config
+       * @returns {mediaplayer}
        */
-      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;
-          }
+      init: function init(config) {
+        var _this = this;
 
-          this._setType(this.config.type || defaults.type);
+        // 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;
+        });
 
-          this._reset();
+        _.defaults(this.config, defaults.options);
 
-          this._updateVolumeFromStore();
+        if (!this.config.mimeType && 'string' === typeof this.config.type && this.config.type.indexOf('/') > 0) {
+          this.config.mimeType = this.config.type;
+        }
 
-          this._initEvents();
+        this._setType(this.config.type || defaults.type);
 
-          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._reset();
 
-                  this._initType();
+        this._updateVolumeFromStore();
 
-                  return false;
-                }
-              });
-            }
+        this._initEvents();
 
-            if (this.config.renderTo) {
-              _.defer(() => this.render());
-            }
-          });
+        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);
 
-          return this;
-        },
+                _this._initType();
 
-        /**
-         * Uninstalls the media player
-         * @returns {mediaplayer}
-         */
-        destroy() {
-          /**
-           * Triggers a destroy event
-           * @event mediaplayer#destroy
-           */
-          this.trigger('destroy');
+                return false;
+              }
+            });
+          }
 
-          if (this.player) {
-            this.player.destroy();
+          if (_this.config.renderTo) {
+            _.defer(function () {
+              return _this.render();
+            });
           }
+        });
 
-          if (this.$component) {
-            this._unbindEvents();
+        return this;
+      },
 
-            this._destroySlider(this.$seekSlider);
+      /**
+       * Uninstalls the media player
+       * @returns {mediaplayer}
+       */
+      destroy: function destroy() {
+        /**
+         * Triggers a destroy event
+         * @event mediaplayer#destroy
+         */
+        this.trigger('destroy');
 
-            this._destroySlider(this.$volumeSlider);
+        if (this.player) {
+          this.player.destroy();
+        }
 
-            this.$component.remove();
-          }
+        if (this.$component) {
+          this._unbindEvents();
 
-          this._reset();
+          this._destroySlider(this.$seekSlider);
 
-          return this;
-        },
+          this._destroySlider(this.$volumeSlider);
 
-        /**
-         * Renders the media player according to the media type
-         * @param {String|jQuery|HTMLElement} [to]
-         * @returns {mediaplayer}
-         */
-        render(to) {
-          const renderTo = to || this.config.renderTo || this.$container;
+          this.$component.remove();
+        }
 
-          if (this.$component) {
-            this.destroy();
-          }
+        this._reset();
 
-          this._initState();
+        return this;
+      },
 
-          this._buildDom();
+      /**
+       * 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.config.preview) {
-            this._updateDuration(0);
+        if (this.$component) {
+          this.destroy();
+        }
 
-            this._updatePosition(0);
-          }
+        this._initState();
 
-          this._bindEvents();
+        this._buildDom();
 
-          this._playingState(false, true);
+        if (this.config.preview) {
+          this._updateDuration(0);
 
-          this._initPlayer();
+          this._updatePosition(0);
+        }
 
-          this._initSize(); // Resize for old items with defined height to avoid big jump
+        this._bindEvents();
 
+        this._playingState(false, true);
 
-          if (this.config.height && this.config.height !== 'auto') {
-            this.resize('100%', 'auto');
-          } else {
-            this.resize(this.config.width, this.config.height);
-          }
+        this._initPlayer();
 
-          this.config.is.rendered = true;
+        this._initSize(); // Resize for old items with defined height to avoid big jump
 
-          if (renderTo) {
-            this.$container = $$1(renderTo).append(this.$component);
-          } // add class if it is stalled
 
+        if (this.config.height && this.config.height !== 'auto') {
+          this.resize('100%', 'auto');
+        } else {
+          this.resize(this.config.width, this.config.height);
+        }
 
-          if (this.is('stalled')) {
-            this._setState('stalled', true);
-          }
-          /**
-           * Triggers a render event
-           * @event mediaplayer#render
-           * @param {jQuery} $component
-           */
+        this.config.is.rendered = true;
 
+        if (renderTo) {
+          this.$container = $$1(renderTo).append(this.$component);
+        } // add class if it is stalled
 
-          this.trigger('render', this.$component);
-          return this;
-        },
 
+        if (this.is('stalled')) {
+          this._setState('stalled', true);
+        }
         /**
-         * Reloads media player after it was stalled
+         * Triggers a render event
+         * @event mediaplayer#render
+         * @param {jQuery} $component
          */
-        reload() {
-          /**
-           * Triggers a reload event
-           * @event mediaplayer#reload
-           */
-          this.trigger('reload');
-
-          if (this.player) {
-            this.player.recover();
-          }
 
-          this._setState('stalled', false);
 
-          this.setInitialStates();
-        },
+        this.trigger('render', this.$component);
+        return this;
+      },
 
+      /**
+       * Reloads media player after it was stalled
+       */
+      reload: function reload() {
         /**
-         * Set initial states
+         * Triggers a reload event
+         * @event mediaplayer#reload
          */
-        setInitialStates() {
-          if (!this.is('stalled')) {
-            this._setState('ready', true);
-          }
+        this.trigger('reload');
 
-          this._setState('canplay', true);
+        if (this.player) {
+          this.player.recover();
+        }
 
-          this._setState('canpause', this.config.canPause);
+        this._setState('stalled', false);
 
-          this._setState('canseek', this.config.canSeek);
+        this.setInitialStates();
+      },
 
-          this._setState('loading', false);
-        },
+      /**
+       * Set initial states
+       */
+      setInitialStates: function setInitialStates() {
+        if (!this.is('stalled')) {
+          this._setState('ready', true);
+        }
 
-        /**
-         * 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._setState('canplay', true);
 
-            this.execute('seek', this.position);
+        this._setState('canpause', this.config.canPause);
 
-            if (!this.is('ready')) {
-              this.autoStartAt = this.position;
-            }
+        this._setState('canseek', this.config.canSeek);
 
-            this.loop = !!this.config.loop;
-          }
+        this._setState('loading', false);
+      },
 
-          return this;
-        },
+      /**
+       * 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);
 
-        /**
-         * 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('seek', this.position);
 
-            this.execute('play');
+          if (!this.is('ready')) {
+            this.autoStartAt = this.position;
+          }
 
-            if (!this.is('ready')) {
-              this.autoStart = true;
-            }
+          this.loop = !!this.config.loop;
+        }
 
-            this.loop = !!this.config.loop;
+        return this;
+      },
 
-            if (this.timerId) {
-              cancelAnimationFrame(this.timerId);
-            }
+      /**
+       * 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);
           }
 
-          return this;
-        },
+          this.execute('play');
 
-        /**
-         * 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);
-            }
+          if (!this.is('ready')) {
+            this.autoStart = true;
+          }
 
-            this.execute('pause');
+          this.loop = !!this.config.loop;
 
-            if (!this.is('ready')) {
-              this.autoStart = false;
-            }
+          if (this.timerId) {
+            cancelAnimationFrame(this.timerId);
           }
+        }
 
-          return this;
-        },
+        return this;
+      },
 
-        /**
-         * Resumes the media
-         * @returns {mediaplayer}
-         */
-        resume() {
-          if (this._canResume()) {
-            this.play();
+      /**
+       * 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;
-        },
-
-        /**
-         * Stops the playback
-         * @returns {mediaplayer}
-         */
-        stop() {
-          this.loop = false;
-          this.execute('stop');
+          this.execute('pause');
 
           if (!this.is('ready')) {
             this.autoStart = false;
           }
+        }
 
-          return this;
-        },
-
-        /**
-         * Starts the media
-         * @returns {mediaplayer}
-         */
-        start() {
-          this._setState('preview', true);
-
-          this._setState('loading', true);
+        return this;
+      },
 
+      /**
+       * Resumes the media
+       * @returns {mediaplayer}
+       */
+      resume: function resume() {
+        if (this._canResume()) {
           this.play();
-        },
-
-        /**
-         * 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;
-        },
+        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;
-          }
+      /**
+       * Stops the playback
+       * @returns {mediaplayer}
+       */
+      stop: function stop() {
+        this.loop = false;
+        this.execute('stop');
 
-          this.execute('mute', state);
+        if (!this.is('ready')) {
+          this.autoStart = false;
+        }
 
-          this._setState('muted', state);
+        return this;
+      },
 
-          if (!this.is('ready')) {
-            this.startMuted = state;
-          }
+      /**
+       * Starts the media
+       * @returns {mediaplayer}
+       */
+      start: function start() {
+        this._setState('preview', true);
 
-          return this;
-        },
+        this._setState('loading', true);
 
-        /**
-         * Restore the sound of the media after a mute
-         * @returns {mediaplayer}
-         */
-        unmute() {
-          this.mute(false);
-          return this;
-        },
+        this.play();
+      },
 
-        /**
-         * 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);
+      /**
+       * Restarts the media from the beginning
+       * @returns {mediaplayer}
+       */
+      restart: function restart() {
+        this.play(0);
+        return this;
+      },
 
-          this.execute('setVolume', this.volume);
-          return this;
-        },
+      /**
+       * Rewind the media to the beginning
+       * @returns {mediaplayer}
+       */
+      rewind: function rewind() {
+        this.seek(0);
+        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;
-        },
+      /**
+       * 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;
+        }
 
-        /**
-         * Gets the current displayed position inside the media
-         * @returns {Number}
-         */
-        getPosition() {
-          return this.position;
-        },
+        this.execute('mute', state);
 
-        /**
-         * Gets the duration of the media
-         * @returns {Number}
-         */
-        getDuration() {
-          return this.duration;
-        },
+        this._setState('muted', state);
 
-        /**
-         * Gets the number of times the media has been played
-         * @returns {Number}
-         */
-        getTimesPlayed() {
-          return this.timesPlayed;
-        },
+        if (!this.is('ready')) {
+          this.startMuted = state;
+        }
 
-        /**
-         * Gets the type of player
-         * @returns {String}
-         */
-        getType() {
-          return this.type;
-        },
+        return this;
+      },
 
-        /**
-         * Gets the DOM container
-         * @returns {jQuery}
-         */
-        getContainer() {
-          if (!this.$container && this.$component) {
-            let $container = this.$component.parent();
+      /**
+       * Restore the sound of the media after a mute
+       * @returns {mediaplayer}
+       */
+      unmute: function unmute() {
+        this.mute(false);
+        return this;
+      },
 
-            if ($container.length) {
-              this.$container = $container;
-            }
-          }
+      /**
+       * 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);
 
-          return this.$container;
-        },
+        this.execute('setVolume', this.volume);
+        return this;
+      },
 
-        /**
-         * Gets the underlying DOM element
-         * @returns {jQuery}
-         */
-        getElement() {
-          return this.$component;
-        },
+      /**
+       * 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 list of media
-         * @returns {Array}
-         */
-        getSources() {
-          return this.config.sources.slice();
-        },
+      /**
+       * Gets the current displayed position inside the media
+       * @returns {Number}
+       */
+      getPosition: function getPosition() {
+        return this.position;
+      },
 
-        /**
-         * 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];
+      /**
+       * Gets the duration of the media
+       * @returns {Number}
+       */
+      getDuration: function getDuration() {
+        return this.duration;
+      },
 
-            if (this.is('rendered')) {
-              this.player.setMedia(source.src, source.type);
-            }
+      /**
+       * Gets the number of times the media has been played
+       * @returns {Number}
+       */
+      getTimesPlayed: function getTimesPlayed() {
+        return this.timesPlayed;
+      },
 
-            if (callback) {
-              callback.call(this, source);
-            }
-          });
+      /**
+       * Gets the type of player
+       * @returns {String}
+       */
+      getType: function getType() {
+        return this.type;
+      },
 
-          return this;
-        },
+      /**
+       * Gets the DOM container
+       * @returns {jQuery}
+       */
+      getContainer: function getContainer() {
+        if (!this.$container && this.$component) {
+          var $container = this.$component.parent();
 
-        /**
-         * 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 ($container.length) {
+            this.$container = $container;
+          }
+        }
 
-            if (this.is('rendered')) {
-              this.player.addMedia(source.src, source.type);
-            }
+        return this.$container;
+      },
 
-            if (callback) {
-              callback.call(this, source);
-            }
-          });
+      /**
+       * Gets the underlying DOM element
+       * @returns {jQuery}
+       */
+      getElement: function getElement() {
+        return this.$component;
+      },
 
-          return this;
-        },
+      /**
+       * Gets the list of media
+       * @returns {Array}
+       */
+      getSources: function getSources() {
+        return this.config.sources.slice();
+      },
 
-        /**
-         * Tells if the media is in a particular state
-         * @param {String} state
-         * @returns {Boolean}
-         */
-        is(state) {
-          return !!this.config.is[state];
-        },
+      /**
+       * 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;
 
-        /**
-         * 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';
+        this._getSource(src, function (source) {
+          _this2.config.sources = [source];
+
+          if (_this2.is('rendered')) {
+            _this2.player.setMedia(source.src, source.type);
           }
 
-          this.execute('setSize', width, height);
-          return this;
-        },
+          if (callback) {
+            callback.call(_this2, source);
+          }
+        });
 
-        /**
-         * Enables the media player
-         * @returns {mediaplayer}
-         */
-        enable() {
-          this._fromState('disabled');
+        return this;
+      },
 
-          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;
 
-        /**
-         * Disables the media player
-         * @returns {mediaplayer}
-         */
-        disable() {
-          this._toState('disabled');
+        this._getSource(src, function (source) {
+          _this3.config.sources.push(source);
 
-          this.trigger('disabled');
-          return this;
-        },
+          if (_this3.is('rendered')) {
+            _this3.player.addMedia(source.src, source.type);
+          }
 
-        /**
-         * Shows the media player
-         * @returns {mediaplayer}
-         */
-        show() {
-          this._fromState('hidden');
+          if (callback) {
+            callback.call(_this3, source);
+          }
+        });
 
-          return this;
-        },
+        return this;
+      },
 
-        /**
-         * hides the media player
-         * @returns {mediaplayer}
-         */
-        hide() {
-          this._toState('hidden');
+      /**
+       * Tells if the media is in a particular state
+       * @param {String} state
+       * @returns {Boolean}
+       */
+      is: function is(state) {
+        return !!this.config.is[state];
+      },
 
-          return this;
-        },
+      /**
+       * 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';
+        }
 
-        /**
-         * get media original size
-         * @returns {Object}
-         */
-        getMediaOriginalSize() {
-          if (this.is('youtube')) {
-            return defaults.youtube;
-          }
+        this.execute('setSize', width, height);
+        return this;
+      },
 
-          if (this.is('video') && this.player) {
-            return this.player.getMediaSize();
-          }
+      /**
+       * Enables the media player
+       * @returns {mediaplayer}
+       */
+      enable: function enable() {
+        this._fromState('disabled');
 
-          return {};
-        },
+        return this;
+      },
 
-        /**
-         * 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';
-          }
-        },
+      /**
+       * Disables the media player
+       * @returns {mediaplayer}
+       */
+      disable: function disable() {
+        this._toState('disabled');
 
-        /**
-         * 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;
-        },
+        this.trigger('disabled');
+        return this;
+      },
 
-        /**
-         * 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;
+      /**
+       * Shows the media player
+       * @returns {mediaplayer}
+       */
+      show: function show() {
+        this._fromState('hidden');
 
-          const done = () => {
-            if (needTypeAdjust(source.type)) {
-              source.type = getAdjustedType(source);
-            }
+        return this;
+      },
 
-            callback.call(this, source);
-          };
+      /**
+       * hides the media player
+       * @returns {mediaplayer}
+       */
+      hide: function hide() {
+        this._toState('hidden');
 
-          if (_.isString(src)) {
-            source = {
-              src: src
-            };
-          } else {
-            source = _.clone(src);
-          }
+        return this;
+      },
 
-          if (!source.type) {
-            if (this.is('youtube')) {
-              source.type = defaults.type;
-            } else if (this.config.mimeType) {
-              source.type = this.config.mimeType;
-            }
-          }
+      /**
+       * get media original size
+       * @returns {Object}
+       */
+      getMediaOriginalSize: function getMediaOriginalSize() {
+        if (this.is('youtube')) {
+          return defaults.youtube;
+        }
 
-          if (!source.type) {
-            mimetype.getResourceType(source.src, (err, type) => {
-              if (err) {
-                type = defaults.type;
-              }
+        if (this.is('video') && this.player) {
+          return this.player.getMediaSize();
+        }
 
-              source.type = type;
-              done();
-            });
-          } else {
-            done();
-          }
-        },
+        return {};
+      },
 
-        /**
-         * 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);
-        },
+      /**
+       * 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';
+        }
+      },
 
-        /**
-         * Installs the events manager onto the instance
-         * @private
-         */
-        _initEvents() {
-          eventifier(this);
-          const triggerEvent = this.trigger;
+      /**
+       * 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;
+      },
 
-          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];
-            }
+      /**
+       * 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;
 
-            if (this.$component) {
-              this.$component.trigger(eventName + ns, ...args);
-            }
+        var source;
 
-            return triggerEvent.call(this, eventName, ...args);
+        var done = function done() {
+          if (needTypeAdjust(source.type)) {
+            source.type = getAdjustedType(source);
+          }
+
+          callback.call(_this4, source);
+        };
+
+        if (_.isString(src)) {
+          source = {
+            src: src
           };
-        },
+        } else {
+          source = _.clone(src);
+        }
 
-        /**
-         * 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';
+        if (!source.type) {
+          if (this.is('youtube')) {
+            source.type = defaults.type;
+          } else if (this.config.mimeType) {
+            source.type = this.config.mimeType;
           }
-        },
-
-        /**
-         * 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;
+        if (!source.type) {
+          mimetype.getResourceType(source.src, function (err, type) {
+            if (err) {
+              type = defaults.type;
             }
-          } else {
-            error = true;
-          }
 
-          this._setState('error', error);
+            source.type = type;
+            done();
+          });
+        } else {
+          done();
+        }
+      },
 
-          this._setState('nogui', !support.canControl());
+      /**
+       * 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);
+      },
 
-          this._setState('preview', this.config.preview);
+      /**
+       * Installs the events manager onto the instance
+       * @private
+       */
+      _initEvents: function _initEvents() {
+        eventifier(this);
+        var triggerEvent = this.trigger;
 
-          this._setState('loading', !error);
+        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 (error) {
-            this._setState('ready', true);
+          if (this.$component) {
+            var _this$$component;
 
-            this.trigger('ready');
+            (_this$$component = this.$component).trigger.apply(_this$$component, [eventName + ns].concat(args));
           }
-        },
 
-        /**
-         * Initializes the player state
-         * @private
-         */
-        _initState() {
-          let isCORS = false;
-          let page;
+          return triggerEvent.call.apply(triggerEvent, [this, eventName].concat(args));
+        };
+      },
 
-          if (!this.is('youtube')) {
-            page = new UrlParser(window.location);
-            isCORS = _.some(this.config.sources, source => !page.sameDomain(source.src));
-          }
+      /**
+       * 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';
+        }
+      },
 
-          this._setState('cors', isCORS);
+      /**
+       * 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);
+              }
+            }).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();
+            });
+          }
 
-          this._setState('ready', false);
-        },
+          if (this.player) {
+            error = !this.player.init();
+          } else {
+            error = true;
+          }
+        } else {
+          error = true;
+        }
 
-        /**
-         * Resets the internals attributes
-         * @private
-         */
-        _reset() {
-          this.config.is = {};
+        this._setState('error', error);
 
-          this._initType();
+        this._setState('nogui', !support.canControl());
 
-          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;
-        },
+        this._setState('preview', this.config.preview);
 
-        /**
-         * 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);
-        },
+        this._setState('loading', !error);
 
-        /**
-         * 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 (error) {
+          this._setState('ready', true);
 
-          if (vertical) {
-            orientation = 'vertical';
-            direction = 'rtl';
-          } else {
-            orientation = 'horizontal';
-            direction = 'ltr';
-          }
+          this.trigger('ready');
+        }
+      },
 
-          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
-            }
+      /**
+       * 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);
           });
-        },
+        }
 
-        /**
-         * Destroys a slider bound to an element
-         * @param {jQuery} $elt
-         * @private
-         */
-        _destroySlider($elt) {
-          if ($elt) {
-            $elt.get(0).destroy();
-          }
-        },
+        this._setState('cors', isCORS);
 
-        /**
-         * 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
+        this._setState('ready', false);
+      },
 
-            if ($action.length) {
-              const id = $action.data('control');
+      /**
+       * 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;
+      },
 
-              if (_.isFunction(this[id])) {
-                this[id]();
-              }
-            } else {
-              // 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');
-              } //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;
-              });
-            }
-          });
-        },
+      /**
+       * 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);
+      },
 
-        /**
-         * 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);
-          }
+      /**
+       * 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;
 
-          $$1(document).off(ns);
-        },
+        if (vertical) {
+          orientation = 'vertical';
+          direction = 'rtl';
+        } else {
+          orientation = 'horizontal';
+          direction = 'ltr';
+        }
 
-        /**
-         * Updates the volume slider
-         * @param {Number} value
-         * @private
-         */
-        _updateVolumeSlider(value) {
-          if (this.$volumeSlider) {
-            this.$volumeSlider.val(value);
+        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
           }
-        },
-
-        /**
-         * 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);
+      /**
+       * Destroys a slider bound to an element
+       * @param {jQuery} $elt
+       * @private
+       */
+      _destroySlider: function _destroySlider($elt) {
+        if ($elt) {
+          $elt.get(0).destroy();
+        }
+      },
 
-          if (!internal) {
-            this._updateVolumeSlider(value);
-          }
-        },
+      /**
+       * Binds events onto the rendered player
+       * @private
+       */
+      _bindEvents: function _bindEvents() {
+        var _this7 = this;
 
-        /**
-         * Updates the time slider
-         * @param {Number} value
-         * @private
-         */
-        _updatePositionSlider(value) {
-          if (this.$seekSlider) {
-            this.$seekSlider.val(value);
-          }
-        },
+        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');
 
-        /**
-         * Updates the time label
-         * @param {Number} value
-         * @private
-         */
-        _updatePositionLabel(value) {
-          if (this.$position) {
-            this.$position.text(timerFormat(value));
+          if (_.isFunction(_this7[id])) {
+            _this7[id]();
           }
-        },
+        });
+        this.$player.on("click".concat(ns), function (event) {
+          var $target = $$1(event.target);
+          var $action = $target.closest('.action'); // if action was clicked
 
-        /**
-         * 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 ($action.length) {
+            var id = $action.data('control');
 
-          if (!internal && this.duration) {
-            this._updatePositionSlider(this.position);
+            if (_.isFunction(_this7[id])) {
+              _this7[id]();
+            }
+          } else {
+            // default action is toggle play
+            if (_this7.is('playing')) {
+              _this7.pause();
+            } else {
+              _this7.play();
+            }
           }
+        });
+        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();
 
-          this._updatePositionLabel(this.position);
-        },
+          $$1(document).trigger("updateVolume".concat(ns), value);
 
-        /**
-         * Updates the duration slider
-         * @param {Number} value
-         * @private
-         */
-        _updateDurationSlider(value) {
-          if (this.$seekSlider) {
-            this._destroySlider(this.$seekSlider);
-
-            this.$seekSlider = null;
-          }
+          _this7.setVolume(value, true);
+        });
+        this.$sound.on("mouseover".concat(ns), 'a', function () {
+          var position;
 
-          if (value && isFinite(value)) {
-            this.$seekSlider = this._renderSlider(this.$seek, 0, 0, value);
-            this.$seekSlider.attr('disabled', !this.config.canSeek);
-          }
-        },
+          if (!overing && !_this7.$volumeControl.hasClass('up') && !_this7.$volumeControl.hasClass('down')) {
+            overing = true;
+            position = _this7.$controls[0].getBoundingClientRect();
 
-        /**
-         * Updates the duration label
-         * @param {Number} value
-         * @private
-         */
-        _updateDurationLabel(value) {
-          if (this.$duration) {
-            if (value && isFinite(value)) {
-              this.$duration.text(timerFormat(value)).show();
+            if (position && position.top && position.top < volumePositionThreshold) {
+              _this7.$volumeControl.addClass('down');
             } else {
-              this.$duration.hide();
-            }
-          }
-        },
+              _this7.$volumeControl.addClass('up');
+            } //close the volume control after 15s
 
-        /**
-         * Updates the displayed duration
-         * @param {Number|String} value
-         * @private
-         */
-        _updateDuration(value) {
-          const duration = Math.abs(parseFloat(value));
 
-          if (duration !== this.duration) {
-            this.duration = duration;
+            _this7.overingTimer = _.delay(function () {
+              if (_this7.$volumeControl) {
+                _this7.$volumeControl.removeClass('up down');
+              }
 
-            this._updateDurationSlider(this.duration);
+              overing = false;
+            }, 15000);
 
-            this._updateDurationLabel(this.duration);
-          }
-        },
+            _this7.$volumeControl.one("mouseleave".concat(ns), function () {
+              _this7.$volumeControl.removeClass('up down');
 
-        /**
-         * Event called when the media is ready
-         * @private
-         */
-        _onReady() {
-          if (this.is('error')) {
-            this._setState('error', false);
+              overing = false;
+            });
           }
+        });
+      },
 
-          const duration = this.player.getDuration();
-          const timePreview = this.config.preview || duration;
+      /**
+       * 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);
+        }
 
-          if (timePreview) {
-            this._updateDuration(duration);
-          }
+        $$1(document).off(ns);
+      },
 
-          this.setInitialStates();
-          /**
-           * Triggers a media ready event
-           * @event mediaplayer#ready
-           */
+      /**
+       * Updates the volume slider
+       * @param {Number} value
+       * @private
+       */
+      _updateVolumeSlider: function _updateVolumeSlider(value) {
+        if (this.$volumeSlider) {
+          this.$volumeSlider.val(value);
+        }
+      },
 
-          this.trigger('ready'); // set the initial state
+      /**
+       * 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.setVolume(this.volume);
-          this.mute(!!this.startMuted);
+        this._storeVolume(this.volume);
 
-          if (this.autoStartAt) {
-            this.seek(this.autoStartAt);
-          } else if (this.autoStart) {
-            this.play();
-          }
+        if (!internal) {
+          this._updateVolumeSlider(value);
+        }
+      },
 
-          if (this.config.preview && this.$container && this.config.height && this.config.height !== 'auto') {
-            this._setMaxHeight();
-          }
-        },
+      /**
+       * Updates the time slider
+       * @param {Number} value
+       * @private
+       */
+      _updatePositionSlider: function _updatePositionSlider(value) {
+        if (this.$seekSlider) {
+          this.$seekSlider.val(value);
+        }
+      },
 
-        /**
-         * 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');
-          }
-        },
+      /**
+       * Updates the time label
+       * @param {Number} value
+       * @private
+       */
+      _updatePositionLabel: function _updatePositionLabel(value) {
+        if (this.$position) {
+          this.$position.text(timerFormat(value));
+        }
+      },
 
-        /**
-         * Update volume in DBIndex store
-         * @param {Number} volume
-         * @returns {Promise}
-         * @private
-         */
-        _storeVolume(volume) {
-          return store('mediaVolume').then(volumeStore => volumeStore.setItem('volume', volume));
-        },
+      /**
+       * 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)));
 
-        /**
-         * 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);
-            }
-          });
-        },
+        if (!internal && this.duration) {
+          this._updatePositionSlider(this.position);
+        }
 
-        /**
-         * Event called when the media throws unrecoverable error
-         * @private
-         */
-        _onError() {
-          this._setState('error', true);
+        this._updatePositionLabel(this.position);
+      },
 
-          this._setState('loading', false);
-          /**
-           * Triggers an unrecoverable media error event
-           * @event mediaplayer#error
-           */
+      /**
+       * Updates the duration slider
+       * @param {Number} value
+       * @private
+       */
+      _updateDurationSlider: function _updateDurationSlider(value) {
+        if (this.$seekSlider) {
+          this._destroySlider(this.$seekSlider);
 
+          this.$seekSlider = null;
+        }
 
-          this.trigger('error');
-        },
+        if (value && isFinite(value)) {
+          this.$seekSlider = this._renderSlider(this.$seek, 0, 0, value);
+          this.$seekSlider.attr('disabled', !this.config.canSeek);
+        }
+      },
 
-        /**
-         * Event called when the media is played
-         * @private
-         */
-        _onPlay() {
-          this._playingState(true);
+      /**
+       * 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._setState('preview', true);
-          /**
-           * Triggers a media playback event
-           * @event mediaplayer#play
-           */
+      /**
+       * 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.trigger('play', this.player && this.player.getMedia());
-        },
+          this._updateDurationSlider(this.duration);
 
-        /**
-         * Event called when the media is paused
-         * @private
-         */
-        _onPause() {
-          this._playingState(false);
-          /**
-           * Triggers a media paused event
-           * @event mediaplayer#pause
-           */
+          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;
 
-          this.trigger('pause');
-        },
+        if (timePreview) {
+          this._updateDuration(duration);
+        }
 
+        this.setInitialStates();
         /**
-         * Event called when the media is ended
-         * @private
+         * Triggers a media ready event
+         * @event mediaplayer#ready
          */
-        _onEnd() {
-          this.timesPlayed++;
 
-          this._playingState(false, true);
+        this.trigger('ready'); // set the initial state
 
-          this._updatePosition(0); // disable when the play limit is reached
+        this.setVolume(this.volume);
+        this.mute(!!this.startMuted);
 
+        if (this.autoStartAt) {
+          this.seek(this.autoStartAt);
+        } else if (this.autoStart) {
+          this.play();
+        }
 
-          if (this._playLimitReached()) {
-            if (!this.is('disabled')) {
-              this.disable();
-            }
-            /**
-             * Triggers a play limit reached event
-             * @event mediaplayer#limitreached
-             */
+        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;
+
+        if (videoWidth > playerWidth) {
+          this.execute('setSize', '100%', 'auto');
+        } else {
+          this.$component.css({
+            maxHeight: "".concat(this.config.height + controlsHeight, "px")
+          });
+          this.execute('setSize', Math.floor(videoWidth), 'auto');
+        }
+      },
+
+      /**
+       * 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);
+        });
+      },
 
+      /**
+       * Get volume from DBIndex store
+       * @returns {Promise}
+       * @private
+       */
+      _updateVolumeFromStore: function _updateVolumeFromStore() {
+        var _this8 = this;
 
-            this.trigger('limitreached');
-          } else if (this.loop) {
-            this.restart();
-          } else if (parseInt(this.config.replayTimeout, 10) > 0) {
-            this.replayTimeoutStartMs = new window.Date().getTime();
+        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)));
 
-            this._replayTimeout();
+            _this8.setVolume(_this8.volume);
           }
-          /**
-           * Triggers a media ended event
-           * @event mediaplayer#ended
-           */
-
+        });
+      },
 
-          this.trigger('ended');
-        },
+      /**
+       * Event called when the media throws unrecoverable error
+       * @private
+       */
+      _onError: function _onError() {
+        this._setState('error', true);
 
+        this._setState('loading', false);
         /**
-         * Event called when the playback is playing
-         * @private
+         * Triggers an unrecoverable media error event
+         * @event mediaplayer#error
          */
-        _onPlaying() {
-          this._setState('preview', true);
 
-          this._setState('stalled', false);
 
-          this._setState('ready', true);
-        },
+        this.trigger('error');
+      },
+
+      /**
+       * Event called when the media is played
+       * @private
+       */
+      _onPlay: function _onPlay() {
+        this._playingState(true);
 
+        this._setState('preview', true);
         /**
-         * Event called when the playback is stalled
-         * @private
+         * Triggers a media playback event
+         * @event mediaplayer#play
          */
-        _onStalled() {
-          this._setState('stalled', true);
 
-          this._setState('ready', false);
-        },
 
+        this.trigger('play', this.player && this.player.getMedia());
+      },
+
+      /**
+       * Event called when the media is paused
+       * @private
+       */
+      _onPause: function _onPause() {
+        this._playingState(false);
         /**
-         * Event called when the time position has changed
-         * @private
+         * Triggers a media paused event
+         * @event mediaplayer#pause
          */
-        _onTimeUpdate() {
-          this._updatePosition(this.player.getPosition());
-          /**
-           * Triggers a media time update event
-           * @event mediaplayer#update
-           */
 
 
-          this.trigger('update');
-        },
+        this.trigger('pause');
+      },
 
-        /**
-         * 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));
+      /**
+       * 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 (elapsedSeconds >= parseInt(this.config.replayTimeout, 10)) {
+
+        if (this._playLimitReached()) {
+          if (!this.is('disabled')) {
             this.disable();
-            cancelAnimationFrame(this.timerId);
           }
-        },
+          /**
+           * Triggers a play limit reached event
+           * @event mediaplayer#limitreached
+           */
 
-        /**
-         * Checks if the play limit has been reached
-         * @returns {Boolean}
-         * @private
-         */
-        _playLimitReached() {
-          return this.config.maxPlays && this.timesPlayed >= this.config.maxPlays;
-        },
 
-        /**
-         * Checks if the media can be played
-         * @returns {Boolean}
-         * @private
-         */
-        _canPlay() {
-          return (this.is('ready') || this.is('stalled')) && !this.is('disabled') && !this.is('hidden') && !this._playLimitReached();
-        },
+          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();
+        }
         /**
-         * Checks if the media can be paused
-         * @returns {Boolean}
-         * @private
+         * Triggers a media ended event
+         * @event mediaplayer#ended
          */
-        _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();
-        },
+        this.trigger('ended');
+      },
 
-        /**
-         * 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;
+      /**
+       * Event called when the playback is playing
+       * @private
+       */
+      _onPlaying: function _onPlaying() {
+        this._setState('preview', true);
 
-          if (this.$component) {
-            this.$component.toggleClass(name, value);
-          }
+        this._setState('stalled', false);
 
-          return this;
-        },
+        this._setState('ready', true);
+      },
 
-        /**
-         * Restores the media player from a particular state and resumes the playback
-         * @param {String} stateName
-         * @returns {mediaplayer}
-         * @private
-         */
-        _fromState(stateName) {
-          this._setState(stateName, false);
+      /**
+       * Event called when the playback is stalled
+       * @private
+       */
+      _onStalled: function _onStalled() {
+        this._setState('stalled', true);
 
-          this.resume();
-          return this;
-        },
+        this._setState('ready', false);
+      },
 
+      /**
+       * Event called when the time position has changed
+       * @private
+       */
+      _onTimeUpdate: function _onTimeUpdate() {
+        this._updatePosition(this.player.getPosition());
         /**
-         * Sets the media player to a particular state and pauses the playback
-         * @param {String} stateName
-         * @returns {mediaplayer}
-         * @private
+         * Triggers a media time update event
+         * @event mediaplayer#update
          */
-        _toState(stateName) {
-          this.pause();
 
-          this._setState(stateName, true);
 
-          return this;
-        },
+        this.trigger('update');
+      },
 
-        /**
-         * Sets the playing state
-         * @param {Boolean} state
-         * @param {Boolean} [ended]
-         * @returns {mediaplayer}
-         * @private
-         */
-        _playingState(state, ended) {
-          this._setState('playing', !!state);
+      /**
+       * 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);
+        }
+      },
 
-          this._setState('paused', !state);
+      /**
+       * Checks if the play limit has been reached
+       * @returns {Boolean}
+       * @private
+       */
+      _playLimitReached: function _playLimitReached() {
+        return this.config.maxPlays && this.timesPlayed >= this.config.maxPlays;
+      },
 
-          this._setState('ended', !!ended);
+      /**
+       * 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();
+      },
 
-          return this;
-        },
+      /**
+       * Checks if the media can be paused
+       * @returns {Boolean}
+       * @private
+       */
+      _canPause: function _canPause() {
+        return !!this.config.canPause;
+      },
 
-        /**
-         * 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];
-            }
+      /**
+       * Checks if the media can be sought
+       * @returns {Boolean}
+       * @private
+       */
+      _canSeek: function _canSeek() {
+        return !!this.config.canSeek;
+      },
 
-            return this.player[command](...args);
-          }
+      /**
+       * 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 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}
-     */
+        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);
 
-    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}
-     */
+        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();
 
-    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}
-     */
+        this._setState(stateName, true);
 
+        return this;
+      },
 
-    mediaplayerFactory.canPlayVideo = function canPlayVideo(mime) {
-      return support.canPlayVideo(mime);
-    };
-    /**
-     * Checks if the browser allows to control the media playback
-     * @returns {Boolean}
-     */
+      /**
+       * 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);
 
-    mediaplayerFactory.canControl = function canControl() {
-      return support.canControl();
-    };
+        this._setState('ended', !!ended);
+
+        return this;
+      },
 
-    return mediaplayerFactory;
+      /**
+       * 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];
+          }
+
+          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}
+   */
+
+
+  mediaplayerFactory.canPlayVideo = function canPlayVideo(mime) {
+    return support.canPlayVideo(mime);
+  };
+  /**
+   * Checks if the browser allows to control the media playback
+   * @returns {Boolean}
+   */
+
+
+  mediaplayerFactory.canControl = function canControl() {
+    return support.canControl();
+  };
+
+  return mediaplayerFactory;
 
 });