Demo: Add possibility to see the debug element in the demo page

The `createDebugElement` method allows to generate an RxPlayer-made debug
element.

It is used most often as a stats-for-nerds-like kind of things to
quickly inspect, debug and report issues by displaying some interesting
playback stats without having to dive into debug logs to obtain them.

We didn't yet add a possibility to show them in the demo, so this commit
quickly does that. It does it in the laziest way possible, by just
adding a "Display debug element" checkbox in the chart area of the demo,
which will display debug information on top of the media element when
enabled and playing content.

It may have more its place in the controls (which is what e.g. YouTube or
Twitch choose to do in their production page for their debug divs, and
Canal+' main products most often set it in a contextual menu), I don't
even know if it does or not, but I was too lazy to do this just for our
demo page.
Putting it in chart was much simpler because no controls with checkbox
exist yet, whereas charts only have checkboxes. So I just chose the
easiest way!

demo/full/scripts/controllers/Player.tsx

@@ -53,6 +53,7 @@ function Player(): JSX.Element {
 
   const videoElementRef = useRef<HTMLVideoElement>(null);
   const textTrackElementRef = useRef<HTMLDivElement>(null);
+  const debugElementRef = useRef<HTMLDivElement>(null);
   const playerWrapperElementRef = useRef<HTMLDivElement>(null);
 
   const onOptionToggle = useCallback(() => {
@@ -143,7 +144,8 @@ function Player(): JSX.Element {
   const createNewPlayerModule = useCallback(() => {
     if (
       videoElementRef.current === null ||
-      textTrackElementRef.current === null
+      textTrackElementRef.current === null ||
+      debugElementRef.current === null
     ) {
       return;
     }
@@ -153,6 +155,7 @@ function Player(): JSX.Element {
         {
           videoElement: videoElementRef.current,
           textTrackElement: textTrackElementRef.current,
+          debugElement: debugElementRef.current,
         },
         playerOpts
       )
@@ -217,7 +220,7 @@ function Player(): JSX.Element {
     setPlayerOpts(cb);
   }, []);
 
-  const updateDefaultAudioRepresentationsSwitchingMode = React.useCallback(
+  const updateDefaultAudioRepresentationsSwitchingMode = useCallback(
     (mod: IAudioRepresentationsSwitchingMode) => {
       if (playerModule === null) {
         setDefaultAudioRepresentationsSwitchingMode(mod);
@@ -228,7 +231,7 @@ function Player(): JSX.Element {
     [playerModule]
   );
 
-  const updateDefaultVideoRepresentationsSwitchingMode = React.useCallback(
+  const updateDefaultVideoRepresentationsSwitchingMode = useCallback(
     (mod: IVideoRepresentationsSwitchingMode) => {
       if (playerModule === null) {
         setDefaultVideoRepresentationsSwitchingMode(mod);
@@ -298,6 +301,10 @@ function Player(): JSX.Element {
                 className="text-track"
                 ref={textTrackElementRef}
               />
+              <div
+                className="debug-element"
+                ref={debugElementRef}
+              />
               <video ref={videoElementRef} />
 
             </div>

demo/full/scripts/controllers/charts/index.tsx

@@ -17,11 +17,15 @@ const MAX_BUFFER_SIZE_LENGTH = 2000;
 function ChartsManager({ player }: { player: IPlayerModule | null }) {
   const [displayBufferContentChart,
          setDisplayBufferContentChart] = useState(false);
+
   const [displayBufferSizeChart,
          setDisplayBufferSizeChart] = useState(false);
   const [bufferSizeChart,
          setBufferSizeChart] = useState<IChartModule | null>(null);
 
+  const [displayDebugElement,
+         setDisplayDebugElement] = useState(false);
+
   useEffect(() => {
     if (!player) {
       return;
@@ -40,6 +44,19 @@ function ChartsManager({ player }: { player: IPlayerModule | null }) {
     };
   }, [player]);
 
+  useEffect(() => {
+    if (!player) {
+      return;
+    }
+    if (displayDebugElement) {
+      if (!player.actions.isDebugElementShown()) {
+        player.actions.showDebugElement();
+      }
+    } else if (player.actions.isDebugElementShown()) {
+      player.actions.hideDebugElement();
+    }
+  }, [player, displayDebugElement]);
+
   const onBufferContentCheckBoxChange =
     React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
       const target = e.target;
@@ -54,6 +71,13 @@ function ChartsManager({ player }: { player: IPlayerModule | null }) {
         target.checked : target.value;
       setDisplayBufferSizeChart(!!value);
     }, []);
+  const onDebugElementCheckBoxChange =
+    React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+      const target = e.target;
+      const value = target.type === "checkbox" ?
+        target.checked : target.value;
+      setDisplayDebugElement(!!value);
+    }, [player]);
 
   return (
     <div className="player-charts">
@@ -95,6 +119,21 @@ function ChartsManager({ player }: { player: IPlayerModule | null }) {
             module={bufferSizeChart}
           /> : null }
       </div>
+      <div className="player-box">
+        <div className="chart-checkbox" >
+          Display debug element (on top of the player)
+          <label className="switch">
+            <input
+              aria-label="Display/Hide debug element on top of the video"
+              name="displayDebugElement"
+              type="checkbox"
+              checked={displayDebugElement}
+              onChange={onDebugElementCheckBoxChange}
+            />
+            <span className="slider round"></span>
+          </label>
+        </div>
+      </div>
     </div>
   );
 }

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

@@ -204,12 +204,16 @@ const PlayerModule = declareModule(
     videoThumbnailLoader: null,
   }),
   (
-    initOpts: IConstructorOptions & { textTrackElement? : HTMLElement },
+    initOpts: IConstructorOptions & {
+      textTrackElement? : HTMLElement,
+      debugElement : HTMLElement,
+    },
     state,
     abortSignal
   ) => {
-    const { textTrackElement, ...constructorOpts } = initOpts;
+    const { debugElement, textTrackElement, ...constructorOpts } = initOpts;
     const player = new RxPlayer(constructorOpts);
+    let debugEltInstance : { dispose(): void } | undefined;
 
     // facilitate DEV mode
     /* eslint-disable */
@@ -223,6 +227,9 @@ const PlayerModule = declareModule(
     // dispose of the RxPlayer when destroyed
     abortSignal.addEventListener("abort", () => {
       player.dispose();
+      if (debugEltInstance !== undefined) {
+        debugEltInstance.dispose();
+      }
     });
 
     return {
@@ -389,6 +396,22 @@ const PlayerModule = declareModule(
       disableLiveCatchUp() {
         catchUpModeController.stopCatchUp();
       },
+
+      showDebugElement() {
+        if (debugEltInstance !== undefined) {
+          debugEltInstance.dispose();
+        }
+        debugEltInstance = player.createDebugElement(debugElement);
+      },
+      hideDebugElement() {
+        if (debugEltInstance !== undefined) {
+          debugEltInstance.dispose();
+          debugEltInstance = undefined;
+        }
+      },
+      isDebugElementShown() {
+        return debugEltInstance !== undefined;
+      }
     };
 
     function dettachVideoThumbnailLoader() {

demo/full/styles/style.css

@@ -255,6 +255,14 @@ header .right {
   z-index: 100;
 }
 
+.debug-element {
+  color: white;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 100;
+}
+
 .video-player-spinner {
   z-index: 1001;
   position: absolute;