react-native-blue-billywig-player

This package easily integrates the Blue Billywig Native Player SDK into your React Native application. This allows you to quickly add advanced video playback capabilities. It includes a set of components and methods for rendering and controlling the player, as well as event listeners for receiving updates on the player's state.

NPM Package

Installation

Before proceeding with the following steps, please ensure that you have already created a React Native application.

npm i @simonjones864/react-native-blue-billywig-player --save

Following the installation of the npm package, it is necessary to install the pod in order to complete the process.

$ (cd ios && pod install)
# --- or ---
$ npx pod-install

Usage

Importing the component from the module.

import { BBPlayer } from '@simonjones864/react-native-blue-billywig-player';

Rendering a Player

In order to render a player using a JSON source file, you can specify the URL of the JSON as the "src" attribute within the player component. The JSON URL that is used will depend on the playout and media you wish the player to play.

<BBPlayer
  style={{ width: 256, height: 144 }}
  src="https://demo.bbvms.com/p/native_sdk_inoutview/c/4256635.json"
/>

Attributes

These attributes can be utilized to set values and customize the behavior of the player.

| Attribute | Description | type | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | | src | Sets the source URL for the media to be played by the player component. | string | | autoPlay | Indicates whether the audio or video should start playing as soon as it is loaded. Should be set before the src attribute. | boolean | | paused | Pause and resume the media playback by setting its value to either true or false. | boolean | | muted | Control the audio of the media by setting its value to either true or false. A value of true means the audio is muted, while a value of false means it's un-muted. | boolean |

Callbacks

The callbacks for our player component enable you to determine what actions should be taken when specific events happen within the player.

Example

<BBPlayer
  style={{ width: 256, height: 144 }}
  src="https://demo.bbvms.com/p/native_sdk_inoutview/c/4256635.json"
  didTriggerPlay={(event: any) => {
    console.log('Play event was triggered!');
  }}
/>

Available callbacks

The callbacks are wrapped in native events, but do not transmit any parameters. Function | Description | Parameters ---|---|--- didTriggerPlaying | Player is playing. | None didTriggerPlay | Player started playing. | None didTriggerPause | Player paused playing. | None didTriggerEnded | Player ended playing. | None didTriggerSeeking | Player seeks. | None didTriggerSeeked | Player seeked. | None didRequestCollapse | Player triggers and collapse. | None didRequestExpand | Player triggers an expand. | None didTriggerAdLoaded | Player loaded an advertisement. | None didTriggerAdStarted | Player started an advertisement. | None didTriggerAdFinished | The advertisement finished playing. | None didTriggerAllAdsCompleted | All advertisements finished playing. | None

License

MPL-2.0