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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rx-player",
   "author": "Canal+",
-  "version": "4.0.0-dev.2023111400",
+  "version": "4.0.0-dev.2023121900",
   "description": "Canal+ HTML5 Video Player",
   "main": "./dist/commonjs/index.js",
   "module": "./dist/es2017/index.js",
@@ -138,12 +138,13 @@
     "demo": "node ./scripts/build_demo.mjs --production-mode",
     "demo:min": "node ./scripts/build_demo.mjs --production-mode --minify",
     "demo:watch": "node ./scripts/build_demo.mjs --watch --production-mode",
-    "doc": "docgen.ico doc/ doc/generated \"$(cat VERSION)\"",
+    "doc": "readme.doc doc/ doc/generated \"$(cat VERSION)\"",
     "lint": "eslint src -c .eslintrc.js",
     "lint:demo": "eslint -c demo/full/.eslintrc.js demo/full/scripts",
     "lint:tests": "eslint tests/**/*.js --ignore-pattern '/tests/performance/bundle*'",
     "list": "node scripts/list-npm-scripts.mjs",
     "prepublishOnly": "npm run build:all",
+    "releases:dev": "./scripts/make-dev-releases",
     "standalone": "node ./scripts/run_standalone_demo.mjs",
     "start": "node ./scripts/start_demo_web_server.mjs",
     "sart:wasm": "node ./scripts/start_demo_web_server.mjs --include-wasm",
@@ -172,6 +173,7 @@
     "@babel/plugin-transform-runtime": "7.22.15",
     "@babel/preset-env": "7.22.20",
     "@babel/preset-react": "7.22.15",
+    "@canalplus/readme.doc": "^0.3.0",
     "@types/chai": "4.3.6",
     "@types/jest": "29.5.5",
     "@types/mocha": "10.0.1",
@@ -185,7 +187,6 @@
     "babel-loader": "9.1.3",
     "chai": "4.3.8",
     "core-js": "3.32.2",
-    "docgen.ico": "^0.2.3",
     "esbuild": "0.19.3",
     "eslint": "8.50.0",
     "eslint-plugin-ban": "1.6.0",
@@ -215,7 +216,6 @@
     "terser-webpack-plugin": "5.3.9",
     "ts-jest": "29.1.1",
     "ts-loader": "9.4.4",
-    "tslint": "6.1.3",
     "typescript": "5.2.2",
     "webpack": "5.88.2",
     "webpack-cli": "5.1.4"
@@ -283,6 +283,9 @@
       "doc": "Generate the HTML documentation in doc/generated/pages"
     },
     "Update the RxPlayer's version": {
+    },
+    "Make a release": {
+      "releases:dev": "Produce dev npm releases (which are tagged pre-releases on npm) with the code in the current branch",
       "update-version": "Update the version to the string given in argument (example: `npm run update-version 3.8.0`). Will update the codebase and perform every builds."
     }
   }

package/scripts/canal-release.patch

