Skip to content

Commit

Permalink
Demo: Add possibility to see the debug element in the demo page
Browse files Browse the repository at this point in the history
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!
  • Loading branch information
peaBerberian committed Dec 7, 2023
1 parent 3d58a52 commit 0b52f81
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 5 deletions.
13 changes: 10 additions & 3 deletions demo/full/scripts/controllers/Player.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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;
}
Expand All @@ -153,6 +155,7 @@ function Player(): JSX.Element {
{
videoElement: videoElementRef.current,
textTrackElement: textTrackElementRef.current,
debugElement: debugElementRef.current,
},
playerOpts
)
Expand Down Expand Up @@ -217,7 +220,7 @@ function Player(): JSX.Element {
setPlayerOpts(cb);
}, []);

const updateDefaultAudioRepresentationsSwitchingMode = React.useCallback(
const updateDefaultAudioRepresentationsSwitchingMode = useCallback(
(mod: IAudioRepresentationsSwitchingMode) => {
if (playerModule === null) {
setDefaultAudioRepresentationsSwitchingMode(mod);
Expand All @@ -228,7 +231,7 @@ function Player(): JSX.Element {
[playerModule]
);

const updateDefaultVideoRepresentationsSwitchingMode = React.useCallback(
const updateDefaultVideoRepresentationsSwitchingMode = useCallback(
(mod: IVideoRepresentationsSwitchingMode) => {
if (playerModule === null) {
setDefaultVideoRepresentationsSwitchingMode(mod);
Expand Down Expand Up @@ -298,6 +301,10 @@ function Player(): JSX.Element {
className="text-track"
ref={textTrackElementRef}
/>
<div
className="debug-element"
ref={debugElementRef}
/>
<video ref={videoElementRef} />

</div>
Expand Down
39 changes: 39 additions & 0 deletions demo/full/scripts/controllers/charts/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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">
Expand Down Expand Up @@ -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>
);
}
Expand Down
27 changes: 25 additions & 2 deletions demo/full/scripts/modules/player/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -223,6 +227,9 @@ const PlayerModule = declareModule(
// dispose of the RxPlayer when destroyed
abortSignal.addEventListener("abort", () => {
player.dispose();
if (debugEltInstance !== undefined) {
debugEltInstance.dispose();
}
});

return {
Expand Down Expand Up @@ -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() {
Expand Down
8 changes: 8 additions & 0 deletions demo/full/styles/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 0b52f81

Please sign in to comment.