@clappr/hlsjs-playback 1.9.11 → 1.9.12

package/dist/hlsjs-playback.esm.js

@@ -1,147 +1,4 @@
-import { Utils, Events as Events$1, Playback, Log, PlayerError, HTML5Video } from '@clappr/core';
-
-function _arrayLikeToArray(r, a) {
-  (null == a || a > r.length) && (a = r.length);
-  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
-  return n;
-}
-function _arrayWithoutHoles(r) {
-  if (Array.isArray(r)) return _arrayLikeToArray(r);
-}
-function _assertThisInitialized(e) {
-  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  return e;
-}
-function _callSuper(t, o, e) {
-  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-}
-function _classCallCheck(a, n) {
-  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
-}
-function _defineProperties(e, r) {
-  for (var t = 0; t < r.length; t++) {
-    var o = r[t];
-    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey$1(o.key), o);
-  }
-}
-function _createClass(e, r, t) {
-  return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
-    writable: !1
-  }), e;
-}
-function _defineProperty$1(e, r, t) {
-  return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : e[r] = t, e;
-}
-function _get() {
-  return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) {
-    var p = _superPropBase(e, t);
-    if (p) {
-      var n = Object.getOwnPropertyDescriptor(p, t);
-      return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value;
-    }
-  }, _get.apply(null, arguments);
-}
-function _getPrototypeOf(t) {
-  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
-    return t.__proto__ || Object.getPrototypeOf(t);
-  }, _getPrototypeOf(t);
-}
-function _inherits(t, e) {
-  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
-  t.prototype = Object.create(e && e.prototype, {
-    constructor: {
-      value: t,
-      writable: !0,
-      configurable: !0
-    }
-  }), Object.defineProperty(t, "prototype", {
-    writable: !1
-  }), e && _setPrototypeOf(t, e);
-}
-function _isNativeReflectConstruct() {
-  try {
-    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-  } catch (t) {}
-  return (_isNativeReflectConstruct = function () {
-    return !!t;
-  })();
-}
-function _iterableToArray(r) {
-  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
-}
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function ownKeys$1(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function (r) {
-      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread2$1(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) {
-      _defineProperty$1(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) {
-      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-    });
-  }
-  return e;
-}
-function _possibleConstructorReturn(t, e) {
-  if (e && ("object" == typeof e || "function" == typeof e)) return e;
-  if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
-  return _assertThisInitialized(t);
-}
-function _setPrototypeOf(t, e) {
-  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
-    return t.__proto__ = e, t;
-  }, _setPrototypeOf(t, e);
-}
-function _superPropBase(t, o) {
-  for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t)););
-  return t;
-}
-function _superPropGet(t, o, e, r) {
-  var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e);
-  return 2 & r && "function" == typeof p ? function (t) {
-    return p.apply(e, t);
-  } : p;
-}
-function _toConsumableArray(r) {
-  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
-}
-function _toPrimitive$1(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey$1(t) {
-  var i = _toPrimitive$1(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-function _unsupportedIterableToArray(r, a) {
-  if (r) {
-    if ("string" == typeof r) return _arrayLikeToArray(r, a);
-    var t = {}.toString.call(r).slice(8, -1);
-    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
-  }
-}
+import { Events as Events$1, Utils, HTML5Video, Playback, Log, PlayerError } from '@clappr/core';
 
 // https://caniuse.com/mdn-javascript_builtins_number_isfinite
 const isFiniteNumber = Number.isFinite || function (value) {
@@ -36844,878 +36701,726 @@ class Hls {
 }
 Hls.defaultConfig = void 0;
 
-var now = Utils.now,
-  listContainsIgnoreCase = Utils.listContainsIgnoreCase;
-var AUTO = -1;
-var DEFAULT_RECOVER_ATTEMPTS = 16;
+// Copyright 2014 Globo.com Player authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+const {
+  now,
+  listContainsIgnoreCase
+} = Utils;
+const AUTO = -1;
+const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-var HlsjsPlayback = /*#__PURE__*/function (_HTML5Video) {
-  function HlsjsPlayback() {
-    var _this;
-    _classCallCheck(this, HlsjsPlayback);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, HlsjsPlayback, [].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();
-    return _this;
-  }
-  _inherits(HlsjsPlayback, _HTML5Video);
-  return _createClass(HlsjsPlayback, [{
-    key: "name",
-    get: function get() {
-      return 'hls';
-    }
-  }, {
-    key: "supportedVersion",
-    get: function get() {
-      return {
-        min: "0.14.6"
-      };
-    }
-  }, {
-    key: "levels",
-    get: function get() {
-      return this._levels || [];
-    }
-  }, {
-    key: "currentLevel",
-    get: function get() {
-      if (this._currentLevel === null || this._currentLevel === undefined) {
-        return AUTO;
-      } else {
-        return this._currentLevel;
-      } // 0 is a valid level ID
-    },
-    set: function set(id) {
-      this._currentLevel = id;
-      this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH_START);
-      if (this.options.playback.hlsUseNextLevel) {
-        this._hls.nextLevel = this._currentLevel;
-      } else {
-        this._hls.currentLevel = this._currentLevel;
-      }
-    }
-  }, {
-    key: "isReady",
-    get: function get() {
-      return this._isReadyState;
-    }
-  }, {
-    key: "latency",
-    get: function get() {
-      return this._hls.latency;
-    }
-  }, {
-    key: "liveSyncPosition",
-    get: function get() {
-      return this._hls.liveSyncPosition;
-    }
-  }, {
-    key: "currentProgramDateTime",
-    get: function get() {
-      return this._hls.playingDate;
-    }
-  }, {
-    key: "_startTime",
-    get: function get() {
-      if (this._playbackType === Playback.LIVE && this._playlistType !== 'EVENT') {
-        return this._extrapolatedStartTime;
-      }
-      return this._playableRegionStartTime;
-    }
-  }, {
-    key: "_now",
-    get: function get() {
-      return now();
-    }
-
-    // the time in the video element which should represent the start of the sliding window
-    // extrapolated to increase in real time (instead of jumping as the early segments are removed)
-  }, {
-    key: "_extrapolatedStartTime",
-    get: function get() {
-      if (!this._localStartTimeCorrelation) {
-        return this._playableRegionStartTime;
-      }
-      var corr = this._localStartTimeCorrelation;
-      var timePassed = this._now - corr.local;
-      var extrapolatedWindowStartTime = (corr.remote + timePassed) / 1000;
-      // cap at the end of the extrapolated window duration
-      return Math.min(extrapolatedWindowStartTime, this._playableRegionStartTime + this._extrapolatedWindowDuration);
-    }
-
-    // the time in the video element which should represent the end of the content
-    // extrapolated to increase in real time (instead of jumping as segments are added)
-  }, {
-    key: "_extrapolatedEndTime",
-    get: function get() {
-      var actualEndTime = this._playableRegionStartTime + this._playableRegionDuration;
-      if (!this._localEndTimeCorrelation) return actualEndTime;
-      var correlation = this._localEndTimeCorrelation;
-      var timePassed = this._now - correlation.local;
-      var extrapolatedEndTime = (correlation.remote + timePassed) / 1000;
-      return Math.max(actualEndTime - this._extrapolatedWindowDuration, Math.min(extrapolatedEndTime, actualEndTime));
+class HlsjsPlayback extends HTML5Video {
+  get name() {
+    return 'hls';
+  }
+  get supportedVersion() {
+    return {
+      min: "0.14.7"
+    };
+  }
+  get levels() {
+    return this._levels || [];
+  }
+  get currentLevel() {
+    if (this._currentLevel === null || this._currentLevel === undefined) {
+      return AUTO;
+    } else {
+      return this._currentLevel;
+    } // 0 is a valid level ID
+  }
+  get isReady() {
+    return this._isReadyState;
+  }
+  set currentLevel(id) {
+    this._currentLevel = id;
+    this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH_START);
+    if (this.options.playback.hlsUseNextLevel) {
+      this._hls.nextLevel = this._currentLevel;
+    } else {
+      this._hls.currentLevel = this._currentLevel;
     }
-  }, {
-    key: "_duration",
-    get: function get() {
-      return this._extrapolatedEndTime - this._startTime;
+  }
+  get latency() {
+    return this._hls.latency;
+  }
+  get liveSyncPosition() {
+    return this._hls.liveSyncPosition;
+  }
+  get currentProgramDateTime() {
+    return this._hls.playingDate;
+  }
+  get _startTime() {
+    if (this._playbackType === Playback.LIVE && this._playlistType !== 'EVENT') {
+      return this._extrapolatedStartTime;
     }
+    return this._playableRegionStartTime;
+  }
+  get _now() {
+    return now();
+  }
 
-    // Returns the duration (seconds) of the window that the extrapolated start time is allowed
-    // to move in before being capped.
-    // The extrapolated start time should never reach the cap at the end of the window as the
-    // window should slide as chunks are removed from the start.
-    // This also applies to the extrapolated end time in the same way.
-    //
-    // If chunks aren't being removed for some reason that the start time will reach and remain fixed at
-    // playableRegionStartTime + extrapolatedWindowDuration
-    //
-    //                                <-- window duration -->
-    // I.e   playableRegionStartTime |-----------------------|
-    //                               | -->   .       .       .
-    //                               .   --> | -->   .       .
-    //                               .       .   --> | -->   .
-    //                               .       .       .   --> |
-    //                               .       .       .       .
-    //                                 extrapolatedStartTime
-  }, {
-    key: "_extrapolatedWindowDuration",
-    get: function get() {
-      if (this._segmentTargetDuration === null) {
-        return 0;
-      }
-      return this._extrapolatedWindowNumSegments * this._segmentTargetDuration;
-    }
-  }, {
-    key: "bandwidthEstimate",
-    get: function get() {
-      return this._hls && this._hls.bandwidthEstimate;
-    }
-  }, {
-    key: "defaultOptions",
-    get: function get() {
-      return {
-        preload: true
-      };
-    }
-  }, {
-    key: "customListeners",
-    get: function get() {
-      return this.options.hlsPlayback && this.options.hlsPlayback.customListeners || [];
-    }
-  }, {
-    key: "sourceMedia",
-    get: function get() {
-      return this.options.src;
-    }
-  }, {
-    key: "currentTimestamp",
-    get: function get() {
-      if (!this._currentFragment) return null;
-      var startTime = this._currentFragment.programDateTime;
-      var playbackTime = this.el.currentTime;
-      var playTimeOffSet = playbackTime - this._currentFragment.start;
-      var currentTimestampInMs = startTime + playTimeOffSet * 1000;
-      return currentTimestampInMs / 1000;
-    }
-  }, {
-    key: "_setInitialState",
-    value: function _setInitialState() {
-      this._minDvrSize = typeof this.options.hlsMinimumDvrSize === 'undefined' ? 60 : this.options.hlsMinimumDvrSize;
-      // The size of the start time extrapolation window measured as a multiple of segments.
-      // Should be 2 or higher, or 0 to disable. Should only need to be increased above 2 if more than one segment is
-      // removed from the start of the playlist at a time. E.g if the playlist is cached for 10 seconds and new chunks are
-      // added/removed every 5.
-      this._extrapolatedWindowNumSegments = !this.options.playback || typeof this.options.playback.extrapolatedWindowNumSegments === 'undefined' ? 2 : this.options.playback.extrapolatedWindowNumSegments;
-      this._playbackType = Playback.VOD;
-      this._lastTimeUpdate = {
-        current: 0,
-        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
-      // content is appended at the end.
-      // this means the actual playable start time will increase as the
-      // start content is deleted
-      // For streams with dvr where the entire recording is kept from the
-      // beginning this should stay as 0
-      this._playableRegionStartTime = 0;
-      // {local, remote} remote is the time in the video element that should represent 0
-      //                 local is the system time when the 'remote' measurment took place
-      this._localStartTimeCorrelation = null;
-      // {local, remote} remote is the time in the video element that should represents the end
-      //                 local is the system time when the 'remote' measurment took place
-      this._localEndTimeCorrelation = null;
-      // if content is removed from the beginning then this empty area should
-      // be ignored. "playableRegionDuration" excludes the empty area
-      this._playableRegionDuration = 0;
-      // #EXT-X-PROGRAM-DATE-TIME
-      this._programDateTime = 0;
-      // true when the actual duration is longer than hlsjs's live sync point
-      // when this is false playableRegionDuration will be the actual duration
-      // when this is true playableRegionDuration will exclude the time after the sync point
-      this._durationExcludesAfterLiveSyncPoint = false;
-      // #EXT-X-TARGETDURATION
-      this._segmentTargetDuration = null;
-      // #EXT-X-PLAYLIST-TYPE
-      this._playlistType = null;
-      this._recoverAttemptsRemaining = this.options.hlsRecoverAttempts || DEFAULT_RECOVER_ATTEMPTS;
-    }
-  }, {
-    key: "_setup",
-    value: function _setup() {
-      this._destroyHLSInstance();
-      this._createHLSInstance();
-      this._listenHLSEvents();
-      this._attachHLSMedia();
-    }
-  }, {
-    key: "_destroyHLSInstance",
-    value: function _destroyHLSInstance() {
-      if (!this._hls) return;
-      this._manifestLoading = false;
-      this._ccIsSetup = false;
-      this._ccTracksUpdated = false;
-      this._setInitialState();
-      this._hls.destroy();
-      this._hls = null;
-    }
-  }, {
-    key: "_createHLSInstance",
-    value: function _createHLSInstance() {
-      var config = _objectSpread2$1({}, this.options.playback.hlsjsConfig);
-      this._hls = new Hls(config);
-    }
-  }, {
-    key: "_attachHLSMedia",
-    value: function _attachHLSMedia() {
-      if (!this._hls) return;
-      this._hls.attachMedia(this.el);
-    }
-  }, {
-    key: "_listenHLSEvents",
-    value: function _listenHLSEvents() {
-      var _this2 = this;
-      if (!this._hls) return;
-      this._hls.once(Hls.Events.MEDIA_ATTACHED, function () {
-        _this2.options.hlsPlayback.preload && _this2._hls.loadSource(_this2.options.src);
-      });
-      this._hls.on(Hls.Events.MANIFEST_LOADING, function () {
-        _this2._manifestLoading = true;
-      });
-      this._hls.on(Hls.Events.LEVEL_LOADED, function (evt, data) {
-        return _this2._updatePlaybackType(evt, data);
-      });
-      this._hls.on(Hls.Events.LEVEL_UPDATED, function (evt, data) {
-        return _this2._onLevelUpdated(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) {
-        return _this2._onFragmentChanged(evt, data);
-      });
-      this._hls.on(Hls.Events.FRAG_LOADED, function (evt, data) {
-        return _this2._onFragmentLoaded(evt, data);
-      });
-      this._hls.on(Hls.Events.FRAG_BUFFERED, function (evt, data) {
-        return _this2._onFragmentBuffered(evt, data);
-      });
-      this._hls.on(Hls.Events.FRAG_PARSING_METADATA, function (evt, data) {
-        return _this2._onFragmentParsingMetadata(evt, data);
-      });
-      this._hls.on(Hls.Events.ERROR, function (evt, data) {
-        return _this2._onHLSJSError(evt, data);
-      });
-      this._hls.on(Hls.Events.SUBTITLE_TRACK_LOADED, function (evt, data) {
-        return _this2._onSubtitleLoaded(evt, data);
-      });
-      this._hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, function () {
-        return _this2._ccTracksUpdated = true;
-      });
-      this.bindCustomListeners();
-    }
-  }, {
-    key: "bindCustomListeners",
-    value: function bindCustomListeners() {
-      var _this3 = this;
-      this.customListeners.forEach(function (item) {
-        var requestedEventName = item.eventName;
-        var typeOfListener = item.once ? 'once' : 'on';
-        requestedEventName && _this3._hls["".concat(typeOfListener)](requestedEventName, item.callback);
-      });
+  // the time in the video element which should represent the start of the sliding window
+  // extrapolated to increase in real time (instead of jumping as the early segments are removed)
+  get _extrapolatedStartTime() {
+    if (!this._localStartTimeCorrelation) {
+      return this._playableRegionStartTime;
     }
-  }, {
-    key: "unbindCustomListeners",
-    value: function unbindCustomListeners() {
-      var _this4 = this;
-      this.customListeners.forEach(function (item) {
-        var requestedEventName = item.eventName;
-        requestedEventName && _this4._hls.off(requestedEventName, item.callback);
-      });
+    const corr = this._localStartTimeCorrelation;
+    const timePassed = this._now - corr.local;
+    const extrapolatedWindowStartTime = (corr.remote + timePassed) / 1000;
+    // cap at the end of the extrapolated window duration
+    return Math.min(extrapolatedWindowStartTime, this._playableRegionStartTime + this._extrapolatedWindowDuration);
+  }
+
+  // the time in the video element which should represent the end of the content
+  // extrapolated to increase in real time (instead of jumping as segments are added)
+  get _extrapolatedEndTime() {
+    const actualEndTime = this._playableRegionStartTime + this._playableRegionDuration;
+    if (!this._localEndTimeCorrelation) return actualEndTime;
+    const correlation = this._localEndTimeCorrelation;
+    const timePassed = this._now - correlation.local;
+    const extrapolatedEndTime = (correlation.remote + timePassed) / 1000;
+    return Math.max(actualEndTime - this._extrapolatedWindowDuration, Math.min(extrapolatedEndTime, actualEndTime));
+  }
+  get _duration() {
+    return this._extrapolatedEndTime - this._startTime;
+  }
+
+  // Returns the duration (seconds) of the window that the extrapolated start time is allowed
+  // to move in before being capped.
+  // The extrapolated start time should never reach the cap at the end of the window as the
+  // window should slide as chunks are removed from the start.
+  // This also applies to the extrapolated end time in the same way.
+  //
+  // If chunks aren't being removed for some reason that the start time will reach and remain fixed at
+  // playableRegionStartTime + extrapolatedWindowDuration
+  //
+  //                                <-- window duration -->
+  // I.e   playableRegionStartTime |-----------------------|
+  //                               | -->   .       .       .
+  //                               .   --> | -->   .       .
+  //                               .       .   --> | -->   .
+  //                               .       .       .   --> |
+  //                               .       .       .       .
+  //                                 extrapolatedStartTime
+  get _extrapolatedWindowDuration() {
+    if (this._segmentTargetDuration === null) {
+      return 0;
     }
-  }, {
-    key: "_onFragmentParsingMetadata",
-    value: function _onFragmentParsingMetadata(evt, data) {
-      this.trigger(Events$1.Custom.PLAYBACK_FRAGMENT_PARSING_METADATA, {
-        evt: evt,
-        data: data
+    return this._extrapolatedWindowNumSegments * this._segmentTargetDuration;
+  }
+  get bandwidthEstimate() {
+    return this._hls && this._hls.bandwidthEstimate;
+  }
+  get defaultOptions() {
+    return {
+      preload: true
+    };
+  }
+  get customListeners() {
+    return this.options.hlsPlayback && this.options.hlsPlayback.customListeners || [];
+  }
+  get sourceMedia() {
+    return this.options.src;
+  }
+  get currentTimestamp() {
+    if (!this._currentFragment) return null;
+    const startTime = this._currentFragment.programDateTime;
+    const playbackTime = this.el.currentTime;
+    const playTimeOffSet = playbackTime - this._currentFragment.start;
+    const currentTimestampInMs = startTime + playTimeOffSet * 1000;
+    return currentTimestampInMs / 1000;
+  }
+  static get HLSJS() {
+    return Hls;
+  }
+  constructor(...args) {
+    super(...args);
+    this.options.hlsPlayback = {
+      ...this.defaultOptions,
+      ...this.options.hlsPlayback
+    };
+    this._timeUpdateThrottleDelay = 200;
+    this._timeUpdateFiringRate = 0.2;
+    this._durationChangeMinOffset = 0.5;
+    this._setInitialState();
+  }
+  _setInitialState() {
+    this._minDvrSize = typeof this.options.hlsMinimumDvrSize === 'undefined' ? 60 : this.options.hlsMinimumDvrSize;
+    // The size of the start time extrapolation window measured as a multiple of segments.
+    // Should be 2 or higher, or 0 to disable. Should only need to be increased above 2 if more than one segment is
+    // removed from the start of the playlist at a time. E.g if the playlist is cached for 10 seconds and new chunks are
+    // added/removed every 5.
+    this._extrapolatedWindowNumSegments = !this.options.playback || typeof this.options.playback.extrapolatedWindowNumSegments === 'undefined' ? 2 : this.options.playback.extrapolatedWindowNumSegments;
+    this._playbackType = Playback.VOD;
+    this._lastTimeUpdate = {
+      current: 0,
+      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
+    // content is appended at the end.
+    // this means the actual playable start time will increase as the
+    // start content is deleted
+    // For streams with dvr where the entire recording is kept from the
+    // beginning this should stay as 0
+    this._playableRegionStartTime = 0;
+    // {local, remote} remote is the time in the video element that should represent 0
+    //                 local is the system time when the 'remote' measurment took place
+    this._localStartTimeCorrelation = null;
+    // {local, remote} remote is the time in the video element that should represents the end
+    //                 local is the system time when the 'remote' measurment took place
+    this._localEndTimeCorrelation = null;
+    // if content is removed from the beginning then this empty area should
+    // be ignored. "playableRegionDuration" excludes the empty area
+    this._playableRegionDuration = 0;
+    // #EXT-X-PROGRAM-DATE-TIME
+    this._programDateTime = 0;
+    // true when the actual duration is longer than hlsjs's live sync point
+    // when this is false playableRegionDuration will be the actual duration
+    // when this is true playableRegionDuration will exclude the time after the sync point
+    this._durationExcludesAfterLiveSyncPoint = false;
+    // #EXT-X-TARGETDURATION
+    this._segmentTargetDuration = null;
+    // #EXT-X-PLAYLIST-TYPE
+    this._playlistType = null;
+    this._recoverAttemptsRemaining = this.options.hlsRecoverAttempts || DEFAULT_RECOVER_ATTEMPTS;
+  }
+  _setup() {
+    this._destroyHLSInstance();
+    this._createHLSInstance();
+    this._listenHLSEvents();
+    this._attachHLSMedia();
+  }
+  _destroyHLSInstance() {
+    if (!this._hls) return;
+    this._manifestLoading = false;
+    this._ccIsSetup = false;
+    this._ccTracksUpdated = false;
+    this._setInitialState();
+    this._hls.destroy();
+    this._hls = null;
+  }
+  _createHLSInstance() {
+    const config = {
+      ...this.options.playback.hlsjsConfig
+    };
+    this._hls = new Hls(config);
+  }
+  _attachHLSMedia() {
+    if (!this._hls) return;
+    this._hls.attachMedia(this.el);
+  }
+  _listenHLSEvents() {
+    if (!this._hls) return;
+    this._hls.once(Hls.Events.MEDIA_ATTACHED, () => {
+      this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src);
+    });
+    this._hls.on(Hls.Events.MANIFEST_LOADING, () => {
+      this._manifestLoading = true;
+    });
+    this._hls.on(Hls.Events.LEVEL_LOADED, (evt, data) => this._updatePlaybackType(evt, data));
+    this._hls.on(Hls.Events.LEVEL_UPDATED, (evt, data) => this._onLevelUpdated(evt, data));
+    this._hls.on(Hls.Events.LEVEL_SWITCHED, (evt, data) => this._onLevelSwitch(evt, data));
+    this._hls.on(Hls.Events.FRAG_CHANGED, (evt, data) => this._onFragmentChanged(evt, data));
+    this._hls.on(Hls.Events.FRAG_LOADED, (evt, data) => this._onFragmentLoaded(evt, data));
+    this._hls.on(Hls.Events.FRAG_BUFFERED, (evt, data) => this._onFragmentBuffered(evt, data));
+    this._hls.on(Hls.Events.FRAG_PARSING_METADATA, (evt, data) => this._onFragmentParsingMetadata(evt, data));
+    this._hls.on(Hls.Events.ERROR, (evt, data) => this._onHLSJSError(evt, data));
+    this._hls.on(Hls.Events.SUBTITLE_TRACK_LOADED, (evt, data) => this._onSubtitleLoaded(evt, data));
+    this._hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, () => this._ccTracksUpdated = true);
+    this.bindCustomListeners();
+  }
+  bindCustomListeners() {
+    this.customListeners.forEach(item => {
+      const requestedEventName = item.eventName;
+      const typeOfListener = item.once ? 'once' : 'on';
+      requestedEventName && this._hls[`${typeOfListener}`](requestedEventName, item.callback);
+    });
+  }
+  unbindCustomListeners() {
+    this.customListeners.forEach(item => {
+      const requestedEventName = item.eventName;
+      requestedEventName && this._hls.off(requestedEventName, item.callback);
+    });
+  }
+  _onFragmentParsingMetadata(evt, data) {
+    this.trigger(Events$1.Custom.PLAYBACK_FRAGMENT_PARSING_METADATA, {
+      evt,
+      data
+    });
+  }
+  render() {
+    this._ready();
+    return super.render();
+  }
+  _ready() {
+    if (this._isReadyState) return;
+    !this._hls && this._setup();
+    this._isReadyState = true;
+    this.trigger(Events$1.PLAYBACK_READY, this.name);
+  }
+  _recover(evt, data, error) {
+    if (!this._recoveredDecodingError) {
+      this._recoveredDecodingError = true;
+      this._hls.recoverMediaError();
+      this.play();
+    } else if (!this._recoveredAudioCodecError) {
+      this._recoveredAudioCodecError = true;
+      this._hls.swapAudioCodec();
+      this._hls.recoverMediaError();
+      this.play();
+    } else {
+      Log.error('hlsjs: failed to recover', {
+        evt,
+        data
       });
+      error.level = PlayerError.Levels.FATAL;
+      const formattedError = this.createError(error);
+      this.trigger(Events$1.PLAYBACK_ERROR, formattedError);
+      this.stop();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      this._ready();
-      return _superPropGet(HlsjsPlayback, "render", this, 3)([]);
-    }
-  }, {
-    key: "_ready",
-    value: function _ready() {
-      if (this._isReadyState) return;
-      !this._hls && this._setup();
-      this._isReadyState = true;
-      this.trigger(Events$1.PLAYBACK_READY, this.name);
-    }
-  }, {
-    key: "_recover",
-    value: function _recover(evt, data, error) {
-      if (!this._recoveredDecodingError) {
-        this._recoveredDecodingError = true;
-        this._hls.recoverMediaError();
-        this.play();
-      } else if (!this._recoveredAudioCodecError) {
-        this._recoveredAudioCodecError = true;
-        this._hls.swapAudioCodec();
-        this._hls.recoverMediaError();
-        this.play();
-      } else {
-        Log.error('hlsjs: failed to recover', {
-          evt: evt,
-          data: data
-        });
-        error.level = PlayerError.Levels.FATAL;
-        var formattedError = this.createError(error);
-        this.trigger(Events$1.PLAYBACK_ERROR, formattedError);
-        this.stop();
-      }
-    }
+  }
 
-    // override
-    // this playback manages the src on the video element itself
-  }, {
-    key: "_setupSrc",
-    value: function _setupSrc(srcUrl) {} // eslint-disable-line no-unused-vars
-  }, {
-    key: "_startTimeUpdateTimer",
-    value: function _startTimeUpdateTimer() {
-      var _this5 = this;
-      if (this._timeUpdateTimer) return;
-      this._timeUpdateTimer = setInterval(function () {
-        _this5._onDurationChange();
-        _this5._onTimeUpdate();
-      }, 100);
-    }
-  }, {
-    key: "_stopTimeUpdateTimer",
-    value: function _stopTimeUpdateTimer() {
-      if (!this._timeUpdateTimer) return;
-      clearInterval(this._timeUpdateTimer);
-      this._timeUpdateTimer = null;
-    }
-  }, {
-    key: "getProgramDateTime",
-    value: function getProgramDateTime() {
-      return this._programDateTime;
-    }
+  // override
+  // this playback manages the src on the video element itself
+  _setupSrc(srcUrl) {} // eslint-disable-line no-unused-vars
 
-    // the duration on the video element itself should not be used
-    // as this does not necesarily represent the duration of the stream
-    // https://github.com/clappr/clappr/issues/668#issuecomment-157036678
-  }, {
-    key: "getDuration",
-    value: function getDuration() {
-      return this._duration;
-    }
+  _startTimeUpdateTimer() {
+    if (this._timeUpdateTimer) return;
+    this._timeUpdateTimer = setInterval(() => {
+      this._onDurationChange();
+      this._onTimeUpdate();
+    }, 100);
+  }
+  _stopTimeUpdateTimer() {
+    if (!this._timeUpdateTimer) return;
+    clearInterval(this._timeUpdateTimer);
+    this._timeUpdateTimer = null;
+  }
+  getProgramDateTime() {
+    return this._programDateTime;
+  }
 
-    // the frame rate should be retrieved from the HLS.js level information
-    // as it is not necessarily exposed directly by the video element
-  }, {
-    key: "getFrameRate",
-    value: function getFrameRate() {
-      if (this._hls && this._hls.levels && this._hls.currentLevel >= 0) {
-        var level = this._hls.levels[this._hls.currentLevel];
-        return level && level.frameRate ? level.frameRate : null;
-      }
-      return null;
-    }
-  }, {
-    key: "getCurrentTime",
-    value: function getCurrentTime() {
-      // e.g. can be < 0 if user pauses near the start
-      // eventually they will then be kicked to the end by hlsjs if they run out of buffer
-      // before the official start time
-      return Math.max(0, this.el.currentTime - this._startTime);
-    }
+  // the duration on the video element itself should not be used
+  // as this does not necesarily represent the duration of the stream
+  // https://github.com/clappr/clappr/issues/668#issuecomment-157036678
+  getDuration() {
+    return this._duration;
+  }
 
-    // the time that "0" now represents relative to when playback started
-    // for a stream with a sliding window this will increase as content is
-    // removed from the beginning
-  }, {
-    key: "getStartTimeOffset",
-    value: function getStartTimeOffset() {
-      return this._startTime;
-    }
-  }, {
-    key: "seekPercentage",
-    value: function seekPercentage(percentage) {
-      var seekTo = percentage > 0 ? this._duration * (percentage / 100) : this._duration;
-      this.seek(seekTo);
+  // the frame rate should be retrieved from the HLS.js level information
+  // as it is not necessarily exposed directly by the video element
+  getFrameRate() {
+    if (this._hls && this._hls.levels && this._hls.currentLevel >= 0) {
+      const level = this._hls.levels[this._hls.currentLevel];
+      return level && level.frameRate ? level.frameRate : null;
     }
-  }, {
-    key: "seek",
-    value: function seek(time) {
-      if (time < 0) {
-        Log.warn('Attempt to seek to a negative time. Resetting to live point. Use seekToLivePoint() to seek to the live point.');
-        time = this.getDuration();
-      }
-      time += this._startTime;
-      this.el.currentTime = time;
-    }
-  }, {
-    key: "seekToLivePoint",
-    value: function seekToLivePoint() {
-      this.seek(this.getDuration());
+    return null;
+  }
+  getCurrentTime() {
+    // e.g. can be < 0 if user pauses near the start
+    // eventually they will then be kicked to the end by hlsjs if they run out of buffer
+    // before the official start time
+    return Math.max(0, this.el.currentTime - this._startTime);
+  }
+
+  // the time that "0" now represents relative to when playback started
+  // for a stream with a sliding window this will increase as content is
+  // removed from the beginning
+  getStartTimeOffset() {
+    return this._startTime;
+  }
+  seekPercentage(percentage) {
+    const seekTo = percentage > 0 ? this._duration * (percentage / 100) : this._duration;
+    this.seek(seekTo);
+  }
+  seek(time) {
+    if (time < 0) {
+      Log.warn('Attempt to seek to a negative time. Resetting to live point. Use seekToLivePoint() to seek to the live point.');
+      time = this.getDuration();
     }
-  }, {
-    key: "_updateSettings",
-    value: function _updateSettings() {
-      if (this._playbackType === Playback.VOD) {
-        this.settings.left = ['playpause', 'position', 'duration'];
-      } else if (this.dvrEnabled) {
-        this.settings.left = ['playpause'];
-      } else {
-        this.settings.left = ['playstop'];
-      }
-      this.settings.seekEnabled = this.isSeekEnabled();
-      this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
+    time += this._startTime;
+    this.el.currentTime = time;
+  }
+  seekToLivePoint() {
+    this.seek(this.getDuration());
+  }
+  _updateSettings() {
+    if (this._playbackType === Playback.VOD) {
+      this.settings.left = ['playpause', 'position', 'duration'];
+    } else if (this.dvrEnabled) {
+      this.settings.left = ['playpause'];
+    } else {
+      this.settings.left = ['playstop'];
     }
-  }, {
-    key: "_onHLSJSError",
-    value: function _onHLSJSError(evt, data) {
-      var error = {
-        code: "".concat(data.type, "_").concat(data.details),
-        description: "".concat(this.name, " error: type: ").concat(data.type, ", details: ").concat(data.details),
-        raw: data
-      };
-      var formattedError;
-      if (data.response) error.description += ", response: ".concat(JSON.stringify(data.response));
-      // only report/handle errors if they are fatal
-      // hlsjs should automatically handle non fatal errors
-      if (data.fatal) {
-        if (this._recoverAttemptsRemaining > 0) {
-          this._recoverAttemptsRemaining -= 1;
-          switch (data.type) {
-            case Hls.ErrorTypes.NETWORK_ERROR:
-              switch (data.details) {
-                // The following network errors cannot be recovered with HLS.startLoad()
-                // For more details, see https://github.com/video-dev/hls.js/blob/master/doc/design.md#error-detection-and-handling
-                // For "level load" fatal errors, see https://github.com/video-dev/hls.js/issues/1138
-                case Hls.ErrorDetails.MANIFEST_LOAD_ERROR:
-                case Hls.ErrorDetails.MANIFEST_LOAD_TIMEOUT:
-                case Hls.ErrorDetails.MANIFEST_PARSING_ERROR:
-                case Hls.ErrorDetails.LEVEL_LOAD_ERROR:
-                case Hls.ErrorDetails.LEVEL_LOAD_TIMEOUT:
-                  Log.error('hlsjs: unrecoverable network fatal error.', {
-                    evt: evt,
-                    data: data
-                  });
-                  formattedError = this.createError(error);
-                  this.trigger(Events$1.PLAYBACK_ERROR, formattedError);
-                  this.stop();
-                  break;
-                default:
-                  Log.warn('hlsjs: trying to recover from network error.', {
-                    evt: evt,
-                    data: data
-                  });
-                  error.level = PlayerError.Levels.WARN;
-                  this._hls.startLoad();
-                  break;
-              }
-              break;
-            case Hls.ErrorTypes.MEDIA_ERROR:
-              Log.warn('hlsjs: trying to recover from media error.', {
-                evt: evt,
-                data: data
-              });
-              error.level = PlayerError.Levels.WARN;
-              this._recover(evt, data, error);
-              break;
-            default:
-              Log.error('hlsjs: could not recover from error.', {
-                evt: evt,
-                data: data
-              });
-              formattedError = this.createError(error);
-              this.trigger(Events$1.PLAYBACK_ERROR, formattedError);
-              this.stop();
-              break;
-          }
-        } else {
-          Log.error('hlsjs: could not recover from error after maximum number of attempts.', {
-            evt: evt,
-            data: data
-          });
-          formattedError = this.createError(error);
-          this.trigger(Events$1.PLAYBACK_ERROR, formattedError);
-          this.stop();
+    this.settings.seekEnabled = this.isSeekEnabled();
+    this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
+  }
+  _onHLSJSError(evt, data) {
+    const error = {
+      code: `${data.type}_${data.details}`,
+      description: `${this.name} error: type: ${data.type}, details: ${data.details}`,
+      raw: data
+    };
+    let formattedError;
+    if (data.response) error.description += `, response: ${JSON.stringify(data.response)}`;
+    // only report/handle errors if they are fatal
+    // hlsjs should automatically handle non fatal errors
+    if (data.fatal) {
+      if (this._recoverAttemptsRemaining > 0) {
+        this._recoverAttemptsRemaining -= 1;
+        switch (data.type) {
+          case Hls.ErrorTypes.NETWORK_ERROR:
+            switch (data.details) {
+              // The following network errors cannot be recovered with HLS.startLoad()
+              // For more details, see https://github.com/video-dev/hls.js/blob/master/doc/design.md#error-detection-and-handling
+              // For "level load" fatal errors, see https://github.com/video-dev/hls.js/issues/1138
+              case Hls.ErrorDetails.MANIFEST_LOAD_ERROR:
+              case Hls.ErrorDetails.MANIFEST_LOAD_TIMEOUT:
+              case Hls.ErrorDetails.MANIFEST_PARSING_ERROR:
+              case Hls.ErrorDetails.LEVEL_LOAD_ERROR:
+              case Hls.ErrorDetails.LEVEL_LOAD_TIMEOUT:
+                Log.error('hlsjs: unrecoverable network fatal error.', {
+                  evt,
+                  data
+                });
+                formattedError = this.createError(error);
+                this.trigger(Events$1.PLAYBACK_ERROR, formattedError);
+                this.stop();
+                break;
+              default:
+                Log.warn('hlsjs: trying to recover from network error.', {
+                  evt,
+                  data
+                });
+                error.level = PlayerError.Levels.WARN;
+                this._hls.startLoad();
+                break;
+            }
+            break;
+          case Hls.ErrorTypes.MEDIA_ERROR:
+            Log.warn('hlsjs: trying to recover from media error.', {
+              evt,
+              data
+            });
+            error.level = PlayerError.Levels.WARN;
+            this._recover(evt, data, error);
+            break;
+          default:
+            Log.error('hlsjs: could not recover from error.', {
+              evt,
+              data
+            });
+            formattedError = this.createError(error);
+            this.trigger(Events$1.PLAYBACK_ERROR, formattedError);
+            this.stop();
+            break;
         }
       } else {
-        // Transforms HLSJS.ErrorDetails.KEY_LOAD_ERROR non-fatal error to
-        // playback fatal error if triggerFatalErrorOnResourceDenied playback
-        // option is set. HLSJS.ErrorTypes.KEY_SYSTEM_ERROR are fatal errors
-        // and therefore already handled.
-        if (this.options.playback.triggerFatalErrorOnResourceDenied && this._keyIsDenied(data)) {
-          Log.error('hlsjs: could not load decrypt key.', {
-            evt: evt,
-            data: data
-          });
-          formattedError = this.createError(error);
-          this.trigger(Events$1.PLAYBACK_ERROR, formattedError);
-          this.stop();
-          return;
-        }
-        error.level = PlayerError.Levels.WARN;
-        Log.warn('hlsjs: non-fatal error occurred', {
-          evt: evt,
-          data: data
+        Log.error('hlsjs: could not recover from error after maximum number of attempts.', {
+          evt,
+          data
         });
+        formattedError = this.createError(error);
+        this.trigger(Events$1.PLAYBACK_ERROR, formattedError);
+        this.stop();
       }
+    } else {
+      // Transforms HLSJS.ErrorDetails.KEY_LOAD_ERROR non-fatal error to
+      // playback fatal error if triggerFatalErrorOnResourceDenied playback
+      // option is set. HLSJS.ErrorTypes.KEY_SYSTEM_ERROR are fatal errors
+      // and therefore already handled.
+      if (this.options.playback.triggerFatalErrorOnResourceDenied && this._keyIsDenied(data)) {
+        Log.error('hlsjs: could not load decrypt key.', {
+          evt,
+          data
+        });
+        formattedError = this.createError(error);
+        this.trigger(Events$1.PLAYBACK_ERROR, formattedError);
+        this.stop();
+        return;
+      }
+      error.level = PlayerError.Levels.WARN;
+      Log.warn('hlsjs: non-fatal error occurred', {
+        evt,
+        data
+      });
     }
-  }, {
-    key: "_keyIsDenied",
-    value: function _keyIsDenied(data) {
-      return data.type === Hls.ErrorTypes.NETWORK_ERROR && data.details === Hls.ErrorDetails.KEY_LOAD_ERROR && data.response && data.response.code >= 400;
-    }
-  }, {
-    key: "_onTimeUpdate",
-    value: function _onTimeUpdate() {
-      var update = {
-        current: this.getCurrentTime(),
-        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 isSameEventPayload = isSameTime && isSameDuration && isSameFirstFragDateTime;
-      var isThrottled = this._now - this._lastTimeUpdateFiredTime < this._timeUpdateThrottleDelay;
-      return isSameEventPayload && isThrottled;
-    }
-  }, {
-    key: "_onDurationChange",
-    value: function _onDurationChange() {
-      var duration = this.getDuration();
-      var isSameDuration = Math.abs(this._lastDuration - duration) < this._durationChangeMinOffset;
-      if (isSameDuration) return;
-      this._lastDuration = duration;
-      _superPropGet(HlsjsPlayback, "_onDurationChange", this, 3)([]);
+  }
+  _keyIsDenied(data) {
+    return data.type === Hls.ErrorTypes.NETWORK_ERROR && data.details === Hls.ErrorDetails.KEY_LOAD_ERROR && data.response && data.response.code >= 400;
+  }
+  _onTimeUpdate() {
+    const update = {
+      current: this.getCurrentTime(),
+      total: this.getDuration(),
+      firstFragDateTime: this.getProgramDateTime()
+    };
+    const shouldThrottle = this._shouldThrottleTimeUpdate(update);
+    if (shouldThrottle) return;
+    this._lastTimeUpdate = update;
+    this._lastTimeUpdateFiredTime = this._now;
+    this.trigger(Events$1.PLAYBACK_TIMEUPDATE, update, this.name);
+  }
+  _shouldThrottleTimeUpdate(update) {
+    const isSameTime = Math.abs(update.current - this._lastTimeUpdate.current) < this._timeUpdateFiringRate;
+    const isSameDuration = Math.abs(update.total - this._lastTimeUpdate.total) < this._durationChangeMinOffset;
+    const isSameFirstFragDateTime = update.firstFragDateTime === this._lastTimeUpdate.firstFragDateTime;
+    const isSameEventPayload = isSameTime && isSameDuration && isSameFirstFragDateTime;
+    const isThrottled = this._now - this._lastTimeUpdateFiredTime < this._timeUpdateThrottleDelay;
+    return isSameEventPayload && isThrottled;
+  }
+  _onDurationChange() {
+    const duration = this.getDuration();
+    const isSameDuration = Math.abs(this._lastDuration - duration) < this._durationChangeMinOffset;
+    if (isSameDuration) return;
+    this._lastDuration = duration;
+    super._onDurationChange();
+  }
+  _onProgress() {
+    if (!this.el.buffered.length) return;
+    let buffered = [];
+    let bufferedPos = 0;
+    for (let i = 0; i < this.el.buffered.length; i++) {
+      buffered = [...buffered, {
+        // for a stream with sliding window dvr something that is buffered my slide off the start of the timeline
+        start: Math.max(0, this.el.buffered.start(i) - this._playableRegionStartTime),
+        end: Math.max(0, this.el.buffered.end(i) - this._playableRegionStartTime)
+      }];
+      if (this.el.currentTime >= buffered[i].start && this.el.currentTime <= buffered[i].end) {
+        bufferedPos = i;
+      }
+    }
+    const progress = {
+      start: buffered[bufferedPos].start,
+      current: buffered[bufferedPos].end,
+      total: this.getDuration()
+    };
+    this.trigger(Events$1.PLAYBACK_PROGRESS, progress, buffered);
+  }
+  load(url) {
+    this._stopTimeUpdateTimer();
+    this.options.src = url;
+    this._setup();
+  }
+  play() {
+    !this._hls && this._setup();
+    !this._manifestLoading && !this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src);
+    super.play();
+    this._startTimeUpdateTimer();
+  }
+  pause() {
+    if (!this._hls) return;
+    this.el.pause();
+  }
+  stop() {
+    this._stopTimeUpdateTimer();
+    if (this._hls) super.stop();
+    this._destroyHLSInstance();
+  }
+  destroy() {
+    this._stopTimeUpdateTimer();
+    this._destroyHLSInstance();
+    super.destroy();
+  }
+  _updatePlaybackType(evt, data) {
+    this._playbackType = data.details.live ? Playback.LIVE : Playback.VOD;
+    this._onLevelUpdated(evt, data);
+    // Live stream subtitle tracks detection hack (may not immediately available)
+    if (this._ccTracksUpdated && this._playbackType === Playback.LIVE && this.hasClosedCaptionsTracks) {
+      this._onSubtitleLoaded();
     }
-  }, {
-    key: "_onProgress",
-    value: function _onProgress() {
-      if (!this.el.buffered.length) return;
-      var buffered = [];
-      var bufferedPos = 0;
-      for (var i = 0; i < this.el.buffered.length; i++) {
-        buffered = [].concat(_toConsumableArray(buffered), [{
-          // for a stream with sliding window dvr something that is buffered my slide off the start of the timeline
-          start: Math.max(0, this.el.buffered.start(i) - this._playableRegionStartTime),
-          end: Math.max(0, this.el.buffered.end(i) - this._playableRegionStartTime)
-        }]);
-        if (this.el.currentTime >= buffered[i].start && this.el.currentTime <= buffered[i].end) {
-          bufferedPos = i;
-        }
-      }
-      var progress = {
-        start: buffered[bufferedPos].start,
-        current: buffered[bufferedPos].end,
-        total: this.getDuration()
+  }
+  _fillLevels() {
+    this._levels = this._hls.levels.map((level, index) => {
+      return {
+        id: index,
+        level: level,
+        label: `${level.bitrate / 1000}Kbps`
       };
-      this.trigger(Events$1.PLAYBACK_PROGRESS, progress, buffered);
-    }
-  }, {
-    key: "load",
-    value: function load(url) {
-      this._stopTimeUpdateTimer();
-      this.options.src = url;
-      this._setup();
-    }
-  }, {
-    key: "play",
-    value: function play() {
-      !this._hls && this._setup();
-      !this._manifestLoading && !this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src);
-      _superPropGet(HlsjsPlayback, "play", this, 3)([]);
-      this._startTimeUpdateTimer();
-    }
-  }, {
-    key: "pause",
-    value: function pause() {
-      if (!this._hls) return;
-      this.el.pause();
-    }
-  }, {
-    key: "stop",
-    value: function stop() {
-      this._stopTimeUpdateTimer();
-      if (this._hls) _superPropGet(HlsjsPlayback, "stop", this, 3)([]);
-      this._destroyHLSInstance();
-    }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      this._stopTimeUpdateTimer();
-      this._destroyHLSInstance();
-      _superPropGet(HlsjsPlayback, "destroy", this, 3)([]);
-    }
-  }, {
-    key: "_updatePlaybackType",
-    value: function _updatePlaybackType(evt, data) {
-      this._playbackType = data.details.live ? Playback.LIVE : Playback.VOD;
-      this._onLevelUpdated(evt, data);
-      // Live stream subtitle tracks detection hack (may not immediately available)
-      if (this._ccTracksUpdated && this._playbackType === Playback.LIVE && this.hasClosedCaptionsTracks) {
-        this._onSubtitleLoaded();
-      }
-    }
-  }, {
-    key: "_fillLevels",
-    value: function _fillLevels() {
-      this._levels = this._hls.levels.map(function (level, index) {
-        return {
-          id: index,
-          level: level,
-          label: "".concat(level.bitrate / 1000, "Kbps")
+    });
+    this.trigger(Events$1.PLAYBACK_LEVELS_AVAILABLE, this._levels);
+  }
+  _onLevelUpdated(evt, data) {
+    this._segmentTargetDuration = data.details.targetduration;
+    this._playlistType = data.details.type || null;
+    let startTimeChanged = false;
+    let durationChanged = false;
+    const fragments = data.details.fragments;
+    const previousPlayableRegionStartTime = this._playableRegionStartTime;
+    const previousPlayableRegionDuration = this._playableRegionDuration;
+    if (fragments.length === 0) return;
+    // #EXT-X-PROGRAM-DATE-TIME
+    if (fragments[0].rawProgramDateTime) {
+      this._programDateTime = fragments[0].rawProgramDateTime;
+    }
+    if (this._playableRegionStartTime !== fragments[0].start) {
+      startTimeChanged = true;
+      this._playableRegionStartTime = fragments[0].start;
+    }
+    if (startTimeChanged) {
+      if (!this._localStartTimeCorrelation) {
+        // set the correlation to map to middle of the extrapolation window
+        this._localStartTimeCorrelation = {
+          local: this._now,
+          remote: (fragments[0].start + this._extrapolatedWindowDuration / 2) * 1000
         };
-      });
-      this.trigger(Events$1.PLAYBACK_LEVELS_AVAILABLE, this._levels);
-    }
-  }, {
-    key: "_onLevelUpdated",
-    value: function _onLevelUpdated(evt, data) {
-      this._segmentTargetDuration = data.details.targetduration;
-      this._playlistType = data.details.type || null;
-      var startTimeChanged = false;
-      var durationChanged = false;
-      var fragments = data.details.fragments;
-      var previousPlayableRegionStartTime = this._playableRegionStartTime;
-      var previousPlayableRegionDuration = this._playableRegionDuration;
-      if (fragments.length === 0) return;
-      // #EXT-X-PROGRAM-DATE-TIME
-      if (fragments[0].rawProgramDateTime) {
-        this._programDateTime = fragments[0].rawProgramDateTime;
-      }
-      if (this._playableRegionStartTime !== fragments[0].start) {
-        startTimeChanged = true;
-        this._playableRegionStartTime = fragments[0].start;
-      }
-      if (startTimeChanged) {
-        if (!this._localStartTimeCorrelation) {
-          // set the correlation to map to middle of the extrapolation window
+      } else {
+        // check if the correlation still works
+        const corr = this._localStartTimeCorrelation;
+        const timePassed = this._now - corr.local;
+        // this should point to a time within the extrapolation window
+        const startTime = (corr.remote + timePassed) / 1000;
+        if (startTime < fragments[0].start) {
+          // our start time is now earlier than the first chunk
+          // (maybe the chunk was removed early)
+          // reset correlation so that it sits at the beginning of the first available chunk
           this._localStartTimeCorrelation = {
             local: this._now,
-            remote: (fragments[0].start + this._extrapolatedWindowDuration / 2) * 1000
+            remote: fragments[0].start * 1000
+          };
+        } else if (startTime > previousPlayableRegionStartTime + this._extrapolatedWindowDuration) {
+          // start time was past the end of the old extrapolation window (so would have been capped)
+          // see if now that time would be inside the window, and if it would be set the correlation
+          // so that it resumes from the time it was at at the end of the old window
+          // update the correlation so that the time starts counting again from the value it's on now
+          this._localStartTimeCorrelation = {
+            local: this._now,
+            remote: Math.max(fragments[0].start, previousPlayableRegionStartTime + this._extrapolatedWindowDuration) * 1000
           };
-        } else {
-          // check if the correlation still works
-          var corr = this._localStartTimeCorrelation;
-          var timePassed = this._now - corr.local;
-          // this should point to a time within the extrapolation window
-          var startTime = (corr.remote + timePassed) / 1000;
-          if (startTime < fragments[0].start) {
-            // our start time is now earlier than the first chunk
-            // (maybe the chunk was removed early)
-            // reset correlation so that it sits at the beginning of the first available chunk
-            this._localStartTimeCorrelation = {
-              local: this._now,
-              remote: fragments[0].start * 1000
-            };
-          } else if (startTime > previousPlayableRegionStartTime + this._extrapolatedWindowDuration) {
-            // start time was past the end of the old extrapolation window (so would have been capped)
-            // see if now that time would be inside the window, and if it would be set the correlation
-            // so that it resumes from the time it was at at the end of the old window
-            // update the correlation so that the time starts counting again from the value it's on now
-            this._localStartTimeCorrelation = {
-              local: this._now,
-              remote: Math.max(fragments[0].start, previousPlayableRegionStartTime + this._extrapolatedWindowDuration) * 1000
-            };
-          }
-        }
-      }
-      var newDuration = data.details.totalduration;
-      // if it's a live stream then shorten the duration to remove access
-      // to the area after hlsjs's live sync point
-      // seeks to areas after this point sometimes have issues
-      if (this._playbackType === Playback.LIVE) {
-        var fragmentTargetDuration = data.details.targetduration;
-        var hlsjsConfig = this.options.playback.hlsjsConfig || {};
-        var liveSyncDurationCount = hlsjsConfig.liveSyncDurationCount || Hls.DefaultConfig.liveSyncDurationCount;
-        var hiddenAreaDuration = fragmentTargetDuration * liveSyncDurationCount;
-        if (hiddenAreaDuration <= newDuration) {
-          newDuration -= hiddenAreaDuration;
-          this._durationExcludesAfterLiveSyncPoint = true;
-        } else {
-          this._durationExcludesAfterLiveSyncPoint = false;
         }
       }
-      if (newDuration !== this._playableRegionDuration) {
-        durationChanged = true;
-        this._playableRegionDuration = newDuration;
-      }
-      // Note the end time is not the playableRegionDuration
-      // The end time will always increase even if content is removed from the beginning
-      var endTime = fragments[0].start + newDuration;
-      var previousEndTime = previousPlayableRegionStartTime + previousPlayableRegionDuration;
-      var endTimeChanged = endTime !== previousEndTime;
-      if (endTimeChanged) {
-        if (!this._localEndTimeCorrelation) {
-          // set the correlation to map to the end
+    }
+    let newDuration = data.details.totalduration;
+    // if it's a live stream then shorten the duration to remove access
+    // to the area after hlsjs's live sync point
+    // seeks to areas after this point sometimes have issues
+    if (this._playbackType === Playback.LIVE) {
+      const fragmentTargetDuration = data.details.targetduration;
+      const hlsjsConfig = this.options.playback.hlsjsConfig || {};
+      const liveSyncDurationCount = hlsjsConfig.liveSyncDurationCount || Hls.DefaultConfig.liveSyncDurationCount;
+      const hiddenAreaDuration = fragmentTargetDuration * liveSyncDurationCount;
+      if (hiddenAreaDuration <= newDuration) {
+        newDuration -= hiddenAreaDuration;
+        this._durationExcludesAfterLiveSyncPoint = true;
+      } else {
+        this._durationExcludesAfterLiveSyncPoint = false;
+      }
+    }
+    if (newDuration !== this._playableRegionDuration) {
+      durationChanged = true;
+      this._playableRegionDuration = newDuration;
+    }
+    // Note the end time is not the playableRegionDuration
+    // The end time will always increase even if content is removed from the beginning
+    const endTime = fragments[0].start + newDuration;
+    const previousEndTime = previousPlayableRegionStartTime + previousPlayableRegionDuration;
+    const endTimeChanged = endTime !== previousEndTime;
+    if (endTimeChanged) {
+      if (!this._localEndTimeCorrelation) {
+        // set the correlation to map to the end
+        this._localEndTimeCorrelation = {
+          local: this._now,
+          remote: endTime * 1000
+        };
+      } else {
+        // check if the correlation still works
+        const corr = this._localEndTimeCorrelation;
+        const timePassed = this._now - corr.local;
+        // this should point to a time within the extrapolation window from the end
+        const extrapolatedEndTime = (corr.remote + timePassed) / 1000;
+        if (extrapolatedEndTime > endTime) {
           this._localEndTimeCorrelation = {
             local: this._now,
             remote: endTime * 1000
           };
-        } else {
-          // check if the correlation still works
-          var _corr = this._localEndTimeCorrelation;
-          var _timePassed = this._now - _corr.local;
-          // this should point to a time within the extrapolation window from the end
-          var extrapolatedEndTime = (_corr.remote + _timePassed) / 1000;
-          if (extrapolatedEndTime > endTime) {
-            this._localEndTimeCorrelation = {
-              local: this._now,
-              remote: endTime * 1000
-            };
-          } else if (extrapolatedEndTime < endTime - this._extrapolatedWindowDuration) {
-            // our extrapolated end time is now earlier than the extrapolation window from the actual end time
-            // (maybe a chunk became available early)
-            // reset correlation so that it sits at the beginning of the extrapolation window from the end time
-            this._localEndTimeCorrelation = {
-              local: this._now,
-              remote: (endTime - this._extrapolatedWindowDuration) * 1000
-            };
-          } else if (extrapolatedEndTime > previousEndTime) {
-            // end time was past the old end time (so would have been capped)
-            // set the correlation so that it resumes from the time it was at at the end of the old window
-            this._localEndTimeCorrelation = {
-              local: this._now,
-              remote: previousEndTime * 1000
-            };
-          }
+        } else if (extrapolatedEndTime < endTime - this._extrapolatedWindowDuration) {
+          // our extrapolated end time is now earlier than the extrapolation window from the actual end time
+          // (maybe a chunk became available early)
+          // reset correlation so that it sits at the beginning of the extrapolation window from the end time
+          this._localEndTimeCorrelation = {
+            local: this._now,
+            remote: (endTime - this._extrapolatedWindowDuration) * 1000
+          };
+        } else if (extrapolatedEndTime > previousEndTime) {
+          // end time was past the old end time (so would have been capped)
+          // set the correlation so that it resumes from the time it was at at the end of the old window
+          this._localEndTimeCorrelation = {
+            local: this._now,
+            remote: previousEndTime * 1000
+          };
         }
       }
-
-      // now that the values have been updated call any methods that use on them so they get the updated values
-      // immediately
-      durationChanged && this._onDurationChange();
-      startTimeChanged && this._onProgress();
-    }
-  }, {
-    key: "_onFragmentChanged",
-    value: function _onFragmentChanged(evt, data) {
-      this._currentFragment = data.frag;
-      this.trigger(Events$1.Custom.PLAYBACK_FRAGMENT_CHANGED, data);
-    }
-  }, {
-    key: "_onFragmentLoaded",
-    value: function _onFragmentLoaded(evt, data) {
-      this.trigger(Events$1.PLAYBACK_FRAGMENT_LOADED, data);
-    }
-  }, {
-    key: "_onFragmentBuffered",
-    value: function _onFragmentBuffered(evt, data) {
-      this.trigger(Events$1.PLAYBACK_FRAGMENT_BUFFERED, data);
-    }
-  }, {
-    key: "_onSubtitleLoaded",
-    value: function _onSubtitleLoaded() {
-      // This event may be triggered multiple times
-      // Setup CC only once (disable CC by default)
-      if (!this._ccIsSetup) {
-        this.trigger(Events$1.PLAYBACK_SUBTITLE_AVAILABLE);
-        var trackId = this._playbackType === Playback.LIVE ? -1 : this.closedCaptionsTrackId;
-        this.closedCaptionsTrackId = trackId;
-        this._ccIsSetup = true;
-      }
-    }
-  }, {
-    key: "_onLevelSwitch",
-    value: function _onLevelSwitch(evt, data) {
-      if (!this.levels.length) this._fillLevels();
-      this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH_END);
-      this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH, data);
-      var currentLevel = this._hls.levels[data.level];
-      if (currentLevel) {
-        // TODO should highDefinition be private and maybe have a read only accessor if it's used somewhere
-        this.highDefinition = currentLevel.height >= 720 || currentLevel.bitrate / 1000 >= 2000;
-        this.trigger(Events$1.PLAYBACK_HIGHDEFINITIONUPDATE, this.highDefinition);
-        this.trigger(Events$1.PLAYBACK_BITRATE, {
-          height: currentLevel.height,
-          width: currentLevel.width,
-          bandwidth: currentLevel.bitrate,
-          bitrate: currentLevel.bitrate,
-          level: data.level
-        });
-      }
-    }
-  }, {
-    key: "dvrEnabled",
-    get: function get() {
-      // enabled when:
-      // - the duration does not include content after hlsjs's live sync point
-      // - the playable region duration is longer than the configured duration to enable dvr after
-      // - the playback type is LIVE.
-      return this._durationExcludesAfterLiveSyncPoint && this._duration >= this._minDvrSize && this.getPlaybackType() === Playback.LIVE;
     }
-  }, {
-    key: "getPlaybackType",
-    value: function getPlaybackType() {
-      return this._playbackType;
-    }
-  }, {
-    key: "isSeekEnabled",
-    value: function isSeekEnabled() {
-      return this._playbackType === Playback.VOD || this.dvrEnabled;
-    }
-  }], [{
-    key: "HLSJS",
-    get: function get() {
-      return Hls;
+
+    // now that the values have been updated call any methods that use on them so they get the updated values
+    // immediately
+    durationChanged && this._onDurationChange();
+    startTimeChanged && this._onProgress();
+  }
+  _onFragmentChanged(evt, data) {
+    this._currentFragment = data.frag;
+    this.trigger(Events$1.Custom.PLAYBACK_FRAGMENT_CHANGED, data);
+  }
+  _onFragmentLoaded(evt, data) {
+    this.trigger(Events$1.PLAYBACK_FRAGMENT_LOADED, data);
+  }
+  _onFragmentBuffered(evt, data) {
+    this.trigger(Events$1.PLAYBACK_FRAGMENT_BUFFERED, data);
+  }
+  _onSubtitleLoaded() {
+    // This event may be triggered multiple times
+    // Setup CC only once (disable CC by default)
+    if (!this._ccIsSetup) {
+      this.trigger(Events$1.PLAYBACK_SUBTITLE_AVAILABLE);
+      const trackId = this._playbackType === Playback.LIVE ? -1 : this.closedCaptionsTrackId;
+      this.closedCaptionsTrackId = trackId;
+      this._ccIsSetup = true;
+    }
+  }
+  _onLevelSwitch(evt, data) {
+    if (!this.levels.length) this._fillLevels();
+    this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH_END);
+    this.trigger(Events$1.PLAYBACK_LEVEL_SWITCH, data);
+    const currentLevel = this._hls.levels[data.level];
+    if (currentLevel) {
+      // TODO should highDefinition be private and maybe have a read only accessor if it's used somewhere
+      this.highDefinition = currentLevel.height >= 720 || currentLevel.bitrate / 1000 >= 2000;
+      this.trigger(Events$1.PLAYBACK_HIGHDEFINITIONUPDATE, this.highDefinition);
+      this.trigger(Events$1.PLAYBACK_BITRATE, {
+        height: currentLevel.height,
+        width: currentLevel.width,
+        bandwidth: currentLevel.bitrate,
+        bitrate: currentLevel.bitrate,
+        level: data.level
+      });
     }
-  }]);
-}(HTML5Video);
+  }
+  get dvrEnabled() {
+    // enabled when:
+    // - the duration does not include content after hlsjs's live sync point
+    // - the playable region duration is longer than the configured duration to enable dvr after
+    // - the playback type is LIVE.
+    return this._durationExcludesAfterLiveSyncPoint && this._duration >= this._minDvrSize && this.getPlaybackType() === Playback.LIVE;
+  }
+  getPlaybackType() {
+    return this._playbackType;
+  }
+  isSeekEnabled() {
+    return this._playbackType === Playback.VOD || this.dvrEnabled;
+  }
+}
 HlsjsPlayback.canPlay = function (resource, mimeType) {
-  var resourceParts = resource.split('?')[0].match(/.*\.(.*)$/) || [];
-  var isHls = resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'm3u8' || listContainsIgnoreCase(mimeType, ['application/vnd.apple.mpegurl', 'application/x-mpegURL']);
+  const resourceParts = resource.split('?')[0].match(/.*\.(.*)$/) || [];
+  const isHls = resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'm3u8' || listContainsIgnoreCase(mimeType, ['application/vnd.apple.mpegurl', 'application/x-mpegURL']);
   return !!(Hls.isSupported() && isHls);
 };