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

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

@@ -202,12 +202,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 */
@@ -221,6 +225,9 @@ const PlayerModule = declareModule(
     // dispose of the RxPlayer when destroyed
     abortSignal.addEventListener("abort", () => {
       player.dispose();
+      if (debugEltInstance !== undefined) {
+        debugEltInstance.dispose();
+      }
     });
 
     return {
@@ -387,6 +394,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;