@gcorevideo/player 2.10.0 → 2.12.2

package/src/plugins/hls-playback/HlsPlayback.ts

@@ -2,12 +2,20 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import { Events, HTML5Video, Log, Playback, PlayerError, Utils } from '@clappr/core';
-import assert from 'assert';
+import {
+  Events,
+  HTML5Video,
+  Log,
+  Playback,
+  PlayerError,
+  Utils,
+} from '@clappr/core'
+import { trace } from '@gcorevideo/utils'
+import assert from 'assert'
 import HLSJS, {
-  HlsEvents,
+  Events as HlsEvents,
   HlsListeners,
-  type HlsErrorData,
+  type ErrorData as HlsErrorData,
   type Fragment,
   type FragChangedData,
   type FragLoadedData,
@@ -15,190 +23,199 @@ import HLSJS, {
   type LevelUpdatedData,
   type LevelLoadedData,
   type LevelSwitchingData,
-} from 'hls.js';
+} from 'hls.js'
 
-import { QualityLevel, TimePosition } from '../../playback.types.js';
-import { trace } from '@gcorevideo/utils';
-import { PlaybackType } from '../../types';
-import { TimerId } from '../../utils/types';
+import { PlaybackError, PlaybackErrorCode, QualityLevel, TimePosition, TimeUpdate } from '../../playback.types.js'
+import { PlaybackType } from '../../types'
+import { TimerId } from '../../utils/types'
 
-import { CLAPPR_VERSION } from "../../build.js";
+import { CLAPPR_VERSION } from '../../build.js'
 
-const { now, listContainsIgnoreCase } = Utils;
+const { now, listContainsIgnoreCase } = Utils
 
-const AUTO = -1;
-const DEFAULT_RECOVER_ATTEMPTS = 16;
+const AUTO = -1
+const DEFAULT_RECOVER_ATTEMPTS = 16
 
-Events.register('PLAYBACK_FRAGMENT_CHANGED');
-Events.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
+Events.register('PLAYBACK_FRAGMENT_CHANGED')
+Events.register('PLAYBACK_FRAGMENT_PARSING_METADATA')
 
-const T = 'plugins.hls';
+const T = 'plugins.hls'
 
 type MediaSegment = {
-  start: number;
-  end: number;
+  start: number
+  end: number
 }
 
 type TimeCorrelation = {
-  local: number;
-  remote: number;
+  local: number
+  remote: number
 }
 
-type PlaylistType = 'EVENT' | 'VOD';
+type PlaylistType = 'EVENT' | 'VOD'
 
 type PlaybackProgress = {
-  start: number;
-  current: number;
-  total: number;
+  start: number
+  current: number
+  total: number
 }
 
 type CustomListener = {
-  callback: (...args: any[]) => void;
-  eventName: keyof HlsListeners;
-  once?: boolean;
-};
+  callback: (...args: any[]) => void
+  eventName: keyof HlsListeners
+  once?: boolean
+}
 
 // TODO level, code, description, etc
