rx-player 4.5.0-dev.2026012301 → 4.5.0-dev.2026012302

package/dist/commonjs/main_thread/api/debug/buffer_size_graph.js

@@ -0,0 +1,131 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var monotonic_timestamp_1 = require("../../../utils/monotonic_timestamp");
+/**
+ * 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 = (0, monotonic_timestamp_1.default)();
+        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, __spreadArray([], __read(history.map(function (d) { return d.bufferSize; })), false));
+            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;
+}());
+exports.default = BufferSizeGraph;

package/dist/commonjs/main_thread/api/debug/constants.d.ts

@@ -0,0 +1,3 @@
+/** Interval at which the various debug metrics will be refreshed. */
+export declare const DEFAULT_REFRESH_INTERVAL = 1000;
+//# sourceMappingURL=constants.d.ts.map

package/dist/commonjs/main_thread/api/debug/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/main_thread/api/debug/constants.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,eAAO,MAAM,wBAAwB,OAAO,CAAC"}

package/dist/commonjs/main_thread/api/debug/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_REFRESH_INTERVAL = void 0;
+/** Interval at which the various debug metrics will be refreshed. */
+exports.DEFAULT_REFRESH_INTERVAL = 1000;

package/dist/commonjs/main_thread/api/debug/index.d.ts

@@ -0,0 +1,3 @@
+import renderDebugElement from "./render";
+export default renderDebugElement;
+//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/main_thread/api/debug/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/main_thread/api/debug/index.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,UAAU,CAAC;AAE1C,eAAe,kBAAkB,CAAC"}

package/dist/commonjs/main_thread/api/debug/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var render_1 = require("./render");
+exports.default = render_1.default;

package/dist/commonjs/main_thread/api/debug/modules/general_info.d.ts

@@ -0,0 +1,4 @@
+import type { CancellationSignal } from "../../../../utils/task_canceller";
+import type RxPlayer from "../../public_api";
+export default function constructDebugGeneralInfo(instance: RxPlayer, parentElt: HTMLElement, cancelSignal: CancellationSignal): HTMLElement;
+//# sourceMappingURL=general_info.d.ts.map

package/dist/commonjs/main_thread/api/debug/modules/general_info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"general_info.d.ts","sourceRoot":"","sources":["../../../../../../src/main_thread/api/debug/modules/general_info.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,KAAK,QAAQ,MAAM,kBAAkB,CAAC;AAS7C,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAC/C,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,WAAW,EACtB,YAAY,EAAE,kBAAkB,GAC/B,WAAW,CAsMb"}

package/dist/commonjs/main_thread/api/debug/modules/general_info.js

