@clappr/player 0.8.0 → 0.10.0

package/dist/clappr.js

@@ -3826,6 +3826,13 @@
    */
   Events$1.PLAYBACK_AUDIO_CHANGED = 'playback:audio:changed';
 
+  /**
+   * Fired when the playback was resized.
+   *
+   * @event PLAYBACK_RESIZE
+   */
+  Events$1.PLAYBACK_RESIZE = 'playback:resize';
+
   // Core Events
   /**
    * Fired when the containers are created
@@ -4530,6 +4537,34 @@
           this.setElement(this.el, false);
         }
       }
+
+      /**
+       * method called before resize the element
+       * @method onResize
+       * @return {UIObject} itself
+       */
+    }, {
+      key: "onResize",
+      value: function onResize() {
+        return this;
+      }
+
+      /**
+       * resize current element
+       * @method resize
+       * @param {Object} options the options object
+       * @return {UIObject} itself
+       */
+    }, {
+      key: "resize",
+      value: function resize(options) {
+        var newWidth = isNumber(options.width) ? "".concat(options.width, "px") : "".concat(options.width);
+        var newHeight = isNumber(options.height) ? "".concat(options.height, "px") : "".concat(options.height);
+        this.el.style.width = newWidth;
+        this.el.style.height = newHeight;
+        this.onResize(options);
+        return this;
+      }
     }]);
   }(BaseObject);
 
@@ -5007,11 +5042,6 @@
       value: function setStyle(style) {
         this.$el.css(style);
       }
-    }, {
-      key: "animate",
-      value: function animate(style, duration) {
-        return this.$el.animate(style, duration).promise();
-      }
     }, {
       key: "ready",
       value: function ready() {
@@ -5358,10 +5388,22 @@
           width = _ref.width,
           height = _ref.height;
         var isResize = height !== newSize.height || width !== newSize.width;
-        if (isResize) {
-          this.currentSize = newSize;
-          this.trigger(Events$1.CONTAINER_RESIZE, newSize);
-        }
+        if (!isResize) return;
+        this.currentSize = newSize;
+        this.trigger(Events$1.CONTAINER_RESIZE, newSize);
+      }
+
+      /**
+       * method called before resize the element
+       * @method onResize
+       * @param {Object} options the options object
+       * @return {UIObject} itself
+       */
+    }, {
+      key: "onResize",
+      value: function onResize(options) {
+        this.playback.resize(options);
+        return this;
       }
 
       /**
@@ -5787,6 +5829,19 @@
       value: function canAutoPlay(cb) {
         cb(true, null); // Assume playback can autoplay by default
       }
+
+      /**
+       * method called before resize the element
+       * @method onResize
+       * @param {Object} options the options object
+       * @return {UIObject} itself
+       */
+    }, {
+      key: "onResize",
+      value: function onResize(options) {
+        this.trigger(Events$1.PLAYBACK_RESIZE, options);
+        return this;
+      }
     }]);
   }(UIObject);
   Object.assign(Playback.prototype, ErrorMixin);
@@ -6125,16 +6180,16 @@
         };
         this.resize(this.currentSize);
       }
