# MediaMelon React Native Video v5.2.1 SDK Integration Document

**Step 1:** [Install MediaMelon React Native SDK](#step-1-install-mediamelon-react-native-sdk)

**Step 2:** [Import SDK Package](#step-2-import-sdk-package)

**Step 3:** [Register and Initialise SDK](#step-3-initialize-session-and-report-user-intent-to-playback)

**Step 4:** [Custom Adapter](#step-4-custom-adapter)

**Step 5:** [Limitations](#step-5-limitations)

### Step 1: Install MediaMelon React Native SDK 

`$REACT_NATIVE_PROJECT = {ReactNativeVideo - v5.2.1}`

The SDK files should be added to the build environment

**Using NPM:**

1. Use this command in your terminal:-

```gradle
npm i mediamelon-js-react-native-sdk@1.4.1
```

**Using JS file:** 

* Copy `mmsmartstreaming_reactnative.min.js` provided in the release package to the React native project. Example  `$REACT_NATIVE_PROJECT/mmsmartstreaming_reactnative.min.js`

### Step 2: Import SDK Package

`$REACT_NATIVE_PROJECT/App.js`

**Using NPM:**

```javascript
import {MMReactNativeVideoSDK, MMCustomAdapter, MMPlayerState} from 'mediamelon-js-react-native-sdk';
```

**Using JS File:** 

```javascript
import {MMReactNativeVideoSDK, MMCustomAdapter, MMPlayerState} from './mmsmartstreaming_reactnative.min.js';
```

### Step 3: Register and Initialise SDK <a href="#step-3-initialize-session-and-report-user-intent-to-playback" id="step-3-initialize-session-and-report-user-intent-to-playback"></a>

{% hint style="info" %}
CUSTOMER\_ID is your MediaMelon assigned Customer ID. If you do not know your Customer ID, contact MediaMelon at <customer-support@mediamelon.com>.
{% endhint %}

Wrap your `Video` component with the `MMReactNativeVideoSDK`.

```javascript
const MMPlayer = MMReactNativeVideoSDK(Video);

<MMPlayer
    source={{ uri: 'STREAM_URL' }}
    ...
    mmOptions={{
      register: {
        customerId: 'CUSTOMER_ID',      
        subscriberId: 'SUBSCRIBER_ID',   
        subscriberType: 'SUBSCRIBER_TYPE',
        subscriberTag:'SUBSCRIBER_TAG',  
        hashSubscriberId: false,
        playerName: 'PLAYER_NAME',
        playerBrand:"PLAYER_BRAND",
        playerModel:"PLAYER_MODEL",
        playerVersion:'PLAYER_VERSION',
        basePlayerName: "BASE_PLAYER_NAME",
        basePlayerVersion: "BASE_PLAYER_VERSION",
        domainName: 'DOMAIN_NAME',
        applicationName: 'APP_NAME',            
        applicationVersion: 'APP_VERSION',      
        deviceMarketingName:'DEVICE_MARKETING_NAME'
      },
      contentMetadata: {
        assetName:'ASSET_NAME',
        assetId:"ASSET_ID",
        videoId:"VIDEO_ID",
        contentType:'CONTENT_TYPE',
        genre:'GENRE',
        drmProtection:'DRM_PROTECTION',
        episodeNumber:'EPISODE_NUMBER',
        season:'SEASON',
        seriesTitle:'SERIES_TITLE',                  
        isLive: false,
      },
      streamInfo:{
        mediaType: 'MEDIA_TYPE',
        streamFormat: 'STREAM_FORMAT',
        sourceType: 'SOURCE_TYPE'
      },
      customTags:{
        "KEY1": "VALUE_STRING1",
        "KEY2": "VALUE_STRING2"
      },
      experimentName: "EXPERIMENT_NAME",
      subPropertyId: "SUB_PROPERTY_ID",
      viewSessionId: "VIEW_SESSION_ID",
      deviceId: "DEVICE_ID",
      cdn: "CDN",
      enableLogTrace: false
    }}
/>
```

{% hint style="info" %}

* `isLive`: Set to `true` for live video stream and to `false` for the VOD stream.
* `hashSubscriberId`: Set it to `true` to hash the subscriber ID, and to `false` to process the subscriber ID without hashing.
  {% endhint %}

### Step 4: Custom Adapter

#### Step 4.1: Report Player State

Use the Custom Adapter to report player state changes during video playback.

The adapter exposes the method reportPlayerState(state) and accepts an enum value from MMPlayerState.

**Player State Mapping**

* PLAYING → Reported when playback starts or resumes.
* PAUSED → Reported when playback is paused.
* STOPPED → Reported when playback ends or the user exits playback.

```javascript
const mmAdapter = MMCustomAdapter();

mmAdapter.reportPlayerState(MMPlayerState.PLAYING);

Enum: MMPlayerState
- PLAYING
- PAUSED
- STOPPED
```

#### Step 4.2: Report Custom Metadata

Use this method to report any additional metadata that doesn’t fall under predefined fields. This allows flexibility to send custom business-specific or platform-specific information to the SDK. This is the same as `customTags` in the `contentMetadata` object.

```javascript
mmAdapter.reportCustomMetadata("KEY", "VALUE");
```

#### Step 4.3: Update Asset Info

If Asset Information needs to be updated dynamically during the live session without re-initiating the player, then the `updateAssetInfo` API can be used to update the new AssetInfo

{% hint style="info" %}
**Note**

* This API must be called for updating asset info for the live streams only&#x20;
* This API must be called after the Player has started the playback of the live stream&#x20;
* New Asset Info Object will override the previous values. Hence, set all the fields that are required every time calling this API, including all **Custom Tags.**
  {% endhint %}

```javascript
// Create a new assetInfo object with the values need to be updated
var newAssetInfo =  { 
     "assetName": "ASSET_NAME",
     "assetId": "ASSET_ID",
     "videoId": "VIDEO_ID",
     "contentType": "CONTENT_TYPE",
     "drmProtection": "DRM_PROTECTION",
     "episodeNumber": "EPISODE_NUMBER",
     "season": "SEASON",
     "seriesTitle": "SERIES_TITLE",
     "customTags":{
         "key1": "VALUE1",
         "key2": "VALUE2"
     }          
}

// Update the new assetInfo
mmAdapter.updateAssetInfo(newAssetInfo);
```

#### Step 4.4 Report Rendition

At the start of the video, create a ReditionInfo object, assign initial rendition values to the object, and report it to the SDK. For any subsequent rendition change, update only the fields that changed in the same RenditionInfo object. Leave the unchanged fields as-is, and report the updated object to the SDK.

```javascript
var renditionInfo = new RenditionInfo();
rendition.bitrate = <birate>;            //Integr Value in bps
rendition.width = <width>;               //Integr Value
rendition.height = <height>;             //Integer Value
rendition.frameRate = <frame_rate>;      //Integr Value in fps
rendition.aCodec = "AUDIO_CODEC";
rendition.vCodec = "VIDEO_CODEC";

mmAdapter.reportRendition(renditionInfo);
```

### Step 5: Limitations

* The built-in player state tracking doesn't work as expected on Android. Use the Custom Adapter for more reliable player state monitoring.
* Buffering events are not tracked on Android because the onBuffer() callback is not triggered consistently.
* Seek start/complete events are tracked internally only for VOD, as the onSeek() listener is not consistent across platforms.