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

package/jest.config.js

@@ -6,11 +6,6 @@ module.exports = {
   roots: ["<rootDir>/src"],
   preset: "ts-jest",
   testEnvironment: "jsdom",
-    // Without this, Jest just fails when importing rxjs, for some arcane
-    // ESM-vs-CommonJS reasons linked to how it works internally.
-    moduleNameMapper: {
-      "^rxjs$": require.resolve("rxjs"),
-  },
   testMatch: ["**/?(*.)+(spec|test).[jt]s?(x)"],
   collectCoverageFrom: [
     "src/**/*.ts",
@@ -59,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": "4.0.0-beta.0",
+  "version": "4.0.0-beta.2",
   "description": "Canal+ HTML5 Video Player",
   "main": "./dist/rx-player.js",
   "keywords": [
@@ -12,8 +12,6 @@
     "mediasource",
     "mse",
     "reactive",
-    "rx",
-    "rxjs",
     "smooth",
     "streaming",
     "typescript",
@@ -42,12 +40,14 @@
     "check:appveyor": "npm run check:types && npm run lint && npm run lint:demo && npm run lint:tests && npm run test:appveyor",
     "check:types": "tsc --noEmit --project .",
     "check:types:watch": "tsc --noEmit --watch --project .",
+    "check:demo": "npm run check:demo:types && npm run lint:demo",
+    "check:demo:types": "tsc --noEmit --project demo/full",
     "demo": "node ./scripts/generate_full_demo.js --production-mode",
     "demo:min": "node ./scripts/generate_full_demo.js --production-mode --minify",
     "demo:watch": "node ./scripts/generate_full_demo.js --watch --production-mode",
-    "doc": "rm -rf doc/generated; node ./scripts/doc-generator/index.js doc/ doc/generated \"$(cat VERSION)\"",
+    "doc": "docgen.ico doc/ doc/generated \"$(cat VERSION)\"",
     "lint": "eslint src -c .eslintrc.js",
-    "lint:demo": "eslint demo/full/scripts",
+    "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.js",
     "prepublishOnly": "npm run build:modular",
@@ -80,58 +80,59 @@
     "next-tick": "1.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.20.12",
-    "@babel/plugin-transform-runtime": "7.19.6",
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
-    "@types/chai": "4.3.4",
-    "@types/jest": "29.4.0",
+    "@babel/core": "7.22.5",
+    "@babel/plugin-transform-runtime": "7.22.5",
+    "@babel/preset-env": "7.22.5",
+    "@babel/preset-react": "7.22.5",
+    "@types/chai": "4.3.5",
+    "@types/jest": "29.5.2",
     "@types/mocha": "10.0.1",
-    "@types/node": "18.11.18",
-    "@types/sinon": "10.0.13",
-    "@typescript-eslint/eslint-plugin": "5.49.0",
-    "@typescript-eslint/eslint-plugin-tslint": "5.49.0",
-    "@typescript-eslint/parser": "5.49.0",
+    "@types/node": "20.3.1",
+    "@types/react": "18.2.12",
+    "@types/react-dom": "18.2.5",
+    "@types/sinon": "10.0.15",
+    "@typescript-eslint/eslint-plugin": "5.59.11",
+    "@typescript-eslint/eslint-plugin-tslint": "5.59.11",
+    "@typescript-eslint/parser": "5.59.11",
     "arraybuffer-loader": "1.0.8",
     "babel-loader": "9.1.2",
     "chai": "4.3.7",
-    "cheerio": "1.0.0-rc.12",
-    "core-js": "3.27.2",
-    "esbuild": "0.17.4",
-    "eslint": "8.32.0",
+    "core-js": "3.31.0",
+    "docgen.ico": "^0.2.3",
+    "esbuild": "0.18.2",
+    "eslint": "8.42.0",
+    "eslint-plugin-ban": "1.6.0",
     "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-jsdoc": "39.6.9",
-    "eslint-plugin-react": "7.32.1",
+    "eslint-plugin-jsdoc": "46.2.6",
+    "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.4.1",
-    "jest-environment-jsdom": "29.4.1",
-    "karma": "6.4.1",
-    "karma-chrome-launcher": "3.1.1",
+    "github-buttons": "2.27.0",
+    "html-entities": "2.3.6",
+    "jest": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
+    "karma": "6.4.2",
+    "karma-chrome-launcher": "3.2.0",
     "karma-firefox-launcher": "2.1.2",
     "karma-mocha": "2.0.1",
     "karma-webpack": "5.0.0",
-    "markdown-it": "13.0.1",
     "mocha": "10.2.0",
     "mocha-loader": "5.1.5",
     "raw-loader": "4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "regenerator-runtime": "0.13.11",
-    "rimraf": "4.1.2",
-    "rxjs": "7.8.0",
-    "semver": "7.3.8",
-    "sinon": "15.0.1",
-    "terser-webpack-plugin": "5.3.6",
-    "ts-jest": "29.0.5",
-    "ts-loader": "9.4.2",
+    "rimraf": "5.0.1",
+    "semver": "7.5.1",
+    "sinon": "15.1.2",
+    "terser-webpack-plugin": "5.3.9",
+    "ts-jest": "29.1.0",
+    "ts-loader": "9.4.3",
     "tslint": "6.1.3",
-    "typescript": "4.9.4",
-    "webpack": "5.75.0",
-    "webpack-bundle-analyzer": "4.7.0",
-    "webpack-cli": "5.0.1"
+    "typescript": "5.1.3",
+    "webpack": "5.86.0",
+    "webpack-bundle-analyzer": "4.9.0",
+    "webpack-cli": "5.1.4"
   },
   "scripts-list": {
     "Build a demo page (e.g. to test a code change)": {
@@ -142,6 +143,9 @@
       "demo": "Build the demo in demo/bundle.js",
       "demo:min": "Build the demo and minify it in demo/bundle.js",
       "demo:watch": "Build the demo in demo/bundle.js each times the files update.",
+      "check:demo": "Check the validity of the full demo directory by running the type checker and linter on it",
+      "check:demo:types": "Check TypeScript types in full demo files",
+      "lint:demo": "Run linter on the full demo files",
       "standalone": "Build and launch the \"standalone\" demo (without any UI) on a local server. Re-build on file updates.",
       "certificate": "Generate a certificate to be able to use HTTPS locally for the demo pages (`npm run start` and `npm run standalone` will then listen to HTTPS requests through a communicated port)"
     },

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/build/generate_build.js

@@ -22,7 +22,7 @@ const { spawn } = require("child_process");
 const fs = require("fs/promises");
 const os = require("os");
 const path = require("path");
-const rimraf = require("rimraf");
+const { rimraf } = require("rimraf");
 
 const BUILD_DIR_FROM_ROOT = "dist/_esm5.processed";
 

package/scripts/fast_demo_build.js

@@ -52,34 +52,40 @@ function fastDemoBuild(options) {
   const watch = !!options.watch;
   const isDevMode = !options.production;
   const includeWasmParser = !!options.includeWasmParser;
-  let beforeTime = process.hrtime.bigint();
 
-  esbuild.build({
-    entryPoints: [path.join(__dirname, "../demo/full/scripts/index.jsx")],
+  /** Declare a plugin to anounce when a build begins and ends */
+  const consolePlugin = {
+    name: "onEnd",
+    setup(build) {
+      build.onStart(() => {
+        console.log(`\x1b[33m[${getHumanReadableHours()}]\x1b[0m ` +
+          "New demo build started");
+      })
+      build.onEnd(result => {
+        if (result.errors.length > 0 || result.warnings.length > 0) {
+          const { errors, warnings } = result;
+          console.log(`\x1b[33m[${getHumanReadableHours()}]\x1b[0m ` +
+            `Demo re-built with ${errors.length} error(s) and ` +
+            ` ${warnings.length} warning(s) `);
+          return;
+        }
+        console.log(`\x1b[32m[${getHumanReadableHours()}]\x1b[0m ` +
+          "Demo built!");
+      });
+    },
+  };
+
+  // Create a context for incremental builds
+  esbuild.context({
+    entryPoints: [path.join(__dirname, "../demo/full/scripts/index.tsx")],
     bundle: true,
+    target: "es2017",
     minify,
     outfile: path.join(__dirname, "../demo/full/bundle.js"),
-    watch: !watch ? undefined : {
-      onRebuild(error, result) {
-        if (error) {
-          console.error(`\x1b[31m[${getHumanReadableHours()}]\x1b[0m Demo re-build failed:`,
-                        err);
-        } else {
-          if (result.errors > 0 || result.warnings > 0) {
-            const { errors, warnings } = result;
-            console.log(`\x1b[33m[${getHumanReadableHours()}]\x1b[0m ` +
-                        `Demo re-built with ${errors.length} error(s) and ` +
-                        ` ${warnings.length} warning(s) ` +
-                        `(in ${stats.endTime - stats.startTime} ms).`);
-          }
-          console.log(`\x1b[32m[${getHumanReadableHours()}]\x1b[0m ` +
-                      "Demo re-built!");
-        }
-      },
-    },
+    plugins: [consolePlugin],
     define: {
       "process.env.NODE_ENV": JSON.stringify(isDevMode ? "development" : "production"),
-      __INCLUDE_WASM_PARSER__: includeWasmParser,
+      __INCLUDE_WASM_PARSER__: JSON.stringify(includeWasmParser),
       __ENVIRONMENT__: JSON.stringify({
         PRODUCTION: 0,
         DEV: 1,
@@ -89,24 +95,18 @@ function fastDemoBuild(options) {
         CURRENT_LEVEL: "INFO",
       }),
     }
-  }).then(
-  (result) => {
-    if (result.errors > 0 || result.warnings > 0) {
-      const { errors, warnings } = result;
-      console.log(`\x1b[33m[${getHumanReadableHours()}]\x1b[0m ` +
-                  `Demo built with ${errors.length} error(s) and ` +
-                  ` ${warnings.length} warning(s) ` +
-                  `(in ${stats.endTime - stats.startTime} ms).`);
-    }
-    const fullTime = (process.hrtime.bigint() - beforeTime) / 1000000n;
-    console.log(`\x1b[32m[${getHumanReadableHours()}]\x1b[0m ` +
-                `Build done in ${fullTime}ms`);
-  },
-  (err) => {
-    console.error(`\x1b[31m[${getHumanReadableHours()}]\x1b[0m Demo build failed:`,
-                  err);
-    process.exit(1);
-  });
+  })
+    .then((context) => {
+      if (watch) {
+        return context.watch();
+      }
+    })
+    .catch((err) => {
+      console.error(
+        `\x1b[31m[${getHumanReadableHours()}]\x1b[0m Demo build failed:`,
+        err);
+      process.exit(1);
+    });
 }
 
 /**

package/scripts/generate_full_demo.js

@@ -60,7 +60,7 @@ function generateFullDemo(options) {
 
   const webpackDemoConfig = {
     mode: isDevMode ? "development" : "production",
-    entry: path.join(__dirname, "../demo/full/scripts/index.jsx"),
+    entry: path.join(__dirname, "../demo/full/scripts/index.tsx"),
     resolve: {
       extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
     },

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-beta.0
+sonar.projectVersion=4.0.0-beta.2
 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,124 @@ 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;
+
+/** `true` for the PlayStation 5 game console. */
+let isPlayStation5 = 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 (navigator.userAgent.indexOf("PlayStation 5") !== -1) {
+    isPlayStation5 = true;
+  } else 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,
+  isPlayStation5,
   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/eme/load_session.ts

@@ -36,7 +36,7 @@ export default async function loadSession(
   session : MediaKeySession | ICustomMediaKeySession,
   sessionId : string
 ) : Promise<boolean> {
-  log.info("Compat/DRM: Load persisted session", sessionId);
+  log.info("DRM: Load persisted session", sessionId);
   const isLoaded = await session.load(sessionId);
 
   if (!isLoaded || session.keyStatuses.size > 0) {

package/src/compat/event_listeners.ts

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

package/src/compat/has_issues_with_high_media_source_duration.ts

@@ -0,0 +1,27 @@
+import { isPlayStation5 } from "./browser_detection";
+
+/**
+ * Some platforms have issues when the `MediaSource`'s `duration` property
+ * is set to a very high value (playback freezes) but not when setting it
+ * to `Infinity`, which is what the HTML spec as of now (2023-05-15) recommends
+ * for live contents.
+ *
+ * However setting the `MediaSource`'s `duration` property to `Infinity` seems
+ * more risky, considering all platforms we now support, than setting it at a
+ * relatively high ~2**32 value which is what we do generally.
+ *
+ * Moreover, setting it to `Infinity` require us to use another MSE API,
+ * `setLiveSeekableRange` to properly allow seeking. We're used to MSE issues so
+ * I'm not too confident of using another MSE API for all platforms directly.
+ *
+ * So this methods just return `true` based on a whitelist of platform for which
+ * it has been detected that high `duration` values cause issues but setting it
+ * to Infinity AND playing with `setLiveSeekableRange` does not.
+ *
+ * @returns {boolean}
+ */
+export default function hasIssuesWithHighMediaSourceDuration(): boolean {
+  // For now only seen on the Webkit present in the PlayStation 5, for which the
+  // alternative is known to work.
+  return isPlayStation5;
+}