[Proposal] Remove standalone demo

The RxPlayer historically proposed two demo:

  - The "full" demo, containing a whole application relying on the
    RxPlayer to load content. Which also corresponds to our advertised
    RxPlayer demo page on github: https://developers.canal-plus.com/rx-player/

  - The "standalone" demo, which is just an HTML page containing a default
    RxPlayer bundle script and a video element, allowing to perform
    playback tests through the console.

We never really relied on the standalone demo, any kind of test we
perform being on any case either on the full demo, or directly linked to
final applications developped internally at Canal+.

Consequently to simplify the repository maintainance, I propose here to
remove the standalone demo and to move the full demo from the
`demo/full` directory to just `demo/`.

.eslintignore

@@ -2,10 +2,8 @@ node_modules
 *.log
 *.keys
 
-demo/full/bundle.js
-demo/full/lib.js
-demo/standalone/lib.js
 demo/bundle.js
+demo/lib.js
 
 tools/tests/coverage/
 

.gitignore

@@ -3,9 +3,8 @@
 /localhost.key
 /node_modules
 
-/demo/full/bundle.js
-/demo/full/worker.js
-/demo/standalone/lib.js
+/demo/bundle.js
+/demo/worker.js
 
 /tests/performance/node_modules
 /tests/performance/bundle1.js

CONTRIBUTING.md

@@ -141,40 +141,24 @@ And the following methods:
 
 You might want to quickly test your code modification(s) on a real use case.
 
-For those types of need, we developped two demo pages:
+For those types of need, we developped a demo page. This demo has a user-friendly
+interface and allow the most frequent API interactions.
 
-- the _full demo_ page, which is also the one used to showcase the player.
+It also exposes both the RxPlayer class through `window.RxPlayer` and the rxPlayer
+instance through `window.rxPlayer` - both in the global scope. You can thus open a
+debugger/inspector in your favorite browser to exploit directly the player's API.
 
-  This demo has a user-friendly interface and allow the most frequent API interactions.
-
-  It also exposes both the RxPlayer class through `window.RxPlayer` and the rxPlayer
-  instance through `window.rxPlayer` - both in the global scope. You can thus open a
-  debugger/inspector in your favorite browser to exploit directly the player's API.
-
-- the _standalone demo_ page, which is just a `<video />` tag linked to a RxPlayer
-  instance.
-
-  In this demo too, `window.RxPlayer` and `window.rxPlayer` link to the RxPlayer class and
-  the rxPlayer instance respectively.
-
-To use the full demo page, you can build it and run a local HTTP server on the port 8000
-by running the following npm script.
+To use the demo page, you can build it and run a local HTTP server on the port 8000 by
+running the following npm script.
 
 ```sh
 npm run start
 ```
 
-To use the standalone demo page, you can build it and run a local HTTP server on the port
-8001 by running the following npm script.
-
-```sh
-npm run standalone
-```
-
-Both will detect when the RxPlayer's files (or even the demo files) are updated and
-perform a new build when that's the case. In that way, the server will always serve the
-last local version of the code. Note however that hot-reload is not enabled currently,
-you'll have to refresh the page yourself.
+It will detect when the RxPlayer's files (or even the demo files) are updated and perform
+a new build when that's the case. In that way, the server will always serve the last local
+version of the code. Note however that hot-reload is not enabled currently, you'll have to
+refresh the page yourself.
 
 ### Serving the demo page through HTTPS
 
