@clappr/hlsjs-playback 1.8.3 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clappr/hlsjs-playback",
-  "version": "1.8.3",
+  "version": "1.9.0",
   "description": "HLS Playback based on hls.js",
   "main": "./dist/hlsjs-playback.js",
   "module": "./dist/hlsjs-playback.esm.js",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@babel/core": "^7.14.2",
     "@babel/preset-env": "^7.14.2",
-    "@clappr/core": "^0.12.0",
+    "@clappr/core": "^0.13.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
@@ -74,6 +74,5 @@
         ]
       }
     }
-  },
-  "gitHead": "20261f4b956c071733625fc303e5b607f75befd7"
+  }
 }

package/src/hls.js

@@ -13,18 +13,24 @@ Events.register('PLAYBACK_FRAGMENT_CHANGED')
 Events.register('PLAYBACK_FRAGMENT_PARSING_METADATA')
 
 export default class HlsjsPlayback extends HTML5Video {
-  get name() { return 'hls' }
+  get name() {
+    return 'hls'
+  }
 
-  get supportedVersion() { return { min: CLAPPR_CORE_VERSION } }
+  get supportedVersion() {
+    return { min: CLAPPR_CORE_VERSION }
+  }
 
-  get levels() { return this._levels || [] }
+  get levels() {
+    return this._levels || []
+  }
 
   get currentLevel() {
-    if (this._currentLevel === null || this._currentLevel === undefined)
+    if (this._currentLevel === null || this._currentLevel === undefined) {
       return AUTO
-    else
-      return this._currentLevel //0 is a valid level ID
-
+    } else {
+      return this._currentLevel
+    } // 0 is a valid level ID
   }
 
   get isReady() {
@@ -34,10 +40,11 @@ export default class HlsjsPlayback extends HTML5Video {
   set currentLevel(id) {
     this._currentLevel = id
     this.trigger(Events.PLAYBACK_LEVEL_SWITCH_START)
-    if (this.options.playback.hlsUseNextLevel)
+    if (this.options.playback.hlsUseNextLevel) {
       this._hls.nextLevel = this._currentLevel
-    else
+    } else {
       this._hls.currentLevel = this._currentLevel
+    }
   }
 
   get latency() {
@@ -53,8 +60,9 @@ export default class HlsjsPlayback extends HTML5Video {
   }
 
   get _startTime() {
-    if (this._playbackType === Playback.LIVE && this._playlistType !== 'EVENT')
+    if (this._playbackType === Playback.LIVE && this._playlistType !== 'EVENT') {
       return this._extrapolatedStartTime
+    }
 
     return this._playableRegionStartTime
   }
@@ -66,25 +74,32 @@ export default class HlsjsPlayback extends HTML5Video {
   // 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)
+    if (!this._localStartTimeCorrelation) {
       return this._playableRegionStartTime
+    }
 
-    let corr = this._localStartTimeCorrelation
-    let timePassed = this._now - corr.local
-    let extrapolatedWindowStartTime = (corr.remote + timePassed) / 1000
+    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)
+    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() {
-    let actualEndTime = this._playableRegionStartTime + this._playableRegionDuration
+    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))
+    return Math.max(
+      actualEndTime - this._extrapolatedWindowDuration,
+      Math.min(extrapolatedEndTime, actualEndTime)
+    )
   }
 
   get _duration() {
@@ -109,8 +124,9 @@ export default class HlsjsPlayback extends HTML5Video {
   //                               .       .       .       .
   //                                 extrapolatedStartTime
   get _extrapolatedWindowDuration() {
-    if (this._segmentTargetDuration === null)
+    if (this._segmentTargetDuration === null) {
       return 0
+    }
 
     return this._extrapolatedWindowNumSegments * this._segmentTargetDuration
   }
@@ -124,7 +140,7 @@ export default class HlsjsPlayback extends HTML5Video {
   }
 
   get customListeners() {
-    return this.options.hlsPlayback && this.options.hlsPlayback.customListeners || []
+    return (this.options.hlsPlayback && this.options.hlsPlayback.customListeners) || []
   }
 
   get sourceMedia() {
@@ -154,12 +170,17 @@ export default class HlsjsPlayback extends HTML5Video {
   }
 
   _setInitialState() {
-    this._minDvrSize = typeof (this.options.hlsMinimumDvrSize) === 'undefined' ? 60 : this.options.hlsMinimumDvrSize
+    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._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 }
@@ -224,25 +245,33 @@ export default class HlsjsPlayback extends HTML5Video {
 
   _listenHLSEvents() {
     if (!this._hls) return
-    this._hls.once(HLSJS.Events.MEDIA_ATTACHED, () => { this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src) })
-    this._hls.on(HLSJS.Events.MANIFEST_LOADING, () => this._manifestLoading = true)
+    this._hls.once(HLSJS.Events.MEDIA_ATTACHED, () => {
+      this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src)
+    })
+    this._hls.on(HLSJS.Events.MANIFEST_LOADING, () => {
+      this._manifestLoading = true
+    })
     this._hls.on(HLSJS.Events.LEVEL_LOADED, (evt, data) => this._updatePlaybackType(evt, data))
     this._hls.on(HLSJS.Events.LEVEL_UPDATED, (evt, data) => this._onLevelUpdated(evt, data))
-    this._hls.on(HLSJS.Events.LEVEL_SWITCHED, (evt,data) => this._onLevelSwitch(evt, data))
+    this._hls.on(HLSJS.Events.LEVEL_SWITCHED, (evt, data) => this._onLevelSwitch(evt, data))
     this._hls.on(HLSJS.Events.FRAG_CHANGED, (evt, data) => this._onFragmentChanged(evt, data))
     this._hls.on(HLSJS.Events.FRAG_LOADED, (evt, data) => this._onFragmentLoaded(evt, data))
     this._hls.on(HLSJS.Events.FRAG_BUFFERED, (evt, data) => this._onFragmentBuffered(evt, data))
-    this._hls.on(HLSJS.Events.FRAG_PARSING_METADATA, (evt, data) => this._onFragmentParsingMetadata(evt, data))
+    this._hls.on(HLSJS.Events.FRAG_PARSING_METADATA, (evt, data) =>
+      this._onFragmentParsingMetadata(evt, data)
+    )
     this._hls.on(HLSJS.Events.ERROR, (evt, data) => this._onHLSJSError(evt, data))
-    this._hls.on(HLSJS.Events.SUBTITLE_TRACK_LOADED, (evt, data) => this._onSubtitleLoaded(evt, data))
-    this._hls.on(HLSJS.Events.SUBTITLE_TRACKS_UPDATED, () => this._ccTracksUpdated = true)
+    this._hls.on(HLSJS.Events.SUBTITLE_TRACK_LOADED, (evt, data) =>
+      this._onSubtitleLoaded(evt, data)
+    )
+    this._hls.on(HLSJS.Events.SUBTITLE_TRACKS_UPDATED, () => (this._ccTracksUpdated = true))
     this.bindCustomListeners()
   }
 
   bindCustomListeners() {
     this.customListeners.forEach(item => {
       const requestedEventName = item.eventName
-      const typeOfListener = item.once ? 'once': 'on'
+      const typeOfListener = item.once ? 'once' : 'on'
       requestedEventName && this._hls[`${typeOfListener}`](requestedEventName, item.callback)
     })
   }
@@ -318,6 +347,16 @@ export default class HlsjsPlayback extends HTML5Video {
     return this._duration
   }
 
+  // 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
+    }
+    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
@@ -333,15 +372,15 @@ export default class HlsjsPlayback extends HTML5Video {
   }
 
   seekPercentage(percentage) {
-    const seekTo = (percentage > 0)
-      ? this._duration * (percentage / 100)
-      : this._duration
+    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.')
+      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
@@ -353,12 +392,13 @@ export default class HlsjsPlayback extends HTML5Video {
   }
 
   _updateSettings() {
-    if (this._playbackType === Playback.VOD)
+    if (this._playbackType === Playback.VOD) {
       this.settings.left = ['playpause', 'position', 'duration']
-    else if (this.dvrEnabled)
+    } else if (this.dvrEnabled) {
       this.settings.left = ['playpause']
-    else
+    } else {
       this.settings.left = ['playstop']
+    }
 
     this.settings.seekEnabled = this.isSeekEnabled()
     this.trigger(Events.PLAYBACK_SETTINGSUPDATE)
@@ -368,7 +408,7 @@ export default class HlsjsPlayback extends HTML5Video {
     const error = {
       code: `${data.type}_${data.details}`,
       description: `${this.name} error: type: ${data.type}, details: ${data.details}`,
-      raw: data,
+      raw: data
     }
     let formattedError
     if (data.response) error.description += `, response: ${JSON.stringify(data.response)}`
@@ -378,42 +418,45 @@ export default class HlsjsPlayback extends HTML5Video {
       if (this._recoverAttemptsRemaining > 0) {
         this._recoverAttemptsRemaining -= 1
         switch (data.type) {
-        case HLSJS.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 HLSJS.ErrorDetails.MANIFEST_LOAD_ERROR:
-          case HLSJS.ErrorDetails.MANIFEST_LOAD_TIMEOUT:
-          case HLSJS.ErrorDetails.MANIFEST_PARSING_ERROR:
-          case HLSJS.ErrorDetails.LEVEL_LOAD_ERROR:
-          case HLSJS.ErrorDetails.LEVEL_LOAD_TIMEOUT:
-            Log.error('hlsjs: unrecoverable network fatal error.', { evt, data })
+          case HLSJS.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 HLSJS.ErrorDetails.MANIFEST_LOAD_ERROR:
+              case HLSJS.ErrorDetails.MANIFEST_LOAD_TIMEOUT:
+              case HLSJS.ErrorDetails.MANIFEST_PARSING_ERROR:
+              case HLSJS.ErrorDetails.LEVEL_LOAD_ERROR:
+              case HLSJS.ErrorDetails.LEVEL_LOAD_TIMEOUT:
+                Log.error('hlsjs: unrecoverable network fatal error.', { evt, data })
+                formattedError = this.createError(error)
+                this.trigger(Events.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 HLSJS.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.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 HLSJS.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.PLAYBACK_ERROR, formattedError)
-          this.stop()
-          break
         }
       } else {
-        Log.error('hlsjs: could not recover from error after maximum number of attempts.', { evt, data })
+        Log.error('hlsjs: could not recover from error after maximum number of attempts.', {
+          evt,
+          data
+        })
         formattedError = this.createError(error)
         this.trigger(Events.PLAYBACK_ERROR, formattedError)
         this.stop()
@@ -437,14 +480,20 @@ export default class HlsjsPlayback extends HTML5Video {
   }
 
   _keyIsDenied(data) {
-    return data.type === HLSJS.ErrorTypes.NETWORK_ERROR
-      && data.details === HLSJS.ErrorDetails.KEY_LOAD_ERROR
-      && data.response
-      && data.response.code >= 400
+    return (
+      data.type === HLSJS.ErrorTypes.NETWORK_ERROR &&
+      data.details === HLSJS.ErrorDetails.KEY_LOAD_ERROR &&
+      data.response &&
+      data.response.code >= 400
+    )
   }
 
   _onTimeUpdate() {
-    const update = { current: this.getCurrentTime(), total: this.getDuration(), firstFragDateTime: this.getProgramDateTime() }
+    const update = {
+      current: this.getCurrentTime(),
+      total: this.getDuration(),
+      firstFragDateTime: this.getProgramDateTime()
+    }
     const shouldThrottle = this._shouldThrottleTimeUpdate(update)
     if (shouldThrottle) return
     this._lastTimeUpdate = update
@@ -453,9 +502,12 @@ export default class HlsjsPlayback extends HTML5Video {
   }
 
   _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 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
 
@@ -475,14 +527,17 @@ export default class HlsjsPlayback extends HTML5Video {
     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)
+      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,
@@ -492,7 +547,7 @@ export default class HlsjsPlayback extends HTML5Video {
     this.trigger(Events.PLAYBACK_PROGRESS, progress, buffered)
   }
 
-  load(url) {   
+  load(url) {
     this._stopTimeUpdateTimer()
     this.options.src = url
     this._setup()
@@ -500,7 +555,9 @@ export default class HlsjsPlayback extends HTML5Video {
 
   play() {
     !this._hls && this._setup()
-    !this._manifestLoading && !this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src)
+    !this._manifestLoading &&
+      !this.options.hlsPlayback.preload &&
+      this._hls.loadSource(this.options.src)
     super.play()
     this._startTimeUpdateTimer()
   }
@@ -526,14 +583,18 @@ export default class HlsjsPlayback extends HTML5Video {
     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)
+    if (
+      this._ccTracksUpdated &&
+      this._playbackType === Playback.LIVE &&
+      this.hasClosedCaptionsTracks
+    ) {
       this._onSubtitleLoaded()
-
+    }
   }
 
   _fillLevels() {
     this._levels = this._hls.levels.map((level, index) => {
-      return { id: index, level: level, label: `${level.bitrate/1000}Kbps` }
+      return { id: index, level: level, label: `${level.bitrate / 1000}Kbps` }
     })
     this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this._levels)
   }
@@ -543,13 +604,14 @@ export default class HlsjsPlayback extends HTML5Video {
     this._playlistType = data.details.type || null
     let startTimeChanged = false
     let durationChanged = false
-    let fragments = data.details.fragments
-    let previousPlayableRegionStartTime = this._playableRegionStartTime
-    let previousPlayableRegionDuration = this._playableRegionDuration
+    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)
+    if (fragments[0].rawProgramDateTime) {
       this._programDateTime = fragments[0].rawProgramDateTime
+    }
     if (this._playableRegionStartTime !== fragments[0].start) {
       startTimeChanged = true
       this._playableRegionStartTime = fragments[0].start
@@ -560,14 +622,14 @@ export default class HlsjsPlayback extends HTML5Video {
         // set the correlation to map to middle of the extrapolation window
         this._localStartTimeCorrelation = {
           local: this._now,
-          remote: (fragments[0].start + (this._extrapolatedWindowDuration/2)) * 1000
+          remote: (fragments[0].start + this._extrapolatedWindowDuration / 2) * 1000
         }
       } else {
         // check if the correlation still works
-        let corr = this._localStartTimeCorrelation
-        let timePassed = this._now - corr.local
+        const corr = this._localStartTimeCorrelation
+        const timePassed = this._now - corr.local
         // this should point to a time within the extrapolation window
-        let startTime = (corr.remote + timePassed) / 1000
+        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)
@@ -583,26 +645,32 @@ export default class HlsjsPlayback extends HTML5Video {
           // 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
+            remote:
+              Math.max(
+                fragments[0].start,
+                previousPlayableRegionStartTime + this._extrapolatedWindowDuration
+              ) * 1000
           }
         }
       }
     }
-    
+
     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) {
-      let fragmentTargetDuration = data.details.targetduration
-      let hlsjsConfig = this.options.playback.hlsjsConfig || {}
-      let liveSyncDurationCount = hlsjsConfig.liveSyncDurationCount || HLSJS.DefaultConfig.liveSyncDurationCount
-      let hiddenAreaDuration = fragmentTargetDuration * liveSyncDurationCount
+      const fragmentTargetDuration = data.details.targetduration
+      const hlsjsConfig = this.options.playback.hlsjsConfig || {}
+      const liveSyncDurationCount =
+        hlsjsConfig.liveSyncDurationCount || HLSJS.DefaultConfig.liveSyncDurationCount
+      const hiddenAreaDuration = fragmentTargetDuration * liveSyncDurationCount
       if (hiddenAreaDuration <= newDuration) {
         newDuration -= hiddenAreaDuration
         this._durationExcludesAfterLiveSyncPoint = true
-      } else { this._durationExcludesAfterLiveSyncPoint = false }
-
+      } else {
+        this._durationExcludesAfterLiveSyncPoint = false
+      }
     }
     if (newDuration !== this._playableRegionDuration) {
       durationChanged = true
@@ -610,9 +678,9 @@ export default class HlsjsPlayback extends HTML5Video {
     }
     // Note the end time is not the playableRegionDuration
     // The end time will always increase even if content is removed from the beginning
-    let endTime = fragments[0].start + newDuration
-    let previousEndTime = previousPlayableRegionStartTime + previousPlayableRegionDuration
-    let endTimeChanged = endTime !== previousEndTime
+    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
@@ -622,10 +690,10 @@ export default class HlsjsPlayback extends HTML5Video {
         }
       } else {
         // check if the correlation still works
-        let corr = this._localEndTimeCorrelation
-        let timePassed = this._now - corr.local
+        const corr = this._localEndTimeCorrelation
+        const timePassed = this._now - corr.local
         // this should point to a time within the extrapolation window from the end
-        let extrapolatedEndTime = (corr.remote + timePassed) / 1000
+        const extrapolatedEndTime = (corr.remote + timePassed) / 1000
         if (extrapolatedEndTime > endTime) {
           this._localEndTimeCorrelation = {
             local: this._now,
@@ -684,10 +752,10 @@ export default class HlsjsPlayback extends HTML5Video {
     if (!this.levels.length) this._fillLevels()
     this.trigger(Events.PLAYBACK_LEVEL_SWITCH_END)
     this.trigger(Events.PLAYBACK_LEVEL_SWITCH, data)
-    let currentLevel = this._hls.levels[data.level]
+    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.highDefinition = currentLevel.height >= 720 || currentLevel.bitrate / 1000 >= 2000
       this.trigger(Events.PLAYBACK_HIGHDEFINITIONUPDATE, this.highDefinition)
       this.trigger(Events.PLAYBACK_BITRATE, {
         height: currentLevel.height,
@@ -704,7 +772,11 @@ export default class HlsjsPlayback extends HTML5Video {
     // - 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)
+    return (
+      this._durationExcludesAfterLiveSyncPoint &&
+      this._duration >= this._minDvrSize &&
+      this.getPlaybackType() === Playback.LIVE
+    )
   }
 
   getPlaybackType() {
@@ -712,12 +784,14 @@ export default class HlsjsPlayback extends HTML5Video {
   }
 
   isSeekEnabled() {
-    return (this._playbackType === Playback.VOD || this.dvrEnabled)
+    return this._playbackType === Playback.VOD || this.dvrEnabled
   }
 }
 
-HlsjsPlayback.canPlay = function(resource, mimeType) {
+HlsjsPlayback.canPlay = function (resource, mimeType) {
   const resourceParts = resource.split('?')[0].match(/.*\.(.*)$/) || []
-  const isHls = ((resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'm3u8') || listContainsIgnoreCase(mimeType, ['application/vnd.apple.mpegurl', 'application/x-mpegURL']))
+  const isHls =
+    (resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'm3u8') ||
+    listContainsIgnoreCase(mimeType, ['application/vnd.apple.mpegurl', 'application/x-mpegURL'])
   return !!(HLSJS.isSupported() && isHls)
 }