Skip to main content

Events

All events are received as props on the BBChannel (or BBChannelWithPlayer) component.

Lifecycle​

onReady​

Fired when the channel has finished loading and is ready for interaction.

<BBChannel
  channelUrl="..."
  onReady={() => {
    console.log('Channel is ready');
  }}
/>

onError​

Fired when an error occurs.

<BBChannel
  channelUrl="..."
  onError={(error: BBErrorEvent) => {
    console.error(`[${error.code}] ${error.message}`);
  }}
/>

See BBErrorEvent for the full type and common error codes.

onNavigate​

Fired when the user navigates to a different page.

onNavigate={(event: BBNavigationEvent) => {
  console.log('Page:', event.pageType);
  console.log('Can go back:', event.canGoBack);
  console.log('Stack depth:', event.stackDepth);
}}

onNavigationStateChange​

Fired whenever the navigation state changes. Useful for persisting or restoring state.

onNavigationStateChange={(state: BBNavigationState) => {
  console.log('New state:', state.pageType, state.contentId);
}}

onCanGoBackChange​

Fired when back navigation availability changes. Useful for enabling/disabling a back button.

onCanGoBackChange={(canGoBack: boolean) => {
  setBackButtonEnabled(canGoBack);
}}

Media​

onMediaPlay​

Fired when a video starts playing.

onMediaPlay={(media: BBMediaInfo) => {
  console.log('Playing:', media.title, media.jsonUrl);
}}

onMediaPause​

Fired when a video is paused.

onMediaPause={(media: BBMediaInfo) => {
  console.log('Paused:', media.title);
}}

onMediaEnd​

Fired when a video finishes playing.

onMediaEnd={(media: BBMediaInfo) => {
  console.log('Ended:', media.title);
}}

onFirstPlayerMedia​

Fired when the first auto-playing video loads. Useful for showing a native player or updating UI before playback begins.

onFirstPlayerMedia={(media: BBMediaInfo) => {
  console.log('First video ready:', media.title);
}}

Player​

onPlayerStateChange​

Fired when the player state changes (play, pause, seek, volume, fullscreen, etc.).

onPlayerStateChange={(state: BBPlayerState) => {
  console.log('Playing:', state.isPlaying, 'Time:', state.currentTime);
}}

onPlayerEvent​

Fired for raw player events. The event shape depends on the underlying player.

onPlayerEvent={(event) => {
  console.log('Player event:', event);
}}

onTimeUpdate​

Fired periodically during playback with the current time.

onTimeUpdate={(event) => {
  console.log('Time:', event.currentTime);
}}

onClipLoaded​

Fired when a new clip is loaded into the player.

onClipLoaded={(event) => {
  console.log('Clip loaded:', event);
}}

onAdStart​

Fired when an ad begins playing.

onAdStart={(event) => {
  console.log('Ad started:', event);
}}

onAdEnd​

Fired when an ad finishes playing.

onAdEnd={(event) => {
  console.log('Ad ended:', event);
}}

Multi-player​

onPlayersChange​

Fired when the set of registered players changes (e.g., a new player appears on a detail page).

onPlayersChange={(players) => {
  console.log('Players:', players.length);
}}

onActivePlayerChange​

Fired when the active player changes.

onActivePlayerChange={(player) => {
  console.log('Active player:', player);
}}

Other​

onSearch​

Fired when the user performs a search.

onSearch={(event: BBSearchEvent) => {
  console.log('Search:', event.query, 'Results:', event.resultCount);
}}

Fired when an external link is clicked within the channel. If this callback is not provided, external links are silently blocked.

onExternalLink={(url: string) => {
  Linking.openURL(url);
}}

onAnalyticsEvent​

Fired for analytics events (impressions, plays, etc.).

onAnalyticsEvent={(event) => {
  analytics.track(event);
}}