rx-player 3.30.0-dev.2023020100 → 3.30.0-dev.2023030200

package/.eslintrc.js

@@ -16,10 +16,18 @@ module.exports = {
   "plugins": [
     "eslint-plugin-import",
     "eslint-plugin-jsdoc",
+    "ban",
     "@typescript-eslint",
     "@typescript-eslint/tslint"
   ],
   "rules": {
+    "ban/ban": [
+      2,
+      {
+        "name": ["*", "finally"],
+        "message": "Promise.prototype.finally is forbidden due to poor support from older devices.\nNote that this linting rule just bans naively all \"finally\" method calls, if in this case it wasn't called on a Promise, you can safely ignore this error",
+      }
+    ],
     "@typescript-eslint/adjacent-overload-signatures": "error",
     "@typescript-eslint/array-type": [
       "error",

package/CHANGELOG.md

@@ -1,12 +1,13 @@
 # Changelog
 
-## v3.30.0-dev.2023020100 (2023-01-17)
+## v3.30.0-dev.2023030200
 
 ### Features
 
   - Add `updateContentUrls` API, allowing to update the Manifest's URL during playback [#1182]
   - DASH: implement forced-subtitles, adding the `forced` property to the audio tracks API and selecting by default a forced text track linked to the audio track's language if present [#1187]
   - DRM: add the `getKeySystemConfiguration` method to the RxPlayer [#1202]
+  - add experimental `DEBUG_ELEMENT` feature and `createDebugElement` method to render a default debugging HTML element [#1200]
 
 ### Deprecated
 
@@ -25,7 +26,10 @@
 
 ### Other improvements
 
+  - DASH: better detect closed captions [#1187]
   - DASH: handle `endNumber` DASH attribute [#1186]
+  - Support encrypted contents on Panasonic 2019 TVs [#1226]
+  - Better handle SourceBuffer's QuotaExceededError, responsible for `MediaError` with the `BUFFER_FULL_ERROR` code [#1221]
   - API: send available...TracksChange events in the very unlikely scenario where tracks are added after a manifest update [#1197]
   - Completely remove RxJS dependency from the RxPlayer's source code [#1193]
   - DRM: Request PR recommendation when PlayReady is asked and try default recommendation robustnesses [#1189]

package/VERSION

@@ -1 +1 @@
-3.30.0-dev.2023020100
+3.30.0-dev.2023030200

package/dist/_esm5.processed/compat/browser_detection.d.ts

@@ -13,17 +13,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-declare const isIE11: boolean;
-declare const isIEOrEdge: boolean;
-declare const isEdgeChromium: boolean;
-declare const isFirefox: boolean;
-declare const isSamsungBrowser: boolean;
-declare const isTizen: boolean;
-declare const isWebOs: boolean;
-declare const isWebOs2021: boolean;
-declare const isWebOs2022: boolean;
+/** Edge Chromium, regardless of the device */
+declare let isEdgeChromium: boolean;
+/** IE11, regardless of the device */
+declare let isIE11: boolean;
+/** IE11 or Edge __Legacy__ (not Edge Chromium), regardless of the device */
+declare let isIEOrEdge: boolean;
+/** Firefox, regardless of the device */
+declare let isFirefox: boolean;
 /** `true` on Safari on a PC platform (i.e. not iPhone / iPad etc.) */
-declare const isSafariDesktop: boolean;
+declare let isSafariDesktop: boolean;
 /** `true` on Safari on an iPhone, iPad & iPod platform */
-declare const isSafariMobile: boolean;
-export { isEdgeChromium, isIE11, isIEOrEdge, isFirefox, isSafariDesktop, isSafariMobile, isSamsungBrowser, isTizen, isWebOs, isWebOs2021, isWebOs2022, };
+declare let isSafariMobile: boolean;
+/** Samsung's own browser application */
+declare let isSamsungBrowser: boolean;
+/** `true` on devices where Tizen is the OS (e.g. Samsung TVs). */
+declare let isTizen: boolean;
+/** `true` on devices where WebOS is the OS (e.g. LG TVs). */
+declare let isWebOs: boolean;
+/** `true` specifically for WebOS 2021 version. */
+declare let isWebOs2021: boolean;
+/** `true` specifically for WebOS 2022 version. */
+declare let isWebOs2022: boolean;
+/** `true` for Panasonic devices. */
+declare let isPanasonic: boolean;
+export { isEdgeChromium, isIE11, isIEOrEdge, isFirefox, isPanasonic, isSafariDesktop, isSafariMobile, isSamsungBrowser, isTizen, isWebOs, isWebOs2021, isWebOs2022, };

package/dist/_esm5.processed/compat/browser_detection.js

@@ -13,44 +13,86 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _a, _b;
 import isNode from "./is_node";
-// true on IE11
-// false on Edge and other IEs/browsers.
-var isIE11 = !isNode &&
-    typeof window.MSInputMethodContext !== "undefined" &&
-    typeof document.documentMode !== "undefined";
-// true for IE / Edge
-var isIEOrEdge = isNode ?
-    false :
-    navigator.appName === "Microsoft Internet Explorer" ||
-        navigator.appName === "Netscape" &&
-            /(Trident|Edge)\//.test(navigator.userAgent);
-var isEdgeChromium = !isNode &&
-    navigator.userAgent.toLowerCase().indexOf("edg/") !== -1;
-var isFirefox = !isNode &&
-    navigator.userAgent.toLowerCase().indexOf("firefox") !== -1;
-var isSamsungBrowser = !isNode &&
-    /SamsungBrowser/.test(navigator.userAgent);
-var isTizen = !isNode &&
-    /Tizen/.test(navigator.userAgent);
-var isWebOs = !isNode &&
-    navigator.userAgent.indexOf("Web0S") >= 0;
-// Inspired form: http://webostv.developer.lge.com/discover/specifications/web-engine/
-// Note: even that page doesn't correspond to what we've actually seen in the
-// wild
-var isWebOs2021 = isWebOs &&
-    (/[Ww]eb[O0]S.TV-2021/.test(navigator.userAgent) ||
-        /[Cc]hr[o0]me\/79/.test(navigator.userAgent));
-var isWebOs2022 = isWebOs &&
-    (/[Ww]eb[O0]S.TV-2022/.test(navigator.userAgent) ||
-        /[Cc]hr[o0]me\/87/.test(navigator.userAgent));
+/** Edge Chromium, regardless of the device */
+var isEdgeChromium = false;
+/** IE11, regardless of the device */
+var isIE11 = false;
+/** IE11 or Edge __Legacy__ (not Edge Chromium), regardless of the device */
+var isIEOrEdge = false;
+/** Firefox, regardless of the device */
+var isFirefox = false;
 /** `true` on Safari on a PC platform (i.e. not iPhone / iPad etc.) */
-var isSafariDesktop = !isNode && (Object.prototype.toString.call(window.HTMLElement).indexOf("Constructor") >= 0 ||
-    ((_b = (_a = window.safari) === null || _a === void 0 ? void 0 : _a.pushNotification) === null || _b === void 0 ? void 0 : _b.toString()) ===
-        "[object SafariRemoteNotification]");
+var isSafariDesktop = false;
 /** `true` on Safari on an iPhone, iPad & iPod platform */
-var isSafariMobile = !isNode &&
-    typeof navigator.platform === "string" &&
-    /iPad|iPhone|iPod/.test(navigator.platform);
-export { isEdgeChromium, isIE11, isIEOrEdge, isFirefox, isSafariDesktop, isSafariMobile, isSamsungBrowser, isTizen, isWebOs, isWebOs2021, isWebOs2022, };
+var isSafariMobile = false;
+/** Samsung's own browser application */
+var isSamsungBrowser = false;
+/** `true` on devices where Tizen is the OS (e.g. Samsung TVs). */
+var isTizen = false;
+/** `true` on devices where WebOS is the OS (e.g. LG TVs). */
+var isWebOs = false;
+/** `true` specifically for WebOS 2021 version. */
+var isWebOs2021 = false;
+/** `true` specifically for WebOS 2022 version. */
+var isWebOs2022 = false;
+/** `true` for Panasonic devices. */
+var isPanasonic = false;
+((function findCurrentBrowser() {
+    var _a, _b;
+    if (isNode) {
+        return;
+    }
+    // 1 - Find out browser between IE/Edge Legacy/Edge Chromium/Firefox/Safari
+    if (typeof window.MSInputMethodContext !== "undefined" &&
+        typeof document.documentMode !== "undefined") {
+        isIE11 = true;
+        isIEOrEdge = true;
+    }
+    else if (navigator.appName === "Microsoft Internet Explorer" ||
+        navigator.appName === "Netscape" &&
+            /(Trident|Edge)\//.test(navigator.userAgent)) {
+        isIEOrEdge = true;
+    }
+    else if (navigator.userAgent.toLowerCase().indexOf("edg/") !== -1) {
+        isEdgeChromium = true;
+    }
+    else if (navigator.userAgent.toLowerCase().indexOf("firefox") !== -1) {
+        isFirefox = true;
+    }
+    else if (typeof navigator.platform === "string" &&
+        /iPad|iPhone|iPod/.test(navigator.platform)) {
+        isSafariMobile = true;
+    }
+    else if (Object.prototype.toString.call(window.HTMLElement).indexOf("Constructor") >= 0 ||
+        ((_b = (_a = window.safari) === null || _a === void 0 ? void 0 : _a.pushNotification) === null || _b === void 0 ? void 0 : _b.toString()) ===
+            "[object SafariRemoteNotification]") {
+        isSafariDesktop = true;
+    }
+    // 2 - Find out specific device/platform information
+    // Samsung browser e.g. on Android
+    if (/SamsungBrowser/.test(navigator.userAgent)) {
+        isSamsungBrowser = true;
+    }
+    if (/Tizen/.test(navigator.userAgent)) {
+        isTizen = true;
+        // Inspired form: http://webostv.developer.lge.com/discover/specifications/web-engine/
+        // Note: even that page doesn't correspond to what we've actually seen in the
+        // wild
+    }
+    else if (/[Ww]eb[O0]S/.test(navigator.userAgent)) {
+        isWebOs = true;
+        if (/[Ww]eb[O0]S.TV-2022/.test(navigator.userAgent) ||
+            /[Cc]hr[o0]me\/87/.test(navigator.userAgent)) {
+            isWebOs2022 = true;
+        }
+        else if (/[Ww]eb[O0]S.TV-2021/.test(navigator.userAgent) ||
+            /[Cc]hr[o0]me\/79/.test(navigator.userAgent)) {
+            isWebOs2021 = true;
+        }
+    }
+    else if (/[Pp]anasonic/.test(navigator.userAgent)) {
+        isPanasonic = true;
+    }
+})());
+export { isEdgeChromium, isIE11, isIEOrEdge, isFirefox, isPanasonic, isSafariDesktop, isSafariMobile, isSamsungBrowser, isTizen, isWebOs, isWebOs2021, isWebOs2022, };

package/dist/_esm5.processed/compat/can_reuse_media_keys.js

@@ -1,4 +1,4 @@
-import { isWebOs } from "./browser_detection";
+import { isPanasonic, isWebOs, } from "./browser_detection";
 /**
  * Returns `true` if a `MediaKeys` instance (the  `Encrypted Media Extension`
  * concept) can be reused between contents.
@@ -12,5 +12,5 @@ import { isWebOs } from "./browser_detection";
  * @returns {boolean}
  */
 export default function canReuseMediaKeys() {
-    return !isWebOs;
+    return !isWebOs && !isPanasonic;
 }

package/dist/_esm5.processed/compat/eme/close_session.js

@@ -136,7 +136,7 @@ export default function closeSession(session) {
                         return [3 /*break*/, 4];
                     case 2:
                         err_2 = _a.sent();
-                        if (timeoutCanceller.isUsed) { // Reminder: cancelled == session closed
+                        if (timeoutCanceller.isUsed()) { // Reminder: cancelled == session closed
                             return [2 /*return*/];
                         }
                         // The caught error can tell if session is closed
@@ -151,7 +151,7 @@ export default function closeSession(session) {
                         _a.sent();
                         return [3 /*break*/, 4];
                     case 4:
-                        if (timeoutCanceller.isUsed) { // Reminder: cancelled == session closed
+                        if (timeoutCanceller.isUsed()) { // Reminder: cancelled == session closed
                             return [2 /*return*/];
                         }
                         throw new Error("Compat: Couldn't know if session is closed");

package/dist/_esm5.processed/compat/event_listeners.js

@@ -80,7 +80,7 @@ function createCompatibleEventListener(eventNames, prefixes) {
     var mem;
     var prefixedEvents = eventPrefixed(eventNames, prefixes);
     return function (element, listener, cancelSignal) {
-        if (cancelSignal.isCancelled) {
+        if (cancelSignal.isCancelled()) {
             return;
         }
         // if the element is a HTMLElement we can detect

package/dist/_esm5.processed/config.d.ts

@@ -136,6 +136,8 @@ declare class ConfigHandler {
         SEGMENT_PRIORITIES_STEPS: number[];
         MAX_HIGH_PRIORITY_LEVEL: number;
         MIN_CANCELABLE_PRIORITY: number;
+        EME_DEFAULT_VIDEO_CODECS: string[];
+        EME_DEFAULT_AUDIO_CODECS: string[];
         EME_DEFAULT_WIDEVINE_ROBUSTNESSES: string[];
         EME_DEFAULT_PLAYREADY_ROBUSTNESSES: string[];
         EME_KEY_SYSTEMS: Partial<Record<string, string[]>>;

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

@@ -133,7 +133,8 @@ function getEstimateReference(_a, stopAllEstimates) {
      * This TaskCanceller is used both for restarting estimates with a new
      * configuration and to cancel them altogether.
      */
-    var currentEstimatesCanceller = new TaskCanceller({ cancelOn: stopAllEstimates });
+    var currentEstimatesCanceller = new TaskCanceller();
+    currentEstimatesCanceller.linkToSignal(stopAllEstimates);
     // Create `ISharedReference` on which estimates will be emitted.
     var estimateRef = createEstimateReference(manualBitrate.getValue(), representationsRef.getValue(), currentEstimatesCanceller.signal);
     manualBitrate.onUpdate(restartEstimatesProductionFromCurrentConditions, { clearSignal: stopAllEstimates });
@@ -333,7 +334,8 @@ function getEstimateReference(_a, stopAllEstimates) {
         var manualBitrateVal = manualBitrate.getValue();
         var representations = representationsRef.getValue();
         currentEstimatesCanceller.cancel();
-        currentEstimatesCanceller = new TaskCanceller({ cancelOn: stopAllEstimates });
+        currentEstimatesCanceller = new TaskCanceller();
+        currentEstimatesCanceller.linkToSignal(stopAllEstimates);
         var newRef = createEstimateReference(manualBitrateVal, representations, currentEstimatesCanceller.signal);
         newRef.onUpdate(function onNewEstimate(newEstimate) {
             estimateRef.setValue(newEstimate);

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;

package/dist/_esm5.processed/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;