Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Aug 29, 2024

Conversation

jboix
Copy link
Contributor

@jboix jboix commented Aug 9, 2024

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 });
image

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

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

@jboix jboix self-assigned this Aug 9, 2024
Copy link

github-actions bot commented Aug 9, 2024

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

Copy link

github-actions bot commented Aug 9, 2024

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

@jboix jboix force-pushed the feat/pillarbox-debug-panel branch from b45c4ce to a2eb64b Compare August 13, 2024 11:27
@jboix jboix requested a review from amtins August 13, 2024 11:31
@jboix jboix force-pushed the feat/pillarbox-debug-panel branch from a2eb64b to 55fb827 Compare August 13, 2024 11:33
@jboix jboix marked this pull request as ready for review August 13, 2024 11:33
@jboix jboix force-pushed the feat/pillarbox-debug-panel branch 2 times, most recently from 98ce4f2 to bbbc229 Compare August 20, 2024 08:15
packages/pillarbox-debug-panel/README.md Outdated Show resolved Hide resolved
packages/pillarbox-debug-panel/README.md Outdated Show resolved Hide resolved
packages/pillarbox-debug-panel/README.md Show resolved Hide resolved
packages/pillarbox-debug-panel/README.md Outdated Show resolved Hide resolved
packages/pillarbox-debug-panel/src/graph-component.js Outdated Show resolved Hide resolved
packages/pillarbox-debug-panel/src/metric-label.js Outdated Show resolved Hide resolved
@jboix jboix force-pushed the feat/pillarbox-debug-panel branch from bbbc229 to 0fef226 Compare August 27, 2024 09:54
@jboix jboix requested a review from amtins August 27, 2024 09:54
@jboix jboix force-pushed the feat/pillarbox-debug-panel branch 2 times, most recently from 3d0878d to 43d91e1 Compare August 29, 2024 14:08
@jboix jboix requested a review from amtins August 29, 2024 14:09
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:

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

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

Changes:

- 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).
@jboix jboix force-pushed the feat/pillarbox-debug-panel branch from 43d91e1 to dbc7e9d Compare August 29, 2024 14:17
Copy link
Member

@amtins amtins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Thank you !!!!

@jboix jboix merged commit 5faac36 into main Aug 29, 2024
4 checks passed
@jboix jboix deleted the feat/pillarbox-debug-panel branch August 29, 2024 14:56
Copy link

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

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: ✅ Done
Development

Successfully merging this pull request may close these issues.

2 participants