Merge pull request #1473 from canalplus/misc/remove-standalone-demo

[Proposal] Remove standalone 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",
@@ -224,16 +223,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,