Comment on page
Story Block

For android:
StoryBlock is a heavy object containing multiple instances of the player, Heavy-lifting UI elements, and intensive background tasks, Beware that the recommended number of the StoryBlock being used in a single screen is 1. However, in a wide range of new Android devices, 2 instances might work alright. Any number of StoryBlock above this limitation is not recommended by the Firework team and is not supported.
There are four source types of the story block:
Discover
Channel
Playlist 
Dynamic Content
Hashtag Playlist
Sku
Single Content
Integration
import {
  StoryBlock,
} from 'react-native-firework-sdk';
​
// discover
<StoryBlock
  style={{ height: 400 }} 
  source="discover" 
/>
​
// channel
<StoryBlock 
  style={{ height: 400 }} 
  source="channel" 
  channel="your encoded channel id"
/>
​
// playlist
<StoryBlock 
  style={{ height: 400 }} 
  source="playlist" 
  playlist="your encoded playlist id"
  channel="your encoded channel id"
/>
​
// dynamic content
<StoryBlock 
  style={{ height: 400 }} 
  source="dynamicContent" 
  channel="your encoded channel id"
  dynamicContentParameters={{
    '<cohort key>': ['<cohort value1>', '<cohort value2>'],
  }}
/>
​
// hashtag playlist
<StoryBlock 
  style={{ height: 400 }} 
  source="hashtagPlaylist"
  channel="your encoded channel id"
  hashtagFilterExpression="<hashtag filter expression>"
/>
​
<StoryBlock 
  style={{ height: 400 }} 
  source="sku"
  channel="your encoded channel id"
  productIds={['prodct_id_1', 'product_id_2']}
/>
​
<StoryBlock 
  style={{ height: 400 }} 
  source="singleContent"
  channel="your encoded vide or live stream id"
  productIds={['prodct_id_1', 'product_id_2']}
/>
Please refer to the Encoded IDs help article to learn about how to find your encoded channel ID, playlist ID.
Story block loading result callback
StoryBlock component provides onStoryBlockLoadFinished prop for setting video feed loading result callback.
<StoryBlock
  style={{ height: 400 }}
  source="discover"
  onStoryBlockLoadFinished={(error) => {
  /**
    * if error is undefined, it means that story block loaded successfully. 
    * Otherwise, it means that story block failed to load.
    */
  console.log('onStoryBlockLoadFinished error', error);
  }}
/>
Story block configuration
StoryBlock component provides storyBlockConfiguration prop for configuring Video Player. The current configurable properties are showShareButton, shareBaseURL, and ctaWidth etc. Please refer to StoryBlockConfiguration for more details.
<StoryBlock
  style={{ height: 400 }}
  source="discover"
  storyBlockConfiguration={{ showShareButton: true, ctaWidth: 'compact' }}
/>;
Customize player logo
1.Show the logo for the creator of the media
<StoryBlock
  style={{ height: 400 }}
  storyBlockConfiguration={{
    videoPlayerLogoConfiguration: {
      option: 'creator',
      encodedId: 'encoded channel id', // encoded channel id
    }
  }}
/>
2.Shows the channel aggregator's logo
<StoryBlock
  style={{ height: 400 }}
  source="discover"
  storyBlockConfiguration={{
    videoPlayerLogoConfiguration: {
      option: 'channelAggregator',
      encodedId: 'encoded channel id', // encoded channel id
    }
  }}
/>
Floating Player(Only supported on iOS)
You could set enablePictureInPicture to true to enable the floating player.
<StoryBlock
  style={{ height: 400 }}
  source="discover"
  enablePictureInPicture=true
/>
OS Picture in Picture(Only supported on iOS)
You also need to set enablePictureInPicture to true to enable the OS Picture in Picture.
<StoryBlock
  style={{ height: 400 }}
  source="discover"
  enablePictureInPicture=true
/>
This feature allows the user to watch media while the application is in a background state. While in background mode a video will display in a floating, resizable window.
Set up the iOS project
To enable OS Picture in Picture on the iOS side, you also need to add Background Modes capability via Signing & Capabilities in your iOS project settings. More information about this can be found here: Apple Documentation​
To use Picture in Picture, we configure the app to support background audio playback. See Configuring the Audio Playback of iOS and tvOS Apps for more details.
Reference
​StoryBlock​
​IStoryBlockProps​
Video Feed
Live Stream Support
Last modified 9d ago