-type ErrorInfo = Record<string, unknown>;
+type ErrorInfo = Record<string, unknown>
 
 // @ts-expect-error
 export default class HlsPlayback extends HTML5Video {
-  private _ccIsSetup = false;
+  private _ccIsSetup = false
 
-  private _ccTracksUpdated = false;
+  private _ccTracksUpdated = false
 
-  private _currentFragment: Fragment | null = null;
+  private _currentFragment: Fragment | null = null
 
-  private _currentLevel: number | null = null;
+  private _currentLevel: number | null = null
 
-  private _durationExcludesAfterLiveSyncPoint = false;
+  private _durationExcludesAfterLiveSyncPoint = false
 
-  private _extrapolatedWindowNumSegments = 0; // TODO
+  private _extrapolatedWindowNumSegments = 0 // TODO
 
-  private highDefinition = false;
+  private highDefinition = false
 
-  private _hls: HLSJS | null = null;
+  private _hls: HLSJS | null = null
 
-  private _isReadyState = false;
+  private _isReadyState = false
 
-  private _lastDuration: number | null = null;
+  private _lastDuration: number | null = null
 
-  private _lastTimeUpdate: TimePosition | null = null;
+  private _lastTimeUpdate: TimePosition | null = null
 
-  private _levels: QualityLevel[] | null = null;
+  private _levels: QualityLevel[] | null = null
 
-  private _localStartTimeCorrelation: TimeCorrelation | null = null;
+  private _localStartTimeCorrelation: TimeCorrelation | null = null
 
-  private _localEndTimeCorrelation: TimeCorrelation | null = null;
+  private _localEndTimeCorrelation: TimeCorrelation | null = null
 
-  private _manifestParsed = false;
+  private _manifestParsed = false
 
-  private _playableRegionDuration = 0;
+  private _playableRegionDuration = 0
 
-  private _playbackType: PlaybackType = Playback.VOD as PlaybackType;
+  private _playbackType: PlaybackType = Playback.VOD as PlaybackType
 
-  private _playlistType: PlaylistType | null = null;
+  private _playlistType: PlaylistType | null = null
 
-  private _playableRegionStartTime = 0;
+  private _playableRegionStartTime = 0
 
-  private _programDateTime: string | null = null;
+  private _programDateTime: number | null = null
 
-  private _recoverAttemptsRemaining = 0;
+  private _recoverAttemptsRemaining = 0
 
-  private _recoveredAudioCodecError = false;
+  private _recoveredAudioCodecError = false
 
-  private _recoveredDecodingError = false;
+  private _recoveredDecodingError = false
 
-  private _segmentTargetDuration: number | null = null;
+  private _segmentTargetDuration: number | null = null
 
-  private _timeUpdateTimer: TimerId | null = null;
+  private _timeUpdateTimer: TimerId | null = null
 
   get name() {
-    return 'hls';
+    return 'hls'
   }
 
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
   get levels() {
-    return this._levels || [];
+    return this._levels || []
   }
 
   get currentLevel() {
-    return this._currentLevel ?? AUTO;
+    return this._currentLevel ?? AUTO
   }
 
   get isReady() {
-    return this._isReadyState;
+    return this._isReadyState
   }
 
   set currentLevel(id: number) {
-    this._currentLevel = id;
-    this.trigger(Events.PLAYBACK_LEVEL_SWITCH_START);
-    assert.ok(this._hls, 'Hls.js instance is not available');
+    this._currentLevel = id
+    this.trigger(Events.PLAYBACK_LEVEL_SWITCH_START)
+    assert.ok(this._hls, 'Hls.js instance is not available')
     if (this.options.playback.hlsUseNextLevel) {
-      this._hls.nextLevel = this._currentLevel;
+      this._hls.nextLevel = this._currentLevel
     } else {
-      this._hls.currentLevel = this._currentLevel;
+      this._hls.currentLevel = this._currentLevel
     }
   }
 
   get latency() {
-    assert.ok(this._hls, 'Hls.js instance is not available');
-    return this._hls.latency;
+    assert.ok(this._hls, 'Hls.js instance is not available')
+    return this._hls.latency
   }
 
   get currentProgramDateTime() {
-    assert.ok(this._hls, 'Hls.js instance is not available');
-    assert.ok(this._hls.playingDate, 'Hls.js playingDate is not defined');
-    return this._hls.playingDate;
+    assert.ok(this._hls, 'Hls.js instance is not available')
+    assert.ok(this._hls.playingDate, 'Hls.js playingDate is not defined')
+    return this._hls.playingDate
   }
 
   get _startTime() {
-    if (this._playbackType === Playback.LIVE && this._playlistType !== 'EVENT') {
-      return this._extrapolatedStartTime;
+    if (
+      this._playbackType === Playback.LIVE &&
+      this._playlistType !== 'EVENT'
+    ) {
+      return this._extrapolatedStartTime
     }
 
-    return this._playableRegionStartTime;
+    return this._playableRegionStartTime
   }
 
   get _now() {
-    return now();
+    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)
   get _extrapolatedStartTime() {
     if (!this._localStartTimeCorrelation) {
-      return this._playableRegionStartTime;
+      return this._playableRegionStartTime
     }
 
-    const corr = this._localStartTimeCorrelation;
-    const timePassed = this._now - corr.local;
-    const 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() {
-    const actualEndTime = this._playableRegionStartTime + this._playableRegionDuration;
+    const actualEndTime =
+      this._playableRegionStartTime + this._playableRegionDuration
 
     if (!this._localEndTimeCorrelation) {
-      return actualEndTime;
+      return actualEndTime
     }
-    const correlation = this._localEndTimeCorrelation;
-    const timePassed = this._now - correlation.local;
-    const extrapolatedEndTime = (correlation.remote + timePassed) / 1000;
+    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() {
-    return this._extrapolatedEndTime - this._startTime;
+    return this._extrapolatedEndTime - this._startTime
   }
 
   // Returns the duration (seconds) of the window that the extrapolated start time is allowed
@@ -220,64 +237,80 @@ export default class HlsPlayback extends HTML5Video {
   //                                 extrapolatedStartTime
   get _extrapolatedWindowDuration() {
     if (this._segmentTargetDuration === null) {
-      return 0;
+      return 0
     }
 
-    return this._extrapolatedWindowNumSegments * this._segmentTargetDuration;
+    return this._extrapolatedWindowNumSegments * this._segmentTargetDuration
   }
 
   get bandwidthEstimate() {
-    return this._hls && this._hls.bandwidthEstimate;
+    return this._hls && this._hls.bandwidthEstimate
   }
 
   get defaultOptions() {
-    return { preload: true };
+    return { preload: true }
   }
 
   get customListeners() {
-    return this.options.hlsPlayback && this.options.hlsPlayback.customListeners || [];
+    return (
+      (this.options.hlsPlayback && this.options.hlsPlayback.customListeners) ||
+      []
+    )
   }
 
   get sourceMedia() {
-    return this.options.src;
+    return this.options.src
   }
 
   get currentTimestamp() {
     if (!this._currentFragment) {
-      return null;
+      return null
     }
-    assert(this._currentFragment.programDateTime !== null, 'Hls.js programDateTime is not defined');
-    const startTime = this._currentFragment.programDateTime;
-    const playbackTime = (this.el as HTMLMediaElement).currentTime;
-    const playTimeOffSet = playbackTime - this._currentFragment.start;
-    const currentTimestampInMs = startTime + playTimeOffSet * 1000;
+    assert(
+      this._currentFragment.programDateTime !== null,
+      'Hls.js programDateTime is not defined',
+    )
+    const startTime = this._currentFragment.programDateTime
+    const playbackTime = (this.el as HTMLMediaElement).currentTime
+    const playTimeOffSet = playbackTime - this._currentFragment.start
+    const currentTimestampInMs = startTime + playTimeOffSet * 1000
 
-    return currentTimestampInMs / 1000;
+    return currentTimestampInMs / 1000
   }
 
   static get HLSJS() {
-    return HLSJS;
+    return HLSJS
   }
 
   constructor(...args: any[]) {
     // @ts-ignore
-    super(...args);
-    this.options.hlsPlayback = { ...this.defaultOptions, ...this.options.hlsPlayback };
-    this._setInitialState();
+    super(...args)
+    this.options.hlsPlayback = {
+      ...this.defaultOptions,
+      ...this.options.hlsPlayback,
+    }
+    this._setInitialState()
   }
 
   _setInitialState() {
     // @ts-ignore
-    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._playbackType = Playback.VOD as PlaybackType;
-    this._lastTimeUpdate = { current: 0, total: 0 };
-    this._lastDuration = null;
+    this._extrapolatedWindowNumSegments =
+      !this.options.playback ||
+      typeof this.options.playback.extrapolatedWindowNumSegments === 'undefined'
+        ? 2
+        : this.options.playback.extrapolatedWindowNumSegments
+
+    this._playbackType = Playback.VOD as PlaybackType
+    this._lastTimeUpdate = { current: 0, total: 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.
@@ -285,47 +318,48 @@ export default class HlsPlayback extends HTML5Video {
     // 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;
+    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;
+    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;
+    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;
+    this._playableRegionDuration = 0
     // #EXT-X-PROGRAM-DATE-TIME
-    this._programDateTime = null;
+    this._programDateTime = null
     // 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;
+    this._durationExcludesAfterLiveSyncPoint = false
     // #EXT-X-TARGETDURATION
-    this._segmentTargetDuration = null;
+    this._segmentTargetDuration = null
     // #EXT-X-PLAYLIST-TYPE
-    this._playlistType = null;
+    this._playlistType = null
     // TODO options.hlsRecoverAttempts
-    this._recoverAttemptsRemaining = this.options.hlsRecoverAttempts || DEFAULT_RECOVER_ATTEMPTS;
+    this._recoverAttemptsRemaining =
+      this.options.hlsRecoverAttempts || DEFAULT_RECOVER_ATTEMPTS
   }
 
   _setup() {
-    this._destroyHLSInstance();
-    this._createHLSInstance();
-    this._listenHLSEvents();
-    this._attachHLSMedia();
+    this._destroyHLSInstance()
+    this._createHLSInstance()
+    this._listenHLSEvents()
+    this._attachHLSMedia()
   }
 
   _destroyHLSInstance() {
     if (!this._hls) {
-      return;
+      return
     }
-    this._manifestParsed = false;
-    this._ccIsSetup = false;
-    this._ccTracksUpdated = false;
-    this._setInitialState();
-    this._hls.destroy();
-    this._hls = null;
+    this._manifestParsed = false
+    this._ccIsSetup = false
+    this._ccTracksUpdated = false
+    this._setInitialState()
+    this._hls.destroy()
+    this._hls = null
   }
 
   _createHLSInstance() {
@@ -333,216 +367,260 @@ export default class HlsPlayback extends HTML5Video {
       ...this.options.playback.hlsjsConfig,
       maxBufferLength: 2,
       maxMaxBufferLength: 4,
-    };
+    }
 
-    this._hls = new HLSJS(config);
+    this._hls = new HLSJS(config)
   }
 
   _attachHLSMedia() {
     if (!this._hls) {
-      return;
+      return
     }
-    this._hls.attachMedia(this.el as HTMLMediaElement);
+    this._hls.attachMedia(this.el as HTMLMediaElement)
   }
 
   _listenHLSEvents() {
     if (!this._hls) {
-      return;
+      return
     }
     this._hls.once(HLSJS.Events.MEDIA_ATTACHED, () => {
-      assert.ok(this._hls, 'Hls.js instance is not available');
-      this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src);
-    });
+      assert.ok(this._hls, 'Hls.js instance is not available')
+      this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src)
+    })
 
     const onPlaying = () => {
       if (this._hls) {
-        this._hls.config.maxBufferLength = this.options.hlsPlayback.maxBufferLength || 30;
-        this._hls.config.maxMaxBufferLength = this.options.hlsPlayback.maxMaxBufferLength || 60;
+        this._hls.config.maxBufferLength =
+          this.options.hlsPlayback.maxBufferLength || 30
+        this._hls.config.maxMaxBufferLength =
+          this.options.hlsPlayback.maxMaxBufferLength || 60
       }
-      this.el.removeEventListener('playing', onPlaying);
-    };
-
-    this.el.addEventListener('playing', onPlaying);
-
-    this._hls.on(HLSJS.Events.MANIFEST_PARSED, () => this._manifestParsed = true);
-    this._hls.on(HLSJS.Events.LEVEL_LOADED, (evt: HlsEvents.LEVEL_LOADED, data: LevelLoadedData) => this._updatePlaybackType(evt, data));
-    this._hls.on(HLSJS.Events.LEVEL_UPDATED, (evt: HlsEvents.LEVEL_UPDATED, data: LevelUpdatedData) => this._onLevelUpdated(evt, data));
-    this._hls.on(HLSJS.Events.LEVEL_SWITCHING, (evt: HlsEvents.LEVEL_SWITCHING, data: LevelSwitchingData) => this._onLevelSwitch(evt, data));
-    this._hls.on(HLSJS.Events.FRAG_CHANGED, (evt: HlsEvents.FRAG_CHANGED, data: FragChangedData) => this._onFragmentChanged(evt, data));
-    this._hls.on(HLSJS.Events.FRAG_LOADED, (evt: HlsEvents.FRAG_LOADED, data: FragLoadedData) => this._onFragmentLoaded(evt, data));
-    this._hls.on(HLSJS.Events.FRAG_PARSING_METADATA, (evt: HlsEvents.FRAG_PARSING_METADATA, data: FragParsingMetadataData) => this._onFragmentParsingMetadata(evt, data));
-    this._hls.on(HLSJS.Events.ERROR, (evt, data) => this._onHLSJSError(evt, data));
+      this.el.removeEventListener('playing', onPlaying)
+    }
+
+    this.el.addEventListener('playing', onPlaying)
+
+    this._hls.on(
+      HLSJS.Events.MANIFEST_PARSED,
+      () => (this._manifestParsed = true),
+    )
+    this._hls.on(
+      HLSJS.Events.LEVEL_LOADED,
+      (evt: HlsEvents.LEVEL_LOADED, data: LevelLoadedData) =>
+        this._updatePlaybackType(evt, data),
+    )
+    this._hls.on(
+      HLSJS.Events.LEVEL_UPDATED,
+      (evt: HlsEvents.LEVEL_UPDATED, data: LevelUpdatedData) =>
+        this._onLevelUpdated(evt, data),
+    )
+    this._hls.on(
+      HLSJS.Events.LEVEL_SWITCHING,
+      (evt: HlsEvents.LEVEL_SWITCHING, data: LevelSwitchingData) =>
+        this._onLevelSwitch(evt, data),
+    )
+    this._hls.on(
+      HLSJS.Events.FRAG_CHANGED,
+      (evt: HlsEvents.FRAG_CHANGED, data: FragChangedData) =>
+        this._onFragmentChanged(evt, data),
+    )
+    this._hls.on(
+      HLSJS.Events.FRAG_LOADED,
+      (evt: HlsEvents.FRAG_LOADED, data: FragLoadedData) =>
+        this._onFragmentLoaded(evt, data),
+    )
+    this._hls.on(
+      HLSJS.Events.FRAG_PARSING_METADATA,
+      (evt: HlsEvents.FRAG_PARSING_METADATA, data: FragParsingMetadataData) =>
+        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_TRACK_LOADED, () => this._onSubtitleLoaded());
-    this._hls.on(HLSJS.Events.SUBTITLE_TRACKS_UPDATED, () => this._ccTracksUpdated = true);
-    this.bindCustomListeners();
+    this._hls.on(HLSJS.Events.SUBTITLE_TRACK_LOADED, () =>
+      this._onSubtitleLoaded(),
+    )
+    this._hls.on(
+      HLSJS.Events.SUBTITLE_TRACKS_UPDATED,
+      () => (this._ccTracksUpdated = true),
+    )
+    this.bindCustomListeners()
   }
 
   bindCustomListeners() {
     this.customListeners.forEach((item: CustomListener) => {
-      const requestedEventName = item.eventName;
-      const typeOfListener = item.once ? 'once' : 'on';
-      assert.ok(this._hls, 'Hls.js instance is not available');
-      requestedEventName && this._hls[`${typeOfListener}`](requestedEventName, item.callback);
-    });
+      const requestedEventName = item.eventName
+      const typeOfListener = item.once ? 'once' : 'on'
+      assert.ok(this._hls, 'Hls.js instance is not available')
+      requestedEventName &&
+        this._hls[`${typeOfListener}`](requestedEventName, item.callback)
+    })
   }
 
   unbindCustomListeners() {
     this.customListeners.forEach((item: CustomListener) => {
-      const requestedEventName = item.eventName;
+      const requestedEventName = item.eventName
 
-      assert.ok(this._hls, 'Hls.js instance is not available');
-      requestedEventName && this._hls.off(requestedEventName, item.callback);
-    });
+      assert.ok(this._hls, 'Hls.js instance is not available')
+      requestedEventName && this._hls.off(requestedEventName, item.callback)
+    })
   }
 
