npm package: @gini-npm/react-native-exco-player
Description: A react wrapper for the ExCo native video player
Author: ExCo DevTeam
Latest version: 1.0.6
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# 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:

```bash
# 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:

```groovy
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:

```groovy
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:

```javascript
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:

```javascript
<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.

```javascript
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.

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

delegateAds: ExcoPlayerViewAdDelegate to get callbacks on Ad events.

```javascript
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'),
);
```