Player configurations (React Native)
We have the following three entries to open the player.
VideoFeed
componentStoryBlock
componentopenVideoPlayer
API
When customizing the player, you need to handle the above entries if you use them.
Configuration reference
Customize player styles
As the following code snippets, we could customize styles for video overlay CTA, countdown timer, etc.
// Configure player configuration for VideoFeed component
<VideoFeed
style={{ height: 200 }}
source="discover"
videoPlayerConfiguration={{
// Customize the video overlay CTA button style
ctaButtonStyle: {
backgroundColor: '#2089ff',
textColor: '#ffffff',
fontSize: 14,
iOSFontInfo: {
fontName: 'Helvetica',
systemFontStyle: 'italic',
systemFontWeight: 'bold',
},
},
countdownTimerConfiguration: { appearance: 'light' },
}}
/>;
// Configure player configuration for StoryBlock component
<StoryBlock
style={{ height: 200 }}
source="discover"
storyBlockConfiguration={{
// Customize the video overlay CTA button style
ctaButtonStyle: {
backgroundColor: '#2089ff',
textColor: '#ffffff',
fontSize: 14,
iOSFontInfo: {
fontName: 'Helvetica',
systemFontStyle: 'italic',
systemFontWeight: 'bold',
},
},
countdownTimerConfiguration: { appearance: 'light' },
}}
/>;
// Configure player configuration for openVideoPlayer API
FireworkSDK.getInstance().openVideoPlayer(url, {
// Customize the video overlay CTA button style
ctaButtonStyle: {
backgroundColor: '#2089ff',
textColor: '#ffffff',
fontSize: 14,
iOSFontInfo: {
fontName: 'Helvetica',
systemFontStyle: 'italic',
systemFontWeight: 'bold',
},
},
countdownTimerConfiguration: { appearance: 'light' },
});
Enable PiP(Picture in Picture)
Set up the iOS project
To enable PiP outside the iOS app, you also need to add "Audio, Airplay, and Picture in Picture" background mode via Signing & Capabilities in your iOS project settings(as shown in the following screenshot). More information about this can be found here: Apple Documentation

Set enablePictureInPicture to true on JS side
// Enable PiP for VideoFeed component
<VideoFeed
style={{ height: 200 }}
source="discover"
enablePictureInPicture={true}
/>
// Enable PiP for StoryBlock component
<StoryBlock
style={{ height: 400 }}
source="discover"
enablePictureInPicture={true}
/>
// Enable PiP for openVideoPlayer API
FireworkSDK.getInstance().openVideoPlayer(url, {
enablePictureInPicture: true,
});
Customize player button icons
Set up the iOS project
Add your custom button icons to the asset catalogs(e.g. Images.xcassets, Assets.xcassets or other names) in your iOS project. Such as:

For more details, please refer to https://developer.apple.com/documentation/xcode/adding-images-to-your-xcode-project.
Set up the Android project
Add your custom button icons to the drawable directory(App resources overview and Support different pixel densities) in your Android project. Such as:

