@gcorevideo/player 0.0.1

package/lib/plugins/dash-plugin/DashPlayback.js

@@ -0,0 +1,659 @@
+// Copyright 2014 Globo.com Player authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+import { Events, HTML5Video, Log, Playback, /* PlayerError, */ Utils } from '@clappr/core';
+import assert from 'assert'; // uses Node.js's assert types
+import DASHJS from 'dashjs';
+import { trace } from '../../trace/index.js';
+const AUTO = -1;
+const { now } = Utils;
+const T = "DashPlayback";
+export default class DashPlayback extends HTML5Video {
+    _levels = null;
+    _currentLevel = null;
+    _durationExcludesAfterLiveSyncPoint = false;
+    _isReadyState = false;
+    _playableRegionDuration = 0;
+    _playableRegionStartTime = 0;
+    _playbackType = Playback.VOD;
+    _playlistType = null;
+    // #EXT-X-PROGRAM-DATE-TIME
+    _programDateTime = 0;
+    _dash = null;
+    _extrapolatedWindowDuration = 0;
+    _extrapolatedWindowNumSegments = 0;
+    _lastDuration = null;
+    _lastTimeUpdate = { current: 0, total: 0 };
+    _localStartTimeCorrelation = null;
+    _localEndTimeCorrelation = null;
+    _recoverAttemptsRemaining = 0;
+    _recoveredAudioCodecError = false;
+    _recoveredDecodingError = false;
+    startChangeQuality = false;
+    manifestInfo = null;
+    // #EXT-X-TARGETDURATION
+    _segmentTargetDuration = null;
+    _timeUpdateTimer = null;
+    get name() {
+        return 'dash';
+    }
+    get levels() {
+        return this._levels || [];
+    }
+    get currentLevel() {
+        if (this._currentLevel === null) {
+            return AUTO;
+        }
+        // 0 is a valid level ID
+        return this._currentLevel;
+    }
+    get isReady() {
+        return this._isReadyState;
+    }
+    set currentLevel(id) {
+        this._currentLevel = id;
+        this.trigger(Events.PLAYBACK_LEVEL_SWITCH_START);
+        const cfg = {
+            streaming: {
+                abr: {
+                    autoSwitchBitrate: {
+                        video: id === -1,
+                    },
+                    ABRStrategy: 'abrL2A'
+                }
+            },
+        };
+        assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to switch levels');
+        const dash = this._dash;
+        this.options.dash && dash.updateSettings({ ...this.options.dash, ...cfg });
+        if (id !== -1) {
+            this._dash.setQualityFor('video', id);
+        }
+        if (this._playbackType === Playback.VOD) {
+            const curr_time = this._dash.time();
+            this.startChangeQuality = true;
+            dash.seek(0);
+            setTimeout(() => {
+                dash.seek(curr_time);
+                dash.play();
+                this.startChangeQuality = false;
+            }, 100);
+        }
+    }
+    get _startTime() {
+        if (this._playbackType === Playback.LIVE && this._playlistType !== 'EVENT') {
+            return this._extrapolatedStartTime;
+        }
+        return this._playableRegionStartTime;
+    }
+    get _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;
+        }
+        const corr = this._localStartTimeCorrelation;
+        const timePassed = this._now - corr.local;
+        const extrapolatedWindowStartTime = (corr.remote + timePassed) / 1000;
+        // cap at the end of the extrapolated window duration
+        return Math.min(extrapolatedWindowStartTime, this._playableRegionStartTime + this._extrapolatedWindowDuration);
+    }
+    // the time in the video element which should represent the end of the content
+    // extrapolated to increase in real time (instead of jumping as segments are added)
+    get _extrapolatedEndTime() {
+        const actualEndTime = this._playableRegionStartTime + this._playableRegionDuration;
+        if (!this._localEndTimeCorrelation) {
+            return actualEndTime;
+        }
+        const corr = this._localEndTimeCorrelation;
+        const timePassed = this._now - corr.local;
+        const extrapolatedEndTime = (corr.remote + timePassed) / 1000;
+        return Math.max(actualEndTime - this._extrapolatedWindowDuration, Math.min(extrapolatedEndTime, actualEndTime));
+    }
+    get _duration() {
+        if (!this._dash) {
+            return null;
+        }
+        return this._dash.duration();
+    }
+    constructor(options, i18n, playerError) {
+        super(options, i18n, playerError);
+        console.log("DashPlayback constructor", { options, i18n, playerError });
+        // backwards compatibility (TODO: remove on 0.3.0)
+        // this.options.playback || (this.options.playback = this.options);
+        // 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?.extrapolatedWindowNumSegments ?? 2;
+        if (this.options.playbackType) {
+            this._playbackType = this.options.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.
+        // this means the actual playable start time will increase as the
+        // start content is deleted
+        // For streams with dvr where the entire recording is kept from the
+        // beginning this should stay as 0
+        // this._playableRegionStartTime = 0;
+        // {local, remote} remote is the time in the video element that should represent 0
+        //                 local is the system time when the 'remote' measurment took place
+        // this._localStartTimeCorrelation = null;
+        // {local, remote} remote is the time in the video element that should represents the end
+        //                 local is the system time when the 'remote' measurment took place
+        // this._localEndTimeCorrelation = null;
+        // if content is removed from the beginning then this empty area should
+        // be ignored. "playableRegionDuration" excludes the empty area
+        // this._playableRegionDuration = 0;
+        // #EXT-X-PROGRAM-DATE-TIME
+        // this._programDateTime = 0;
+        // this.manifestInfo = 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;
+        // // #EXT-X-TARGETDURATION
+        // this._segmentTargetDuration = null;
+        // #EXT-X-PLAYLIST-TYPE
+        // this._playlistType = null;
+        if (this.options.hlsRecoverAttempts) {
+            this._recoverAttemptsRemaining = this.options.hlsRecoverAttempts;
+        }
+    }
+    _setup() {
+        trace(`${T} _setup`, { el: this.el });
+        const dash = DASHJS.MediaPlayer().create();
+        this._dash = dash;
+        this._dash.initialize();
+        const cfg = this.options.dash ?? {};
+        cfg.streaming = cfg.streaming || {};
+        cfg.streaming.text = cfg.streaming.text || { defaultEnabled: false };
+        this.options.dash && this._dash.updateSettings(cfg);
+        this._dash.attachView(this.el);
+        this._dash.setAutoPlay(false);
+        this._dash.attachSource(this.options.src);
+        this._dash.on(DASHJS.MediaPlayer.events.ERROR, this._onDASHJSSError);
+        this._dash.on(DASHJS.MediaPlayer.events.PLAYBACK_ERROR, this._onPlaybackError);
+        this._dash.on(DASHJS.MediaPlayer.events.STREAM_INITIALIZED, () => {
+            const bitrates = dash.getBitrateInfoListFor('video');
+            trace(`${T} STREAM_INITIALIZED`, { bitrates });
+            this._updatePlaybackType();
+            this._fillLevels(bitrates);
+            dash.on(DASHJS.MediaPlayer.events.QUALITY_CHANGE_REQUESTED, (evt) => {
+                // TODO
+                assert.ok(this._levels, 'An array of levels is required to change quality');
+                const newLevel = this._levels.find((level) => level.id === evt.newQuality); // TODO or simply this._levels[evt.newQuality]?
+                assert.ok(newLevel, 'A valid level is required to change quality');
+                this.onLevelSwitch(newLevel.level);
+            });
+        });
+        this._dash.on(DASHJS.MediaPlayer.events.METRIC_ADDED, (e) => {
+            // console.log(`${T} onMetricAdded`, e);
+            // TODO
+            // Listen for the first manifest request in order to update player UI
+            if (e.metric === 'DVRInfo') { // TODO fix typings
+                assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to get metrics');
+                const dvrInfo = this._dash.getDashMetrics().getCurrentDVRInfo('video');
+                // trace(`${T} onMetricAdded DVRInfo`, {metric: e.metric, dvrInfo});
+                if (dvrInfo) {
+                    // Extract time info
+                    this.manifestInfo = dvrInfo.manifestInfo;
+                }
+            }
+        });
+        this._dash.on(DASHJS.MediaPlayer.events.PLAYBACK_RATE_CHANGED, () => {
+            this.trigger('dash:playback-rate-changed');
+        });
+    }
+    render() {
+        this._ready();
+        return super.render();
+    }
+    _ready() {
+        this._isReadyState = true;
+        this.trigger(Events.PLAYBACK_READY, this.name);
+    }
+    // TODO
+    // _recover(evt, data, error) {
+    //   console.warn('recover', evt, data, error);
+    //   assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to recover');
+    //   // TODO figure out what's going on here
+    //   const dash = this._dash;
+    //   if (!this._recoveredDecodingError) {
+    //     this._recoveredDecodingError = true;
+    //     // dash.recoverMediaError();
+    //   } else if (!this._recoveredAudioCodecError) {
+    //     this._recoveredAudioCodecError = true;
+    //     // dash.swapAudioCodec();
+    //     // dash.recoverMediaError();
+    //   } else {
+    //     // TODO what does it have to do with hlsjs?
+    //     Log.error('hlsjs: failed to recover', { evt, data });
+    //     error.level = PlayerError.Levels.FATAL;
+    //     const formattedError = this.createError(error);
+    //     this.trigger(Events.PLAYBACK_ERROR, formattedError);
+    //     this.stop();
+    //   }
+    // }
+    // override
+    _setupSrc() {
+        console.log(`${T} _setupSrc`);
+        // this playback manages the src on the video element itself
+    }
+    _startTimeUpdateTimer() {
+        this._stopTimeUpdateTimer();
+        this._timeUpdateTimer = setInterval(() => {
+            this._onDurationChange();
+            this._onTimeUpdate();
+        }, 100);
+    }
+    _stopTimeUpdateTimer() {
+        if (this._timeUpdateTimer) {
+            clearInterval(this._timeUpdateTimer);
+        }
+    }
+    getProgramDateTime() {
+        return this._programDateTime;
+    }
+    // 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() {
+        assert.ok(this._duration !== null, 'A valid duration is required to get the 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 this._dash ? this._dash.time() : 0;
+    }
+    // the time that "0" now represents relative to when playback started
+    // for a stream with a sliding window this will increase as content is
+    // removed from the beginning
+    getStartTimeOffset() {
+        return this._startTime;
+    }
+    seekPercentage(percentage) {
+        let seekTo = this._duration;
+        if (percentage > 0) {
+            assert.ok(this._duration !== null, 'A valid duration is required to seek by percentage');
+            seekTo = this._duration * (percentage / 100);
+        }
+        assert.ok(seekTo !== null, 'A valid seek time is required');
+        this.seek(seekTo);
+    }
+    seek(time) {
+        if (time < 0) {
+            // eslint-disable-next-line max-len
+            Log.warn('Attempt to seek to a negative time. Resetting to live point. Use seekToLivePoint() to seek to the live point.');
+            time = this.getDuration();
+        }
+        this.dvrEnabled && this._updateDvr(time < this.getDuration() - 10);
+        assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to seek');
+        this._dash.seek(time);
+    }
+    seekToLivePoint() {
+        this.seek(this.getDuration());
+    }
+    _updateDvr(status) {
+        this.trigger(Events.PLAYBACK_DVR, status);
+        this.trigger(Events.PLAYBACK_STATS_ADD, { 'dvr': status });
+    }
+    _updateSettings() {
+        if (this._playbackType === Playback.VOD) {
+            this.settings.left = ['playpause', 'position', 'duration'];
+            // this.settings.left.push('playstop');
+        }
+        else if (this.dvrEnabled) {
+            this.settings.left = ['playpause'];
+        }
+        else {
+            this.settings.left = ['playstop'];
+        }
+        this.settings.seekEnabled = this.isSeekEnabled();
+        this.trigger(Events.PLAYBACK_SETTINGSUPDATE);
+    }
+    _onPlaybackError = (event) => {
+        // TODO
+    };
+    _onDASHJSSError = (event) => {
+        // TODO
+        // only report/handle errors if they are fatal
+        // hlsjs should automatically handle non fatal errors
+        this._stopTimeUpdateTimer();
+        if (event.error === 'capability' && event.event === 'mediasource') {
+            // No support for MSE
+            const formattedError = this.createError(event.error);
+            this.trigger(Events.PLAYBACK_ERROR, formattedError);
+            Log.error('The media cannot be played because it requires a feature ' +
+                'that your browser does not support.');
+        }
+        else if (event.error === 'manifestError' && (
+        // Manifest type not supported
+        (event.event.id === 'createParser') ||
+            // Codec(s) not supported
+            (event.event.id === 'codec') ||
+            // No streams available to stream
+            (event.event.id === 'nostreams') ||
+            // Error creating Stream object
+            (event.event.id === 'nostreamscomposed') ||
+            // syntax error parsing the manifest
+            (event.event.id === 'parse') ||
+            // a stream has multiplexed audio+video
+            (event.event.id === 'multiplexedrep'))) {
+            // These errors have useful error messages, so we forward it on
+            const formattedError = this.createError(event.error);
+            this.trigger(Events.PLAYBACK_ERROR, formattedError);
+            if (event.error) {
+                Log.error(event.event.message);
+            }
+        }
+        else if (event.error === 'mediasource') {
+            // This error happens when dash.js fails to allocate a SourceBuffer
+            // OR the underlying video element throws a `MediaError`.
+            // If it's a buffer allocation fail, the message states which buffer
+            // (audio/video/text) failed allocation.
+            // If it's a `MediaError`, dash.js inspects the error object for
+            // additional information to append to the error type.
+            const formattedError = this.createError(event.error);
+            this.trigger(Events.PLAYBACK_ERROR, formattedError);
+            Log.error(event.event);
+        }
+        else if (event.error === 'capability' && event.event === 'encryptedmedia') {
+            // Browser doesn't support EME
+            const formattedError = this.createError(event.error);
+            this.trigger(Events.PLAYBACK_ERROR, formattedError);
+            Log.error('The media cannot be played because it requires encryption ' +
+                'that your browser does not support.');
+        }
+        else if (event.error === 'key_session') {
+            // This block handles pretty much all errors thrown by the
+            // encryption subsystem
+            const formattedError = this.createError(event.error);
+            this.trigger(Events.PLAYBACK_ERROR, formattedError);
+            Log.error(event.event);
+        }
+        else if (event.error === 'download') {
+            const formattedError = this.createError(event.error);
+            this.trigger(Events.PLAYBACK_ERROR, formattedError);
+            Log.error('The media playback was aborted because too many consecutive ' +
+                'download errors occurred.');
+            // } else if (event.error === 'mssError') {
+            //   const formattedError = this.createError(event.error);
+            //   this.trigger(Events.PLAYBACK_ERROR, formattedError);
+            //   if (event.error) {
+            //     Log.error(event.error.message);
+            //   }
+        }
+        else {
+            // ignore the error
+            if (typeof event.error === "object") {
+                const formattedError = this.createError(event.error);
+                this.trigger(Events.PLAYBACK_ERROR, formattedError);
+                Log.error(event.error.message);
+            }
+            else {
+                Log.error(event.error);
+            }
+            return;
+        }
+        // only reset the dash player in 10ms async, so that the rest of the
+        // calling function finishes
+        setTimeout(() => {
+            assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to reset');
+            this._dash.reset();
+        }, 10);
+    };
+    _onTimeUpdate() {
+        if (this.startChangeQuality) {
+            return;
+        }
+        const update = {
+            current: this.getCurrentTime(),
+            total: this.getDuration(),
+            firstFragDateTime: this.getProgramDateTime()
+        };
+        const isSame = this._lastTimeUpdate && (update.current === this._lastTimeUpdate.current &&
+            update.total === this._lastTimeUpdate.total);
+        if (isSame) {
+            return;
+        }
+        this._lastTimeUpdate = update;
+        this.trigger(Events.PLAYBACK_TIMEUPDATE, update, this.name);
+    }
+    _onDurationChange() {
+        const duration = this.getDuration();
+        if (this._lastDuration === duration) {
+            return;
+        }
+        this._lastDuration = duration;
+        super._onDurationChange();
+    }
+    get dvrEnabled() {
+        assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to get the DVR status');
+        return this._dash?.getDVRWindowSize() >= this._minDvrSize && this.getPlaybackType() === Playback.LIVE;
+    }
+    _onProgress() {
+        if (!this._dash) {
+            return;
+        }
+        let buffer = this._dash.getDashMetrics().getCurrentBufferLevel('video');
+        if (!buffer) {
+            buffer = this._dash.getDashMetrics().getCurrentBufferLevel('audio');
+        }
+        const progress = {
+            start: this.getCurrentTime(),
+            current: this.getCurrentTime() + buffer,
+            total: this.getDuration()
+        };
+        this.trigger(Events.PLAYBACK_PROGRESS, progress, {});
+    }
+    play() {
+        trace(`${T} play`, { dash: !!this._dash });
+        if (!this._dash) {
+            this._setup();
+        }
+        super.play();
+        this._startTimeUpdateTimer();
+    }
+    pause() {
+        if (!this._dash) {
+            return;
+        }
+        super.pause();
+        if (this.dvrEnabled) {
+            this._updateDvr(true);
+        }
+    }
+    stop() {
+        if (this._dash) {
+            this._stopTimeUpdateTimer();
+            this._dash.reset();
+            super.stop();
+            this._dash = null;
+        }
+    }
+    destroy() {
+        this._stopTimeUpdateTimer();
+        if (this._dash) {
+            this._dash.off(DASHJS.MediaPlayer.events.ERROR, this._onDASHJSSError);
+            this._dash.off(DASHJS.MediaPlayer.events.PLAYBACK_ERROR, this._onPlaybackError);
+            this._dash.off(DASHJS.MediaPlayer.events.MANIFEST_LOADED, this.getDuration);
+            this._dash.reset();
+        }
+        this._dash = null;
+        return super.destroy();
+    }
+    _updatePlaybackType() {
+        assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to update the playback type');
+        this._playbackType = this._dash.isDynamic() ? Playback.LIVE : Playback.VOD;
+        trace(`${T} _updatePlaybackType`, {
+            playbackType: this._playbackType,
+        });
+    }
+    _fillLevels(levels) {
+        // trace(`${T} _fillLevels`, {levels});
+        // TOOD check that levels[i].qualityIndex === i
+        this._levels = levels.map((level) => {
+            return { id: level.qualityIndex, level: level };
+        });
+        this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this._levels);
+    }
+    // _onLevelUpdated(_: any, data) {
+    //   this._segmentTargetDuration = data.details.targetduration;
+    //   this._playlistType = data.details.type || null;
+    //   let startTimeChanged = false;
+    //   let durationChanged = false;
+    //   const fragments = data.details.fragments;
+    //   const previousPlayableRegionStartTime = this._playableRegionStartTime;
+    //   const previousPlayableRegionDuration = this._playableRegionDuration;
+    //   if (fragments.length === 0) {
+    //     return;
+    //   }
+    //   // #EXT-X-PROGRAM-DATE-TIME
+    //   if (fragments[0].rawProgramDateTime) {
+    //     this._programDateTime = fragments[0].rawProgramDateTime;
+    //   }
+    //   if (this._playableRegionStartTime !== fragments[0].start) {
+    //     startTimeChanged = true;
+    //     this._playableRegionStartTime = fragments[0].start;
+    //   }
+    //   if (startTimeChanged) {
+    //     if (!this._localStartTimeCorrelation) {
+    //       // set the correlation to map to middle of the extrapolation window
+    //       this._localStartTimeCorrelation = {
+    //         local: this._now,
+    //         remote: (fragments[0].start + (this._extrapolatedWindowDuration / 2)) * 1000
+    //       };
+    //     } else {
+    //       // check if the correlation still works
+    //       const corr = this._localStartTimeCorrelation;
+    //       const timePassed = this._now - corr.local;
+    //       // this should point to a time within the extrapolation window
+    //       const startTime = (corr.remote + timePassed) / 1000;
+    //       if (startTime < fragments[0].start) {
+    //         // our start time is now earlier than the first chunk
+    //         // (maybe the chunk was removed early)
+    //         // reset correlation so that it sits at the beginning of the first available chunk
+    //         this._localStartTimeCorrelation = {
+    //           local: this._now,
+    //           remote: fragments[0].start * 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
+    //         };
+    //       }
+    //     }
+    //   }
+    //   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 || {};
+    //     // eslint-disable-next-line no-undef
+    //     const liveSyncDurationCount = hlsjsConfig.liveSyncDurationCount || HLSJS.DefaultConfig.liveSyncDurationCount;
+    //     const hiddenAreaDuration = fragmentTargetDuration * liveSyncDurationCount;
+    //     if (hiddenAreaDuration <= newDuration) {
+    //       newDuration -= hiddenAreaDuration;
+    //       this._durationExcludesAfterLiveSyncPoint = true;
+    //     } else {
+    //       this._durationExcludesAfterLiveSyncPoint = false;
+    //     }
+    //   }
+    //   if (newDuration !== this._playableRegionDuration) {
+    //     durationChanged = true;
+    //     this._playableRegionDuration = newDuration;
+    //   }
+    //   // Note the end time is not the playableRegionDuration
+    //   // The end time will always increase even if content is removed from the beginning
+    //   const endTime = fragments[0].start + newDuration;
+    //   const previousEndTime = previousPlayableRegionStartTime + previousPlayableRegionDuration;
+    //   const endTimeChanged = endTime !== previousEndTime;
+    //   if (endTimeChanged) {
+    //     if (!this._localEndTimeCorrelation) {
+    //       // set the correlation to map to the end
+    //       this._localEndTimeCorrelation = {
+    //         local: this._now,
+    //         remote: endTime * 1000
+    //       };
+    //     } else {
+    //       // check if the correlation still works
+    //       const corr = this._localEndTimeCorrelation;
+    //       const timePassed = this._now - corr.local;
+    //       // this should point to a time within the extrapolation window from the end
+    //       const extrapolatedEndTime = (corr.remote + timePassed) / 1000;
+    //       if (extrapolatedEndTime > endTime) {
+    //         this._localEndTimeCorrelation = {
+    //           local: this._now,
+    //           remote: endTime * 1000
+    //         };
+    //       } else if (extrapolatedEndTime < endTime - this._extrapolatedWindowDuration) {
+    //         // our extrapolated end time is now earlier than the extrapolation window from the actual end time
+    //         // (maybe a chunk became available early)
+    //         // reset correlation so that it sits at the beginning of the extrapolation window from the end time
+    //         this._localEndTimeCorrelation = {
+    //           local: this._now,
+    //           remote: (endTime - this._extrapolatedWindowDuration) * 1000
+    //         };
+    //       } else if (extrapolatedEndTime > previousEndTime) {
+    //         // end time was past the old end time (so would have been capped)
+    //         // set the correlation so that it resumes from the time it was at at the end of the old window
+    //         this._localEndTimeCorrelation = {
+    //           local: this._now,
+    //           remote: previousEndTime * 1000
+    //         };
+    //       }
+    //     }
+    //   }
+    //   // now that the values have been updated call any methods that use on them so they get the updated values
+    //   // immediately
+    //   durationChanged && this._onDurationChange();
+    //   startTimeChanged && this._onProgress();
+    // }
+    // _onFragmentLoaded(evt, data) {
+    //   this.trigger(Events.PLAYBACK_FRAGMENT_LOADED, data);
+    // }
+    onLevelSwitch(currentLevel) {
+        trace(`${T} onLevelSwitch`, { currentLevel });
+        this.trigger(Events.PLAYBACK_BITRATE, {
+            height: currentLevel.height,
+            width: currentLevel.width,
+            bitrate: currentLevel.bitrate,
+            level: currentLevel.qualityIndex
+        });
+    }
+    getPlaybackType() {
+        return this._playbackType;
+    }
+    isSeekEnabled() {
+        return (this._playbackType === Playback.VOD || this.dvrEnabled);
+    }
+}
+DashPlayback.canPlay = function (resource, mimeType) {
+    console.log(`${T} canPlay resource:%s mimeType:%s`, resource, mimeType);
+    const resourceParts = resource.split('?')[0].match(/.*\.(.*)$/) || [];
+    const isDash = ((resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'mpd') ||
+        mimeType === 'application/dash+xml' || mimeType === 'video/mp4');
+    const ctor = window.MediaSource || ('WebKitMediaSource' in window ? window.WebKitMediaSource : undefined);
+    const isSupportByBrowser = typeof ctor === 'function';
+    console.log(`${T} canPlay isSupportByBrowser:%s isDash:%s`, isSupportByBrowser, isDash);
+    return !!(isSupportByBrowser && isDash);
+};

package/lib/plugins/disable-controls/DisableControls.d.ts

@@ -0,0 +1,15 @@
+import { UICorePlugin } from '@clappr/core';
+export default class DisableControls extends UICorePlugin {
+    get name(): string;
+    get container(): any;
+    get supportedVersion(): {
+        min: string;
+    };
+    bindEvents(): void;
+    unbindEvents(): void;
+    private setDisableStyles;
+    private onCoreReady;
+    private enableControls;
+    private disableAllControls;
+}
+//# sourceMappingURL=DisableControls.d.ts.map

package/lib/plugins/disable-controls/DisableControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisableControls.d.ts","sourceRoot":"","sources":["../../../src/plugins/disable-controls/DisableControls.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,MAAM,cAAc,CAAC;AAMpD,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,YAAY;IACvD,IAAI,IAAI,WAEP;IAED,IAAI,SAAS,QAEZ;IAED,IAAI,gBAAgB;;MAEnB;IAED,UAAU;IAcV,YAAY;IAqBZ,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,kBAAkB;CAQ3B"}