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

package/src/core/adaptive/network_analyzer.ts

@@ -162,6 +162,13 @@ function estimateStarvationModeBitrate(
 
   const concernedRequest = concernedRequests[0];
   const now = performance.now();
+
+  let minimumRequestTime = concernedRequest.content.segment.duration * 1.5;
+  minimumRequestTime = Math.min(minimumRequestTime, 3000);
+  minimumRequestTime = Math.max(minimumRequestTime, 12000);
+  if (now - concernedRequest.requestTimestamp < minimumRequestTime) {
+    return undefined;
+  }
   const lastProgressEvent = concernedRequest.progress.length > 0 ?
     concernedRequest.progress[concernedRequest.progress.length - 1] :
     undefined;
@@ -178,7 +185,7 @@ function estimateStarvationModeBitrate(
       // Calculate estimated time spent rebuffering if we continue doing that request.
       const expectedRebufferingTime = remainingTime -
         (realBufferGap / speed);
-      if (expectedRebufferingTime > 2000) {
+      if (expectedRebufferingTime > 2500) {
         return bandwidthEstimate;
       }
     }
@@ -402,10 +409,8 @@ export default class NetworkAnalyzer {
   ) : boolean {
     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,

package/src/core/adaptive/utils/representation_score_calculator.ts

@@ -18,6 +18,26 @@ import log from "../../../log";
 import { Representation } from "../../../manifest";
 import EWMA from "./ewma";
 
+/**
+ * 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
@@ -107,7 +127,7 @@ export default class RepresentationScoreCalculator {
    */
   public getEstimate(
     representation : Representation
-  ) : [number, ScoreConfidenceLevel] | undefined {
+  ) : IRepresentationMaintainabilityScore | undefined {
     if (this._currentRepresentationData === null ||
         this._currentRepresentationData.representation.id !== representation.id)
     {
@@ -119,7 +139,7 @@ export default class RepresentationScoreCalculator {
                             loadedDuration >= 10 ? ScoreConfidenceLevel.HIGH :
                                                    ScoreConfidenceLevel.LOW;
 
-    return [estimate, confidenceLevel];
+    return { score: estimate, confidenceLevel };
   }
 
   /**

package/src/core/api/debug/buffer_graph.ts

@@ -0,0 +1,247 @@
+import { Representation } from "../../../manifest";
+import { IBufferedChunk } from "../../segment_buffers";
+
+const BUFFER_WIDTH_IN_SECONDS = 10000;
+
+const COLORS = [
+  "#2ab7ca",
+  "#fed766",
+  "#4dd248",
+  "#a22c28",
+  "#556b2f", // darkolivegreen
+  "#add8e6", // lightblue
+  "#90ee90", // lightgreen
+  "#444444",
+  "#40bfc1",
+  "#57557e",
+  "#fbe555",
+];
+
+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 : WeakMap<Representation, string>;
+
+  /** Current amount of colors chosen to represent the various Representation. */
+  private _currNbColors : number;
+
+  /** Canvas that will contain the buffer graph itself. */
+  private readonly _canvasElt : HTMLCanvasElement;
+
+  private readonly _canvasCtxt : CanvasRenderingContext2D | null;
+
+  constructor(canvasElt : HTMLCanvasElement) {
+    this._colorMap = new WeakMap();
+    this._currNbColors = 0;
+    this._canvasElt = canvasElt;
+    this._canvasCtxt = this._canvasElt.getContext("2d");
+    this.clear();
+  }
+
+  public clear() {
+    if (this._canvasCtxt !== null) {
+      this._canvasCtxt.clearRect(0, 0, this._canvasElt.width, this._canvasElt.height);
+    }
+  }
+
+  public update(data : ISegmentBufferGrapUpdateData) : void {
+    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 : number;
+    if (data.minimumPosition !== undefined) {
+      if (inventory.length > 0) {
+        minimumPoint = Math.min(data.minimumPosition, inventory[0].start);
+      } else {
+        minimumPoint = data.minimumPosition;
+      }
+    } else {
+      minimumPoint = inventory[0]?.start ?? 0;
+    }
+    let maximumPoint : number;
+    if (data.maximumPosition !== undefined) {
+      if (inventory.length > 0) {
+        maximumPoint = Math.max(data.maximumPosition,
+                                inventory[inventory.length - 1].end);
+      } else {
+        maximumPoint = data.maximumPosition;
+      }
+    } else {
+      maximumPoint = inventory[inventory.length - 1]?.end ??
+        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.
+   */
+  private _paintRange(
+    rangeScaled : IScaledChunk,
+    width : number,
+    height : number
+  ) : void {
+    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
+    );
+  }
+
+  private _getColorForRepresentation(
+    representation : Representation
+  ) : string {
+    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 : number,
+  minimumPosition : number,
+  maximumPosition : number,
+  canvasCtx : CanvasRenderingContext2D,
+  width : number,
+  height : number
+) {
+  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 : IBufferedChunk[],
+  minimumPosition : number,
+  maximumPosition : number
+) : IScaledChunk[] {
+  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;
+}
+
+interface IScaledChunk {
+  scaledStart: number;
+  scaledEnd: number;
+  info: IBufferedChunk;
+}

package/src/core/api/debug/buffer_size_graph.ts

@@ -0,0 +1,130 @@
+/**
+ * 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 {
+  private _history : IHistoryItem[];
+
+  /** Canvas that will contain the buffer size graph itself. */
+  private readonly _canvasElt : HTMLCanvasElement;
+
+  private readonly _canvasCtxt : CanvasRenderingContext2D | null;
+
+  constructor(canvasElt : HTMLCanvasElement) {
+    this._canvasElt = canvasElt;
+    this._canvasCtxt = this._canvasElt.getContext("2d");
+    this._history = [];
+  }
+
+  public pushBufferSize(bufferSize : number) : void {
+    const now = performance.now();
+    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 = [];
+    }
+  }
+
+  public clear() {
+    if (this._canvasCtxt !== null) {
+      this._canvasCtxt.clearRect(0, 0, this._canvasElt.width, this._canvasElt.height);
+    }
+  }
+
+  public reRender(width : number, height : number) : void {
+    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 : number) : number {
+      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 : number) : number {
+      return (date - minDate) * gridWidth;
+    }
+  }
+}
+
+interface IHistoryItem {
+  timestamp : number;
+  bufferSize : number;
+}

package/src/core/api/debug/constants.ts

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

package/src/core/api/debug/index.ts

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

package/src/core/api/debug/modules/general_info.ts

@@ -0,0 +1,184 @@
+import { CancellationSignal } from "../../../../utils/task_canceller";
+import RxPlayer from "../../public_api";
+import { DEFAULT_REFRESH_INTERVAL } from "../constants";
+import {
+  createCompositeElement,
+  createElement,
+  createMetricTitle,
+  isExtendedMode,
+} from "../utils";
+
+export default function constructDebugGeneralInfo(
+  instance : RxPlayer,
+  parentElt : HTMLElement,
+  cancelSignal : CancellationSignal
+) : HTMLElement {
+  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() {
+    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 : Array<[string, string]> = [
+        ["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 : Array<[string, string]> = [];
+      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 : Array<[string, string]> = [];
+      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 = instance.getContentUrls()?.[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 = instance.getVideoTrack()?.representations.map(r => {
+        return r.bitrate;
+      }).filter(bitrate => bitrate !== undefined) ?? [];
+      const audioBitrates = instance.getAudioTrack()?.representations.map(r => {
+        return r.bitrate;
+      }).filter(bitrate => bitrate !== undefined) ?? [];
+      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 = "";
+    }
+  }
+}