rx-player 4.0.0-beta.0 → 4.0.0-beta.2

package/dist/_esm5.processed/core/adaptive/buffer_based_chooser.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { IRepresentationMaintainabilityScore } from "./utils/representation_score_calculator";
 /**
  * Choose a bitrate based on the currently available buffer.
  *
@@ -24,11 +25,27 @@
  * "maintanable" or not.
  * If so, we may switch to a better quality, or conversely to a worse quality.
  *
+ * It also rely on mechanisms to avoid fluctuating too much between qualities.
+ *
  * @class BufferBasedChooser
  */
 export default class BufferBasedChooser {
     private _levelsMap;
     private _bitrates;
+    /**
+     * Laast timestamp, in terms of `performance.now`, at which the current
+     * quality was seen as too high by this algorithm.
+     * Begins at `undefined`.
+     */
+    private _lastUnsuitableQualityTimestamp;
+    /**
+     * After lowering in quality, we forbid raising during a set amount of time.
+     * This amount is adaptive may continue to raise if it seems that quality
+     * is switching too much between low and high qualities.
+     *
+     * `_blockRaiseDelay` represents this time in milliseconds.
+     */
+    private _blockRaiseDelay;
     /**
      * @param {Array.<number>} bitrates
      */
@@ -50,7 +67,7 @@ export interface IBufferBasedChooserPlaybackObservation {
     /** The bitrate of the currently downloaded segments, in bps. */
     currentBitrate?: number | undefined;
     /** The "maintainability score" of the currently downloaded segments. */
-    currentScore?: number | undefined;
+    currentScore?: IRepresentationMaintainabilityScore | undefined;
     /** Playback rate wanted (e.g. `1` is regular playback, `2` is double speed etc.). */
     speed: number;
 }

package/dist/_esm5.processed/core/adaptive/buffer_based_chooser.js

@@ -16,6 +16,45 @@
 import log from "../../log";
 import arrayFindIndex from "../../utils/array_find_index";
 import getBufferLevels from "./utils/get_buffer_levels";
+/**
+ * Minimum amount of time, in milliseconds, during which we are blocked from
+ * raising in quality after it had been considered as too high.
+ */
+var MINIMUM_BLOCK_RAISE_DELAY = 6000;
+/**
+ * Maximum amount of time, in milliseconds, during which we are blocked from
+ * raising in quality after it had been considered as too high.
+ */
+var MAXIMUM_BLOCK_RAISE_DELAY = 15000;
+/**
+ * Amount of time, in milliseconds, with which the blocking time in raising
+ * the quality will be incremented if the current quality estimate is seen
+ * as too unstable.
+ */
+var RAISE_BLOCKING_DELAY_INCREMENT = 3000;
+/**
+ * Amount of time, in milliseconds, with which the blocking time in raising
+ * the quality will be dcremented if the current quality estimate is seen
+ * as relatively stable, until `MINIMUM_BLOCK_RAISE_DELAY` is reached.
+ */
+var RAISE_BLOCKING_DELAY_DECREMENT = 1000;
+/**
+ * Amount of time, in milliseconds, after the "raise blocking delay" currently
+ * in place (during which it is forbidden to raise up in quality), during which
+ * we might want to raise the "raise blocking delay" if the last chosen quality
+ * seems unsuitable.
+ *
+ * For example, let's consider that the current raise blocking delay is at
+ * `4000`, or 4 seconds, and that this `STABILITY_CHECK_DELAY` is at `5000`, or
+ * 5 seconds.
+ * Here it means that if the estimated quality is found to be unsuitable less
+ * than 4+5 = 9 seconds after it last was, we will increment the raise blocking
+ * delay by `RAISE_BLOCKING_DELAY_INCREMENT` (unless `MAXIMUM_BLOCK_RAISE_DELAY`
+ * is reached).
+ * Else, if takes more than 9 seconds, the raise blocking delay might be
+ * decremented.
+ */
+var STABILITY_CHECK_DELAY = 9000;
 /**
  * Choose a bitrate based on the currently available buffer.
  *
@@ -27,6 +66,8 @@ import getBufferLevels from "./utils/get_buffer_levels";
  * "maintanable" or not.
  * If so, we may switch to a better quality, or conversely to a worse quality.
  *
+ * It also rely on mechanisms to avoid fluctuating too much between qualities.
+ *
  * @class BufferBasedChooser
  */
 var BufferBasedChooser = /** @class */ (function () {
@@ -34,8 +75,13 @@ var BufferBasedChooser = /** @class */ (function () {
      * @param {Array.<number>} bitrates
      */
     function BufferBasedChooser(bitrates) {
-        this._levelsMap = getBufferLevels(bitrates);
+        this._levelsMap = getBufferLevels(bitrates).map(function (bl) {
+            return bl + 4; // Add some buffer security as it will be used conjointly with
+            // other algorithms anyway
+        });
         this._bitrates = bitrates;
+        this._lastUnsuitableQualityTimestamp = undefined;
+        this._blockRaiseDelay = MINIMUM_BLOCK_RAISE_DELAY;
         log.debug("ABR: Steps for buffer based chooser.", this._levelsMap.map(function (l, i) { return "bufferLevel: ".concat(l, ", bitrate: ").concat(bitrates[i]); })
             .join(" ,"));
     }
@@ -50,40 +96,75 @@ var BufferBasedChooser = /** @class */ (function () {
         if (currentBitrate == null) {
             return bitrates[0];
         }
-        var currentBitrateIndex = arrayFindIndex(bitrates, function (b) { return b === currentBitrate; });
+        var currentBitrateIndex = -1;
+        for (var i = 0; i < bitrates.length; i++) {
+            // There could be bitrate duplicates. Only take the last one to simplify
+            var bitrate = bitrates[i];
+            if (bitrate === currentBitrate) {
+                currentBitrateIndex = i;
+            }
+            else if (bitrate > currentBitrate) {
+                break;
+            }
+        }
         if (currentBitrateIndex < 0 || bitrates.length !== bufferLevels.length) {
             log.error("ABR: Current Bitrate not found in the calculated levels");
             return bitrates[0];
         }
         var scaledScore;
-        if (currentScore != null) {
-            scaledScore = speed === 0 ? currentScore : (currentScore / speed);
+        if (currentScore !== undefined) {
+            scaledScore = speed === 0 ? currentScore.score : (currentScore.score / speed);
         }
-        if (scaledScore != null && scaledScore > 1) {
-            var currentBufferLevel_1 = bufferLevels[currentBitrateIndex];
-            var nextIndex = (function () {
-                for (var i = currentBitrateIndex + 1; i < bufferLevels.length; i++) {
-                    if (bufferLevels[i] > currentBufferLevel_1) {
-                        return i;
-                    }
-                }
-            })();
-            if (nextIndex != null) {
-                var nextBufferLevel = bufferLevels[nextIndex];
-                if (bufferGap >= nextBufferLevel) {
-                    return bitrates[nextIndex];
+        var actualBufferGap = isFinite(bufferGap) ?
+            bufferGap :
+            0;
+        var now = performance.now();
+        if (actualBufferGap < bufferLevels[currentBitrateIndex] ||
+            (scaledScore !== undefined && scaledScore < 1 &&
+                (currentScore === null || currentScore === void 0 ? void 0 : currentScore.confidenceLevel) === 1 /* ScoreConfidenceLevel.HIGH */)) {
+            var timeSincePrev = this._lastUnsuitableQualityTimestamp === undefined ?
+                -1 :
+                now - this._lastUnsuitableQualityTimestamp;
+            if (timeSincePrev < this._blockRaiseDelay + STABILITY_CHECK_DELAY) {
+                var newDelay = this._blockRaiseDelay + RAISE_BLOCKING_DELAY_INCREMENT;
+                this._blockRaiseDelay = Math.min(newDelay, MAXIMUM_BLOCK_RAISE_DELAY);
+                log.debug("ABR: Incrementing blocking raise in BufferBasedChooser due " +
+                    "to unstable quality", this._blockRaiseDelay);
+            }
+            else {
+                var newDelay = this._blockRaiseDelay - RAISE_BLOCKING_DELAY_DECREMENT;
+                this._blockRaiseDelay = Math.max(MINIMUM_BLOCK_RAISE_DELAY, newDelay);
+                log.debug("ABR: Lowering quality in BufferBasedChooser", this._blockRaiseDelay);
+            }
+            this._lastUnsuitableQualityTimestamp = now;
+            // Security if multiple bitrates are equal, we now take the first one
+            var baseIndex = arrayFindIndex(bitrates, function (b) { return b === currentBitrate; });
+            for (var i = baseIndex - 1; i >= 0; i--) {
+                if (actualBufferGap >= bufferLevels[i]) {
+                    return bitrates[i];
                 }
             }
+            return bitrates[0];
         }
-        if (scaledScore == null || scaledScore < 1.15) {
-            var currentBufferLevel = bufferLevels[currentBitrateIndex];
-            if (bufferGap < currentBufferLevel) {
-                for (var i = currentBitrateIndex - 1; i >= 0; i--) {
-                    if (bitrates[i] < currentBitrate) {
-                        return bitrates[i];
-                    }
+        if ((this._lastUnsuitableQualityTimestamp !== undefined &&
+            now - this._lastUnsuitableQualityTimestamp < this._blockRaiseDelay) ||
+            scaledScore === undefined || scaledScore < 1.15 ||
+            (currentScore === null || currentScore === void 0 ? void 0 : currentScore.confidenceLevel) !== 1 /* ScoreConfidenceLevel.HIGH */) {
+            return currentBitrate;
+        }
+        var currentBufferLevel = bufferLevels[currentBitrateIndex];
+        var nextIndex = (function () {
+            for (var i = currentBitrateIndex + 1; i < bufferLevels.length; i++) {
+                if (bufferLevels[i] > currentBufferLevel) {
+                    return i;
                 }
-                return currentBitrate;
+            }
+        })();
+        if (nextIndex !== undefined) {
+            var nextBufferLevel = bufferLevels[nextIndex];
+            if (bufferGap >= nextBufferLevel) {
+                log.debug("ABR: Raising quality in BufferBasedChooser", bitrates[nextIndex]);
+                return bitrates[nextIndex];
             }
         }
         return currentBitrate;

package/dist/_esm5.processed/core/adaptive/guess_based_chooser.js

@@ -127,10 +127,10 @@ var GuessBasedChooser = /** @class */ (function () {
      * @returns {boolean}
      */
     GuessBasedChooser.prototype._canGuessHigher = function (bufferGap, speed, _a) {
-        var score = _a[0], scoreConfidenceLevel = _a[1];
+        var score = _a.score, confidenceLevel = _a.confidenceLevel;
         return isFinite(bufferGap) && bufferGap >= 2.5 &&
             performance.now() > this._blockGuessesUntil &&
-            scoreConfidenceLevel === 1 /* ScoreConfidenceLevel.HIGH */ &&
+            confidenceLevel === 1 /* ScoreConfidenceLevel.HIGH */ &&
             score / speed > 1.01;
     };
     /**
@@ -143,10 +143,10 @@ var GuessBasedChooser = /** @class */ (function () {
      * @returns {boolean}
      */
     GuessBasedChooser.prototype._shouldStopGuess = function (lastGuess, scoreData, bufferGap, requests) {
-        if (scoreData !== undefined && scoreData[0] < 1.01) {
+        if (scoreData !== undefined && scoreData.score < 1.01) {
             return true;
         }
-        else if ((scoreData === undefined || scoreData[0] < 1.2) && bufferGap < 0.6) {
+        else if ((scoreData === undefined || scoreData.score < 1.2) && bufferGap < 0.6) {
             return true;
         }
         var guessedRepresentationRequests = requests.filter(function (req) {
@@ -175,8 +175,8 @@ var GuessBasedChooser = /** @class */ (function () {
     };
     GuessBasedChooser.prototype._isLastGuessValidated = function (lastGuess, incomingBestBitrate, scoreData) {
         if (scoreData !== undefined &&
-            scoreData[1] === 1 /* ScoreConfidenceLevel.HIGH */ &&
-            scoreData[0] > 1.5) {
+            scoreData.confidenceLevel === 1 /* ScoreConfidenceLevel.HIGH */ &&
+            scoreData.score > 1.5) {
             return true;
         }
         return incomingBestBitrate >= lastGuess.bitrate &&

package/dist/_esm5.processed/core/adaptive/network_analyzer.js

@@ -126,6 +126,12 @@ function estimateStarvationModeBitrate(pendingRequests, playbackInfo, currentRep
     }
     var concernedRequest = concernedRequests[0];
     var now = performance.now();
+    var minimumRequestTime = concernedRequest.content.segment.duration * 1.5;
+    minimumRequestTime = Math.min(minimumRequestTime, 3000);
+    minimumRequestTime = Math.max(minimumRequestTime, 12000);
+    if (now - concernedRequest.requestTimestamp < minimumRequestTime) {
+        return undefined;
+    }
     var lastProgressEvent = concernedRequest.progress.length > 0 ?
         concernedRequest.progress[concernedRequest.progress.length - 1] :
         undefined;
@@ -138,7 +144,7 @@ function estimateStarvationModeBitrate(pendingRequests, playbackInfo, currentRep
             // Calculate estimated time spent rebuffering if we continue doing that request.
             var expectedRebufferingTime = remainingTime -
                 (realBufferGap / speed);
-            if (expectedRebufferingTime > 2000) {
+            if (expectedRebufferingTime > 2500) {
                 return bandwidthEstimate;
             }
         }
@@ -320,12 +326,9 @@ var NetworkAnalyzer = /** @class */ (function () {
         if (currentRepresentation === null) {
             return true;
         }
-        else if (bitrate === currentRepresentation.bitrate) {
+        else if (bitrate >= currentRepresentation.bitrate) {
             return false;
         }
-        else if (bitrate > currentRepresentation.bitrate) {
-            return !this._inStarvationMode;
-        }
         return shouldDirectlySwitchToLowBitrate(playbackInfo, currentRequests, this._lowLatencyMode);
     };
     return NetworkAnalyzer;

package/dist/_esm5.processed/core/adaptive/utils/representation_score_calculator.d.ts

@@ -14,6 +14,24 @@
  * limitations under the License.
  */
 import { Representation } from "../../../manifest";
+/**
+ * Object representing a maintainability score as calculated by the
+ * `RepresentationScoreCalculator`.
+ */
+export interface IRepresentationMaintainabilityScore {
+    /**
+     * Weighted mean of dividing the loaded segment's duration by the time to make
+     * their request.
+     */
+    score: number;
+    /**
+     * The confidence we have on the calculated `score` in reflecting a useful
+     * maintainability hint for the concerned Representation.
+     *
+     * Basically, the more segments have been loaded, the higher the confidence.
+     */
+    confidenceLevel: ScoreConfidenceLevel;
+}
 /**
  * Calculate the "maintainability score" of a given Representation:
  *   - A score higher than 1 means that the Representation can theorically
@@ -62,7 +80,7 @@ export default class RepresentationScoreCalculator {
      * @param {Representation} representation
      * @returns {number|undefined}
      */
-    getEstimate(representation: Representation): [number, ScoreConfidenceLevel] | undefined;
+    getEstimate(representation: Representation): IRepresentationMaintainabilityScore | undefined;
     /**
      * Returns last Representation which had reached a score superior to 1.
      * This Representation is the last known one which could be maintained.

package/dist/_esm5.processed/core/adaptive/utils/representation_score_calculator.js

@@ -96,7 +96,7 @@ var RepresentationScoreCalculator = /** @class */ (function () {
         var confidenceLevel = loadedSegments >= 5 &&
             loadedDuration >= 10 ? 1 /* ScoreConfidenceLevel.HIGH */ :
             0 /* ScoreConfidenceLevel.LOW */;
-        return [estimate, confidenceLevel];
+        return { score: estimate, confidenceLevel: confidenceLevel };
     };
     /**
      * Returns last Representation which had reached a score superior to 1.

package/dist/_esm5.processed/core/api/debug/buffer_graph.d.ts

@@ -0,0 +1,28 @@
+import { IBufferedChunk } from "../../segment_buffers";
+export interface ISegmentBufferGrapUpdateData {
+    currentTime: number;
+    inventory: IBufferedChunk[];
+    width: number;
+    height: number;
+    minimumPosition: number | undefined;
+    maximumPosition: number | undefined;
+}
+export default class SegmentBufferGraph {
+    /** Link buffered Representation to their corresponding color. */
+    private readonly _colorMap;
+    /** Current amount of colors chosen to represent the various Representation. */
+    private _currNbColors;
+    /** Canvas that will contain the buffer graph itself. */
+    private readonly _canvasElt;
+    private readonly _canvasCtxt;
+    constructor(canvasElt: HTMLCanvasElement);
+    clear(): void;
+    update(data: ISegmentBufferGrapUpdateData): void;
+    /**
+     * Paint a given range in the canvas
+     * @param {Object} rangeScaled - Buffered segment information with added
+     * "scaling" information to know where it fits in the canvas.
+     */
+    private _paintRange;
+    private _getColorForRepresentation;
+}

package/dist/_esm5.processed/core/api/debug/buffer_graph.js

@@ -0,0 +1,175 @@
+var BUFFER_WIDTH_IN_SECONDS = 10000;
+var COLORS = [
+    "#2ab7ca",
+    "#fed766",
+    "#4dd248",
+    "#a22c28",
+    "#556b2f",
+    "#add8e6",
+    "#90ee90",
+    "#444444",
+    "#40bfc1",
+    "#57557e",
+    "#fbe555",
+];
+var SegmentBufferGraph = /** @class */ (function () {
+    function SegmentBufferGraph(canvasElt) {
+        this._colorMap = new WeakMap();
+        this._currNbColors = 0;
+        this._canvasElt = canvasElt;
+        this._canvasCtxt = this._canvasElt.getContext("2d");
+        this.clear();
+    }
+    SegmentBufferGraph.prototype.clear = function () {
+        if (this._canvasCtxt !== null) {
+            this._canvasCtxt.clearRect(0, 0, this._canvasElt.width, this._canvasElt.height);
+        }
+    };
+    SegmentBufferGraph.prototype.update = function (data) {
+        var _a, _b, _c, _d;
+        if (this._canvasCtxt === null) {
+            return;
+        }
+        var inventory = data.inventory, currentTime = data.currentTime, width = data.width, height = data.height;
+        this._canvasElt.style.width = "".concat(width, "px");
+        this._canvasElt.style.height = "".concat(height, "px");
+        this._canvasElt.width = width;
+        this._canvasElt.height = height;
+        this.clear();
+        var minimumPoint;
+        if (data.minimumPosition !== undefined) {
+            if (inventory.length > 0) {
+                minimumPoint = Math.min(data.minimumPosition, inventory[0].start);
+            }
+            else {
+                minimumPoint = data.minimumPosition;
+            }
+        }
+        else {
+            minimumPoint = (_b = (_a = inventory[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0;
+        }
+        var maximumPoint;
+        if (data.maximumPosition !== undefined) {
+            if (inventory.length > 0) {
+                maximumPoint = Math.max(data.maximumPosition, inventory[inventory.length - 1].end);
+            }
+            else {
+                maximumPoint = data.maximumPosition;
+            }
+        }
+        else {
+            maximumPoint = (_d = (_c = inventory[inventory.length - 1]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 1000;
+        }
+        minimumPoint = Math.min(currentTime, minimumPoint);
+        maximumPoint = Math.max(currentTime, maximumPoint);
+        var minimumPosition;
+        var maximumPosition;
+        if (maximumPoint - minimumPoint > BUFFER_WIDTH_IN_SECONDS) {
+            if (currentTime === undefined) {
+                minimumPosition = minimumPoint;
+                maximumPosition = maximumPoint;
+            }
+            else if (maximumPoint - currentTime < BUFFER_WIDTH_IN_SECONDS / 2) {
+                maximumPosition = maximumPoint;
+                minimumPosition = maximumPoint - BUFFER_WIDTH_IN_SECONDS;
+            }
+            else if (currentTime - minimumPoint < BUFFER_WIDTH_IN_SECONDS / 2) {
+                minimumPosition = minimumPoint;
+                maximumPosition = minimumPoint + BUFFER_WIDTH_IN_SECONDS;
+            }
+            else {
+                minimumPosition = currentTime - BUFFER_WIDTH_IN_SECONDS / 2;
+                maximumPosition = currentTime + BUFFER_WIDTH_IN_SECONDS / 2;
+            }
+        }
+        else {
+            minimumPosition = minimumPoint;
+            maximumPosition = maximumPoint;
+        }
+        if (minimumPosition >= maximumPosition) {
+            this.clear();
+            return;
+        }
+        var currentRangesScaled = scaleSegments(inventory, minimumPosition, maximumPosition);
+        for (var i = 0; i < currentRangesScaled.length; i++) {
+            this._paintRange(currentRangesScaled[i], width, height);
+        }
+        if (currentTime !== undefined) {
+            paintCurrentPosition(currentTime, minimumPosition, maximumPosition, this._canvasCtxt, width, height);
+        }
+    };
+    /**
+     * Paint a given range in the canvas
+     * @param {Object} rangeScaled - Buffered segment information with added
+     * "scaling" information to know where it fits in the canvas.
+     */
+    SegmentBufferGraph.prototype._paintRange = function (rangeScaled, width, height) {
+        if (this._canvasCtxt === null) {
+            return;
+        }
+        var startX = rangeScaled.scaledStart * width;
+        var endX = rangeScaled.scaledEnd * width;
+        this._canvasCtxt.fillStyle = this._getColorForRepresentation(rangeScaled.info.infos.representation);
+        this._canvasCtxt.fillRect(Math.ceil(startX), 0, Math.ceil(endX - startX), height);
+    };
+    SegmentBufferGraph.prototype._getColorForRepresentation = function (representation) {
+        var color = this._colorMap.get(representation);
+        if (color !== undefined) {
+            return color;
+        }
+        var newColor = COLORS[this._currNbColors % COLORS.length];
+        this._currNbColors++;
+        this._colorMap.set(representation, newColor);
+        return newColor;
+    };
+    return SegmentBufferGraph;
+}());
+export default SegmentBufferGraph;
+/**
+ * Represent the current position in the canvas.
+ * @param {number|undefined} position - The current position
+ * @param {number} minimumPosition - minimum possible position represented in
+ * the canvas.
+ * @param {number} maximumPosition - maximum possible position represented in
+ * the canvas.
+ * @param {Object} canvasCtx - The canvas' 2D context
+ */
+function paintCurrentPosition(position, minimumPosition, maximumPosition, canvasCtx, width, height) {
+    if (typeof position === "number" &&
+        position >= minimumPosition &&
+        position < maximumPosition) {
+        var lengthCanvas = maximumPosition - minimumPosition;
+        canvasCtx.fillStyle = "#FF0000";
+        canvasCtx.fillRect(Math.ceil((position - minimumPosition) /
+            lengthCanvas * width) - 1, 5, 5, height);
+    }
+}
+/**
+ * Scale given bufferedData in terms of percentage between the minimum and
+ * maximum position. Filter out ranges which are not part of it.
+ * @param {Array.<Object>} bufferedData
+ * @param {number} minimumPosition
+ * @param {number} maximumPosition
+ * @returns {Array.<Object>}
+ */
+function scaleSegments(bufferedData, minimumPosition, maximumPosition) {
+    var scaledSegments = [];
+    var wholeDuration = maximumPosition - minimumPosition;
+    for (var i = 0; i < bufferedData.length; i++) {
+        var info = bufferedData[i];
+        var start = info.bufferedStart === undefined ?
+            info.start :
+            info.bufferedStart;
+        var end = info.bufferedEnd === undefined ?
+            info.end :
+            info.bufferedEnd;
+        if (end > minimumPosition && start < maximumPosition) {
+            var startPoint = Math.max(start - minimumPosition, 0);
+            var endPoint = Math.min(end - minimumPosition, maximumPosition);
+            var scaledStart = startPoint / wholeDuration;
+            var scaledEnd = endPoint / wholeDuration;
+            scaledSegments.push({ scaledStart: scaledStart, scaledEnd: scaledEnd, info: info });
+        }
+    }
+    return scaledSegments;
+}

package/dist/_esm5.processed/core/api/debug/buffer_size_graph.d.ts

@@ -0,0 +1,10 @@
+export default class BufferSizeGraph {
+    private _history;
+    /** Canvas that will contain the buffer size graph itself. */
+    private readonly _canvasElt;
+    private readonly _canvasCtxt;
+    constructor(canvasElt: HTMLCanvasElement);
+    pushBufferSize(bufferSize: number): void;
+    clear(): void;
+    reRender(width: number, height: number): void;
+}

package/dist/_esm5.processed/core/api/debug/buffer_size_graph.js

@@ -0,0 +1,104 @@
+/**
+ * Maximum history of the buffer size that will be displayed, in milliseconds.
+ * For example, a value of `3000` indicates that we will just show at most the
+ * buffer size evolution during the last 3 seconds.
+ */
+var TIME_SAMPLES_MS = 30000;
+/**
+ * At minimum, that value will be taken in the chart as a maximum buffer size,
+ * in seconds.
+ * If samples go higher than this size, the chart will adapt automatically to
+ * a higher scale.
+ * However if values go below that value, the chart won't scale down more than
+ * this.
+ */
+var MINIMUM_MAX_BUFFER_SIZE = 20;
+var BufferSizeGraph = /** @class */ (function () {
+    function BufferSizeGraph(canvasElt) {
+        this._canvasElt = canvasElt;
+        this._canvasCtxt = this._canvasElt.getContext("2d");
+        this._history = [];
+    }
+    BufferSizeGraph.prototype.pushBufferSize = function (bufferSize) {
+        var now = performance.now();
+        this._history.push({ timestamp: now, bufferSize: bufferSize });
+        if (this._history.length > 0) {
+            var minimumTime = now - TIME_SAMPLES_MS;
+            var i = void 0;
+            for (i = this._history.length - 1; i >= 1; i--) {
+                if (this._history[i].timestamp <= minimumTime) {
+                    break;
+                }
+            }
+            this._history = this._history.slice(i);
+        }
+        else {
+            this._history = [];
+        }
+    };
+    BufferSizeGraph.prototype.clear = function () {
+        if (this._canvasCtxt !== null) {
+            this._canvasCtxt.clearRect(0, 0, this._canvasElt.width, this._canvasElt.height);
+        }
+    };
+    BufferSizeGraph.prototype.reRender = function (width, height) {
+        this._canvasElt.style.width = "".concat(width, "px");
+        this._canvasElt.style.height = "".concat(height, "px");
+        this._canvasElt.width = width;
+        this._canvasElt.height = height;
+        this.clear();
+        var history = this._history;
+        var canvasCtx = this._canvasCtxt;
+        if (history.length === 0) {
+            return;
+        }
+        var currentMaxSize = getNewMaxBufferSize();
+        var minDate = history[0].timestamp;
+        var gridHeight = height / currentMaxSize;
+        var gridWidth = width / TIME_SAMPLES_MS;
+        drawData();
+        /**
+         * Get more appropriate maximum buffer size to put on top of the graph
+         * according to current history.
+         */
+        function getNewMaxBufferSize() {
+            var maxPoint = Math.max.apply(Math, history.map(function (d) { return d.bufferSize; }));
+            return Math.max(maxPoint + 5, MINIMUM_MAX_BUFFER_SIZE);
+        }
+        /**
+         * Draw all data contained in `history` in the canvas given.
+         */
+        function drawData() {
+            if (canvasCtx === null) {
+                return;
+            }
+            canvasCtx.beginPath();
+            canvasCtx.fillStyle = "rgb(200, 100, 200)";
+            for (var i = 1; i < history.length; i++) {
+                var diff = dateToX(history[i].timestamp) -
+                    dateToX(history[i - 1].timestamp);
+                var y = height - bufferValueToHeight(history[i].bufferSize);
+                canvasCtx.fillRect(dateToX(history[i - 1].timestamp), y, diff, height);
+            }
+            canvasCtx.stroke();
+        }
+        /**
+         * Convert a value of a given data point, to a u coordinate in the canvas.
+         * @param {number} bufferVal - Value to convert
+         * @returns {number} - y coordinate
+         */
+        function bufferValueToHeight(bufferVal) {
+            return height - (currentMaxSize - bufferVal) * gridHeight;
+        }
+        /**
+         * Convert a date of a given data point, to a x coordinate in the canvas.
+         * @param {number} date - Date to convert, in milliseconds
+         * @returns {number} - x coordinate
+         */
+        function dateToX(date) {
+            return (date - minDate) * gridWidth;
+        }
+    };
+    return BufferSizeGraph;
+}());
+export default BufferSizeGraph;

package/dist/_esm5.processed/core/api/debug/constants.d.ts

@@ -0,0 +1,2 @@
+/** Interval at which the various debug metrics will be refreshed. */
+export declare const DEFAULT_REFRESH_INTERVAL = 1000;

package/dist/_esm5.processed/core/api/debug/constants.js

@@ -0,0 +1,2 @@
+/** Interval at which the various debug metrics will be refreshed. */
+export var DEFAULT_REFRESH_INTERVAL = 1000;

package/dist/_esm5.processed/core/api/debug/index.d.ts

@@ -0,0 +1,2 @@
+import renderDebugElement from "./render";
+export default renderDebugElement;

package/dist/_esm5.processed/core/api/debug/index.js

@@ -0,0 +1,2 @@
+import renderDebugElement from "./render";
+export default renderDebugElement;