Player Deck (React Native)

The PlayerDeck component displays a horizontally scrollable row of video thumbnails with inline playback and product cards. Currently, there are eight source types of player deck:

Discover
Channel
Playlist
Playlist Group
Dynamic Content
Hashtag Playlist
SKU
Single Content

Integration

import { PlayerDeck } from 'react-native-firework-sdk';

// discover
<PlayerDeck
  style={{ height: 580 }}
  source="discover"
/>

// channel
<PlayerDeck
  style={{ height: 580 }}
  source="channel"
  channel="your encoded channel id"
/>

// playlist
<PlayerDeck
  style={{ height: 580 }}
  source="playlist"
  channel="your encoded channel id"
  playlist="your encoded playlist id"
/>

// playlist group
<PlayerDeck
  style={{ height: 580 }}
  source="playlistGroup"
  playlistGroup="your encoded playlist group id"
/>

// dynamic content
<PlayerDeck
  style={{ height: 580 }}
  source="dynamicContent"
  channel="your encoded channel id"
  dynamicContentParameters={{
    '<cohort key>': ['<cohort value1>', '<cohort value2>'],
  }}
/>

// hashtag playlist
<PlayerDeck
  style={{ height: 580 }}
  source="hashtagPlaylist"
  channel="your encoded channel id"
  hashtagFilterExpression="<hashtag filter expression>"
/>

// sku
<PlayerDeck
  style={{ height: 580 }}
  source="sku"
  channel="your encoded channel id"
  productIds={['product_id_1', 'product_id_2']}
/>

// single content
<PlayerDeck
  style={{ height: 580 }}
  source="singleContent"
  contentId="your encoded video or live stream id"
/>

Please refer to the Encoded IDs help article to learn about how to find your encoded channel ID, playlist ID, and playlist group ID.

Player deck loading result callback

PlayerDeck component provides onPlayerDeckLoadFinished prop for setting player deck loading result callback.

<PlayerDeck
  style={{ height: 580 }}
  source="discover"
  onPlayerDeckLoadFinished={(error) => {
    /**
     * if error is undefined, it means that player deck loaded successfully.
     * Otherwise, it means that player deck failed to load.
     */
    console.log('onPlayerDeckLoadFinished error', error);
  }}
/>

Empty callback

PlayerDeck component provides onPlayerDeckEmpty prop for setting player deck empty callback.

<PlayerDeck
  style={{ height: 580 }}
  source="discover"
  onPlayerDeckEmpty={(error) => {
    // Hide the component here if needed
    console.log('onPlayerDeckEmpty error', error);
  }}
/>

Force refreshing player deck

const playerDeckRef = useRef<PlayerDeck>(null);

const handleRefresh = () => {
  playerDeckRef.current?.refresh();
};

<PlayerDeck
  ref={playerDeckRef}
  style={{ height: 580 }}
  source="discover"
/>

<Button
  onPress={handleRefresh}
  title="Refresh"
/>

Get feed id

PlayerDeck component provides onPlayerDeckGetFeedId prop for getting the feed id.

<PlayerDeck
  style={{ height: 580 }}
  source="discover"
  onPlayerDeckGetFeedId={(feedId) => {
    // Use feedId
    console.log('onPlayerDeckGetFeedId feedId', feedId);
  }}
/>