Config player button icon names on the JS side
// Configure button icon names for video feed component
<VideoFeed
style={{ height: 200 }}
source="discover"
mode="row"
videoFeedConfiguration={videoFeedConfiguration}
videoPlayerConfiguration={{
buttonConfiguration: {
videoDetailButton: { imageName: 'custom_more' },
closeButton: { imageName: 'custom_close' },
muteButton: { imageName: 'custom_mute' },
unmuteButton: { imageName: 'custom_unmute' },
playButton: { imageName: 'custom_play' },
pauseButton: { imageName: 'custom_pause' },
},
}}
/>
// Configure button icon names for story block component
<StoryBlock
style={{ height: 200 }}
source="discover"
storyBlockConfiguration={{
buttonConfiguration: {
videoDetailButton: { imageName: 'custom_more' },
closeButton: { imageName: 'custom_close' },
muteButton: { imageName: 'custom_mute' },
unmuteButton: { imageName: 'custom_unmute' },
playButton: { imageName: 'custom_play' },
pauseButton: { imageName: 'custom_pause' },
},
}}
/>;
// Configure button icon names for openVideoPlayer API
FireworkSDK.getInstance().openVideoPlayer(url, {
buttonConfiguration: {
videoDetailButton: { imageName: 'custom_more' },
closeButton: { imageName: 'custom_close' },
muteButton: { imageName: 'custom_mute' },
unmuteButton: { imageName: 'custom_unmute' },
playButton: { imageName: 'custom_play' },
pauseButton: { imageName: 'custom_pause' },
},
});
Please refer to buttonConfiguration for more details.
Customize player logo
To display the channel logo instead of the more icon (three dots) in the player, you could refer to the following code snippets.
// Customize player logo for video feed component
<VideoFeed
style={{ height: 200 }}
source="discover"
videoPlayerConfiguration={{
videoPlayerLogoConfiguration: {
option: 'creator',
encodedId: 'encoded channel id', // encoded channel id
}
}}
/>
// Customize player logo for story block component
<StoryBlock
style={{ height: 400 }}
source="discover"
storyBlockConfiguration={{
videoPlayerLogoConfiguration: {
option: 'creator',
encodedId: 'encoded channel id', // encoded channel id
}
}}
/>
// Customize player logo for openVideoPlayer API
FireworkSDK.getInstance().openVideoPlayer(url, {
videoPlayerLogoConfiguration: {
option: 'creator',
encodedId: 'encoded channel id', // encoded channel id
},
});
Customize Ad badge
We offer a global API for customizing ad badges, and these configurations are applicable to both the player and the video feed. The API is FireworkSDK.getInstance().adBadgeConfiguration
.
FireworkSDK.getInstance().adBadgeConfiguration = {
badgeTextType: 'ad', // or sponsored
backgroundColor: '#ffffff',
textColor: '#000000',
androidFontInfo: {
isCustom: false,
typefaceName: 'SANS_SERIF',
},
};
Customize other player configurations
// Customize other player configurations for video feed component
<VideoFeed
style={{ height: 200 }}
source="discover"
// Configure player configuration for VideoFeed component
videoPlayerConfiguration={{
// Configure player style: full or fit
playerStyle: 'fit',
// Configure video complete action: advanceToNext or loop
// On iOS, the property only applies to full-screen mode but not to embedded mode
// On Android, the property applies to both full-screen and embedded modes
videoCompleteAction: 'advanceToNext',
// Indicates if the video player shows share button
showShareButton: true,
// Indicates if the video player shows playback button
showPlaybackButton: true,
// Indicates if the video player shows mute button
showMuteButton: true,
// Specifies if the video detail title should be showed
showVideoDetailTitle: true,
}}
/>;
// Customize other player configurations for story block component
<StoryBlock
style={{ height: 200 }}
source="discover"
storyBlockConfiguration={{
// Configure player style: full or fit
playerStyle: 'fit',
// Configure video complete action: advanceToNext or loop
// On iOS, the property only applies to full-screen mode but not to embedded mode
// On Android, the property applies to both full-screen and embedded modes
videoCompleteAction: 'advanceToNext',
// Indicates if the video player shows share button
showShareButton: true,
// Indicates if the video player shows playback button
showPlaybackButton: true,
// Indicates if the video player shows mute button
showMuteButton: true,
// Specifies if the video detail title should be showed
}}
/>;
// Customize other player configurations for openVideoPlayer API
FireworkSDK.getInstance().openVideoPlayer(url, {
// Configure player style: full or fit
playerStyle: 'fit',
// Configure video complete action: advanceToNext or loop
// On iOS, the property only applies to full-screen mode but not to embedded mode
// On Android, the property applies to both full-screen and embedded modes
videoCompleteAction: 'advanceToNext',
// Indicates if the video player shows share button
showShareButton: true,
// Indicates if the video player shows playback button
showPlaybackButton: true,
// Indicates if the video player shows mute button
showMuteButton: true,
// Specifies if the video detail title should be showed
});
Last updated
Was this helpful?