@@ -0,0 +1,236 @@
+"use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = constructDebugGeneralInfo;
+var has_mse_in_worker_1 = require("../../../../compat/has_mse_in_worker");
+var constants_1 = require("../constants");
+var utils_1 = require("../utils");
+function constructDebugGeneralInfo(instance, parentElt, cancelSignal) {
+    var generalInfoElt = (0, utils_1.createElement)("div");
+    var adaptationsElt = (0, utils_1.createElement)("div");
+    var representationsElt = (0, utils_1.createElement)("div");
+    updateGeneralInfo();
+    var generalInfoItv = setInterval(function () {
+        updateGeneralInfo();
+    }, constants_1.DEFAULT_REFRESH_INTERVAL);
+    cancelSignal.register(function () {
+        clearInterval(generalInfoItv);
+    });
+    return (0, utils_1.createCompositeElement)("div", [
+        generalInfoElt,
+        adaptationsElt,
+        representationsElt,
+    ]);
+    function updateGeneralInfo() {
+        var e_1, _a, e_2, _b;
+        var _c, _d, _e, _f, _g, _h;
+        var videoElement = instance.getVideoElement();
+        if (videoElement === null) {
+            // disposed player. Clean-up everything
+            generalInfoElt.innerHTML = "";
+            adaptationsElt.innerHTML = "";
+            representationsElt.innerHTML = "";
+            clearInterval(generalInfoItv);
+            return;
+        }
+        else {
+            var currentTime = instance.getPosition();
+            var bufferGap = instance.getCurrentBufferGap();
+            var bufferGapStr = bufferGap === Infinity ? "0" : bufferGap.toFixed(2);
+            var valuesLine1 = [
+                ["ct", currentTime.toFixed(2)],
+                ["bg", bufferGapStr],
+                ["rs", String(videoElement.readyState)],
+                ["pr", String(videoElement.playbackRate)],
+                ["sp", String(instance.getPlaybackRate())],
+                ["pa", String(videoElement.paused ? 1 : 0)],
+                ["en", String(videoElement.ended ? 1 : 0)],
+                ["li", String(instance.isLive() ? 1 : 0)],
+                ["wba", String(instance.getWantedBufferAhead())],
+                ["st", "\"".concat(instance.getPlayerState(), "\"")],
+            ];
+            if (((_c = instance.getCurrentModeInformation()) === null || _c === void 0 ? void 0 : _c.useWorker) === true) {
+                if (has_mse_in_worker_1.default) {
+                    valuesLine1.push(["wo", "2"]);
+                }
+                else {
+                    valuesLine1.push(["wo", "1"]);
+                }
+            }
+            else {
+                valuesLine1.push(["wo", "0"]);
+            }
+            var valuesLine2 = [["v", instance.version]];
+            var ks = instance.getKeySystemConfiguration();
+            if (ks !== null) {
+                valuesLine2.push(["ks", ks.keySystem]);
+            }
+            var mbb = instance.getMaxBufferBehind();
+            if (mbb !== Infinity) {
+                valuesLine2.push(["mbb", String(mbb)]);
+            }
+            var mba = instance.getMaxBufferAhead();
+            if (mba !== Infinity) {
+                valuesLine2.push(["mba", String(mba)]);
+            }
+            var mbs = instance.getMaxVideoBufferSize();
+            if (mbs !== Infinity) {
+                valuesLine2.push(["mbs", String(mbs)]);
+            }
+            var minPos = instance.getMinimumPosition();
+            if (minPos !== null) {
+                valuesLine1.push(["mip", minPos.toFixed(2)]);
+                valuesLine2.push(["dmi", (currentTime - minPos).toFixed(2)]);
+            }
+            var maxPos = instance.getMaximumPosition();
+            if (maxPos !== null) {
+                valuesLine1.push(["map", maxPos.toFixed(2)]);
+                valuesLine2.push(["dma", (maxPos - currentTime).toFixed(2)]);
+            }
+            var valuesLine3 = [];
+            var error = instance.getError();
+            if (error !== null) {
+                valuesLine3.push(["er", "\"".concat(String(error), "\"")]);
+            }
+            generalInfoElt.innerHTML = "";
+            try {
+                for (var _j = __values([valuesLine1, valuesLine2, valuesLine3]), _k = _j.next(); !_k.done; _k = _j.next()) {
+                    var valueSet = _k.value;
+                    if (valueSet.length > 0) {
+                        var lineInfoElt = (0, utils_1.createElement)("div");
+                        try {
+                            for (var valueSet_1 = (e_2 = void 0, __values(valueSet)), valueSet_1_1 = valueSet_1.next(); !valueSet_1_1.done; valueSet_1_1 = valueSet_1.next()) {
+                                var value = valueSet_1_1.value;
+                                lineInfoElt.appendChild((0, utils_1.createMetricTitle)(value[0]));
+                                lineInfoElt.appendChild((0, utils_1.createElement)("span", {
+                                    textContent: value[1] + " ",
+                                }));
+                            }
+                        }
+                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                        finally {
+                            try {
+                                if (valueSet_1_1 && !valueSet_1_1.done && (_b = valueSet_1.return)) _b.call(valueSet_1);
+                            }
+                            finally { if (e_2) throw e_2.error; }
+                        }
+                        generalInfoElt.appendChild(lineInfoElt);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_k && !_k.done && (_a = _j.return)) _a.call(_j);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            if ((0, utils_1.isExtendedMode)(parentElt)) {
+                var url = (_d = instance.getContentUrls()) === null || _d === void 0 ? void 0 : _d[0];
+                if (url !== undefined) {
+                    var reducedUrl = url.length > 100 ? url.substring(0, 99) + "…" : url;
+                    generalInfoElt.appendChild((0, utils_1.createCompositeElement)("div", [
+                        (0, utils_1.createMetricTitle)("url"),
+                        (0, utils_1.createElement)("span", {
+                            textContent: reducedUrl,
+                        }),
+                    ]));
+                }
+            }
+        }
+        if ((0, utils_1.isExtendedMode)(parentElt)) {
+            var videoId = instance
+                .getAvailableVideoTracks()
+                .map(function (_a) {
+                var id = _a.id, active = _a.active;
+                return (active ? "*".concat(id) : id);
+            });
+            var audioId = instance
+                .getAvailableAudioTracks()
+                .map(function (_a) {
+                var id = _a.id, active = _a.active;
+                return (active ? "*".concat(id) : id);
+            });
+            var textId = instance
+                .getAvailableTextTracks()
+                .map(function (_a) {
+                var id = _a.id, active = _a.active;
+                return (active ? "*".concat(id) : id);
+            });
+            adaptationsElt.innerHTML = "";
+            if (videoId.length > 0) {
+                var textContent = "".concat(videoId.length, ":").concat(videoId.join(" "), " ");
+                if (textContent.length > 100) {
+                    textContent = textContent.substring(0, 98) + "… ";
+                }
+                var videoAdaps = (0, utils_1.createCompositeElement)("div", [
+                    (0, utils_1.createMetricTitle)("vt"),
+                    (0, utils_1.createElement)("span", { textContent: textContent }),
+                ]);
+                adaptationsElt.appendChild(videoAdaps);
+            }
+            if (audioId.length > 0) {
+                var textContent = "".concat(audioId.length, ":").concat(audioId.join(" "), " ");
+                if (textContent.length > 100) {
+                    textContent = textContent.substring(0, 98) + "… ";
+                }
+                var audioAdaps = (0, utils_1.createCompositeElement)("div", [
+                    (0, utils_1.createMetricTitle)("at"),
+                    (0, utils_1.createElement)("span", { textContent: textContent }),
+                ]);
+                adaptationsElt.appendChild(audioAdaps);
+            }
+            if (textId.length > 0) {
+                var textContent = "".concat(textId.length, ":").concat(textId.join(" "), " ");
+                if (textContent.length > 100) {
+                    textContent = textContent.substring(0, 98) + "… ";
+                }
+                var textAdaps = (0, utils_1.createCompositeElement)("div", [
+                    (0, utils_1.createMetricTitle)("tt"),
+                    (0, utils_1.createElement)("span", { textContent: textContent }),
+                ]);
+                adaptationsElt.appendChild(textAdaps);
+            }
+            var adaptations = instance.__priv_getCurrentAdaptation();
+            var videoBitratesStr = (_f = (_e = adaptations === null || adaptations === void 0 ? void 0 : adaptations.video) === null || _e === void 0 ? void 0 : _e.representations.map(function (r) {
+                var _a;
+                return (String((_a = r.bitrate) !== null && _a !== void 0 ? _a : "N/A") +
+                    (r.isSupported !== false ? "" : " U!") +
+                    (r.decipherable !== false ? "" : " E!"));
+            })) !== null && _f !== void 0 ? _f : [];
+            var audioBitratesStr = (_h = (_g = adaptations === null || adaptations === void 0 ? void 0 : adaptations.audio) === null || _g === void 0 ? void 0 : _g.representations.map(function (r) {
+                var _a;
+                return (String((_a = r.bitrate) !== null && _a !== void 0 ? _a : "N/A") +
+                    (r.isSupported !== false ? "" : " U!") +
+                    (r.decipherable !== false ? "" : " E!"));
+            })) !== null && _h !== void 0 ? _h : [];
+            representationsElt.innerHTML = "";
+            if (videoBitratesStr.length > 0) {
+                representationsElt.appendChild((0, utils_1.createMetricTitle)("vb"));
+                representationsElt.appendChild((0, utils_1.createElement)("span", {
+                    textContent: videoBitratesStr.join(" ") + " ",
+                }));
+            }
+            if (audioBitratesStr.length > 0) {
+                representationsElt.appendChild((0, utils_1.createMetricTitle)("ab"));
+                representationsElt.appendChild((0, utils_1.createElement)("span", {
+                    textContent: audioBitratesStr.join(" ") + " ",
+                }));
+            }
+        }
+        else {
+            adaptationsElt.innerHTML = "";
+            representationsElt.innerHTML = "";
+        }
+    }
+}

package/dist/commonjs/main_thread/api/debug/modules/segment_buffer_content.d.ts

@@ -0,0 +1,5 @@
+import type { IBufferType } from "../../../../core/types";
+import type { CancellationSignal } from "../../../../utils/task_canceller";
+import type RxPlayer from "../../public_api";
+export default function createSegmentSinkGraph(instance: RxPlayer, bufferType: IBufferType, title: string, parentElt: HTMLElement, cancelSignal: CancellationSignal): HTMLElement;
+//# sourceMappingURL=segment_buffer_content.d.ts.map

package/dist/commonjs/main_thread/api/debug/modules/segment_buffer_content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment_buffer_content.d.ts","sourceRoot":"","sources":["../../../../../../src/main_thread/api/debug/modules/segment_buffer_content.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAQ1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,KAAK,QAAQ,MAAM,kBAAkB,CAAC;AAU7C,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,WAAW,EACvB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,WAAW,EACtB,YAAY,EAAE,kBAAkB,GAC/B,WAAW,CAuIb"}

package/dist/commonjs/main_thread/api/debug/modules/segment_buffer_content.js

@@ -0,0 +1,194 @@
+"use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = createSegmentSinkGraph;
+var manifest_1 = require("../../../../manifest");
+var is_null_or_undefined_1 = require("../../../../utils/is_null_or_undefined");
+var buffer_graph_1 = require("../buffer_graph");
+var constants_1 = require("../constants");
+var utils_1 = require("../utils");
+function createSegmentSinkGraph(instance, bufferType, title, parentElt, cancelSignal) {
+    var bufferGraphWrapper = (0, utils_1.createElement)("div");
+    var bufferTitle = (0, utils_1.createMetricTitle)(title);
+    var canvasElt = (0, utils_1.createGraphCanvas)();
+    var bufferSizeElt = document.createElement("span");
+    var currentRangeRepInfoElt = (0, utils_1.createElement)("div");
+    var loadingRangeRepInfoElt = (0, utils_1.createElement)("div");
+    var bufferGraph = new buffer_graph_1.default(canvasElt);
+    var intervalId = setInterval(update, constants_1.DEFAULT_REFRESH_INTERVAL);
+    cancelSignal.register(function () {
+        clearInterval(intervalId);
+    });
+    var bufferMetrics = null;
+    instance
+        .__priv_getSegmentSinkMetrics()
+        .then(function (metrics) {
+        bufferMetrics = metrics !== null && metrics !== void 0 ? metrics : null;
+    })
+        .catch(function () {
+        // Do nothing
+    });
+    bufferGraphWrapper.appendChild(bufferTitle);
+    bufferGraphWrapper.appendChild(canvasElt);
+    bufferGraphWrapper.appendChild(bufferSizeElt);
+    bufferGraphWrapper.appendChild(currentRangeRepInfoElt);
+    bufferGraphWrapper.appendChild(loadingRangeRepInfoElt);
+    bufferSizeElt.style.marginLeft = "5px";
+    bufferSizeElt.style.fontSize = "0.9em";
+    bufferGraphWrapper.style.padding = "5px 0px";
+    update();
+    return bufferGraphWrapper;
+    function update() {
+        if (instance.getVideoElement() === null) {
+            // disposed player. Clean-up everything
+            bufferGraphWrapper.style.display = "none";
+            bufferGraphWrapper.innerHTML = "";
+            clearInterval(intervalId);
+            return;
+        }
+        instance
+            .__priv_getSegmentSinkMetrics()
+            .then(function (metrics) {
+            bufferMetrics = metrics !== null && metrics !== void 0 ? metrics : null;
+            updateBufferMetrics();
+        })
+            .catch(function () {
+            // DO nothing
+        });
+    }
+    function updateBufferMetrics() {
+        var e_1, _a;
+        var _b, _c, _d, _e;
+        var showAllInfo = (0, utils_1.isExtendedMode)(parentElt);
+        var metricsForType = bufferMetrics === null || bufferMetrics === void 0 ? void 0 : bufferMetrics.segmentSinks[bufferType];
+        var inventory = metricsForType === null || metricsForType === void 0 ? void 0 : metricsForType.segmentInventory;
+        if (bufferMetrics === null || inventory === undefined) {
+            bufferGraphWrapper.style.display = "none";
+            bufferSizeElt.innerHTML = "";
+            currentRangeRepInfoElt.innerHTML = "";
+            loadingRangeRepInfoElt.innerHTML = "";
+        }
+        else {
+            bufferGraphWrapper.style.display = "block";
+            if ((metricsForType === null || metricsForType === void 0 ? void 0 : metricsForType.sizeEstimate) !== undefined) {
+                var sizeEstimate = metricsForType.sizeEstimate;
+                var sizeStr = void 0;
+                if (sizeEstimate > 2e6) {
+                    sizeStr = (sizeEstimate / 1e6).toFixed(2) + "MB";
+                }
+                else if (sizeEstimate > 2e3) {
+                    sizeStr = (sizeEstimate / 1e3).toFixed(2) + "kB";
+                }
+                else {
+                    sizeStr = sizeEstimate + "B";
+                }
+                bufferSizeElt.innerHTML = sizeStr;
+            }
+            else {
+                bufferSizeElt.innerHTML = "";
+            }
+            var currentTime = instance.getPosition();
+            var width = Math.min(parentElt.clientWidth - 150, 600);
+            bufferGraph.update({
+                currentTime: currentTime,
+                minimumPosition: (_b = instance.getMinimumPosition()) !== null && _b !== void 0 ? _b : undefined,
+                maximumPosition: (_c = instance.getMaximumPosition()) !== null && _c !== void 0 ? _c : undefined,
+                inventory: inventory,
+                width: width,
+                height: 10,
+            });
+            if (!showAllInfo) {
+                currentRangeRepInfoElt.innerHTML = "";
+                loadingRangeRepInfoElt.innerHTML = "";
+                return;
+            }
+            currentRangeRepInfoElt.innerHTML = "";
+            try {
+                for (var inventory_1 = __values(inventory), inventory_1_1 = inventory_1.next(); !inventory_1_1.done; inventory_1_1 = inventory_1.next()) {
+                    var rangeInfo = inventory_1_1.value;
+                    var bufferedStart = rangeInfo.bufferedStart, bufferedEnd = rangeInfo.bufferedEnd, infos = rangeInfo.infos;
+                    if (bufferedStart !== undefined &&
+                        bufferedEnd !== undefined &&
+                        currentTime >= bufferedStart &&
+                        currentTime < bufferedEnd) {
+                        currentRangeRepInfoElt.appendChild((0, utils_1.createMetricTitle)("play"));
+                        currentRangeRepInfoElt.appendChild((0, utils_1.createElement)("span", {
+                            textContent: constructRepresentationInfo(infos),
+                        }));
+                        break;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (inventory_1_1 && !inventory_1_1.done && (_a = inventory_1.return)) _a.call(inventory_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            loadingRangeRepInfoElt.innerHTML = "";
+            var rep = (_d = instance.__priv_getCurrentRepresentations()) === null || _d === void 0 ? void 0 : _d[bufferType];
+            var adap = (_e = instance.__priv_getCurrentAdaptation()) === null || _e === void 0 ? void 0 : _e[bufferType];
+            var manifest = instance.__priv_getManifest();
+            if (manifest !== null && !(0, is_null_or_undefined_1.default)(rep) && !(0, is_null_or_undefined_1.default)(adap)) {
+                var period = (0, manifest_1.getPeriodForTime)(manifest, currentTime);
+                if (period !== undefined) {
+                    loadingRangeRepInfoElt.appendChild((0, utils_1.createMetricTitle)("load"));
+                    loadingRangeRepInfoElt.appendChild((0, utils_1.createElement)("span", {
+                        textContent: constructRepresentationInfo({
+                            period: period,
+                            adaptation: adap,
+                            representation: rep,
+                        }),
+                    }));
+                }
+            }
+        }
+    }
+}
+function constructRepresentationInfo(content) {
+    var _a;
+    var period = content.period;
+    var _b = content.adaptation, language = _b.language, isAudioDescription = _b.isAudioDescription, isClosedCaption = _b.isClosedCaption, isTrickModeTrack = _b.isTrickModeTrack, isSignInterpreted = _b.isSignInterpreted, bufferType = _b.type;
+    var _c = content.representation, id = _c.id, height = _c.height, width = _c.width, bitrate = _c.bitrate, codecs = _c.codecs, hdrInfo = _c.hdrInfo;
+    var representationInfo = "\"".concat(id, "\" ");
+    if (height !== undefined && width !== undefined) {
+        representationInfo += "".concat(width, "x").concat(height, " ");
+    }
+    if (bitrate !== undefined) {
+        representationInfo += "(".concat((bitrate / 1000).toFixed(0), "kbps) ");
+    }
+    if (codecs !== undefined && codecs.length > 0) {
+        representationInfo += "c:\"".concat(codecs.join(" / "), "\" ");
+    }
+    if (language !== undefined) {
+        representationInfo += "l:\"".concat(language, "\" ");
+    }
+    if (bufferType === "video" && hdrInfo !== undefined) {
+        representationInfo += "hdr:1 ";
+    }
+    if (bufferType === "video" && typeof isSignInterpreted === "boolean") {
+        representationInfo += "si:".concat(isSignInterpreted ? 1 : 0, " ");
+    }
+    if (bufferType === "video" && typeof isTrickModeTrack === "boolean") {
+        representationInfo += "tm:".concat(isTrickModeTrack ? 1 : 0, " ");
+    }
+    if (bufferType === "audio" && typeof isAudioDescription === "boolean") {
+        representationInfo += "ad:".concat(isAudioDescription ? 1 : 0, " ");
+    }
+    if (bufferType === "text" && typeof isClosedCaption === "boolean") {
+        representationInfo += "cc:".concat(isClosedCaption ? 1 : 0, " ");
+    }
+    representationInfo += "p:".concat(period.start, "-").concat((_a = period.end) !== null && _a !== void 0 ? _a : "?");
+    return representationInfo;
+}

package/dist/commonjs/main_thread/api/debug/modules/segment_buffer_size.d.ts

@@ -0,0 +1,4 @@
+import type { CancellationSignal } from "../../../../utils/task_canceller";
+import type RxPlayer from "../../public_api";
+export default function createSegmentSinkSizeGraph(instance: RxPlayer, parentElt: HTMLElement, cancelSignal: CancellationSignal): HTMLElement;
+//# sourceMappingURL=segment_buffer_size.d.ts.map

package/dist/commonjs/main_thread/api/debug/modules/segment_buffer_size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment_buffer_size.d.ts","sourceRoot":"","sources":["../../../../../../src/main_thread/api/debug/modules/segment_buffer_size.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,KAAK,QAAQ,MAAM,kBAAkB,CAAC;AAK7C,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAChD,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,WAAW,EACtB,YAAY,EAAE,kBAAkB,GAC/B,WAAW,CAgCb"}

package/dist/commonjs/main_thread/api/debug/modules/segment_buffer_size.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = createSegmentSinkSizeGraph;
+var buffer_size_graph_1 = require("../buffer_size_graph");
+var constants_1 = require("../constants");
+var utils_1 = require("../utils");
+function createSegmentSinkSizeGraph(instance, parentElt, cancelSignal) {
+    var bufferSizeGraphWrapperElt = (0, utils_1.createElement)("div");
+    var bufferSizeTitle = (0, utils_1.createMetricTitle)("bgap");
+    var canvasElt = (0, utils_1.createGraphCanvas)();
+    var bufferSizeGraph = new buffer_size_graph_1.default(canvasElt);
+    var intervalId = setInterval(addBufferSize, constants_1.DEFAULT_REFRESH_INTERVAL);
+    cancelSignal.register(function () {
+        clearInterval(intervalId);
+    });
+    bufferSizeGraphWrapperElt.appendChild(bufferSizeTitle);
+    bufferSizeGraphWrapperElt.appendChild(canvasElt);
+    bufferSizeGraphWrapperElt.style.padding = "7px 0px";
+    addBufferSize();
+    return bufferSizeGraphWrapperElt;
+    function addBufferSize() {
+        if (instance.getVideoElement() === null) {
+            // disposed player. Clean-up everything
+            bufferSizeGraphWrapperElt.innerHTML = "";
+            clearInterval(intervalId);
+            return;
+        }
+        var bufferGap = instance.getCurrentBufferGap();
+        if (bufferGap === Infinity) {
+            bufferSizeGraph.pushBufferSize(0);
+        }
+        else {
+            bufferSizeGraph.pushBufferSize(bufferGap);
+        }
+        var width = Math.min(parentElt.clientWidth - 150, 600);
+        bufferSizeGraph.reRender(width, 10);
+    }
+}