One-to-one Virtual ShoppingBusiness Portal

Player configurations (React Native)

We have the following three entries to open the player.

  1. VideoFeed component

  2. StoryBlock component

  3. openVideoPlayer API

When customizing the player, you need to handle the above entries if you use them.

Configuration reference

  1. VideoPlayerConfiguration

  2. StoryBlockConfiguration

  3. OpenVideoPlayerConfiguration

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)

Please refer to https://docs.firework.com/firework-for-developers/react-native-sdk/integration-guide-v2/customization-react-native/player-configurations-react-native#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

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

Please refer to buttonConfiguration for more details.

To display the channel logo instead of the more icon (three dots) in the player, you could refer to the following code snippets.

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.

Customize other player configurations

PreviousVideo feed configurations (React Native)NextShopping configurations (React Native)

Last updated

Was this helpful?