@dream11mobile/react-native-fancode-sdk v3.1.2

React Native Brightcove Player

• A React Native implementation of FanCode Player SDK.
• Supported Features
  • FanCode player component
  • Poster image component
  • Retrieving playlist
  • Managing offline playback with Dynamic Delivery

Supported Version

• iOS 10 >=
• Android 5.0 >=
• FanCode SDK 6.x

Installation

yarn add react-native-FanCode-player
react-native link react-native-FanCode-player

• Add resolver entry into metro.config.js or rn-cli.config.js if it does not work.
  • Note that it is workaround, so you should remove when it's no longer needed

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  resolver: {
    blacklistRE: blacklist([/node_modules\/.*\/node_modules\/react-native\/.*/])
  }
};

iOS

• Make Podfile and pod install && pod update

source 'https://github.com/brightcove/BrightcoveSpecs.git'

platform :ios, '10.0'
use_frameworks!

target 'YOUR_PROJECT_ID' do
    pod 'Brightcove-Player-Core'
end

Android

• Add maven source to repositories in android/build.gradle
• Enables multiDex.

allprojects {
  repositories {
      maven {
          url 'http://repo.brightcove.com/releases'
      }
  }
}

API

FanCodePlayer

import { FanCodePlayer } from 'react-native-FanCode-player';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FanCodePlayer
          style={styles.player}
          accountId="3636334163001"
          videoId="3666678807001"
          policyKey="BCpkADawqM1W-vUOMe6RSA3pA6Vw-VWUNn5rL0lzQabvrI63-VjS93gVUugDlmBpHIxP16X8TSe5LSKM415UHeMBmxl7pqcwVY_AZ4yKFwIpZPvXE34TpXEYYcmulxJQAOvHbv2dpfq-S_cm"
        />
      </View>
    );
  }
}

• Video player component of Brightcove.
• It may not work on Android simulator.
• For a more detailed example, please see example.

| onEnterFullscreen | Function | Indicates the player enters full screen | | | onBeforeExitFullscreen | Function | Indicates the player beforeexit full screen | | | onExitFullscreen | Function | Indicates the player exit full screen | | | onError | Function | Fires an error event if anything happens that avoid the video to play | | | onNetworkConnectivityChange | Function | Indicates if the player has lost connection or trying to reconect or if it recover from it | |

BrightcovePlayerPoster

import { BrightcovePlayerPoster } from 'react-native-brightcove-player';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <BrightcovePlayerPoster
          style={styles.player}
          accountId="3636334163001"
          videoId="3666678807001"
          policyKey="BCpkADawqM1W-vUOMe6RSA3pA6Vw-VWUNn5rL0lzQabvrI63-VjS93gVUugDlmBpHIxP16X8TSe5LSKM415UHeMBmxl7pqcwVY_AZ4yKFwIpZPvXE34TpXEYYcmulxJQAOvHbv2dpfq-S_cm"
          resizeMode="contain"
        />
      </View>
    );
  }
}

• Displays a poster specified by videoId, referenceId or videoToken.
• Prop is about the same as FanCodePlayer.

BrightcovePlayerUtil

• Promise for all methods may be invoke reject. Be sure to catch the exception.

requestDownloadVideoWithVideoId, requestDownloadVideoWithReferenceId

BrightcovePlayerUtil.requestDownloadVideoWithVideoId(accountId: string, policyKey: string, videoId: string, bitRate?: number): Promise<string>
BrightcovePlayerUtil.requestDownloadVideoWithReferenceId(accountId: string, policyKey: string, referenceId: string, bitRate?: number): Promise<string>

• Starts downloading the specified video with videoId or referenceId for offline playback.
• Returns VideoToken in string wrapped with Promise. This value will be used for offline playback with FanCodePlayer, acquisition for download status or deletion of offline videos.
  • Note that this promise resolves the download start, not the download complete.
  • In case that specified video has already been downloaded Promise will be rejected.
  • If the download is in progress, the download is retried on iOS and rejected on Android.
• Does not work properly on simulator.
• bitrate controls the quality of the downloading video in bps.
  • Downloads a rendition with the largest bitrate less than or equal to this value.
  • If no rendition can be found with a bitrate that is smaller than or equal to this bitrate, the lowest rendition will be downloaded.
  • If this value is 0 or not specified, the lowest rendition with video will be downloaded.

getOfflineVideoStatuses

BrightcovePlayerUtil.getOfflineVideoStatuses(accountId: string, policyKey: string): Promise<{
  accountId: string;
  videoId: string;
  videoToken: string;
  downloadProgress: number;
}[]>

• Lists downloaded offline videos and downloading progresses.
• downloadProgress equals 1 indicates that offline playback available.
  • Otherwise the download is in progress and the value shows the progress ratio in 0.0 ~ 1.0.
• Note that iOS returns offline videos for all accounts but Android only returns for the specified account. In other words iOS does not consider accountId and policyKey.

deleteOfflineVideo

BrightcovePlayerUtil.deleteOfflineVideo(accountId: string, policyKey: string, videoToken: string): Promise<void>

• Deletes offline videos or abort the ongoing download session.

addOfflineNotificationListener

BrightcovePlayerUtil.addOfflineNotificationListener(callback: (statuses: {
  accountId: string;
  videoId: string;
  videoToken: string;
  downloadProgress: number;
}[]) => void): Function

• Register a callback to notify storage changes such as video download progress or deletion of offline video.
• Make sure call disposer function when callback is no longer needed.

class Example extends Component {
  componentDidMount() {
    this.disposer = BrightcovePlayerUtil.addOfflineNotificationListener(console.log);
  }

  componentWillUnmount() {
    this.disposer();
  }

  render() {
    ...
  }
}

getPlaylistWithPlaylistId, getPlaylistWithReferenceId

BrightcovePlayerUtil.getPlaylistWithPlaylistId(accountId: string, policyKey: string, playlistId: string): Promise<{
  accountId: String;
  videoId: String;
  referenceId: String;
  name: String;
  description: String;
  duration: number;
}[]>;
BrightcovePlayerUtil.getPlaylistWithReferenceId(accountId: string, policyKey: string, referenceId: string): Promise<{
  accountId: String;
  videoId: String;
  referenceId: String;
  name: String;
  description: String;
  duration: number;
}[]>;

• Retrieves a playlist specified by playlistId or referenceId.

License

MIT