Plugin Structure

Presto Player makes use of lerna.js to use one build system to compile the multiple packages inside divi modules, beaver builder, elementor, and event its player components.

Player Components

Player components are created, tested and compiled with StencilJS. This is located in the packages/components directory. This includes almost all the player functionality.

This lets us use web components to build our player, which makes things easier to test and build. It also has some additional benefits:

1. Lazy loading through javascript modules.
2. Style encapsulation through the shadow dom.
3. React integration - we compile react adaptors (@presto-player/react) that let you use our player components within gutenberg/react environments)
4. Lightweight. No frameworks are needed as a lot of heavy lifting is done through web standards.
5. Easier e2e and unit testing.

Plyr.io

The core player functionality consists of our web components wrapped around a fork of the plyr library

React Adapter

You can use our player in Gutenberg/react environments by importing the @presto-player/react library. This is just a wrapper for the web components, so the web components library also needs to be included on the page.

Admin scripts

The admin blocks and other scripts are located in the src folder of the plugin and utilize lerna.js to import the sub packages (@presto-player/react) for example.

BSF Analytics Integration

Overview -

BSF Analytics is used to collect plugin-level usage statistics and configuration data. The integration is handled entirely on the backend.

Implementation Steps -

1 - Analytics Initialization

2 - Added analytics-related code in inc/utils/analytics.php.

3 - Initialized BSF Analytics via composer.json using the brainstormforce/bsf-analytics package.

Composer Setup -

1 - The package is installed via a VCS repository.

2 - Analytics library is placed under:

3 - inc/lib/bsf-analytics

Data Collection -

Plugin statistics (such as total spaces, integration type counts, settings, etc.) are prepared in PHP.

Data is filtered using: apply_filters( 'suredash_bsf_analytics_data', $stats_data );

Analytics Dashboard -

Once connected, analytics data becomes visible in the BSF Analytics dashboard, where plugin-specific tables and stats can be reviewed.

⚠️ Note: No frontend JavaScript tracking is required. All analytics data is collected server-side.