@@ -188,9 +172,8 @@ help of `openssl`:
 npm run certificate
 ```
 
-You can then run the same demo script defined previously. The _full demo_ will now serve
-HTTPS through the port 8443 and the _standalone demo_ through the port 8444. Both still
-serve HTTP on the same ports than before.
+You can then run the same demo script defined previously. The demo will now serve HTTPS
+through the port 8443 (and through HTTP through the usual port).
 
 Note that such self-signed certificates are usually (rightfully) considered suspicious by
 web browsers. As such, you might first encounter a warning screen when going to one of the

FILES.md

@@ -5,15 +5,7 @@ directory or subdirectory, in alphabetical order.
 
 ## `demo/`: Demo applications
 
-The `demo/` directory contains demos of application using the RxPlayer.
-
-At the time of writing, there are two distinct demos:
-
-- _full_: Demo with a graphic interface, written with the React library, to showcase what
-  the player can do
-
-- _standalone_: Just expose the rx-player in `window`, to allow scripted interactions with
-  it in the console. The player is linked to a video tag in the displayed page.
+The `demo/` directory contains the demo page, an example application using the RxPlayer.
 
 ## `dist/`: Builds
 

demo/README.md

@@ -1,20 +1,11 @@
 # RxPlayer demos
 
-This directory hosts the code of various demo applications allowing to showcase and more
+This directory hosts the code of a demo application allowing us to showcase and more
 importantly test the RxPlayer.
 
-As of now, there are two demos available:
-
-- the "full" demo (in ./full): This is the more advanced demo, the one that we generally
-  link to but also the one with which we test the most often.
-
-- the "standalone" demo (in ./standalone): This is a very minimal demo relying just on an
-  index.html containing a `<video>` element and an RxPlayer default build exposed through
-  `window`,
-
 This directory is not exposed to the outside world and as such can change as we see fit.
 
-Note that this directory only contains the code for the demo pages. Any script allowing to
+Note that this directory only contains the code for the demo page. Any script allowing to
 serve them or push them to a server are out of its scope.
 
 To know how to perform those actions, you can start from the topmost documentation.

demo/full/scripts/components/BufferContentGraph.tsx → demo/scripts/components/BufferContentGraph.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { IVideoRepresentation } from "../../../../src/public_types";
+import type { IVideoRepresentation } from "../../../src/public_types";
 import capitalizeFirstLetter from "../lib/capitalizeFirstLetter";
 import shuffleArray from "../lib/shuffleArray";
 import ToolTip from "./ToolTip";

demo/full/scripts/components/Options/AudioAdaptiveSettings.tsx → demo/scripts/components/Options/AudioAdaptiveSettings.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IAudioRepresentationsSwitchingMode } from "../../../../../src/public_types";
+import { IAudioRepresentationsSwitchingMode } from "../../../../src/public_types";
 import Select from "../Select";
 
 /**

demo/full/scripts/components/Options/VideoAdaptiveSettings.tsx → demo/scripts/components/Options/VideoAdaptiveSettings.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IVideoRepresentationsSwitchingMode } from "../../../../../src/public_types";
+import { IVideoRepresentationsSwitchingMode } from "../../../../src/public_types";
 import Checkbox from "../../components/CheckBox";
 import Select from "../Select";
 

demo/full/scripts/controllers/ContentList.tsx → demo/scripts/controllers/ContentList.tsx

@@ -17,7 +17,7 @@ import DEFAULT_CONTENTS from "../contents";
 import type { IDefaultContent, IDrmInfo } from "../contents";
 import GeneratedLinkURL from "../components/GenerateLinkURL";
 import GenerateLinkButton from "../components/GenerateLinkButton";
-import type { IKeySystemOption, ILoadVideoOptions } from "../../../../src/public_types";
+import type { IKeySystemOption, ILoadVideoOptions } from "../../../src/public_types";
 
 /* eslint-disable */
 const win = window as any;

demo/full/scripts/controllers/Main.tsx → demo/scripts/controllers/Main.tsx

@@ -1,4 +1,4 @@
-import RxPlayer from "../../../../src/minimal";
+import RxPlayer from "../../../src/minimal";
 import * as React from "react";
 import GitHubButton from "../components/GitHubButton";
 import Player from "./Player";

demo/full/scripts/controllers/Player.tsx → demo/scripts/controllers/Player.tsx

@@ -1,4 +1,9 @@
 import * as React from "react";
+import type {
+  IAudioRepresentationsSwitchingMode,
+  ILoadVideoOptions,
+  IVideoRepresentationsSwitchingMode,
+} from "../../../src/public_types";
 import PlayerModule from "../modules/player";
 import type { IPlayerModule } from "../modules/player";
 import ControlBar from "./ControlBar";
@@ -12,11 +17,6 @@ import type {
   ILoadVideoSettings,
   IConstructorSettings,
 } from "../lib/defaultOptionsValues";
-import type {
-  IAudioRepresentationsSwitchingMode,
-  ILoadVideoOptions,
-  IVideoRepresentationsSwitchingMode,
-} from "../../../../src/public_types";
 
 const { useCallback, useEffect, useRef, useState } = React;
 

demo/full/scripts/controllers/Settings.tsx → demo/scripts/controllers/Settings.tsx

@@ -14,7 +14,7 @@ import type {
   IAudioRepresentationsSwitchingMode,
   ICmcdOptions,
   IVideoRepresentationsSwitchingMode,
-} from "../../../../src/public_types";
+} from "../../../src/public_types";
 
 const { useCallback } = React;
 

demo/full/scripts/controllers/knobs/AudioRepresentation.tsx → demo/scripts/controllers/knobs/AudioRepresentation.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IAudioRepresentation } from "../../../../../src/public_types";
+import { IAudioRepresentation } from "../../../../src/public_types";
 import Knob from "../../components/Knob";
 import useModuleState from "../../lib/useModuleState";
 import type { IPlayerModule } from "../../modules/player/index";

demo/full/scripts/controllers/knobs/AudioTrack.tsx → demo/scripts/controllers/knobs/AudioTrack.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
+import type { IAudioTrack, IAvailableAudioTrack } from "../../../../src/public_types";
 import translateAudioTrackCode from "../../lib/translateLanguageCode";
 import Knob from "../../components/Knob";
 import useModuleState from "../../lib/useModuleState";
 import type { IPlayerModule } from "../../modules/player/index";
-import type { IAudioTrack, IAvailableAudioTrack } from "../../../../../src/public_types";
 
 const AUDIO_DESCRIPTION_ICON = "(AD)"; // String.fromCharCode(0xf29e);
 

demo/full/scripts/controllers/knobs/Subtitles.tsx → demo/scripts/controllers/knobs/Subtitles.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
+import type { ITextTrack, IAvailableTextTrack } from "../../../../src/public_types";
 import translateLanguageCode from "../../lib/translateLanguageCode";
 import Knob from "../../components/Knob";
 import useModuleState from "../../lib/useModuleState";
 import type { IPlayerModule } from "../../modules/player/index";
-import type { ITextTrack, IAvailableTextTrack } from "../../../../../src/public_types";
 
 const CLOSED_CAPTION_ICON = "(CC)"; // String.fromCharCode(0xf2a4);
 

demo/full/scripts/controllers/knobs/VideoRepresentation.tsx → demo/scripts/controllers/knobs/VideoRepresentation.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IVideoRepresentation } from "../../../../../src/public_types";
+import { IVideoRepresentation } from "../../../../src/public_types";
 import Knob from "../../components/Knob";
 import useModuleState from "../../lib/useModuleState";
 import type { IPlayerModule } from "../../modules/player/index";

demo/full/scripts/controllers/knobs/VideoTrack.tsx → demo/scripts/controllers/knobs/VideoTrack.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
+import type { IVideoTrack, IAvailableVideoTrack } from "../../../../src/public_types";
 import Knob from "../../components/Knob";
 import useModuleState from "../../lib/useModuleState";
 import type { IPlayerModule } from "../../modules/player/index";
-import type { IVideoTrack, IAvailableVideoTrack } from "../../../../../src/public_types";
 
 function findVideoTrackIndex(
   videoTrack: IVideoTrack,

demo/full/scripts/lib/defaultOptionsValues.ts → demo/scripts/lib/defaultOptionsValues.ts

@@ -2,7 +2,7 @@ import type {
   ICmcdOptions,
   IConstructorOptions,
   ILoadVideoOptions,
-} from "../../../../src/public_types";
+} from "../../../src/public_types";
 
 const defaultOptionsValues = {
   player: {

demo/full/scripts/lib/parseDRMConfigurations.ts → demo/scripts/lib/parseDRMConfigurations.ts

@@ -1,4 +1,4 @@
-import type { IKeySystemOption } from "../../../../src/public_types";
+import type { IKeySystemOption } from "../../../src/public_types";
 import { utf8ToStr, strToUtf8, leUtf16ToStr } from "./bytes";
 
 export default async function parseDRMConfigurations(

demo/full/scripts/modules/player/catchUp.ts → demo/scripts/modules/player/catchUp.ts

@@ -1,7 +1,7 @@
 // Distance from live edge we try to reach when the catching up button
 
 import type { IPlayerModuleState } from ".";
-import type RxPlayer from "../../../../../src";
+import type RxPlayer from "../../../../src";
 import type { IStateUpdater } from "../../lib/declareModule";
 
 // is enabled.

demo/full/scripts/modules/player/events.ts → demo/scripts/modules/player/events.ts

@@ -1,10 +1,10 @@
 import type { IPlayerModuleState } from ".";
-import type RxPlayer from "../../../../../src";
+import type RxPlayer from "../../../../src";
 import type {
   IBrokenRepresentationsLockContext,
   IPlayerError,
   IVideoTrack,
-} from "../../../../../src/public_types";
+} from "../../../../src/public_types";
 import type { IStateUpdater } from "../../lib/declareModule";
 
 const POSITION_UPDATES_INTERVAL = 100;

demo/full/scripts/modules/player/index.ts → demo/scripts/modules/player/index.ts

@@ -18,13 +18,13 @@ import {
   HTML_TTML_PARSER,
   HTML_VTT_PARSER,
   SMOOTH,
-} from "../../../../../src/features/list";
-import { METAPLAYLIST, MULTI_THREAD } from "../../../../../src/experimental/features";
-import RxPlayer from "../../../../../src/minimal";
+} from "../../../../src/features/list";
+import { METAPLAYLIST, MULTI_THREAD } from "../../../../src/experimental/features";
+import RxPlayer from "../../../../src/minimal";
 import { linkPlayerEventsToState } from "./events";
 import VideoThumbnailLoader, {
   DASH_LOADER,
-} from "../../../../../src/experimental/tools/VideoThumbnailLoader";
+} from "../../../../src/experimental/tools/VideoThumbnailLoader";
 import CatchUpModeController from "./catchUp";
 import { declareModule } from "../../lib/declareModule";
 import type {
@@ -40,7 +40,7 @@ import type {
   ITextTrack,
   IVideoRepresentation,
   IVideoTrack,
-} from "../../../../../src/public_types";
+} from "../../../../src/public_types";
 
 RxPlayer.addFeatures([
   DASH,

demo/full/tsconfig.json → demo/tsconfig.json

@@ -15,7 +15,7 @@
     "types": [],
     "moduleResolution": "node",
     "jsx": "react",
-    "typeRoots": ["../../node_modules/@types"],
+    "typeRoots": ["../node_modules/@types"],
   },
-  "include": ["../../src/globals.prod.d.ts", "./scripts/**/*"],
+  "include": ["../src/globals.prod.d.ts", "./scripts/**/*"],
 }

package.json

@@ -153,7 +153,7 @@
     "check": "npm run check:types && npm run lint && npm run check:types:unit_tests",
     "check:all": "npm run check:types && npm run lint && npm run lint:demo && npm run lint:tests && npm run test:unit && npm run test:integration && npm run test:memory && node -r esm ./scripts/check_nodejs_import_compatibility.js",
     "check:demo": "npm run check:demo:types && npm run lint:demo",
-    "check:demo:types": "tsc --noEmit --project demo/full",
+    "check:demo:types": "tsc --noEmit --project demo/",
     "clean:build": "rimraf dist",
     "check:types": "tsc --noEmit --project .",
     "check:types:unit_tests": "tsc --noEmit --project ./tsconfig.unit-tests.json",
@@ -168,12 +168,11 @@
     "fmt:rust": "cd ./src/parsers/manifest/dash/wasm-parser && cargo fmt",
     "fmt:rust:check": "cd ./src/parsers/manifest/dash/wasm-parser && cargo fmt --check",
     "lint": "eslint src -c .eslintrc.js",
-    "lint:demo": "eslint -c demo/full/.eslintrc.js demo/full/scripts",
+    "lint:demo": "eslint -c demo/.eslintrc.js demo/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",
     "start:wasm": "node ./scripts/start_demo_web_server.mjs --include-wasm",
     "test:integration": "npm run test:integration:chrome && npm run test:integration:firefox",
@@ -226,16 +225,15 @@
   },
   "scripts-list": {
     "Build a demo page (e.g. to test a code change)": {
-      "start": "Build the \"full\" demo (with a UI) with the non-minified RxPlayer and serve it on a local server. Re-build on file updates.",
-      "start:wasm": "Build the \"full\" demo (with a UI) with the non-minified RxPlayer including the DASH WebAssembly MPD parser and serve it on a local server. Re-build on file updates.",
+      "start": "Build the demo with the non-minified RxPlayer and serve it on a local server. Re-build on file updates.",
+      "start:wasm": "Build the demo with the non-minified RxPlayer including the DASH WebAssembly MPD parser and serve it on a local server. Re-build on file updates.",
       "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)"
+      "check:demo": "Check the validity of the demo directory by running the type checker and linter on it",
+      "check:demo:types": "Check TypeScript types in demo files",
+      "lint:demo": "Run linter on demo files",
+      "certificate": "Generate a certificate to be able to use HTTPS locally for the demo pages (`npm run start` will then listen to HTTPS requests through a communicated port)"
     },
     "Type-check, format, or lint the current code": {
       "check": "Check the validity of the src directory by running the type checker and linter on it",

scripts/build_demo.mjs

@@ -19,8 +19,8 @@ import getHumanReadableHours from "./utils/get_human_readable_hours.mjs";
 import runBundler from "./run_bundler.mjs";
 
 const WORKER_IN_FILE = join(rootDirectory, "src/worker_entry_point.ts");
-const DEMO_OUT_FILE = join(rootDirectory, "demo/full/bundle.js");
-const WORKER_OUT_FILE = join(rootDirectory, "demo/full/worker.js");
+const DEMO_OUT_FILE = join(rootDirectory, "demo/bundle.js");
+const WORKER_OUT_FILE = join(rootDirectory, "demo/worker.js");
 const WASM_FILE_DEPENDENCY = join(rootDirectory, "dist/mpd-parser.wasm");
 
 // If true, this script is called directly
@@ -112,7 +112,7 @@ export default function buildDemo(options) {
 
   // Create a context for incremental builds
   esbuild[meth]({
-    entryPoints: [join(rootDirectory, "demo/full/scripts/index.tsx")],
+    entryPoints: [join(rootDirectory, "demo/scripts/index.tsx")],
     bundle: true,
     target: "es2017",
     minify,