Methods

All methods are available on the BBChannelRef obtained via a React ref.

import { useRef } from 'react';
import { BBChannel, BBChannelRef } from '@bluebillywig/react-native-channel';

function App() {
  const ref = useRef<BBChannelRef>(null);

  const handlePlay = () => {
    ref.current?.playVideo('12345', 'mediaclip');
  };

  return <BBChannel ref={ref} channelUrl="https://demo.bbvms.com/ch/1152.json" />;
}

Navigation

Method	Signature	Description
navigateTo	(page: BBPageType) => void	Navigate to a page type
goBack	() => void	Navigate back in the history stack
canGoBack	() => Promise<boolean>	Check if back navigation is available

Content

Method	Signature	Description
playVideo	(id: string, type?: string) => void	Play a video by ID
navigateToEntity	(id: string, type: string, options?: NavigateToEntityOptions) => void	Navigate to a specific entity (clip, playlist, etc.)
search	(query: string) => void	Perform a search

interface NavigateToEntityOptions {
  playout?: string;
  blockId?: string;
  autoPlay?: boolean;
}

State

Method	Signature	Description
getNavigationState	() => Promise<BBNavigationState>	Get the current navigation state
setNavigationState	(state: BBNavigationState) => void	Set the navigation state
resetNavigation	() => void	Reset navigation to the main page

Multi-channel

Method	Signature	Description
navigateToSubChannel	(subChannelId: string) => void	Switch to a sub-channel by ID

Player control

All player control methods accept an optional playerId parameter. When omitted, the active player is targeted.

Method	Signature	Description
play	(playerId?: string) => void	Start playback
pause	(playerId?: string) => void	Pause playback
seek	(seconds: number, playerId?: string) => void	Seek to a position in seconds
setVolume	(volume: number, playerId?: string) => void	Set volume (0 to 1)
setMuted	(muted: boolean, playerId?: string) => void	Mute or unmute
enterFullscreen	(playerId?: string) => void	Enter fullscreen mode
exitFullscreen	(playerId?: string) => void	Exit fullscreen mode
getPlayerState	(playerId?: string) => Promise<BBPlayerState | null>	Get current player state
getPlayers	() => Promise<BBRegisteredPlayer[]>	Get all registered players
setActivePlayer	(id: string) => void	Set the active player by ID

Example: player controls

const ref = useRef<BBChannelRef>(null);

// Play/pause toggle
const togglePlayback = async () => {
  const state = await ref.current?.getPlayerState();
  if (state?.isPlaying) {
    ref.current?.pause();
  } else {
    ref.current?.play();
  }
};

// Seek forward 10 seconds
const skipForward = async () => {
  const state = await ref.current?.getPlayerState();
  if (state?.currentTime != null) {
    ref.current?.seek(state.currentTime + 10);
  }
};

// Target a specific player
const players = await ref.current?.getPlayers();
if (players && players.length > 1) {
  ref.current?.play(players[1].id);
}

Utility

Method	Signature	Description
reload	() => void	Reload the channel
setJwt	(jwt: string) => void	Update the JWT for authenticated content
setRpcToken	(token: string) => void	Update the RPC token