This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@gini-npm/react-native-exco-player

React Native ExCo Player

Requirements

Before integrating the React Native ExCo Player library into your project, ensure that you have the following prerequisites:

iOS

• Xcode: Integrated Development Environment (IDE) for iOS development, version 15+.

Android

• Android Studio: Integrated Development Environment (IDE) for Android development.
• Android SDK version: The minimum required Android SDK version is 8.0 (API level 26).

Terminology

• ExCoWebView: A Web-based video player running inside a WebView.
• ExcoPlayerView: A wrapper for ExCoWebView to place it on the screen.
• ExCo SDK: An Android library providing essential native functionality.
• MiniPlayer: A floating player that can be located on the screen according to placement settings.
• Player ID: A unique identifier for the player, with a set of settings predefined in the ExCo library.

Library Installation

Use the following command in your project's terminal to download and install the latest version of the library from the NPM repository:

# Using npm
npm i @gini-npm/react-native-exco-player
# OR using Yarn
yarn add @gini-npm/react-native-exco-player

Configuration

iOS

Make sure that cocoapods is installed on the mac, install via gem if needed

	* Open terminal 
	* Type `$ [sudo] gem install cocoapods`
	* Press enter

Android

Add Maven Repository In the app-level "build.gradle" file of your Android project, add the Maven repository:

repositories {
  maven {
    url "https://giniapps.jfrog.io/artifactory/client-libs-gradle-dev"
  }
}

Set minSdkVersion Set the minSdkVersion to 26 in the project's "build.gradle" file for Android:

android {
  // other configurations
  defaultConfig {
    // other configurations
    minSdkVersion 26
  }
}

Usage - SDK import & initialization

Import ExcoPlayerView In your React Native application, import the ExcoPlayerView component from the React Native ExCo Player library:

import { ExcoPlayerView } from '@gini-npm/react-native-exco-player';

Usage - Common use cases

Implement ExcoPlayerView in Your App Use the ExcoPlayerView component in your React Native application with the required parameters:

<ExcoPlayerView 
   nativeConfig = { {   
      playerID      : string,                       // REQUIRED
      appCategories : Array<String>,                // OPTIONAL
      appStoreId    : string,                       // OPTIONAL
      appStoreUrl   : string,                       // OPTIONAL
      appVersion    : string,                       // OPTIONAL
      deviceId      : string,                       // OPTIONAL
      ifa           : string,                       // OPTIONAL
      playerType    : ExcoPlayerPosition,           // OPTIONAL
   }  } 
   style = {{ width: number, height: number }}      // REQUIRED
   delegateControl  : ExcoPlayerViewControlDelegate // OPTIONAL
   delegateAds      : ExcoPlayerViewAdDelegate      // OPTIONAL
   delegateErrors   : ExcoPlayerViewErrorDelegate   // OPTIONAL
/>

IMPORTANT Styling Note: The size of your player needs to be in aspect ratio 16:9, where 16 is width, and 9 is height.

Delegates: delegateControl: ExcoPlayerViewControlDelegate to get callbacks on playerControl events.

const delegateControl = new ExcoPlayerViewControlDelegate(
   () => console.log('Player Initiated'),
   () => console.log('Player Loaded'),
   () => console.log('Player Playing'),
   () => console.log('Player Paused'),
   () => console.log('Player Muted'),
   () => console.log('Player Unmuted'),
   () => console.log('Player Closed')
);

delegateErrors: ExcoPlayerViewErrorDelegate to get callbacks on error events.

const delegateError = new ExcoPlayerViewErrorDelegate(
   (payload) => console.log('error message: ' + payload)
);

delegateAds: ExcoPlayerViewAdDelegate to get callbacks on Ad events.

const delegateAds = new ExcoPlayerViewAdDelegate(
   () => console.log('Player Ad Init'),
   () => console.log('Player Ad Started'),
   (payload) => console.log('Player Ad Impression ' + payload),
   () => console.log('Player Ad FirstQuartile'),
   () => console.log('Player Ad Midpoint'),
   () => console.log('Player Ad ThirdQuartile'),
   () => console.log('Player Ad Completed'),
   () => console.log('Player Ad Clicked'),
   () => console.log('Player Ad Skipped'),
);