rx-player 4.0.0-dev.2023102700 → 4.0.0-dev.2023111400

package/dist/es2017/core/api/debug/buffer_graph.js

@@ -0,0 +1,173 @@
+const BUFFER_WIDTH_IN_SECONDS = 10000;
+const COLORS = [
+    "#2ab7ca",
+    "#fed766",
+    "#4dd248",
+    "#a22c28",
+    "#556b2f",
+    "#add8e6",
+    "#90ee90",
+    "#444444",
+    "#40bfc1",
+    "#57557e",
+    "#fbe555",
+];
+export default class SegmentBufferGraph {
+    constructor(canvasElt) {
+        this._colorMap = new WeakMap();
+        this._currNbColors = 0;
+        this._canvasElt = canvasElt;
+        this._canvasCtxt = this._canvasElt.getContext("2d");
+        this.clear();
+    }
+    clear() {
+        if (this._canvasCtxt !== null) {
+            this._canvasCtxt.clearRect(0, 0, this._canvasElt.width, this._canvasElt.height);
+        }
+    }
+    update(data) {
+        var _a, _b, _c, _d;
+        if (this._canvasCtxt === null) {
+            return;
+        }
+        const { inventory, currentTime, width, height, } = data;
+        this._canvasElt.style.width = `${width}px`;
+        this._canvasElt.style.height = `${height}px`;
+        this._canvasElt.width = width;
+        this._canvasElt.height = height;
+        this.clear();
+        let 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;
+        }
+        let 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);
+        let minimumPosition;
+        let 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;
+        }
+        const currentRangesScaled = scaleSegments(inventory, minimumPosition, maximumPosition);
+        for (let 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.
+     */
+    _paintRange(rangeScaled, width, height) {
+        if (this._canvasCtxt === null) {
+            return;
+        }
+        const startX = rangeScaled.scaledStart * width;
+        const 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);
+    }
+    _getColorForRepresentation(representation) {
+        const color = this._colorMap.get(representation);
+        if (color !== undefined) {
+            return color;
+        }
+        const newColor = COLORS[this._currNbColors % COLORS.length];
+        this._currNbColors++;
+        this._colorMap.set(representation, newColor);
+        return newColor;
+    }
+}
+/**
+ * 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) {
+        const 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) {
+    const scaledSegments = [];
+    const wholeDuration = maximumPosition - minimumPosition;
+    for (let i = 0; i < bufferedData.length; i++) {
+        const info = bufferedData[i];
+        const start = info.bufferedStart === undefined ?
+            info.start :
+            info.bufferedStart;
+        const end = info.bufferedEnd === undefined ?
+            info.end :
+            info.bufferedEnd;
+        if (end > minimumPosition && start < maximumPosition) {
+            const startPoint = Math.max(start - minimumPosition, 0);
+            const endPoint = Math.min(end - minimumPosition, maximumPosition);
+            const scaledStart = startPoint / wholeDuration;
+            const scaledEnd = endPoint / wholeDuration;
+            scaledSegments.push({ scaledStart, scaledEnd, info });
+        }
+    }
+    return scaledSegments;
+}

package/dist/es2017/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/es2017/core/api/debug/buffer_size_graph.js

@@ -0,0 +1,103 @@
+import getMonotonicTimeStamp from "../../../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.
+ */
+const 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.
+ */
+const MINIMUM_MAX_BUFFER_SIZE = 20;
+export default class BufferSizeGraph {
+    constructor(canvasElt) {
+        this._canvasElt = canvasElt;
+        this._canvasCtxt = this._canvasElt.getContext("2d");
+        this._history = [];
+    }
+    pushBufferSize(bufferSize) {
+        const now = getMonotonicTimeStamp();
+        this._history.push({ timestamp: now, bufferSize });
+        if (this._history.length > 0) {
+            const minimumTime = now - TIME_SAMPLES_MS;
+            let i;
+            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 = [];
+        }
+    }
+    clear() {
+        if (this._canvasCtxt !== null) {
+            this._canvasCtxt.clearRect(0, 0, this._canvasElt.width, this._canvasElt.height);
+        }
+    }
+    reRender(width, height) {
+        this._canvasElt.style.width = `${width}px`;
+        this._canvasElt.style.height = `${height}px`;
+        this._canvasElt.width = width;
+        this._canvasElt.height = height;
+        this.clear();
+        const history = this._history;
+        const canvasCtx = this._canvasCtxt;
+        if (history.length === 0) {
+            return;
+        }
+        const currentMaxSize = getNewMaxBufferSize();
+        const minDate = history[0].timestamp;
+        const gridHeight = height / currentMaxSize;
+        const 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() {
+            const maxPoint = Math.max(...history.map(d => 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 (let i = 1; i < history.length; i++) {
+                const diff = dateToX(history[i].timestamp) -
+                    dateToX(history[i - 1].timestamp);
+                const 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;
+        }
+    }
+}

package/dist/es2017/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/es2017/core/api/debug/constants.js

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

package/dist/es2017/core/api/debug/index.d.ts

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

package/dist/es2017/core/api/debug/index.js

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

package/dist/es2017/core/api/debug/modules/general_info.d.ts

@@ -0,0 +1,3 @@
+import { CancellationSignal } from "../../../../utils/task_canceller";
+import RxPlayer from "../../public_api";
+export default function constructDebugGeneralInfo(instance: RxPlayer, parentElt: HTMLElement, cancelSignal: CancellationSignal): HTMLElement;

package/dist/es2017/core/api/debug/modules/general_info.js

@@ -0,0 +1,169 @@
+import { DEFAULT_REFRESH_INTERVAL } from "../constants";
+import { createCompositeElement, createElement, createMetricTitle, isExtendedMode, } from "../utils";
+export default function constructDebugGeneralInfo(instance, parentElt, cancelSignal) {
+    const generalInfoElt = createElement("div");
+    const adaptationsElt = createElement("div");
+    const representationsElt = createElement("div");
+    updateGeneralInfo();
+    const generalInfoItv = setInterval(() => {
+        updateGeneralInfo();
+    }, DEFAULT_REFRESH_INTERVAL);
+    cancelSignal.register(() => {
+        clearInterval(generalInfoItv);
+    });
+    return createCompositeElement("div", [
+        generalInfoElt,
+        adaptationsElt,
+        representationsElt,
+    ]);
+    function updateGeneralInfo() {
+        var _a, _b, _c, _d, _e;
+        const videoElement = instance.getVideoElement();
+        if (videoElement === null) {
+            // disposed player. Clean-up everything
+            generalInfoElt.innerHTML = "";
+            adaptationsElt.innerHTML = "";
+            representationsElt.innerHTML = "";
+            clearInterval(generalInfoItv);
+            return;
+        }
+        else {
+            const currentTime = instance.getPosition();
+            const bufferGap = instance.getCurrentBufferGap();
+            const bufferGapStr = bufferGap === Infinity ? "0" : bufferGap.toFixed(2);
+            const 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", `"${instance.getPlayerState()}"`],
+            ];
+            const valuesLine2 = [];
+            const ks = instance.getKeySystemConfiguration();
+            if (ks !== null) {
+                valuesLine2.push(["ks", ks.keySystem]);
+            }
+            const mbb = instance.getMaxBufferBehind();
+            if (mbb !== Infinity) {
+                valuesLine2.push(["mbb", String(mbb)]);
+            }
+            const mba = instance.getMaxBufferAhead();
+            if (mba !== Infinity) {
+                valuesLine2.push(["mba", String(mba)]);
+            }
+            const mbs = instance.getMaxVideoBufferSize();
+            if (mbs !== Infinity) {
+                valuesLine2.push(["mbs", String(mbs)]);
+            }
+            const minPos = instance.getMinimumPosition();
+            if (minPos !== null) {
+                valuesLine1.push(["mip", minPos.toFixed(2)]);
+                valuesLine2.push(["dmi", (currentTime - minPos).toFixed(2)]);
+            }
+            const maxPos = instance.getMaximumPosition();
+            if (maxPos !== null) {
+                valuesLine1.push(["map", maxPos.toFixed(2)]);
+                valuesLine2.push(["dma", (maxPos - currentTime).toFixed(2)]);
+            }
+            const valuesLine3 = [];
+            const error = instance.getError();
+            if (error !== null) {
+                valuesLine3.push(["er", `"${String(error)}"`]);
+            }
+            generalInfoElt.innerHTML = "";
+            for (const valueSet of [valuesLine1, valuesLine2, valuesLine3]) {
+                if (valueSet.length > 0) {
+                    const lineInfoElt = createElement("div");
+                    for (const value of valueSet) {
+                        lineInfoElt.appendChild(createMetricTitle(value[0]));
+                        lineInfoElt.appendChild(createElement("span", {
+                            textContent: value[1] + " ",
+                        }));
+                    }
+                    generalInfoElt.appendChild(lineInfoElt);
+                }
+            }
+            if (isExtendedMode(parentElt)) {
+                const url = (_a = instance.getContentUrls()) === null || _a === void 0 ? void 0 : _a[0];
+                if (url !== undefined) {
+                    const reducedUrl = url.length > 100 ?
+                        url.substring(0, 99) + "…" :
+                        url;
+                    generalInfoElt.appendChild(createCompositeElement("div", [
+                        createMetricTitle("url"),
+                        createElement("span", {
+                            textContent: reducedUrl,
+                        }),
+                    ]));
+                }
+            }
+        }
+        if (isExtendedMode(parentElt)) {
+            const videoId = instance.getAvailableVideoTracks().map(({ id, active }) => active ? `*${id}` : id);
+            const audioId = instance.getAvailableAudioTracks().map(({ id, active }) => active ? `*${id}` : id);
+            const textId = instance.getAvailableTextTracks().map(({ id, active }) => active ? `*${id}` : id);
+            adaptationsElt.innerHTML = "";
+            if (videoId.length > 0) {
+                let textContent = `${videoId.length}:${videoId.join(" ")} `;
+                if (textContent.length > 100) {
+                    textContent = textContent.substring(0, 98) + "… ";
+                }
+                const videoAdaps = createCompositeElement("div", [
+                    createMetricTitle("vt"),
+                    createElement("span", { textContent }),
+                ]);
+                adaptationsElt.appendChild(videoAdaps);
+            }
+            if (audioId.length > 0) {
+                let textContent = `${audioId.length}:${audioId.join(" ")} `;
+                if (textContent.length > 100) {
+                    textContent = textContent.substring(0, 98) + "… ";
+                }
+                const audioAdaps = createCompositeElement("div", [
+                    createMetricTitle("at"),
+                    createElement("span", { textContent }),
+                ]);
+                adaptationsElt.appendChild(audioAdaps);
+            }
+            if (textId.length > 0) {
+                let textContent = `${textId.length}:${textId.join(" ")} `;
+                if (textContent.length > 100) {
+                    textContent = textContent.substring(0, 98) + "… ";
+                }
+                const textAdaps = createCompositeElement("div", [
+                    createMetricTitle("tt"),
+                    createElement("span", { textContent }),
+                ]);
+                adaptationsElt.appendChild(textAdaps);
+            }
+            const videoBitrates = (_c = (_b = instance.getVideoTrack()) === null || _b === void 0 ? void 0 : _b.representations.map(r => {
+                return r.bitrate;
+            }).filter(bitrate => bitrate !== undefined)) !== null && _c !== void 0 ? _c : [];
+            const audioBitrates = (_e = (_d = instance.getAudioTrack()) === null || _d === void 0 ? void 0 : _d.representations.map(r => {
+                return r.bitrate;
+            }).filter(bitrate => bitrate !== undefined)) !== null && _e !== void 0 ? _e : [];
+            representationsElt.innerHTML = "";
+            if (videoBitrates.length > 0) {
+                representationsElt.appendChild(createMetricTitle("vb"));
+                representationsElt.appendChild(createElement("span", {
+                    textContent: videoBitrates.join(" ") + " ",
+                }));
+            }
+            if (audioBitrates.length > 0) {
+                representationsElt.appendChild(createMetricTitle("ab"));
+                representationsElt.appendChild(createElement("span", {
+                    textContent: audioBitrates.join(" ") + " ",
+                }));
+            }
+        }
+        else {
+            adaptationsElt.innerHTML = "";
+            representationsElt.innerHTML = "";
+        }
+    }
+}

package/dist/es2017/core/api/debug/modules/segment_buffer_content.d.ts

@@ -0,0 +1,4 @@
+import { CancellationSignal } from "../../../../utils/task_canceller";
+import { IBufferType } from "../../../segment_buffers";
+import RxPlayer from "../../public_api";
+export default function createSegmentBufferGraph(instance: RxPlayer, bufferType: IBufferType, title: string, parentElt: HTMLElement, cancelSignal: CancellationSignal): HTMLElement;

package/dist/es2017/core/api/debug/modules/segment_buffer_content.js

@@ -0,0 +1,121 @@
+import isNullOrUndefined from "../../../../utils/is_null_or_undefined";
+import SegmentBufferGraph from "../buffer_graph";
+import { DEFAULT_REFRESH_INTERVAL } from "../constants";
+import { createElement, createGraphCanvas, createMetricTitle, isExtendedMode, } from "../utils";
+export default function createSegmentBufferGraph(instance, bufferType, title, parentElt, cancelSignal) {
+    const bufferGraphWrapper = createElement("div");
+    const bufferTitle = createMetricTitle(title);
+    const canvasElt = createGraphCanvas();
+    const currentRangeRepInfoElt = createElement("div");
+    const loadingRangeRepInfoElt = createElement("div");
+    const bufferGraph = new SegmentBufferGraph(canvasElt);
+    const intervalId = setInterval(update, DEFAULT_REFRESH_INTERVAL);
+    cancelSignal.register(() => {
+        clearInterval(intervalId);
+    });
+    bufferGraphWrapper.appendChild(bufferTitle);
+    bufferGraphWrapper.appendChild(canvasElt);
+    bufferGraphWrapper.appendChild(currentRangeRepInfoElt);
+    bufferGraphWrapper.appendChild(loadingRangeRepInfoElt);
+    bufferGraphWrapper.style.padding = "5px 0px";
+    update();
+    return bufferGraphWrapper;
+    function update() {
+        var _a, _b, _c, _d;
+        if (instance.getVideoElement() === null) {
+            // disposed player. Clean-up everything
+            bufferGraphWrapper.style.display = "none";
+            bufferGraphWrapper.innerHTML = "";
+            clearInterval(intervalId);
+            return;
+        }
+        const showAllInfo = isExtendedMode(parentElt);
+        const inventory = instance.__priv_getSegmentBufferContent(bufferType);
+        if (inventory === null) {
+            bufferGraphWrapper.style.display = "none";
+            currentRangeRepInfoElt.innerHTML = "";
+            loadingRangeRepInfoElt.innerHTML = "";
+        }
+        else {
+            bufferGraphWrapper.style.display = "block";
+            const currentTime = instance.getPosition();
+            const width = Math.min(parentElt.clientWidth - 150, 600);
+            bufferGraph.update({
+                currentTime,
+                minimumPosition: (_a = instance.getMinimumPosition()) !== null && _a !== void 0 ? _a : undefined,
+                maximumPosition: (_b = instance.getMaximumPosition()) !== null && _b !== void 0 ? _b : undefined,
+                inventory,
+                width,
+                height: 10,
+            });
+            if (!showAllInfo) {
+                currentRangeRepInfoElt.innerHTML = "";
+                loadingRangeRepInfoElt.innerHTML = "";
+                return;
+            }
+            currentRangeRepInfoElt.innerHTML = "";
+            for (let i = 0; i < inventory.length; i++) {
+                const rangeInfo = inventory[i];
+                const { bufferedStart, bufferedEnd, infos } = rangeInfo;
+                if (bufferedStart !== undefined && bufferedEnd !== undefined &&
+                    currentTime >= bufferedStart && currentTime < bufferedEnd) {
+                    currentRangeRepInfoElt.appendChild(createMetricTitle("play"));
+                    currentRangeRepInfoElt.appendChild(createElement("span", {
+                        textContent: constructRepresentationInfo(infos),
+                    }));
+                    break;
+                }
+            }
+            loadingRangeRepInfoElt.innerHTML = "";
+            const rep = (_c = instance.__priv_getCurrentRepresentations()) === null || _c === void 0 ? void 0 : _c[bufferType];
+            const adap = (_d = instance.__priv_getCurrentAdaptation()) === null || _d === void 0 ? void 0 : _d[bufferType];
+            const manifest = instance.__priv_getManifest();
+            if (manifest !== null && !isNullOrUndefined(rep) && !isNullOrUndefined(adap)) {
+                const period = manifest.getPeriodForTime(currentTime);
+                if (period !== undefined) {
+                    loadingRangeRepInfoElt.appendChild(createMetricTitle("load"));
+                    loadingRangeRepInfoElt.appendChild(createElement("span", {
+                        textContent: constructRepresentationInfo({
+                            period,
+                            adaptation: adap,
+                            representation: rep,
+                        }),
+                    }));
+                }
+            }
+        }
+    }
+}
+function constructRepresentationInfo(content) {
+    var _a;
+    const period = content.period;
+    const { language, isAudioDescription, isClosedCaption, isTrickModeTrack, isSignInterpreted, type: bufferType } = content.adaptation;
+    const { id, height, width, bitrate, codec } = content.representation;
+    let representationInfo = `"${id}" `;
+    if (height !== undefined && width !== undefined) {
+        representationInfo += `${width}x${height} `;
+    }
+    if (bitrate !== undefined) {
+        representationInfo += `(${(bitrate / 1000).toFixed(0)}kbps) `;
+    }
+    if (codec !== undefined) {
+        representationInfo += `c:"${codec}" `;
+    }
+    if (language !== undefined) {
+        representationInfo += `l:"${language}" `;
+    }
+    if (bufferType === "video" && typeof isSignInterpreted === "boolean") {
+        representationInfo += `si:${isSignInterpreted ? 1 : 0} `;
+    }
+    if (bufferType === "video" && typeof isTrickModeTrack === "boolean") {
+        representationInfo += `tm:${isTrickModeTrack ? 1 : 0} `;
+    }
+    if (bufferType === "audio" && typeof isAudioDescription === "boolean") {
+        representationInfo += `ad:${isAudioDescription ? 1 : 0} `;
+    }
+    if (bufferType === "text" && typeof isClosedCaption === "boolean") {
+        representationInfo += `cc:${isClosedCaption ? 1 : 0} `;
+    }
+    representationInfo += `p:${period.start}-${(_a = period.end) !== null && _a !== void 0 ? _a : "?"}`;
+    return representationInfo;
+}

package/dist/es2017/core/api/debug/modules/segment_buffer_size.d.ts

@@ -0,0 +1,3 @@
+import { CancellationSignal } from "../../../../utils/task_canceller";
+import RxPlayer from "../../public_api";
+export default function createSegmentBufferSizeGraph(instance: RxPlayer, parentElt: HTMLElement, cancelSignal: CancellationSignal): HTMLElement;

package/dist/es2017/core/api/debug/modules/segment_buffer_size.js

@@ -0,0 +1,35 @@
+import BufferSizeGraph from "../buffer_size_graph";
+import { DEFAULT_REFRESH_INTERVAL } from "../constants";
+import { createElement, createGraphCanvas, createMetricTitle, } from "../utils";
+export default function createSegmentBufferSizeGraph(instance, parentElt, cancelSignal) {
+    const bufferSizeGraphWrapperElt = createElement("div");
+    const bufferSizeTitle = createMetricTitle("bgap");
+    const canvasElt = createGraphCanvas();
+    const bufferSizeGraph = new BufferSizeGraph(canvasElt);
+    const intervalId = setInterval(addBufferSize, DEFAULT_REFRESH_INTERVAL);
+    cancelSignal.register(() => {
+        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;
+        }
+        const bufferGap = instance.getCurrentBufferGap();
+        if (bufferGap === Infinity) {
+            bufferSizeGraph.pushBufferSize(0);
+        }
+        else {
+            bufferSizeGraph.pushBufferSize(bufferGap);
+        }
+        const width = Math.min(parentElt.clientWidth - 150, 600);
+        bufferSizeGraph.reRender(width, 10);
+    }
+}

package/dist/es2017/core/api/debug/render.d.ts

@@ -0,0 +1,3 @@
+import { CancellationSignal } from "../../../utils/task_canceller";
+import RxPlayer from "../public_api";
+export default function renderDebugElement(parentElt: HTMLElement, instance: RxPlayer, cancelSignal: CancellationSignal): void;