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

package/jest.config.js

@@ -54,6 +54,7 @@ module.exports = {
       HTML_VTT: 1,
       LOCAL_MANIFEST: 1,
       METAPLAYLIST: 1,
+      DEBUG_ELEMENT: 1,
       NATIVE_SAMI: 1,
       NATIVE_SRT: 1,
       NATIVE_TTML: 1,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rx-player",
   "author": "Canal+",
-  "version": "3.30.0-dev.2023020100",
+  "version": "3.30.0-dev.2023030200",
   "description": "Canal+ HTML5 Video Player",
   "main": "./dist/rx-player.js",
   "keywords": [
@@ -78,34 +78,35 @@
     "next-tick": "1.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.20.12",
-    "@babel/plugin-transform-runtime": "7.19.6",
+    "@babel/core": "7.21.0",
+    "@babel/plugin-transform-runtime": "7.21.0",
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "@types/chai": "4.3.4",
-    "@types/jest": "29.2.5",
+    "@types/jest": "29.4.0",
     "@types/mocha": "10.0.1",
-    "@types/node": "18.11.18",
+    "@types/node": "18.14.0",
     "@types/sinon": "10.0.13",
-    "@typescript-eslint/eslint-plugin": "5.48.2",
-    "@typescript-eslint/eslint-plugin-tslint": "5.48.2",
-    "@typescript-eslint/parser": "5.48.2",
+    "@typescript-eslint/eslint-plugin": "5.53.0",
+    "@typescript-eslint/eslint-plugin-tslint": "5.53.0",
+    "@typescript-eslint/parser": "5.53.0",
     "arraybuffer-loader": "1.0.8",
     "babel-loader": "9.1.2",
     "chai": "4.3.7",
     "cheerio": "1.0.0-rc.12",
-    "core-js": "3.27.1",
-    "esbuild": "0.17.2",
-    "eslint": "8.32.0",
+    "core-js": "3.28.0",
+    "esbuild": "0.17.10",
+    "eslint": "8.34.0",
+    "eslint-plugin-ban": "1.6.0",
     "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-jsdoc": "39.6.4",
-    "eslint-plugin-react": "7.32.1",
+    "eslint-plugin-jsdoc": "40.0.0",
+    "eslint-plugin-react": "7.32.2",
     "esm": "3.2.25",
     "express": "4.18.2",
     "highlight.js": "11.7.0",
     "html-entities": "2.3.3",
-    "jest": "29.3.1",
-    "jest-environment-jsdom": "29.3.1",
+    "jest": "29.4.3",
+    "jest-environment-jsdom": "29.4.3",
     "karma": "6.4.1",
     "karma-chrome-launcher": "3.1.1",
     "karma-firefox-launcher": "2.1.2",
@@ -118,16 +119,16 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "regenerator-runtime": "0.13.11",
-    "rimraf": "4.1.1",
+    "rimraf": "4.1.2",
     "semver": "7.3.8",
     "sinon": "15.0.1",
     "terser-webpack-plugin": "5.3.6",
     "ts-jest": "29.0.5",
     "ts-loader": "9.4.2",
     "tslint": "6.1.3",
-    "typescript": "4.9.4",
+    "typescript": "4.9.5",
     "webpack": "5.75.0",
-    "webpack-bundle-analyzer": "4.7.0",
+    "webpack-bundle-analyzer": "4.8.0",
     "webpack-cli": "5.0.1"
   },
   "scripts-list": {

package/scripts/build/constants.d.ts

@@ -42,6 +42,7 @@ declare const enum __FEATURES__ {
   HTML_VTT = IS_DISABLED,
   LOCAL_MANIFEST = IS_DISABLED,
   METAPLAYLIST = IS_DISABLED,
+  DEBUG_ELEMENT = IS_DISABLED,
   NATIVE_SAMI = IS_DISABLED,
   NATIVE_SRT = IS_DISABLED,
   NATIVE_TTML = IS_DISABLED,

package/scripts/report_build_sizes

@@ -87,6 +87,10 @@ RXP_METAPLAYLIST=true npm run build:min
 echo -n "with METAPLAYLIST: " >> sizes
 stat -c %s dist/rx-player.min.js >> sizes
 
+RXP_DEBUG_ELEMENT=true npm run build:min
+echo -n "with DEBUG_ELEMENT: " >> sizes
+stat -c %s dist/rx-player.min.js >> sizes
+
 RXP_LOCAL_MANIFEST=true npm run build:min
 echo -n "with LOCAL_MANIFEST: " >> sizes
 stat -c %s dist/rx-player.min.js >> sizes

package/sonar-project.properties

@@ -1,7 +1,7 @@
 sonar.projectKey=rx-player
 sonar.organization=rx-player
 sonar.projectName=rx-player
-sonar.projectVersion=3.30.0-dev.2023020100
+sonar.projectVersion=3.30.0-dev.2023030200
 sonar.sources=./src,./demo,./tests
 sonar.exclusions=demo/full/bundle.js,demo/standalone/lib.js,demo/bundle.js
 sonar.host.url=https://sonarcloud.io

package/src/compat/browser_detection.ts

@@ -24,71 +24,118 @@ interface IIE11Document extends Document {
   documentMode? : unknown;
 }
 
-// true on IE11
-// false on Edge and other IEs/browsers.
-const isIE11 : boolean =
-  !isNode &&
-  typeof (window as IIE11WindowObject).MSInputMethodContext !== "undefined" &&
-  typeof (document as IIE11Document).documentMode !== "undefined";
-
-// true for IE / Edge
-const isIEOrEdge : boolean = isNode ?
-  false :
-  navigator.appName === "Microsoft Internet Explorer" ||
-  navigator.appName === "Netscape" &&
-  /(Trident|Edge)\//.test(navigator.userAgent);
-
-const isEdgeChromium: boolean = !isNode &&
-                                navigator.userAgent.toLowerCase().indexOf("edg/") !== -1;
-
-const isFirefox : boolean = !isNode &&
-                            navigator.userAgent.toLowerCase().indexOf("firefox") !== -1;
-
-const isSamsungBrowser : boolean = !isNode &&
-                                   /SamsungBrowser/.test(navigator.userAgent);
-
-const isTizen : boolean = !isNode &&
-                          /Tizen/.test(navigator.userAgent);
-
-const isWebOs : boolean = !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
-const isWebOs2021 : boolean = isWebOs &&
-                              (
-                                /[Ww]eb[O0]S.TV-2021/.test(navigator.userAgent) ||
-                                /[Cc]hr[o0]me\/79/.test(navigator.userAgent)
-                              );
-const isWebOs2022 : boolean = isWebOs &&
-                              (
-                                /[Ww]eb[O0]S.TV-2022/.test(navigator.userAgent) ||
-                                /[Cc]hr[o0]me\/87/.test(navigator.userAgent)
-                              );
+/** Edge Chromium, regardless of the device */
+let isEdgeChromium = false;
 
-interface ISafariWindowObject extends Window {
-  safari? : { pushNotification? : { toString() : string } };
-}
+/** IE11, regardless of the device */
+let isIE11 = false;
+
+/** IE11 or Edge __Legacy__ (not Edge Chromium), regardless of the device */
+let isIEOrEdge = false;
+
+/** Firefox, regardless of the device */
+let isFirefox = false;
 
 /** `true` on Safari on a PC platform (i.e. not iPhone / iPad etc.) */
-const isSafariDesktop : boolean =
-  !isNode && (
+let isSafariDesktop = false;
+
+/** `true` on Safari on an iPhone, iPad & iPod platform */
+let isSafariMobile = false;
+
+/** Samsung's own browser application */
+let isSamsungBrowser = false;
+
+/** `true` on devices where Tizen is the OS (e.g. Samsung TVs). */
+let isTizen = false;
+
+/** `true` on devices where WebOS is the OS (e.g. LG TVs). */
+let isWebOs = false;
+
+/** `true` specifically for WebOS 2021 version. */
+let isWebOs2021 = false;
+
+/** `true` specifically for WebOS 2022 version. */
+let isWebOs2022 = false;
+
+/** `true` for Panasonic devices. */
+let isPanasonic = false;
+
+((function findCurrentBrowser() : void {
+  if (isNode) {
+    return ;
+  }
+
+  // 1 - Find out browser between IE/Edge Legacy/Edge Chromium/Firefox/Safari
+
+  if (typeof (window as IIE11WindowObject).MSInputMethodContext !== "undefined" &&
+      typeof (document as IIE11Document).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 ||
     (window as ISafariWindowObject).safari?.pushNotification?.toString() ===
       "[object SafariRemoteNotification]"
-  );
+  ) {
+    isSafariDesktop = true;
+  }
 
-/** `true` on Safari on an iPhone, iPad & iPod platform */
-const isSafariMobile : boolean = !isNode &&
-                                 typeof navigator.platform === "string" &&
-                                 /iPad|iPhone|iPod/.test(navigator.platform);
+  // 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;
+  }
+})());
+
+interface ISafariWindowObject extends Window {
+  safari? : { pushNotification? : { toString() : string } };
+}
 
 export {
   isEdgeChromium,
   isIE11,
   isIEOrEdge,
   isFirefox,
+  isPanasonic,
   isSafariDesktop,
   isSafariMobile,
   isSamsungBrowser,

package/src/compat/can_reuse_media_keys.ts

@@ -1,4 +1,7 @@
-import { isWebOs } from "./browser_detection";
+import {
+  isPanasonic,
+  isWebOs,
+} from "./browser_detection";
 
 /**
  * Returns `true` if a `MediaKeys` instance (the  `Encrypted Media Extension`
@@ -13,5 +16,5 @@ import { isWebOs } from "./browser_detection";
  * @returns {boolean}
  */
 export default function canReuseMediaKeys() : boolean {
-  return !isWebOs;
+  return !isWebOs && !isPanasonic;
 }

package/src/compat/eme/close_session.ts

@@ -86,7 +86,7 @@ export default function closeSession(
     try {
       await session.update(new Uint8Array(1));
     } catch (err) {
-      if (timeoutCanceller.isUsed) { // Reminder: cancelled == session closed
+      if (timeoutCanceller.isUsed()) { // Reminder: cancelled == session closed
         return;
       }
 
@@ -102,7 +102,7 @@ export default function closeSession(
       await cancellableSleep(1000, timeoutCanceller.signal);
     }
 
-    if (timeoutCanceller.isUsed) { // Reminder: cancelled == session closed
+    if (timeoutCanceller.isUsed()) { // Reminder: cancelled == session closed
       return;
     }
 

package/src/compat/event_listeners.ts

@@ -125,7 +125,7 @@ function createCompatibleEventListener(
     listener: (event? : unknown) => void,
     cancelSignal: CancellationSignal
   ) => {
-    if (cancelSignal.isCancelled) {
+    if (cancelSignal.isCancelled()) {
       return;
     }
 

package/src/core/adaptive/adaptive_representation_selector.ts

@@ -215,7 +215,8 @@ function getEstimateReference(
    * This TaskCanceller is used both for restarting estimates with a new
    * configuration and to cancel them altogether.
    */
-  let currentEstimatesCanceller = new TaskCanceller({ cancelOn: stopAllEstimates });
+  let currentEstimatesCanceller = new TaskCanceller();
+  currentEstimatesCanceller.linkToSignal(stopAllEstimates);
 
   // Create `ISharedReference` on which estimates will be emitted.
   const estimateRef = createEstimateReference(manualBitrate.getValue(),
@@ -491,7 +492,8 @@ function getEstimateReference(
     const manualBitrateVal = manualBitrate.getValue();
     const representations = representationsRef.getValue();
     currentEstimatesCanceller.cancel();
-    currentEstimatesCanceller = new TaskCanceller({ cancelOn: stopAllEstimates });
+    currentEstimatesCanceller = new TaskCanceller();
+    currentEstimatesCanceller.linkToSignal(stopAllEstimates);
     const newRef = createEstimateReference(
       manualBitrateVal,
       representations,

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;
+}