Merge pull request #1241 from canalplus/feat/track-info-on-media-error

Add `trackInfo` property to some `MediaError`

.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "project": "tsconfig.json",
+    "project": "tsconfig.eslint.json",
     "sourceType": "module"
   },
   "plugins": [
@@ -328,6 +328,15 @@ module.exports = {
     "prefer-template": "off",
     "no-restricted-properties": [
       "error",
+      {
+        "object": "performance",
+        "property": "now",
+        "message": "Avoid using `performance.now` directly as timestamps may be different in the worker and the main thread. Please use the `getMonotonicTimeStamp` util instead.",
+      },
+      {
+        "object": "window",
+        "message": "`window` doesn't work in Node.JS and only works when JavaScript is running in the main thread. Please import `globalScope` instead.",
+      },
       {
         "object": "Object",
         "property": "assign",

.github/workflows/checks.yml

@@ -10,7 +10,7 @@ on:
     types: [opened, synchronize, reopened]
 
 jobs:
-  check:
+  typechecking_and_linting:
 
     runs-on: ubuntu-latest
 
@@ -28,6 +28,24 @@ jobs:
         cache: 'npm'
     - run: npm install
     - run: npm run check
+
+  unit_tests:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm install
     - run: npm run test:unit
 
   integration_linux:
@@ -49,53 +67,8 @@ jobs:
     # needed for integration & memory tests codecs support
     - run: sudo add-apt-repository multiverse && sudo apt update && sudo apt install -y ubuntu-restricted-extras
     - run: npm install
+    - run: npm run build
     # Firefox seems to have issue with integration tests on GitHub actions only
     # TODO to check
-    - run: node tests/integration/run.js --bchromehl
+    - run: node tests/integration/run.mjs --bchromehl
     - run: npm run test:memory
-
-  # Windows seems to be a lot less stable for some reason.
-  # TODO debug?
-  # integration_windows:
-
-  #   runs-on: windows-latest
-
-  #   strategy:
-  #     matrix:
-  #       node-version: [16.x]
-  #       # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-  #   steps:
-  #   - uses: actions/checkout@v2
-  #   - name: Use Node.js ${{ matrix.node-version }}
-  #     uses: actions/setup-node@v2
-  #     with:
-  #       node-version: ${{ matrix.node-version }}
-  #       cache: 'npm'
-  #   - run: npm install
-  #   # Firefox seems to have issue with integration tests on GitHub actions only
-  #   # TODO to check
-  #   - run: node tests/integration/run.js --bchromehl
-  #   - run: npm run test:memory
-
-  # MacOS seems to be a lot less stable for some reason.
-  # TODO debug?
-  # integration_macos:
-
-  #   runs-on: macos-latest
-
-  #   strategy:
-  #     matrix:
-  #       node-version: [16.x]
-  #       # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-  #   steps:
-  #   - uses: actions/checkout@v2
-  #   - name: Use Node.js ${{ matrix.node-version }}
-  #     uses: actions/setup-node@v2
-  #     with:
-  #       node-version: ${{ matrix.node-version }}
-  #       cache: 'npm'
-  #   - run: npm install
-  #   - run: npm run test:integration:gh-actions
-  #   - run: npm run test:memory

.github/workflows/perfs.yml

@@ -19,4 +19,4 @@ jobs:
     - run: npm install
     - run: export DISPLAY=:99
     - run: sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 & # optional
-    - run: node tests/performance/run.js
+    - run: node tests/performance/run.mjs

.gitignore

@@ -22,8 +22,7 @@
 /tests/performance/package.json
 /tests/performance/package-lock.json
 
-/dist/_esm5.processed
-/dist/_esm5.raw
+/dist/
 
 /doc/generated
 
@@ -36,4 +35,6 @@
 
 /src/parsers/manifest/dash/wasm-parser/target
 
+# IDE files
 /.idea
+/.vscode

CONTRIBUTING.md

@@ -12,23 +12,39 @@ Those have to follow the conventions defined below.
 
 
 
-## Reading the current code
+## Important code concepts
 
-Even if we hope the current code is straightforward, readable and commented
-enough we can still admit that going blind into the codebase can be hard at
-first as this is a pretty big technical project on a specific matter.
+### Code documentation
 
-We thus encourage you to rely on the architecture documentation you can usually
-find alongside the code, in `README.md` files.
-You can for example start by reading `src/README.md`, to have a clearer idea
-of the general code architecture of the player.
+We try to put `README.md` files inside every significant directories inside
+`/src` to provide a global architecture documentation of that directory
+specifically.
+
+You can try to start understanding a piece of RxPlayer code by navigating
+to that file. Understand that the documented behavior may be out of date
+(in which case you're welcome to update it or open an issue) though even in
+that case, it is a good starting point to understand the directory's role.
+Likewise, don't forget to update it if a change you made to the code
+necessitates a documentation change.
 
 Also, for a more exhaustive approach to the documentation of the project's file
 organization, you can look at [`FILES.md`](./FILES.md).
 
-The code of the RxPlayer being heavily modularized, you should not need to read
-the whole documentation to be ready, only the parts you want to update
-(hopefully!).
+### When renaming or deleting functions, classes or variables
+
+When Refactoring/Renaming, make sure to grep any of the renamed class / function
+/ variable's name as they may also be referenced in documentation and code
+comments. Same thing for a directory or file name.
+
+If the name is hard to grep (e.g. the name is too generic and thus has too many
+false positives), you can generally reduce the area to comments in the same file
+and documentation files in the same directory.
+
+### `features` object
+
+Some files should not be imported directly but only be accessed by going through
+the `features` object exported at `/src/features`. This is to reduce bundle size
+when an application doesn't need all of the RxPlayer's features.
 
 
 
@@ -53,8 +69,6 @@ directory) by calling `npm run lint:tests`.
 
 ### Types
 
-#### General TypeScript rules
-
 We try to be as strict as possible with types:
 
   - the `any` type should be avoided

FILES.md

@@ -20,14 +20,9 @@ At the time of writing, there are two distinct demos:
 
 ## `dist/`: Builds
 
-The `demo/` directory stores the player builds of the last version released.
+The `dist/` directory stores the player builds of the last version released.
 
-Contains the minified (``rx-player.min.js``) and the non-minified files
-(``rx-player.js``). Both are automatically generated with scripts at every new
-release.
-
-Two directories, namely ``_esm5.raw`` and ``_esm5.processed`` can also be
-generated in here if the right scripts are called.
+Directories can also be generated in here if the right scripts are called.
 These allow to publish more modular codebases to npm.
 
 
@@ -128,7 +123,6 @@ What is exported there are functions to load:
   - Manifests/MPDs
   - video/audio segments
   - subtitles tracks
-  - image tracks
 
 For different streaming technologies.
 

MAINTAINERS.md

@@ -16,6 +16,7 @@ RxPlayer-related question or to propose new features.
 Here is the list of current maintainers:
 
 - Paul Berberian <[email protected]>
+- Florent Bouisset <[email protected]>
 
 
 ## Previous maintainers ########################################################

README.md

@@ -179,21 +179,11 @@ Demo pages for our previous versions are also available
 
 
 
-## Your questions ##############################################################
-
-You can ask directly your questions about the project on [our
-gitter](https://gitter.im/canalplus/rx-player).
-We will try our best to answer them as quickly as possible.
-
-
-
 ## Contribute ##################################################################
 
 Details on how to contribute is written in the [CONTRIBUTING.md
 file](./CONTRIBUTING.md) at the root of this repository.
 
-If you need more information, you can contact us via our [gitter
-room](https://gitter.im/canalplus/rx-player).
 
 
 ### Dependencies ###############################################################
@@ -205,31 +195,6 @@ npm install
 ```
 
 
-### Build ######################################################################
-
-We use npm scripts to bundle, lint and test the player. Here are some examples:
-```sh
-# build the player in dist/rx-player.js
-npm run build
-
-# lint the code in src/ with eslint
-npm run lint
-
-# launch the demo on a local server (http://127.0.0.1:8000)
-npm run start
-
-# launch our test suite on various browsers
-npm run test
-
-# list all available npm scripts
-npm run list
-```
-
-Builds are included in the ``dist/`` directory (builds based on the last version
-are already included there).
-
-
-
 ## Why a new player? ###########################################################
 
 ### A need for an advanced media player ########################################
@@ -238,7 +203,7 @@ Canal+ Group is a media company with many advanced needs when it comes to media
 playback: it provides both live and VoD stream with multiple encryption
 requirements, supports a very large panel of devices and has many other
 specificities (like adult content restrictions, ad-insertion, Peer-To-Peer
-integration...).
+integration, low-latency live streaming...).
 
 When the time came to switch from a plugin-based web player approach to an HTML5
 one back in 2015, no media player had the key features we wanted, and including
@@ -249,7 +214,7 @@ The R&D department of Canal+ Group thus started to work on a new featureful
 media-player: the RxPlayer. To both help and profit from the community, it also
 decided to share it to everyone under a permissive open-source licence.
 
-Now, more than 6 years later, the RxPlayer continues to evolve at the same fast
+Now, more than 8 years later, the RxPlayer continues to evolve at the same fast
 pace to include a lot of features and improvements you may not find in other
 media players.
 You can look at our
@@ -296,24 +261,3 @@ them. Amongst those:
     risks always low.
 
 \* In "directfile" mode, on compatible browsers
-
-
-## Target support ##############################################################
-
-Here is a basic list of supported platforms:
-
-|             | Chrome  |  IE [1] |  Edge  |  Firefox  |  Safari  |  Opera  |
-|-------------|:-------:|:-------:|:------:|:---------:|:--------:|:-------:|
-| Windows     |  >= 30  |  >= 11  |  >= 12 |   >= 42   |   >= 8   |  >= 25  |
-| OSX         |  >= 30  |    -    |    -   |   >= 42   |   >= 8   |  >= 25  |
-| Linux       |  >= 37  |    -    |    -   |   >= 42   |    -     |  >= 25  |
-| Android [2] |  >= 30  |    -    |    -   |   >= 42   |    -     |  >= 15  |
-| iOS         |   No    |    -    |    -   |    No     |    No    |    No   |
-
-[1] Only on Windows >= 8.
-
-[2] Android version >= 4.2
-
-And more. A good way to know if the browser should be supported by our player is
-to go on the page https://www.youtube.com/html5 and check for "Media Source
-Extensions" support.

VERSION

@@ -1 +1 @@
-3.30.0
+4.0.0-beta.3

demo/full/index.html

@@ -8,7 +8,6 @@
 <link rel="stylesheet" href="styles/style.css" media="screen">
 <link rel="icon" type="image/x-icon" href="plus.ico" />
 <script type="text/javascript" src="./bundle.js" charset="utf-8"></script>
-<script async defer src="https://buttons.github.io/buttons.js"></script>
 <title>RxPlayer - CANAL+</title>
 </head>
 <body>

demo/full/scripts/components/BufferContentGraph.tsx

@@ -1,10 +1,15 @@
 import * as React from "react";
-import type { IRepresentation } from "../../../../src/public_types";
+import type {
+  IAudioRepresentation,
+  IVideoRepresentation,
+} from "../../../../src/public_types";
 import capitalizeFirstLetter from "../lib/capitalizeFirstLetter";
 import shuffleArray from "../lib/shuffleArray";
 import type { IBufferedData } from "../modules/player/index";
 import ToolTip from "./ToolTip";
 
+type IRepresentation = IAudioRepresentation | IVideoRepresentation;
+
 const {
   useEffect,
   useMemo,
@@ -258,12 +263,14 @@ export default function BufferContentGraph({
 
         let newTipText = "";
         switch (adaptation.type) {
-          case "video":
-            newTipText += `width: ${representation.width ?? "?"}` + "\n" +
-                          `height: ${representation.height ?? "?"}` + "\n" +
+          case "video": {
+            const rep = representation as IVideoRepresentation;
+            newTipText += `width: ${rep.width ?? "?"}` + "\n" +
+                          `height: ${rep.height ?? "?"}` + "\n" +
                           `codec: ${representation.codec ?? "?"}` + "\n" +
                           `bitrate: ${representation.bitrate ?? "?"}` + "\n";
             break;
+          }
           case "audio":
             newTipText += `language: ${adaptation.language ?? "?"}` + "\n" +
                           `audioDescription: ${