-  _onFragmentParsingMetadata(evt: HlsEvents.FRAG_PARSING_METADATA, data: FragParsingMetadataData) {
+  _onFragmentParsingMetadata(
+    evt: HlsEvents.FRAG_PARSING_METADATA,
+    data: FragParsingMetadataData,
+  ) {
     // @ts-ignore
-    this.trigger(Events.Custom.PLAYBACK_FRAGMENT_PARSING_METADATA, { evt, data });
+    this.trigger(Events.Custom.PLAYBACK_FRAGMENT_PARSING_METADATA, {
+      evt,
+      data,
+    })
   }
 
   render() {
-    this._ready();
+    this._ready()
 
-    return super.render();
+    return super.render()
   }
 
   _ready() {
     if (this._isReadyState) {
-      return;
+      return
     }
-    !this._hls && this._setup();
-    this._isReadyState = true;
-    this.trigger(Events.PLAYBACK_READY, this.name);
+    !this._hls && this._setup()
+    this._isReadyState = true
+    this.trigger(Events.PLAYBACK_READY, this.name)
   }
 
-  _recover(evt: HlsEvents.ERROR, data: HlsErrorData, error: ErrorInfo) {
-    assert(this._hls, 'Hls.js instance is not available');
+  _recover(evt: HlsEvents.ERROR, data: HlsErrorData, error: PlaybackError) {
+    assert(this._hls, 'Hls.js instance is not available')
     if (!this._recoveredDecodingError) {
-      this._recoveredDecodingError = true;
-      this._hls.recoverMediaError();
+      this._recoveredDecodingError = true
+      this._hls.recoverMediaError()
     } else if (!this._recoveredAudioCodecError) {
-      this._recoveredAudioCodecError = true;
-      this._hls.swapAudioCodec();
-      this._hls.recoverMediaError();
+      this._recoveredAudioCodecError = true
+      this._hls.swapAudioCodec()
+      this._hls.recoverMediaError()
     } else {
-      Log.error('hlsjs: failed to recover', { evt, data });
-      error.level = PlayerError.Levels.FATAL;
-      const formattedError = this.createError(error);
+      Log.error('hlsjs: failed to recover', { evt, data })
+      error.level = PlayerError.Levels.FATAL
 
-      this.trigger(Events.PLAYBACK_ERROR, formattedError);
-      this.stop();
+      this.triggerError(error)
     }
   }
 
-  // override
   // this playback manages the src on the video element itself
-  private override _setupSrc(srcUrl: string) { } // eslint-disable-line no-unused-vars
+  protected override _setupSrc(srcUrl: string) {} // eslint-disable-line no-unused-vars
 
   _startTimeUpdateTimer() {
     if (this._timeUpdateTimer) {
-      return;
+      return
     }
     this._timeUpdateTimer = setInterval(() => {
-      this._onDurationChange();
-      this._onTimeUpdate();
-    }, 100);
+      this._onDurationChange()
+      this._onTimeUpdate()
+    }, 100)
   }
 
   _stopTimeUpdateTimer() {
     if (!this._timeUpdateTimer) {
-      return;
+      return
     }
-    clearInterval(this._timeUpdateTimer);
-    this._timeUpdateTimer = null;
+    clearInterval(this._timeUpdateTimer)
+    this._timeUpdateTimer = null
   }
 
   getProgramDateTime() {
-    return this._programDateTime;
+    return this._programDateTime ?? 0
   }
 
   // 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;