@@ -0,0 +1,78 @@
+diff --git a/src/parsers/texttracks/ttml/html/apply_extent.ts b/src/parsers/texttracks/ttml/html/apply_extent.ts
+index 5772fa8fb..eb3a051e4 100644
+--- a/src/parsers/texttracks/ttml/html/apply_extent.ts
++++ b/src/parsers/texttracks/ttml/html/apply_extent.ts
+@@ -54,7 +54,14 @@ export default function applyExtent(
+         secondExtent[2] === "%" ||
+         secondExtent[2] === "em")
+     {
+-      element.style.height = secondExtent[1] + secondExtent[2];
++      const toNum = Number(secondExtent[1]);
++      if (secondExtent[2] === "%" && !isNaN(toNum) &&
++          (toNum < 0 || toNum > 100))
++      {
++        element.style.width = "80%";
++      } else {
++        element.style.height = secondExtent[1] + secondExtent[2];
++      }
+     } else if (secondExtent[2] === "c") {
+       addClassName(element, "proportional-style");
+       element.setAttribute("data-proportional-height", secondExtent[1]);
+diff --git a/src/parsers/texttracks/ttml/html/apply_line_height.ts b/src/parsers/texttracks/ttml/html/apply_line_height.ts
+index 4f727229a..253aa1a72 100644
+--- a/src/parsers/texttracks/ttml/html/apply_line_height.ts
++++ b/src/parsers/texttracks/ttml/html/apply_line_height.ts
+@@ -14,16 +14,15 @@
+  * limitations under the License.
+  */
+ 
+-import { addClassName } from "../../../../compat";
+ import log from "../../../../log";
+ import { REGXP_LENGTH } from "../regexps";
+ 
+ /**
+- * @param {HTMLElement} element
++ * @param {HTMLElement} _element
+  * @param {string} lineHeight
+  */
+ export default function applyLineHeight(
+-  element : HTMLElement,
++  _element : HTMLElement,
+   lineHeight : string
+ ) : void {
+   const trimmedLineHeight = lineHeight.trim();
+@@ -40,10 +39,10 @@ export default function applyLineHeight(
+       firstLineHeight[2] === "%" ||
+       firstLineHeight[2] === "em")
+   {
+-    element.style.lineHeight = firstLineHeight[1] + firstLineHeight[2];
++    // element.style.lineHeight = firstLineHeight[1] + firstLineHeight[2];
+   } else if (firstLineHeight[2] === "c") {
+-    addClassName(element, "proportional-style");
+-    element.setAttribute("data-proportional-line-height", firstLineHeight[1]);
++    // addClassName(element, "proportional-style");
++    // element.setAttribute("data-proportional-line-height", firstLineHeight[1]);
+   } else {
+     log.warn("TTML Parser: unhandled lineHeight unit:", firstLineHeight[2]);
+   }
+diff --git a/src/parsers/texttracks/ttml/html/apply_origin.ts b/src/parsers/texttracks/ttml/html/apply_origin.ts
+index 01a205aad..91d69fa3c 100644
+--- a/src/parsers/texttracks/ttml/html/apply_origin.ts
++++ b/src/parsers/texttracks/ttml/html/apply_origin.ts
+@@ -53,7 +53,15 @@ export default function applyOrigin(
+         secondOrigin[2] === "%" ||
+         secondOrigin[2] === "em")
+     {
+-      element.style.top = secondOrigin[1] + secondOrigin[2];
++      const toNum = Number(secondOrigin[1]);
++      if (secondOrigin[2] === "%" && !isNaN(toNum) &&
++          (toNum < 0 || toNum > 100))
++      {
++        element.style.bottom = "5%";
++        element.style.left = "10%";
++      } else {
++        element.style.top = secondOrigin[1] + secondOrigin[2];
++      }
+     } else if (secondOrigin[2] === "c") {
+       addClassName(element, "proportional-style");
+       element.setAttribute("data-proportional-top", secondOrigin[1]);

package/scripts/make-dev-releases

@@ -0,0 +1,65 @@
+#!/bin/bash
+
+# make-dev-releases
+# =================
+#
+# This script produces pre-releases on top of the current branch for the
+# `dev-v4` and `canal-v4` versions (as per their npm tags).
+#
+# To use it:
+#
+#   1. Be sure that you're on the branch corresponding to the pre-release you
+#      want to publish, at the repository's root directory.
+#
+#   2. Call this script followed with the corresponding version number it would
+#      have as an official release in the `MAJOR.MINOR.PATCH` format (e.g.
+#      `./update-version 4.1.3`). Special suffix corresponding to the date and
+#      tag will be added automatically by this script.
+#
+#   3. When the script ask you to confirm, check that the preceding commands did
+#      not output any issue and if it didn't you can confirm.
+#
+#   4. That's it!
+
+set -e
+
+current_branch=$(git branch | sed -n -e 's/^\* \(.*\)/\1/p')
+version=$1
+date=$(date "+%Y%m%d")
+dev_branch="release/v${version}-dev.${date}00"
+canal_branch="release/v${version}-canal.${date}00"
+
+git checkout -b ${dev_branch}
+./scripts/update-version $1-dev.${date}00
+git add --all
+git commit -m "update version"
+while true; do
+  read -n1 -p "Do you wish to push and publish the dev build? [y/n] " yn
+  echo ""
+  case $yn in
+    [Yy]* ) break;;
+    [Nn]* ) exit;;
+    * ) echo "Please answer y or n.";;
+  esac
+done
+git push origin ${dev_branch}
+npm publish --tag dev-v4
+
+git checkout $current_branch
+
+git checkout -b ${canal_branch}
+git apply ./scripts/canal-release.patch
+./scripts/update-version $1-canal.${date}00
+git add --all
+git commit -m "update version"
+git push origin ${canal_branch}
+while true; do
+  read -n1 -p "Do you wish to push and publish the canal build? [y/n] " yn
+  echo ""
+  case $yn in
+    [Yy]* ) break;;
+    [Nn]* ) exit;;
+    * ) echo "Please answer y or n.";;
+  esac
+done
+npm publish --tag canal-v4

package/scripts/update-version

@@ -21,8 +21,15 @@
 
 set -e
 
