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

// 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
});