+    return this._duration
   }
 
   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 as HTMLMediaElement).currentTime - this._startTime);
+    return Math.max(
+      0,
+      (this.el as HTMLMediaElement).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;
+    return this._startTime
   }
 
   seekPercentage(percentage: number) {
-    const seekTo = (percentage > 0)
-      ? this._duration * (percentage / 100)
-      : this._duration;
+    const seekTo =
+      percentage > 0 ? this._duration * (percentage / 100) : this._duration
 
-    this.seek(seekTo);
+    this.seek(seekTo)
   }
 
   seek(time: number) {
     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();
+      Log.warn(
+        'Attempt to seek to a negative time. Resetting to live point. Use seekToLivePoint() to seek to the live point.',
+      )
+      time = this.getDuration()
     }
     // assume live if time within 3 seconds of end of stream
-    this.dvrEnabled && this._updateDvr(time < this.getDuration() - 3);
-    time += this._startTime;
-    (this.el as HTMLMediaElement).currentTime = time;
+    this.dvrEnabled && this._updateDvr(time < this.getDuration() - 3)
+    time += this._startTime
+    ;(this.el as HTMLMediaElement).currentTime = time
   }
 
   seekToLivePoint() {
-    this.seek(this.getDuration());
+    this.seek(this.getDuration())
   }
 
   _updateDvr(status: boolean) {
-    this.trigger(Events.PLAYBACK_DVR, status);
-    this.trigger(Events.PLAYBACK_STATS_ADD, { 'dvr': status });
+    this.trigger(Events.PLAYBACK_DVR, status)
+    this.trigger(Events.PLAYBACK_STATS_ADD, { dvr: status })
   }
 
   _updateSettings() {
     if (this._playbackType === Playback.VOD) {
       // @ts-expect-error
-      this.settings.left = ['playpause', 'position', 'duration'];
+      this.settings.left = ['playpause', 'position', 'duration']
     } else if (this.dvrEnabled) {
       // @ts-expect-error
-      this.settings.left = ['playpause'];
+      this.settings.left = ['playpause']
     } else {
       // @ts-expect-error
-      this.settings.left = ['playstop'];
+      this.settings.left = ['playstop']
     }
 
-      // @ts-expect-error
-    this.settings.seekEnabled = this.isSeekEnabled();
-    this.trigger(Events.PLAYBACK_SETTINGSUPDATE);
+    // @ts-expect-error
+    this.settings.seekEnabled = this.isSeekEnabled()
+    this.trigger(Events.PLAYBACK_SETTINGSUPDATE)
   }
 
   _onHLSJSError(evt: HlsEvents.ERROR, data: HlsErrorData) {
-    const error: Record<string, unknown> = {
-      code: `${data.type}_${data.details}`,
-      description: `${this.name} error: type: ${data.type}, details: ${data.details}`,
-      raw: data,
-    };
-    let formattedError;
+    const error: PlaybackError = {
+      code: PlaybackErrorCode.Generic,
+      description: `${this.name} error: type: ${data.type}, details: ${data.details} fatal: ${data.fatal}`,
+      level: data.fatal ? PlayerError.Levels.FATAL : PlayerError.Levels.WARN,
+      message: `${this.name} error: type: ${data.type}, details: ${data.details}`,
+    }
 
     if (data.response) {
-      error.description += `, response: ${JSON.stringify(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;
+        this._recoverAttemptsRemaining -= 1
         switch (data.type) {
           case HLSJS.ErrorTypes.NETWORK_ERROR:
             switch (data.details) {
@@ -554,197 +632,239 @@ export default class HlsPlayback extends HTML5Video {
               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;
+                Log.error('hlsjs: unrecoverable network fatal error.', {
+                  evt,
+                  data,
+                })
+                error.code = PlaybackErrorCode.MediaSourceUnavailable;
+                this.triggerError(error)
+                break
               default:
-                Log.warn('hlsjs: trying to recover from network error.', { evt, data });
-                error.level = PlayerError.Levels.WARN;
-                assert(this._hls, 'Hls.js instance is not available');
-                this._hls.startLoad();
-                break;
+                Log.warn('hlsjs: trying to recover from network error.', {
+                  evt,
+                  data,
+                })
+                error.level = PlayerError.Levels.WARN
+                this._hls?.startLoad()
+                break
             }
-            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;
+            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;
+            Log.error('hlsjs: could not recover from error.', { evt, data })
+            this.triggerError(error)
+            break
         }
       } else {
-        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();
+        Log.error(
+          'hlsjs: could not recover from error after maximum number of attempts.',
+          { evt, data },
+        )
+        // TODO
+        this.triggerError(error)
       }
     } 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.PLAYBACK_ERROR, formattedError);
-        this.stop();
-
-        return;
+      if (
+        this.options.playback.triggerFatalErrorOnResourceDenied &&
+        this._keyIsDenied(data)
+      ) {
+        Log.error('hlsjs: could not load decrypt key.', { evt, data })
+        this.triggerError(error)
+
+        return
       }
 
-      error.level = PlayerError.Levels.WARN;
-      Log.warn('hlsjs: non-fatal error occurred', { evt, data });
+      Log.warn('hlsjs: non-fatal error occurred', { evt, data })
     }
   }
 
   _keyIsDenied(data: HlsErrorData) {
-    return data.type === HLSJS.ErrorTypes.NETWORK_ERROR
-      && data.details === HLSJS.ErrorDetails.KEY_LOAD_ERROR
-      && data.response
-      && data.response.code
-      && data.response.code >= 400;
+    return (
+      data.type === HLSJS.ErrorTypes.NETWORK_ERROR &&
+      data.details === HLSJS.ErrorDetails.KEY_LOAD_ERROR &&
+      data.response &&
+      data.response.code &&
+      data.response.code >= 400
+    )
   }
 
   _onTimeUpdate() {
-    const update = { current: this.getCurrentTime(), total: this.getDuration(), firstFragDateTime: this.getProgramDateTime() };
-    const isSame = this._lastTimeUpdate && (
+    const update: TimeUpdate = {
+      current: this.getCurrentTime(),
+      total: this.getDuration(),
+      firstFragDateTime: this.getProgramDateTime(),
+    }
+    const isSame =
+      this._lastTimeUpdate &&
       update.current === this._lastTimeUpdate.current &&
-      update.total === this._lastTimeUpdate.total);
+      update.total === this._lastTimeUpdate.total
 
     if (isSame) {
-      return;
+      return
     }
-    this._lastTimeUpdate = update;
-    this.trigger(Events.PLAYBACK_TIMEUPDATE, update, this.name);
+    this._lastTimeUpdate = update
+    this.trigger(Events.PLAYBACK_TIMEUPDATE, update, this.name)
   }
 
   _onDurationChange() {
-    const duration = this.getDuration();
+    const duration = this.getDuration()
 
     if (this._lastDuration === duration) {
-      return;
+      return
     }
-    this._lastDuration = duration;
-    super._onDurationChange();
+    this._lastDuration = duration
+    super._onDurationChange()
   }
 
   _onProgress() {
     if (!(this.el as HTMLMediaElement).buffered.length) {
-      return;
+      return
     }
-    let buffered: MediaSegment[] = [];
-    let bufferedPos = 0;
+    let buffered: MediaSegment[] = []
+    let bufferedPos = 0
 
     for (let i = 0; i < (this.el as HTMLMediaElement).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 as HTMLMediaElement).buffered.start(i) - this._playableRegionStartTime),
-        end: Math.max(0, (this.el as HTMLMediaElement).buffered.end(i) - this._playableRegionStartTime)
-      }];
-      if ((this.el as HTMLMediaElement).currentTime >= buffered[i].start && (this.el as HTMLMediaElement).currentTime <= buffered[i].end) {
-        bufferedPos = 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 as HTMLMediaElement).buffered.start(i) -
+              this._playableRegionStartTime,
+          ),
+          end: Math.max(
+            0,
+            (this.el as HTMLMediaElement).buffered.end(i) -
+              this._playableRegionStartTime,
+          ),
+        },
+      ]
+      if (
+        (this.el as HTMLMediaElement).currentTime >= buffered[i].start &&
+        (this.el as HTMLMediaElement).currentTime <= buffered[i].end
+      ) {
+        bufferedPos = i
       }
     }
     const progress: PlaybackProgress = {
       start: buffered[bufferedPos].start,
       current: buffered[bufferedPos].end,
-      total: this.getDuration()
-    };
+      total: this.getDuration(),
+    }
 
-    this.trigger(Events.PLAYBACK_PROGRESS, progress, buffered);
+    this.trigger(Events.PLAYBACK_PROGRESS, progress, buffered)
   }
 
   load(url: string) {
-    this._stopTimeUpdateTimer();
-    this.options.src = url;
-    this._setup();
+    this._stopTimeUpdateTimer()
+    this.options.src = url
+    this._setup()
   }
 
   play() {
-    trace(`${T} play`, { hls: !!this._hls, ...this.options.hlsPlayback });
-    !this._hls && this._setup();
-    assert.ok(this._hls, 'Hls.js instance is not available');
-    !this._manifestParsed && !this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src);
-    super.play();
-    this._startTimeUpdateTimer();
+    trace(`${T} play`, { hls: !!this._hls, ...this.options.hlsPlayback })
+    !this._hls && this._setup()
+    assert.ok(this._hls, 'Hls.js instance is not available')
+    !this._manifestParsed &&
+      !this.options.hlsPlayback.preload &&
+      this._hls.loadSource(this.options.src)
+    super.play()
+    this._startTimeUpdateTimer()
   }
 
   pause() {
     if (!this._hls) {
-      return;
+      return
     }
-    (this.el as HTMLMediaElement).pause();
+    ;(this.el as HTMLMediaElement).pause()
     if (this.dvrEnabled) {
-      this._updateDvr(true);
+      this._updateDvr(true)
     }
   }
 
   stop() {
-    this._stopTimeUpdateTimer();
+    this._stopTimeUpdateTimer()
     if (this._hls) {
-      super.stop();
+      super.stop()
     }
-    this._destroyHLSInstance();
+    this._destroyHLSInstance()
   }
 
   destroy() {
-    this._stopTimeUpdateTimer();
-    this._destroyHLSInstance();
-    return super.destroy();
-  }
-
-  private _updatePlaybackType(evt: HlsEvents.LEVEL_LOADED, data: LevelLoadedData) {
-    const prevPlaybackType = this._playbackType;
-    this._playbackType = (data.details.live ? Playback.LIVE : Playback.VOD) as PlaybackType;
-    this._onLevelUpdated(evt, data);
+    this._stopTimeUpdateTimer()
+    this._destroyHLSInstance()
+    return super.destroy()
+  }
+
+  private _updatePlaybackType(
+    evt: HlsEvents.LEVEL_LOADED,
+    data: LevelLoadedData,
+  ) {
+    const prevPlaybackType = this._playbackType
+    this._playbackType = (
+      data.details.live ? Playback.LIVE : Playback.VOD
+    ) as PlaybackType
+    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();
+    if (
+      this._ccTracksUpdated &&
+      this._playbackType === Playback.LIVE &&
+      this.hasClosedCaptionsTracks
+    ) {
+      this._onSubtitleLoaded()
     }
     if (prevPlaybackType !== this._playbackType) {
-      this._updateSettings();
+      this._updateSettings()
     }
   }
 
   private _fillLevels() {
-    assert.ok(this._hls, 'Hls.js instance is not available');
+    assert.ok(this._hls, 'Hls.js instance is not available')
     this._levels = this._hls.levels.map((level, index) => {
       return {
         level: index, // or level.id?
         width: level.width,
         height: level.height,
         bitrate: level.bitrate,
-      };
-    });
-    this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this._levels);
-  }
-
-  private _onLevelUpdated(evt: HlsEvents.LEVEL_UPDATED | HlsEvents.LEVEL_LOADED, data: LevelUpdatedData) {
-    this._segmentTargetDuration = data.details.targetduration;
-    this._playlistType = (data.details.type as PlaylistType) || null;
-    let startTimeChanged = false;
-    let durationChanged = false;
-    const fragments = data.details.fragments;
-    const previousPlayableRegionStartTime = this._playableRegionStartTime;
-    const previousPlayableRegionDuration = this._playableRegionDuration;
+      }
+    })
+    this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this._levels)
+  }
+
+  private _onLevelUpdated(
+    evt: HlsEvents.LEVEL_UPDATED | HlsEvents.LEVEL_LOADED,
+    data: LevelUpdatedData,
+  ) {
+    this._segmentTargetDuration = data.details.targetduration
+    this._playlistType = (data.details.type as PlaylistType) || 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;
+      return
     }
     // #EXT-X-PROGRAM-DATE-TIME
     if (fragments[0].rawProgramDateTime) {
-      this._programDateTime = fragments[0].rawProgramDateTime;
+      this._programDateTime = Number(fragments[0].rawProgramDateTime)
     }
     if (this._playableRegionStartTime !== fragments[0].start) {
-      startTimeChanged = true;
-      this._playableRegionStartTime = fragments[0].start;
+      startTimeChanged = true
+      this._playableRegionStartTime = fragments[0].start
     }
 
     if (startTimeChanged) {
@@ -752,14 +872,15 @@ export default class HlsPlayback 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
-        const corr = this._localStartTimeCorrelation;
-        const 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
-        const 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
@@ -767,134 +888,150 @@ export default class HlsPlayback extends HTML5Video {
           // 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) {
+            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
-          };
+            remote:
+              Math.max(
+                fragments[0].start,
+                previousPlayableRegionStartTime +
+                  this._extrapolatedWindowDuration,
+              ) * 1000,
+          }
         }
       }
     }
 
-    let newDuration = data.details.totalduration;
+    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 || HLSJS.DefaultConfig.liveSyncDurationCount;
-      const 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;
+        newDuration -= hiddenAreaDuration
+        this._durationExcludesAfterLiveSyncPoint = true
       } else {
-        this._durationExcludesAfterLiveSyncPoint = false;
+        this._durationExcludesAfterLiveSyncPoint = false
       }
     }
     if (newDuration !== this._playableRegionDuration) {
-      durationChanged = true;
-      this._playableRegionDuration = newDuration;
+      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;
+    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
-        };
+          remote: endTime * 1000,
+        }
       } else {
         // check if the correlation still works
-        const corr = this._localEndTimeCorrelation;
-        const 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
-        const extrapolatedEndTime = (corr.remote + timePassed) / 1000;
+        const extrapolatedEndTime = (corr.remote + timePassed) / 1000
 
         if (extrapolatedEndTime > endTime) {
           this._localEndTimeCorrelation = {
             local: this._now,
-            remote: endTime * 1000
-          };
-        } else if (extrapolatedEndTime < endTime - this._extrapolatedWindowDuration) {
+            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
-          };
+            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
-          };
+            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();
+    durationChanged && this._onDurationChange()
+    startTimeChanged && this._onProgress()
   }
 
   _onFragmentChanged(evt: HlsEvents.FRAG_CHANGED, data: FragChangedData) {
-    this._currentFragment = data.frag;
+    this._currentFragment = data.frag
     // @ts-ignore
-    this.trigger(Events.Custom.PLAYBACK_FRAGMENT_CHANGED, data);
+    this.trigger(Events.Custom.PLAYBACK_FRAGMENT_CHANGED, data)
   }
 
   _onFragmentLoaded(evt: HlsEvents.FRAG_LOADED, data: FragLoadedData) {
-    this.trigger(Events.PLAYBACK_FRAGMENT_LOADED, data);
+    this.trigger(Events.PLAYBACK_FRAGMENT_LOADED, data)
   }
 
   _onSubtitleLoaded() {
     // This event may be triggered multiple times
     // Setup CC only once (disable CC by default)
     if (!this._ccIsSetup) {
-      this.trigger(Events.PLAYBACK_SUBTITLE_AVAILABLE);
-      const trackId = this._playbackType === Playback.LIVE ? -1 : this.closedCaptionsTrackId;
+      this.trigger(Events.PLAYBACK_SUBTITLE_AVAILABLE)
+      const trackId =
+        this._playbackType === Playback.LIVE ? -1 : this.closedCaptionsTrackId
 
-      this.closedCaptionsTrackId = trackId;
-      this._ccIsSetup = true;
+      this.closedCaptionsTrackId = trackId
+      this._ccIsSetup = true
     }
   }
 
   _onLevelSwitch(evt: HlsEvents.LEVEL_SWITCHING, data: LevelSwitchingData) {
     if (!this.levels.length) {
-      this._fillLevels();
+      this._fillLevels()
     }
-    this.trigger(Events.PLAYBACK_LEVEL_SWITCH_END);
-    this.trigger(Events.PLAYBACK_LEVEL_SWITCH, data);
-    assert(this._hls, 'Hls.js instance is not available');
-    const currentLevel = this._hls.levels[data.level];
+    this.trigger(Events.PLAYBACK_LEVEL_SWITCH_END)
+    this.trigger(Events.PLAYBACK_LEVEL_SWITCH, data)
+    assert(this._hls, 'Hls.js instance is not available')
+    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.PLAYBACK_HIGHDEFINITIONUPDATE, this.highDefinition);
+      this.highDefinition =
+        currentLevel.height >= 720 || currentLevel.bitrate / 1000 >= 2000
+      this.trigger(Events.PLAYBACK_HIGHDEFINITIONUPDATE, this.highDefinition)
       this.trigger(Events.PLAYBACK_BITRATE, {
         height: currentLevel.height,
         width: currentLevel.width,
         bitrate: currentLevel.bitrate,
-        level: data.level
-      });
+        level: data.level,
+      })
     }
   }
 
@@ -903,24 +1040,41 @@ export default class HlsPlayback 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() {
-    return this._playbackType;
+    return this._playbackType
   }
 
   isSeekEnabled() {
-    return (this._playbackType === Playback.VOD || this.dvrEnabled);
+    return this._playbackType === Playback.VOD || this.dvrEnabled
+  }
+
+  private triggerError(error: PlaybackError) {
+    trace(`${T} triggerError`, { error })
+    this.trigger(Events.PLAYBACK_ERROR, error)
+    this.stop()
   }
 }
 
 HlsPlayback.canPlay = function (resource: string, mimeType?: string): boolean {
-  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 hasSupport = HLSJS.isSupported();
+  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 hasSupport = HLSJS.isSupported()
   trace(`${T} canPlay`, {
-    hasSupport, isHls, resource,
+    hasSupport,
+    isHls,
+    resource,
   })
-  return !!(hasSupport && isHls);
-};
+  return !!(hasSupport && isHls)
+}