feat(pillarbox-debug-panel): debug panel component for playback metrics

jboix commented 2 months ago

Description

Introduces a debug panel that provides real-time playback metrics for enhanced monitoring and debugging of the video player. This panel can be added to the player interface only when necessary, allowing developers to keep track of key playback statistics during video streaming.

To integrate the debug panel into the player:

import videojs from 'video.js';
import '@srgssr/pillarbox-debug-panel';

const player = videojs('my-player', { PillarboxDebugPanel: true });

Changes Made

Implemented a debug panel displaying metrics such as buffer size, media duration, playback position, bandwidth, bitrate, codecs, framerate, total frames, dropped frames, resolution, and timestamp.
Added a canvas element to the panel for visualizing the evolution of buffer health, bitrate, and bandwidth.
Used VHS API for data retrieval when supported, and native APIs for browsers utilizing native video playback (such as HLS in Safari).

Checklist

[x] I have followed the project's style and contribution guidelines.
[x] I have performed a self-review of my own changes.
[x] I have made corresponding changes to the documentation.
[x] I have added tests that prove my fix is effective or that my feature works.

github-actions[bot] commented 2 months ago

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	98.76%	1761 / 1783
🔵	Statements	98.76%	1761 / 1783
🔵	Functions	95.9%	117 / 122
🔵	Branches	87.09%	162 / 186

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
packages/pillarbox-debug-panel/src/graph-component.js	96.57%	77.77%	100%	96.57%	45-47, 69-70
packages/pillarbox-debug-panel/src/metric-component.js	100%	100%	100%	100%
packages/pillarbox-debug-panel/src/metric-label.js	100%	100%	100%	100%
packages/pillarbox-debug-panel/src/pillarbox-debug-panel.js	96.96%	65%	96.15%	96.96%	71-72, 87-89, 103-105

Generated in workflow #104

github-actions[bot] commented 2 months ago

PR Preview Action v1.4.7 :---: Preview removed because the pull request was closed. 2024-08-29 14:56 UTC

github-actions[bot] commented 1 month ago

:tada: This issue has been resolved in version @srgssr/pillarbox-debug-panel-v1.0.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

SRGSSR / pillarbox-web-suite