+
+      /**
+       * method called before resize the element
+       * @method onResize
+       * @param {Object} options the options object
+       * @return {UIObject} itself
+       */
     }, {
-      key: "resize",
-      value: function resize(options) {
-        if (!isNumber(options.height) && !isNumber(options.width)) {
-          this.el.style.height = "".concat(options.height);
-          this.el.style.width = "".concat(options.width);
-        } else {
-          this.el.style.height = "".concat(options.height, "px");
-          this.el.style.width = "".concat(options.width, "px");
-        }
+      key: "onResize",
+      value: function onResize(options) {
         this.previousSize = {
           width: this.options.width,
           height: this.options.height
@@ -6143,6 +6198,7 @@
         this.options.height = options.height;
         this.currentSize = options;
         this.triggerResize(this.currentSize);
+        return this;
       }
     }, {
       key: "enableResizeObserver",
@@ -6161,13 +6217,12 @@
       key: "triggerResize",
       value: function triggerResize(newSize) {
         var thereWasChange = this.firstResize || this.oldHeight !== newSize.height || this.oldWidth !== newSize.width;
-        if (thereWasChange) {
-          this.oldHeight = newSize.height;
-          this.oldWidth = newSize.width;
-          this.computedSize = newSize;
-          this.firstResize = false;
-          this.trigger(Events$1.CORE_RESIZE, newSize);
-        }
+        if (!thereWasChange) return;
+        this.oldHeight = newSize.height;
+        this.oldWidth = newSize.width;
+        this.computedSize = newSize;
+        this.firstResize = false;
+        this.trigger(Events$1.CORE_RESIZE, newSize);
       }
     }, {
       key: "disableResizeObserver",
@@ -6562,7 +6617,7 @@
       plugins: {},
       playbacks: []
     };
-    var currentVersion = "0.9.0";
+    var currentVersion = "0.10.0";
     return /*#__PURE__*/function () {
       /**
        * builds the loader
@@ -7697,7 +7752,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -8459,7 +8514,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -8514,7 +8569,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -8594,7 +8649,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -8720,7 +8775,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -8861,7 +8916,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -8890,7 +8945,7 @@
       @type {string}
       @default
   */
-  var version$1 = "0.9.0";
+  var version$1 = "0.10.0";
 
   // Built-in Plugins/Playbacks
 
@@ -9054,7 +9109,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -9113,7 +9168,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -9272,7 +9327,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -9399,7 +9454,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -9447,7 +9502,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -9567,7 +9622,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -9686,7 +9741,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -10176,7 +10231,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -10976,7 +11031,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -11179,7 +11234,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -11381,7 +11436,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -11459,7 +11514,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -11580,7 +11635,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -11652,7 +11707,7 @@
     WaterMark: WaterMarkPlugin
   };
 
-  var version = "0.8.0";
+  var version = "0.10.0";
   for (var _i = 0, _Object$values = Object.values(Plugins); _i < _Object$values.length; _i++) {
     var plugin = _Object$values[_i];
     Loader.registerPlugin(plugin);
@@ -40331,6 +40386,7 @@
       }
       _this = _super.call.apply(_super, [this].concat(args));
       _this.options.hlsPlayback = _objectSpread2$1(_objectSpread2$1({}, _this.defaultOptions), _this.options.hlsPlayback);
+      _this._timeUpdateThrottleDelay = 200;
       _this._timeUpdateFiringRate = 0.2;
       _this._durationChangeMinOffset = 0.5;
       _this._setInitialState();
@@ -40345,7 +40401,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.9.0"
+          min: "0.10.0"
         };
       }
     }, {
@@ -40492,6 +40548,7 @@
           total: 0,
           firstFragDateTime: 0
         };
+        this._lastTimeUpdateFiredTime = 0;
         this._lastDuration = null;
         // for hls streams which have dvr with a sliding window,
         // the content at the start of the playlist is removed as new
@@ -40570,7 +40627,7 @@
         this._hls.on(Hls.Events.LEVEL_UPDATED, function (evt, data) {
           return _this2._onLevelUpdated(evt, data);
         });
-        this._hls.on(Hls.Events.LEVEL_SWITCHING, function (evt, data) {
+        this._hls.on(Hls.Events.LEVEL_SWITCHED, function (evt, data) {
           return _this2._onLevelSwitch(evt, data);
         });
         this._hls.on(Hls.Events.FRAG_CHANGED, function (evt, data) {
@@ -40845,13 +40902,21 @@
           total: this.getDuration(),
           firstFragDateTime: this.getProgramDateTime()
         };
+        var shouldThrottle = this._shouldThrottleTimeUpdate(update);
+        if (shouldThrottle) return;
+        this._lastTimeUpdate = update;
+        this._lastTimeUpdateFiredTime = this._now;
+        this.trigger(Events$1.PLAYBACK_TIMEUPDATE, update, this.name);
+      }
+    }, {
+      key: "_shouldThrottleTimeUpdate",
+      value: function _shouldThrottleTimeUpdate(update) {
         var isSameTime = Math.abs(update.current - this._lastTimeUpdate.current) < this._timeUpdateFiringRate;
         var isSameDuration = Math.abs(update.total - this._lastTimeUpdate.total) < this._durationChangeMinOffset;
         var isSameFirstFragDateTime = update.firstFragDateTime === this._lastTimeUpdate.firstFragDateTime;
-        var isSame = isSameTime && isSameDuration && isSameFirstFragDateTime;
-        if (isSame) return;
-        this._lastTimeUpdate = update;
-        this.trigger(Events$1.PLAYBACK_TIMEUPDATE, update, this.name);
+        var isSameEventPayload = isSameTime && isSameDuration && isSameFirstFragDateTime;
+        var isThrottled = this._now - this._lastTimeUpdateFiredTime < this._timeUpdateThrottleDelay;
+        return isSameEventPayload && isThrottled;
       }
     }, {
       key: "_onDurationChange",