From 0b52f81cae8dec7145842b9bf7a28478d6024474 Mon Sep 17 00:00:00 2001 From: Paul Berberian Date: Mon, 20 Nov 2023 18:40:34 +0100 Subject: [PATCH] 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 | 13 +++++-- .../full/scripts/controllers/charts/index.tsx | 39 +++++++++++++++++++ demo/full/scripts/modules/player/index.ts | 27 ++++++++++++- demo/full/styles/style.css | 8 ++++ 4 files changed, 82 insertions(+), 5 deletions(-) diff --git a/demo/full/scripts/controllers/Player.tsx b/demo/full/scripts/controllers/Player.tsx index c5c77e251a..00f1315898 100644 --- a/demo/full/scripts/controllers/Player.tsx +++ b/demo/full/scripts/controllers/Player.tsx @@ -53,6 +53,7 @@ function Player(): JSX.Element { const videoElementRef = useRef(null); const textTrackElementRef = useRef(null); + const debugElementRef = useRef(null); const playerWrapperElementRef = useRef(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} /> +
diff --git a/demo/full/scripts/controllers/charts/index.tsx b/demo/full/scripts/controllers/charts/index.tsx index ee720fb4f3..39b83cdbf6 100644 --- a/demo/full/scripts/controllers/charts/index.tsx +++ b/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(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) => { 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) => { + const target = e.target; + const value = target.type === "checkbox" ? + target.checked : target.value; + setDisplayDebugElement(!!value); + }, [player]); return (
@@ -95,6 +119,21 @@ function ChartsManager({ player }: { player: IPlayerModule | null }) { module={bufferSizeChart} /> : null }
+
+
+ Display debug element (on top of the player) + +
+
); } diff --git a/demo/full/scripts/modules/player/index.ts b/demo/full/scripts/modules/player/index.ts index 57222546fe..188bbf92a8 100644 --- a/demo/full/scripts/modules/player/index.ts +++ b/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() { diff --git a/demo/full/styles/style.css b/demo/full/styles/style.css index 71f2482e58..e08830e3df 100644 --- a/demo/full/styles/style.css +++ b/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;