+if [ $# -eq 0 ]; then
+ echo "no version in argument"
+ exit 1
+fi
+
 version=$1
+date_iso=$(date "+%Y-%m-%d")
 
+sed -i.bak -e "s/^\#\# Unreleased/\#\# v${version} \(${date_iso}\)/gi" CHANGELOG.md && rm CHANGELOG.md.bak
 sed -i.bak -e "s/\/\\* PLAYER_VERSION \\*\/\"\(.*\)\";/\/* PLAYER_VERSION *\/\"${version}\";/g" src/core/api/public_api.ts && rm src/core/api/public_api.ts.bak
 sed -i.bak -e "s/\"version\":\s*\"[0-9]\+\.[0-9]\+\.[0-9]\+[^\"]*\"/\"version\": \"${version}\"/g" package.json && rm package.json.bak
 sed -i.bak -e "s/sonar\.projectVersion= *.*/sonar.projectVersion=${version}/g" sonar-project.properties && rm sonar-project.properties.bak

package/sonar-project.properties

@@ -1,7 +1,7 @@
 sonar.projectKey=rx-player
 sonar.organization=rx-player
 sonar.projectName=rx-player
-sonar.projectVersion=4.0.0-dev.2023111400
+sonar.projectVersion=4.0.0-dev.2023121900
 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/is_codec_supported.ts

@@ -16,6 +16,17 @@
 
 import { MediaSource_ } from "./browser_compatibility_types";
 
+/**
+ * Setting this value limit the number of entries in the support map
+ * preventing important memory usage, value is arbitrary
+ */
+const MAX_SUPPORT_MAP_ENTRIES = 200;
+
+/**
+ * caching the codec support reduce the amount of call to `isTypeSupported`
+ * and help for performance especially on low-end devices.
+ */
+const supportMap: Map<string, boolean> = new Map();
 /**
  * Returns true if the given codec is supported by the browser's MediaSource
  * implementation.
@@ -33,7 +44,18 @@ export default function isCodecSupported(mimeType : string) : boolean {
   /* eslint-disable @typescript-eslint/unbound-method */
   if (typeof MediaSource_.isTypeSupported === "function") {
   /* eslint-enable @typescript-eslint/unbound-method */
-    return MediaSource_.isTypeSupported(mimeType);
+    const cachedSupport = supportMap.get(mimeType);
+    if (cachedSupport !== undefined) {
+      return cachedSupport;
+    } else {
+      const isSupported = MediaSource_.isTypeSupported(mimeType);
+      if (supportMap.size >= MAX_SUPPORT_MAP_ENTRIES) {
+        supportMap.clear();
+      }
+      supportMap.set(mimeType, isSupported);
+      return isSupported;
+    }
+
   }
 
   return true;

package/src/core/adaptive/adaptive_representation_selector.ts

@@ -30,7 +30,7 @@ import SharedReference, {
 import TaskCanceller, {
   CancellationSignal,
 } from "../../utils/task_canceller";
-import { IReadOnlyPlaybackObserver } from "../api";
+import { IObservationPosition, IReadOnlyPlaybackObserver } from "../api";
 import { IBufferType } from "../segment_buffers";
 import BufferBasedChooser from "./buffer_based_chooser";
 import GuessBasedChooser from "./guess_based_chooser";
@@ -272,7 +272,7 @@ function getEstimateReference(
       }
       const { position, speed } = lastPlaybackObservation;
       const timeRanges = val.buffered;
-      const bufferGap = getLeftSizeOfBufferedTimeRange(timeRanges, position.last);
+      const bufferGap = getLeftSizeOfBufferedTimeRange(timeRanges, position.getWanted());
       const { representation } = val.content;
       const currentScore = scoreCalculator.getEstimate(representation);
       const currentBitrate = representation.bitrate;
@@ -389,7 +389,7 @@ function getEstimateReference(
       if (lowLatencyMode &&
           currentRepresentationVal !== null &&
           context.manifest.isDynamic &&
-          maximumPosition - position.last < 40)
+          maximumPosition - position.getWanted() < 40)
       {
         chosenRepFromGuessMode = guessBasedChooser
           .getGuess(sortedRepresentations,
@@ -595,24 +595,7 @@ export interface IRepresentationEstimatorPlaybackObservation {
    * Information on the current media position in seconds at the time of a
    * Playback Observation.
    */
-  position : {
-    /**
-     * Known position at the time the Observation was emitted, in seconds.
-     *
-     * Note that it might have changed since. If you want truly precize
-     * information, you should recuperate it from the HTMLMediaElement directly
-     * through another mean.
-     */
-    last : number;
-    /**
-     * Actually wanted position in seconds that is not yet reached.
-     *
-     * This might for example be set to the initial position when the content is
-     * loading (and thus potentially at a `0` position) but which will be seeked
-     * to a given position once possible.
-     */
-    pending : number | undefined;
-  };
+  position : IObservationPosition;
   /**
    * Last "playback rate" set by the user. This is the ideal "playback rate" at
    * which the media should play.

package/src/core/adaptive/network_analyzer.ts

@@ -154,7 +154,7 @@ function estimateStarvationModeBitrate(
   const { bufferGap, speed, position } = playbackInfo;
   const realBufferGap = isFinite(bufferGap) ? bufferGap :
                                               0;
-  const nextNeededPosition = position.last + realBufferGap;
+  const nextNeededPosition = position.getWanted() + realBufferGap;
   const concernedRequests = getConcernedRequests(pendingRequests, nextNeededPosition);
 
   if (concernedRequests.length !== 1) { // 0  == no request
@@ -238,7 +238,7 @@ function shouldDirectlySwitchToLowBitrate(
   }
   const realBufferGap = isFinite(playbackInfo.bufferGap) ? playbackInfo.bufferGap :
                                                            0;
-  const nextNeededPosition = playbackInfo.position.last + realBufferGap;
+  const nextNeededPosition = playbackInfo.position.getWanted() + realBufferGap;
   const nextRequest = arrayFind(requests, ({ content }) =>
     content.segment.duration > 0 &&
     (content.segment.time + content.segment.duration) > nextNeededPosition);
@@ -334,7 +334,7 @@ export default class NetworkAnalyzer {
     const { ABR_STARVATION_DURATION_DELTA } = config.getCurrent();
     // check if should get in/out of starvation mode
     if (isNaN(duration) ||
-        realBufferGap + position.last < duration - ABR_STARVATION_DURATION_DELTA)
+        realBufferGap + position.getWanted() < duration - ABR_STARVATION_DURATION_DELTA)
     {
       if (!this._inStarvationMode && realBufferGap <= localConf.starvationGap) {
         log.info("ABR: enter starvation mode.");

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

@@ -1,7 +1,7 @@
 import { Representation } from "../../../manifest";
 import { IBufferedChunk } from "../../segment_buffers";
 
-const BUFFER_WIDTH_IN_SECONDS = 10000;
+const BUFFER_WIDTH_IN_SECONDS = 30 * 60;
 
 const COLORS = [
   "#2ab7ca",
@@ -95,10 +95,7 @@ export default class SegmentBufferGraph {
     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) {
+      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) {

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

@@ -157,23 +157,28 @@ export default function constructDebugGeneralInfo(
         ]);
         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) ?? [];
+      const adaptations = instance.__priv_getCurrentAdaptation();
+      const videoBitratesStr = adaptations?.video?.representations.map((r) => {
+        return String(r.bitrate ?? "N/A") +
+               (r.isSupported ? "" : " U!") +
+               (r.decipherable !== false ? "" : " E!");
+      }) ?? [];
+      const audioBitratesStr = adaptations?.video?.representations.map((r) => {
+        return String(r.bitrate ?? "N/A") +
+               (r.isSupported ? "" : " U!") +
+               (r.decipherable !== false ? "" : " E!");
+      }) ?? [];
       representationsElt.innerHTML = "";
-      if (videoBitrates.length > 0) {
+      if (videoBitratesStr.length > 0) {
         representationsElt.appendChild(createMetricTitle("vb"));
         representationsElt.appendChild(createElement("span", {
-          textContent: videoBitrates.join(" ") + " ",
+          textContent: videoBitratesStr.join(" ") + " ",
         }));
       }
-      if (audioBitrates.length > 0) {
+      if (audioBitratesStr.length > 0) {
         representationsElt.appendChild(createMetricTitle("ab"));
         representationsElt.appendChild(createElement("span", {
-          textContent: audioBitrates.join(" ") + " ",
+          textContent: audioBitratesStr.join(" ") + " ",
         }));
       }
     } else {

package/src/core/api/index.ts

@@ -18,6 +18,7 @@ import PlaybackObserver from "./playback_observer";
 import Player from "./public_api";
 export { PlaybackObserver };
 export {
+  IObservationPosition,
   IPlaybackObservation,
   IPlaybackObserverEventType,
   IReadOnlyPlaybackObserver,

package/src/core/api/option_utils.ts

@@ -42,6 +42,7 @@ export type IParsedStartAtOption = { position : number } |
                                    { wallClockTime : number } |
                                    { percentage : number } |
                                    { fromLastPosition : number } |
+                                   { fromLivePosition : number } |
                                    { fromFirstPosition : number };
 
 /** Options of the RxPlayer's constructor once parsed. */
@@ -383,9 +384,8 @@ function parseLoadVideoOptions(
   }
 
   if (!isNullOrUndefined(options.startAt)) {
-    // TODO Better way to express that in TypeScript?
-    if ((options.startAt as { wallClockTime? : Date|number }).wallClockTime
-           instanceof Date
+    if ("wallClockTime" in options.startAt
+    && options.startAt.wallClockTime instanceof Date
     ) {
       const wallClockTime = (options.startAt as { wallClockTime : Date })
         .wallClockTime.getTime() / 1000;