@codercms/web-player 0.0.37 → 0.0.40

package/dist/core/VideoPlayer.js

@@ -1,124 +1,26 @@
 import { EventEmitter } from 'eventemitter3';
-import { readonly, writable } from 'svelte/store';
-import { HLSLoader, isHlsJsSupported } from './HLSLoader.js';
-import { NativeLoader } from './NativeLoader.js';
-import { LoaderEvents } from './LoaderInterface.js';
-import { DOMEventRegistry } from './DOMEventRegistry.js';
 import screenfull from 'screenfull';
 import { BROWSER } from 'esm-env';
+import { HLSLoader, IS_HLS_JS_SUPPORTED } from './Loaders/HLSLoader.js';
+import { NativeLoader } from './Loaders/NativeLoader.js';
+import { DOMEventRegistry } from './DOMEventRegistry.js';
+import { PlayerEvents } from './VideoPlayerEvents.js';
+import { VideoPlayerMediaState } from './VideoPlayerMediaState.js';
 import { IS_IOS, IS_IPAD_NEW } from '../ui/utils/ios.js';
-export var PlayerEvents;
-(function (PlayerEvents) {
-    PlayerEvents["Play"] = "player.play";
-    PlayerEvents["Pause"] = "player.pause";
-    PlayerEvents["Ended"] = "player.ended";
-    PlayerEvents["Error"] = "player.error";
-    PlayerEvents["Playing"] = "player.playing";
-    PlayerEvents["Seeking"] = "player.seeking";
-    PlayerEvents["Seeked"] = "player.seeked";
-    PlayerEvents["MediaElementAttached"] = "player.mediaElementAttached";
-    PlayerEvents["MediaElementDetached"] = "player.mediaElementDetached";
-    PlayerEvents["ContainerElementAttached"] = "player.containerElementAttached";
-    PlayerEvents["ContainerElementDetached"] = "player.containerElementDetached";
-    PlayerEvents["FullScreenEnter"] = "player.fullscreenEnter";
-    PlayerEvents["FullScreenExit"] = "player.fullscreenExit";
-    PlayerEvents["FullScreenToggle"] = "player.fullscreenToggle";
-    // LoadingStarted happens when player's load method called
-    PlayerEvents["LoadingStarted"] = "player.loadingStarted";
-    // LoadingMetadataEnded happens when loader process has been completed
-    PlayerEvents["LoadingMetadataEnded"] = "player.loadingMetadataEnded";
-    // LoadingMetadataFailed happens when loader fails to load video
-    PlayerEvents["LoadingMetadataFailed"] = "player.loadingMedataFailed";
-    // LoadingEnded happens when metadata loading is done and there's also initial video content fetched
-    PlayerEvents["LoadingEnded"] = "player.loadingEnded";
-    PlayerEvents["BufferingStarted"] = "player.bufferingStarted";
-    PlayerEvents["BufferingEnded"] = "player.bufferingEnded";
-    PlayerEvents["PlaybackBufferingProgress"] = "player.bufferingProgress";
-    PlayerEvents["PlaybackDurationChange"] = "player.durationChange";
-    PlayerEvents["PlaybackTimeUpdate"] = "player.timeUpdate";
-    PlayerEvents["PlaybackRateChange"] = "player.playbackRateChange";
-    PlayerEvents["VolumeChange"] = "player.volumeChange";
-    PlayerEvents["MuteChange"] = "player.muteChange";
-    PlayerEvents["VolumeStateChange"] = "player.volumeStateChange";
-    PlayerEvents["QualityLevelsUpdated"] = "player.qualityLevelsUpdated";
-    PlayerEvents["QualityLevelSwitching"] = "player.qualityLevelSwitching";
-    PlayerEvents["QualityLevelSwitched"] = "player.qualityLevelSwitched";
-    PlayerEvents["AudioTracksUpdated"] = "player.audioTracksUpdated";
-    PlayerEvents["AudioTrackSwitching"] = "player.audioTrackSwitching";
-    PlayerEvents["AudioTrackSwitched"] = "player.audioTrackSwitched";
-})(PlayerEvents || (PlayerEvents = {}));
-export var Loader;
-(function (Loader) {
-    Loader[Loader["Native"] = 0] = "Native";
-    Loader[Loader["HLS"] = 1] = "HLS";
-    Loader[Loader["DASH"] = 2] = "DASH";
-})(Loader || (Loader = {}));
-async function getLoadUrl(paramsUrl, signal) {
-    let url;
-    if (typeof paramsUrl === 'string') {
-        url = paramsUrl;
-    }
-    else if (typeof paramsUrl === 'function') {
-        url = await paramsUrl(signal);
-    }
-    else {
-        url = await paramsUrl;
-    }
-    if (!url || !url.length) {
-        throw Error('Bad load url');
-    }
-    return url;
-}
-export var VideoLoadingState;
-(function (VideoLoadingState) {
-    VideoLoadingState[VideoLoadingState["LoadingMetadata"] = 0] = "LoadingMetadata";
-    VideoLoadingState[VideoLoadingState["LoadingData"] = 1] = "LoadingData";
-    VideoLoadingState[VideoLoadingState["LoadingDone"] = 2] = "LoadingDone";
-    VideoLoadingState[VideoLoadingState["LoadingFailed"] = 3] = "LoadingFailed";
-})(VideoLoadingState || (VideoLoadingState = {}));
+import { VideoLoadingState, VideoPlayerMediaLoadManager } from './VideoPlayerMediaLoadManager.js';
+export { IS_AUDIO_CONTEXT_SUPPORTED, IS_AUDIO_GAIN_SUPPORTED } from './AudioCtx/AudioContext.js';
+export const IS_FULLSCREEN_ALLOWED = BROWSER && screenfull.isEnabled;
+export const IS_VOLUME_CHANGE_ALLOWED = BROWSER &&
+    Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'volume')?.set !== undefined;
 export class VideoPlayer {
-    static _isFullScreenAllowed = screenfull.isEnabled;
     _el;
     _containerEl;
     elEventsRegistry;
     _cfg;
     emitter = new EventEmitter();
-    loadAbortController = null;
-    currentLoader = null;
-    hlsLoader = null;
-    nativeLoader = null;
-    _loadingState = VideoLoadingState.LoadingDone;
-    // _isBuffering indicates is there and buffering process which block playback
-    _isBuffering = false;
-    // _isLoading flag indicates combined state of buffering + video loading progress
-    _isLoading = false;
+    _mediaState = new VideoPlayerMediaState(this.emitter);
+    _loadingMgr = new VideoPlayerMediaLoadManager(this.emitter, this._mediaState);
     _isFullScreen = false;
-    _paused = true;
-    _duration = 0;
-    _currentTime = 0;
-    _playbackRate = 0;
-    _muted = false;
-    _volume = 1;
-    _buffered = [];
-    _isAutoQuality = true;
-    _currentQualityLevel = null;
-    _qualityLevels = [];
-    _currentAudioTrack = null;
-    _audioTracks = [];
-    _isFullScreenStore = writable(this._isFullScreen);
-    _isLoadingStore = writable(this._isLoading);
-    _pausedStore = writable(this._paused);
-    _durationStore = writable(this._duration);
-    _currentTimeStore = writable(this._currentTime);
-    _playbackRateStore = writable(this._playbackRate);
-    _mutedStore = writable(this._muted);
-    _volumeStore = writable(this._volume);
-    _bufferedStore = writable(this._buffered);
-    _isAutoQualityStore = writable(this._isAutoQuality);
-    _currentQualityLevelStore = writable(this._currentQualityLevel);
-    _qualityLevelsStore = writable(this._qualityLevels);
-    _currentAudioTrackStore = writable(this._currentAudioTrack);
-    _audioTracksStore = writable(this._audioTracks);
     constructor(el, cfg) {
         this._cfg = cfg ?? {};
         // Do nothing in SSR environment
@@ -128,27 +30,22 @@ export class VideoPlayer {
         if (el) {
             this.attachEl(el);
         }
-        if (VideoPlayer._isFullScreenAllowed) {
+        if (IS_FULLSCREEN_ALLOWED) {
             screenfull.on('change', this._onFullScreenChange.bind(this));
         }
-        this.emitter.on(LoaderEvents.QualityLevelsUpdated, this._onLoaderQualityLevelsUpdated.bind(this));
-        this.emitter.on(LoaderEvents.QualityLevelSwitching, this._onLoaderQualityLevelSwitching.bind(this));
-        this.emitter.on(LoaderEvents.QualityLevelSwitched, this._onLoaderQualityLevelSwitched.bind(this));
-        this.emitter.on(LoaderEvents.AudioTracksUpdated, this._onLoaderAudioTracksUpdated.bind(this));
-        this.emitter.on(LoaderEvents.AudioTrackSwitching, this._onLoaderAudioTrackSwitching.bind(this));
-        this.emitter.on(LoaderEvents.AudioTrackSwitched, this._onLoaderAudioTrackSwitched.bind(this));
     }
     _registerVideoEvents(el) {
         this.elEventsRegistry?.unsubscribeAll();
         this.elEventsRegistry = new DOMEventRegistry(el);
         this.elEventsRegistry.subscribe('play', () => {
-            this._updatePaused(el.paused);
+            this._mediaState.updatePaused(el.paused);
         });
         this.elEventsRegistry.subscribe('pause', () => {
-            this._updatePaused(el.paused);
+            this._mediaState.updatePaused(el.paused);
         });
         this.elEventsRegistry.subscribe('playing', () => {
-            this._onBufferingEnded();
+            this._mediaState.updatePaused(el.paused);
+            this._mediaState.updateBuffering(false);
             this.emitter.emit(PlayerEvents.Playing);
         });
         this.elEventsRegistry.subscribe('seeking', () => {
@@ -158,220 +55,46 @@ export class VideoPlayer {
             this.emitter.emit(PlayerEvents.Seeked);
         });
         this.elEventsRegistry.subscribe('waiting', () => {
-            this._onBufferingStarted();
+            this._mediaState.updateBuffering(true);
         });
+        // this.elEventsRegistry.subscribe('stalled', () => {
+        // 	this._mediaState.updateBuffering(true);
+        // });
         this.elEventsRegistry.subscribe('ended', () => {
-            this._onBufferingEnded();
+            this._mediaState.updateBuffering(false);
             this.emitter.emit(PlayerEvents.Ended);
         });
         this.elEventsRegistry.subscribe('progress', () => {
-            this._onProgress(el);
+            this._mediaState.updateBufferedFromTimeRanges(el.buffered);
         });
         this.elEventsRegistry.subscribe('canplaythrough', () => {
-            this._onBufferingEnded();
+            this._mediaState.updateBuffering(false);
         });
         this.elEventsRegistry.subscribe('durationchange', () => {
-            let newDur = el.duration;
-            if (!isFinite(newDur) || isNaN(newDur)) {
-                newDur = 0;
-            }
-            if (this._duration !== newDur) {
-                this._updateDuration(newDur);
-            }
+            this._mediaState.updateDuration(el.duration);
         });
         this.elEventsRegistry.subscribe('timeupdate', () => {
-            let newTime = el.currentTime;
-            if (!isFinite(newTime) || isNaN(newTime)) {
-                newTime = 0;
-            }
-            if (this._currentTime !== newTime) {
-                this._updateCurrentTime(newTime);
-            }
+            this._mediaState.updateCurrentTime(el.currentTime);
             // Buffered parts may not be dispatched in on progress event
             // so take care that there is always fresh buffered parts
-            this._onProgress(el);
+            this._mediaState.updateBufferedFromTimeRanges(el.buffered);
         });
         this.elEventsRegistry.subscribe('ratechange', () => {
-            const newRate = el.playbackRate;
-            if (this._playbackRate !== newRate) {
-                this._updatePlaybackRate(newRate);
-            }
+            this._mediaState.updatePlaybackRate(el.playbackRate);
         });
         this.elEventsRegistry.subscribe('volumechange', () => {
-            const newVol = el.volume;
-            const newMuted = el.muted;
-            const isVolChanged = this._volume !== newVol;
-            const isMuteChanged = this._muted !== newMuted;
-            if (isVolChanged) {
-                this._updateVolume(newVol);
-            }
-            if (isMuteChanged) {
-                this._updateMuted(newMuted);
-            }
-            if (isVolChanged || isMuteChanged) {
-                this.emitter.emit(PlayerEvents.VolumeStateChange, newVol, newMuted);
-            }
+            this._mediaState.updateVolume(el.volume, el.muted);
         });
         // this.elEventsRegistry.subscribe('emptied', () => {
         // 	this._resetState();
         // });
         this.elEventsRegistry.subscribe('error', (ev) => {
-            this.emitter.emit(PlayerEvents.Error, ev.error ?? 'unknown playback error');
+            this.emitter.emit(PlayerEvents.Error, ev.error ?? new Error('Unknown playback error'));
         });
     }
     _unregisterVideoElementEvents() {
         this.elEventsRegistry?.unsubscribeAll();
     }
-    _onBufferingStarted() {
-        if (!this._isBuffering) {
-            this._isBuffering = true;
-            this._calcIsLoadingState();
-            this.emitter.emit(PlayerEvents.BufferingStarted);
-        }
-    }
-    _onBufferingEnded() {
-        if (this._isBuffering) {
-            this._isBuffering = false;
-            if (this._loadingState === VideoLoadingState.LoadingData) {
-                this._loadingState = VideoLoadingState.LoadingDone;
-                this.emitter.emit(PlayerEvents.LoadingEnded);
-            }
-            this._calcIsLoadingState();
-            this.emitter.emit(PlayerEvents.BufferingEnded);
-        }
-    }
-    _calcIsLoadingState() {
-        const isFinishedVideoLoading = this._loadingState === VideoLoadingState.LoadingDone ||
-            this._loadingState === VideoLoadingState.LoadingFailed;
-        this._isLoading = !isFinishedVideoLoading || this._isBuffering;
-        this._isLoadingStore.set(this._isLoading);
-    }
-    _onProgress(el) {
-        const newBuf = el.buffered;
-        const parts = [];
-        if (newBuf.length !== this._buffered.length) {
-            for (let i = 0; i < newBuf.length; i++) {
-                parts.push({ start: newBuf.start(i), end: newBuf.end(i) });
-            }
-            this._updateBufferedParts(parts);
-            return;
-        }
-        let isChanged = false;
-        for (let i = 0; i < newBuf.length; i++) {
-            const start = newBuf.start(i);
-            const end = newBuf.end(i);
-            isChanged = start !== this._buffered[i].start || end !== this._buffered[i].end;
-            parts.push({ start, end });
-        }
-        if (!isChanged) {
-            return;
-        }
-        this._updateBufferedParts(parts);
-    }
-    _resetState(newLoadingState) {
-        this._updateAudioTracks([]);
-        this._updateQualityLevels([]);
-        this._updateDuration(0);
-        this._updateCurrentTime(0);
-        this._updateBufferedParts([]);
-        this._currentQualityLevel = null;
-        this._currentQualityLevelStore.set(null);
-        this._currentAudioTrack = null;
-        this._currentAudioTrackStore.set(null);
-        if (newLoadingState !== undefined) {
-            this._loadingState = newLoadingState;
-        }
-        else if (this._loadingState !== VideoLoadingState.LoadingDone &&
-            this._loadingState !== VideoLoadingState.LoadingFailed) {
-            this._loadingState = VideoLoadingState.LoadingDone;
-        }
-        this._onBufferingEnded();
-        this._calcIsLoadingState();
-    }
-    _refreshState() {
-        const el = this.el;
-        let currTime = el.currentTime;
-        if (isNaN(currTime) || !isFinite(currTime)) {
-            currTime = 0;
-        }
-        let duration = el.duration;
-        if (isNaN(duration) || !isFinite(duration)) {
-            duration = 0;
-        }
-        if (el.paused !== this._paused) {
-            this._updatePaused(el.paused);
-        }
-        if (el.muted !== this._muted) {
-            this._updateMuted(el.muted);
-        }
-        if (el.volume !== this._volume) {
-            this._updateVolume(el.volume);
-        }
-        if (currTime !== this._currentTime) {
-            this._updateCurrentTime(currTime);
-        }
-        if (duration !== this._duration) {
-            this._updateDuration(duration);
-        }
-        if (el.playbackRate !== this._playbackRate) {
-            this._updatePlaybackRate(el.playbackRate);
-        }
-        this._onProgress(el);
-    }
-    _onLoaderQualityLevelsUpdated(newLevels) {
-        // console.log('Quality levels updated', newLevels);
-        this._updateQualityLevels(newLevels);
-    }
-    _onLoaderQualityLevelSwitching(newLevelId, isAutoLevel) {
-        const newLevel = this._qualityLevels.find((lvl) => lvl.id === newLevelId);
-        if (!newLevel) {
-            console.error(`Quality level switch to unknown level`, {
-                newLevelId,
-                levels: this._qualityLevels
-            });
-            return;
-        }
-        this._isAutoQuality = isAutoLevel;
-        this.emitter.emit(PlayerEvents.QualityLevelSwitching, newLevel, isAutoLevel);
-    }
-    _onLoaderQualityLevelSwitched(newLevelId, isAutoLevel) {
-        const newLevel = this._qualityLevels.find((lvl) => lvl.id === newLevelId);
-        if (!newLevel) {
-            console.error(`Quality level switch to unknown level`, {
-                newLevelId,
-                levels: this._qualityLevels
-            });
-            return;
-        }
-        this._updateQualityLevel(newLevel, isAutoLevel);
-    }
-    _onLoaderAudioTracksUpdated(newTracks) {
-        // console.log('Audio tracks updated', newTracks);
-        this._updateAudioTracks(newTracks);
-    }
-    _onLoaderAudioTrackSwitching(newTrackId) {
-        const newTrack = this._audioTracks.find((lvl) => lvl.id === newTrackId);
-        if (!newTrack) {
-            console.error(`Audio track switch to unknown track`, {
-                newTrackId,
-                tracks: this._audioTracks
-            });
-            return;
-        }
-        this.emitter.emit(PlayerEvents.AudioTrackSwitching, newTrack);
-    }
-    _onLoaderAudioTrackSwitched(newTrackId) {
-        const newTrack = this._audioTracks.find((lvl) => lvl.id === newTrackId);
-        if (!newTrack) {
-            console.error(`Audio track switch to unknown track`, {
-                newTrackId,
-                tracks: this._audioTracks
-            });
-            return;
-        }
-        this._updateCurrentAudioTrack(newTrack);
-        this.emitter.emit(PlayerEvents.AudioTrackSwitching, newTrack);
-    }
     _onFullScreenChange = () => {
         const newFullScreen = screenfull.isFullscreen;
         if (newFullScreen !== this._isFullScreen) {
@@ -380,7 +103,7 @@ export class VideoPlayer {
     };
     _updateIsFullScreen(isFullScreen) {
         this._isFullScreen = isFullScreen;
-        this._isFullScreenStore.set(isFullScreen);
+        // this._isFullScreenStore.set(isFullScreen);
         if (isFullScreen) {
             this.emitter.emit(PlayerEvents.FullScreenEnter);
         }
@@ -389,68 +112,6 @@ export class VideoPlayer {
         }
         this.emitter.emit(PlayerEvents.FullScreenToggle, isFullScreen);
     }
-    _updateBufferedParts(buffered) {
-        this._buffered = buffered;
-        this._bufferedStore.set(buffered);
-        this.emitter.emit(PlayerEvents.PlaybackBufferingProgress, buffered);
-    }
-    _updateDuration(duration) {
-        this._duration = duration;
-        this._durationStore.set(duration);
-        this.emitter.emit(PlayerEvents.PlaybackDurationChange, duration);
-    }
-    _updateCurrentTime(currentTime) {
-        this._currentTime = currentTime;
-        this._currentTimeStore.set(currentTime);
-        this.emitter.emit(PlayerEvents.PlaybackTimeUpdate, currentTime);
-    }
-    _updatePlaybackRate(rate) {
-        this._playbackRate = rate;
-        this._playbackRateStore.set(rate);
-        this.emitter.emit(PlayerEvents.PlaybackRateChange, rate);
-    }
-    _updateVolume(volume) {
-        this._volume = volume;
-        this._volumeStore.set(volume);
-        this.emitter.emit(PlayerEvents.VolumeChange, volume);
-    }
-    _updateMuted(muted) {
-        this._muted = muted;
-        this._mutedStore.set(muted);
-        this.emitter.emit(PlayerEvents.MuteChange, muted);
-    }
-    _updatePaused(paused) {
-        this._paused = paused;
-        this._pausedStore.set(paused);
-        if (!paused) {
-            this.emitter.emit(PlayerEvents.Play);
-        }
-        else {
-            this.emitter.emit(PlayerEvents.Pause);
-        }
-    }
-    _updateQualityLevels(levels) {
-        this._qualityLevels = levels;
-        this._qualityLevelsStore.set(levels);
-        this.emitter.emit(PlayerEvents.QualityLevelsUpdated, levels);
-    }
-    _updateQualityLevel(level, isAutoQuality) {
-        this._currentQualityLevel = level;
-        this._currentQualityLevelStore.set(level);
-        this._isAutoQuality = isAutoQuality;
-        this._isAutoQualityStore.set(isAutoQuality);
-        this.emitter.emit(PlayerEvents.QualityLevelSwitched, level, isAutoQuality);
-    }
-    _updateAudioTracks(audioTracks) {
-        this._audioTracks = audioTracks;
-        this._audioTracksStore.set(audioTracks);
-        this.emitter.emit(PlayerEvents.AudioTracksUpdated, audioTracks);
-    }
-    _updateCurrentAudioTrack(audioTrack) {
-        this._currentAudioTrack = audioTrack;
-        this._currentAudioTrackStore.set(audioTrack);
-        this.emitter.emit(PlayerEvents.AudioTrackSwitched, audioTrack);
-    }
     attachEl(el) {
         if (this._el === el) {
             return;
@@ -459,15 +120,15 @@ export class VideoPlayer {
             this.detachEl();
         }
         this._el = el;
-        this._refreshState();
+        this._mediaState.syncFromEl(el);
         this._registerVideoEvents(el);
         // Setup HLS.js loader
-        if (isHlsJsSupported()) {
-            this.hlsLoader = new HLSLoader(this.emitter, this._el, this._cfg.hlsConfig ?? {
+        if (IS_HLS_JS_SUPPORTED) {
+            this._loadingMgr.setHlsLoader(new HLSLoader(el, this._cfg.hlsConfig ?? {
                 progressive: true
-            });
+            }));
         }
-        this.nativeLoader = new NativeLoader(this.emitter, this.el);
+        this._loadingMgr.setNativeLoader(new NativeLoader(this._el));
         this.emitter.emit(PlayerEvents.MediaElementAttached, el);
     }
     attachContainerEl(el) {
@@ -484,9 +145,11 @@ export class VideoPlayer {
         if (!this._el) {
             return;
         }
+        // this._audioGain?.disconnect();
         this._unregisterVideoElementEvents();
         const el = this._el;
         this._el = undefined;
+        this._loadingMgr.destroy();
         this.emitter.emit(PlayerEvents.MediaElementDetached, el);
     }
     detachContainerEl() {
@@ -500,131 +163,22 @@ export class VideoPlayer {
     destroy() {
         this.detachEl();
         this.detachContainerEl();
-        this.emitter.off(LoaderEvents.QualityLevelsUpdated, this._onLoaderQualityLevelsUpdated.bind(this));
-        this.emitter.off(LoaderEvents.QualityLevelSwitching, this._onLoaderQualityLevelSwitching.bind(this));
-        this.emitter.off(LoaderEvents.QualityLevelSwitched, this._onLoaderQualityLevelSwitched.bind(this));
-        this.emitter.off(LoaderEvents.AudioTracksUpdated, this._onLoaderAudioTracksUpdated.bind(this));
-        this.emitter.off(LoaderEvents.AudioTrackSwitching, this._onLoaderAudioTrackSwitching.bind(this));
-        this.emitter.off(LoaderEvents.AudioTrackSwitched, this._onLoaderAudioTrackSwitched.bind(this));
-        if (this.currentLoader) {
-            this.currentLoader.stop();
-            this.currentLoader = null;
-            this.hlsLoader = null;
-        }
-        if (VideoPlayer._isFullScreenAllowed) {
+        if (IS_FULLSCREEN_ALLOWED) {
             screenfull.off('change', this._onFullScreenChange.bind(this));
         }
     }
     stop() {
-        if (this.currentLoader) {
-            if (this.loadAbortController) {
-                this.loadAbortController.abort('Player stop called');
-                this.loadAbortController = null;
-            }
-            if (!this.el.paused) {
-                this.el.pause();
-                this._paused = true;
-                this._pausedStore.set(true);
-            }
-            try {
-                this.currentLoader.stop();
-            }
-            catch (e) {
-                // Ignore any loader stopping error
-                console.log('loader error during stop', e);
-            }
-            this._resetState();
-        }
-    }
-    _getLoaderByType(loaderType) {
-        let loader = null;
-        switch (loaderType) {
-            case Loader.Native:
-                loader = this.nativeLoader;
-                break;
-            case Loader.HLS:
-                loader = this.hlsLoader ?? this.nativeLoader;
-                break;
-            case Loader.DASH:
-                loader = this.nativeLoader;
-                break;
-            default:
-                throw Error('Unknown loader selected');
-        }
-        if (!loader) {
-            throw Error('No suitable loader found');
-        }
-        return loader;
-    }
-    _getLoaderFromUrl(url) {
-        let loader = null;
-        const urlParsed = new URL(url);
-        const path = urlParsed.pathname;
-        if (path.endsWith('.m3u8')) {
-            // HLS
-            loader = this.hlsLoader ?? this.nativeLoader;
-        }
-        else if (path.endsWith('.mpd')) {
-            // DASH
-            loader = this.nativeLoader;
-        }
-        else {
-            // For everything else native loader should be used
-            loader = this.nativeLoader;
-        }
-        if (!loader) {
-            throw Error('No suitable loader found');
-        }
-        return loader;
+        this._loadingMgr.stop();
+        this._mediaState.resetForLoadingStart();
     }
     async load(params) {
-        if (!this.el) {
-            return;
-        }
-        let neededLoader = null;
-        if (params.loader !== undefined) {
-            neededLoader = this._getLoaderByType(params.loader);
-        }
-        // Unsubscribe from video events before loading
+        const el = this.el;
+        this.emitter.emit(PlayerEvents.BeforeLoading, params);
         this._unregisterVideoElementEvents();
-        const abortController = new AbortController();
-        this.loadAbortController?.abort('Player load called before previous load is done');
-        this.loadAbortController = abortController;
-        this._resetState(VideoLoadingState.LoadingMetadata);
-        this._calcIsLoadingState();
-        this.emitter.emit(PlayerEvents.LoadingStarted, params);
-        try {
-            const loadUrl = await getLoadUrl(params.url, this.loadAbortController.signal);
-            // Detect needed loader based on load url
-            if (neededLoader === null) {
-                neededLoader = this._getLoaderFromUrl(loadUrl);
-            }
-            if (this.currentLoader && this.currentLoader !== neededLoader) {
-                this.currentLoader.stop();
-                this.currentLoader = neededLoader;
-            }
-            // Subscribe to video events before loader load call, because it will produce HTML events
-            this._registerVideoEvents(this.el);
-            await neededLoader.load({
-                abortSignal: abortController.signal,
-                url: loadUrl,
-                startLevel: params.startLevel,
-                startPosition: params.startPosition,
-                audioTrack: params.audioTrack
-            });
-        }
-        catch (e) {
-            this.loadAbortController = null;
-            this._loadingState = VideoLoadingState.LoadingFailed;
-            this._calcIsLoadingState();
-            this.emitter.emit(PlayerEvents.LoadingMetadataFailed, e);
-            throw e;
-        }
-        this.loadAbortController = null;
-        this._loadingState = VideoLoadingState.LoadingData;
-        this._onBufferingStarted();
-        this._calcIsLoadingState();
-        this.emitter.emit(PlayerEvents.LoadingMetadataEnded);
+        this._mediaState.resetForLoadingStart();
+        await this._loadingMgr.load(params);
+        this._registerVideoEvents(el);
+        this._mediaState.syncFromEl(el);
         if (params.playAfterLoad) {
             await this.play();
         }
@@ -658,18 +212,18 @@ export class VideoPlayer {
         if (pos < 0) {
             pos = 0;
         }
-        else if (pos > this._duration) {
-            pos = this._duration;
+        else if (pos > this._mediaState.duration) {
+            pos = this._mediaState.duration;
         }
-        this._updateCurrentTime(pos);
+        this._mediaState.updateCurrentTime(pos);
         this._el.currentTime = pos;
     }
     seekForward(step) {
-        const newCurrentTime = this._currentTime + step;
+        const newCurrentTime = this._mediaState.currentTime + step;
         this.seekTo(newCurrentTime);
     }
     seekBackward(step) {
-        const newCurrentTime = this._currentTime - step;
+        const newCurrentTime = this._mediaState.currentTime - step;
         this.seekTo(newCurrentTime);
     }
     setVolume(vol) {
@@ -687,6 +241,20 @@ export class VideoPlayer {
         }
         this._el.muted = muted;
     }
+    // setVolumeGain(gain: number) {
+    // 	if (!this._el) {
+    // 		throw Error('Player is not attached to media element');
+    // 	}
+    //
+    // 	if (!this._audioGain) {
+    // 		if (!IS_AUDIO_GAIN_SUPPORTED) {
+    // 			console.error('Audio gain is not supported by the browser');
+    // 			return;
+    // 		}
+    //
+    // 		this._audioGain = createGainNode();
+    // 	}
+    // }
     setPlaybackRate(rate) {
         if (!this._el) {
             throw Error('Player is not attached to media element');
@@ -699,9 +267,6 @@ export class VideoPlayer {
         }
         this._el.muted = !this._el.muted;
     }
-    static isFullScreenAllowed() {
-        return VideoPlayer._isFullScreenAllowed;
-    }
     async toggleFullScreen() {
         // On iOS only native full screen supported
         if (IS_IOS && !IS_IPAD_NEW) {
@@ -719,30 +284,33 @@ export class VideoPlayer {
         return await screenfull.toggle(this._el);
     }
     setQualityLevel(id, graceful) {
-        const found = this._qualityLevels.find((lvl) => lvl.id === id);
+        const found = this._mediaState.findQualityLevelById(id);
         if (!found) {
             throw Error(`Quality level not found: ${id}`);
         }
-        if (!this.currentLoader) {
+        const loader = this._loadingMgr.getCurrentLoader();
+        if (!loader) {
             throw Error('Loader is not set');
         }
-        this.currentLoader.switchQualityLevel(id, graceful);
+        loader.switchQualityLevel(id, graceful);
     }
     setAutoQualityLevel(graceful) {
-        if (!this.currentLoader) {
+        const loader = this._loadingMgr.getCurrentLoader();
+        if (!loader) {
             throw Error('Loader is not set');
         }
-        this.currentLoader.switchQualityLevel(this.currentLoader.getAutoQualityLevelId(), graceful);
+        loader.switchQualityLevel(loader.getAutoQualityLevelId(), graceful);
     }
     setAudioTrack(trackId, graceful) {
-        const found = this._audioTracks.find((track) => track.id === trackId);
+        const found = this._mediaState.findAudioTrackById(trackId);
         if (!found) {
             throw Error(`Audio track not found: ${trackId}`);
         }
-        if (!this.currentLoader) {
+        const loader = this._loadingMgr.getCurrentLoader();
+        if (!loader) {
             throw Error('Loader is not set');
         }
-        this.currentLoader.switchAudioTrack(trackId, graceful);
+        loader.switchAudioTrack(trackId, graceful);
     }
     subscribe(ev, cb) {
         this.emitter.on(ev, cb);
@@ -765,98 +333,55 @@ export class VideoPlayer {
         }
         return this._containerEl;
     }
-    get loader() {
-        return this.currentLoader;
-    }
     get isFullScreen() {
         return this._isFullScreen;
     }
-    get loadingState() {
-        return this._loadingState;
-    }
-    get isBuffering() {
-        return this._isBuffering;
+    get loader() {
+        return this._loadingMgr.getCurrentLoader();
     }
-    // isLoading indicates is there any buffering process or metadata loading
     get isLoading() {
-        return this._isLoading;
-    }
-    get qualityLevels() {
-        return this._qualityLevels;
+        return this._loadingMgr.getLoadingState() === VideoLoadingState.Loading;
     }
-    get isAutoQuality() {
-        return this._isAutoQuality;
-    }
-    get qualityLevel() {
-        return this._currentQualityLevel;
+    get loadingState() {
+        return this._loadingMgr.getLoadingState();
     }
-    get audioTracks() {
-        return this._audioTracks;
+    get isBuffering() {
+        return this._mediaState.buffering;
     }
-    get audioTrack() {
-        return this._currentAudioTrack;
+    get paused() {
+        return this._mediaState.paused;
     }
     get duration() {
-        return this._duration;
-    }
-    get paused() {
-        return this._paused;
+        return this._mediaState.duration;
     }
     get currentTime() {
-        return this._currentTime;
+        return this._mediaState.currentTime;
     }
     get buffered() {
-        return this._buffered;
+        return this._mediaState.buffered;
     }
     get playbackRate() {
-        return this._playbackRate;
+        return this._mediaState.playbackRate;
     }
     get volume() {
-        return this._volume;
+        return this._mediaState.volume;
     }
     get muted() {
-        return this._muted;
-    }
-    get pausedStore() {
-        return readonly(this._pausedStore);
+        return this._mediaState.muted;
     }
-    get isFullScreenStore() {
-        return readonly(this._isFullScreenStore);
-    }
-    get isLoadingStore() {
-        return readonly(this._isLoadingStore);
-    }
-    get qualityLevelsStore() {
-        return readonly(this._qualityLevelsStore);
-    }
-    get isAutoQualityStore() {
-        return readonly(this._isAutoQualityStore);
-    }
-    get qualityLevelStore() {
-        return readonly(this._currentQualityLevelStore);
-    }
-    get audioTracksStore() {
-        return readonly(this._audioTracksStore);
-    }
-    get audioTrackStore() {
-        return readonly(this._currentAudioTrackStore);
-    }
-    get durationStore() {
-        return readonly(this._durationStore);
-    }
-    get currentTimeStore() {
-        return readonly(this._currentTimeStore);
+    get qualityLevels() {
+        return this._mediaState.qualityLevels;
     }
-    get bufferedStore() {
-        return readonly(this._bufferedStore);
+    get isAutoQuality() {
+        return this._mediaState.isAutoQuality;
     }
-    get playbackRateStore() {
-        return readonly(this._playbackRateStore);
+    get qualityLevel() {
+        return this._mediaState.currentQualityLevel;
     }
-    get volumeStore() {
-        return readonly(this._volumeStore);
+    get audioTracks() {
+        return this._mediaState.audioTracks;
     }
-    get mutedStore() {
-        return readonly(this._mutedStore);
+    get audioTrack() {
+        return this._mediaState.currentAudioTrack;
     }
 }