React Player SDK with IMA

This guide provides detailed instructions on integrating the MediaMelon IMA SDK with the React Player

Step 1: Prerequisites

Step 2: Set up the build environment

Step 3: Import Packages

Step 4: Register and Initialise SDK

Step 5: Report Ad Information

Step 6: Report Ad Events

Step 7: MMAdState

Step 8: Variables and Description

Step 1: Prerequisites

• React Player Application.

• MediaMelon SmartSight SDK mmsmartstreaming_reactplayer.min.js file is necessary.

Step 2: Set up the build environment

Using NPM:

npm i mediamelon-react-sdk

Step 3: Import Packages

Using NPM:

import {MMReactPlayerSDK, MMIMAAdapter, MMAdState, MMAdInfo} from 'mediamelon-react-sdk';

Using JS file:

import {MMReactPlayerSDK, MMIMAAdapter, MMAdState, MMAdInfo} from './mmsmartstreaming_reactplayer.min.js'

Step 4: Register and Initialise SDK

The SDK must be initialised at the start of each video session. Initialisation includes setting the application context, initialising the playback session, and indicating the intent for playback with the SDK.

The enableLogTrace feature should be enabled for testing during the integration process. Set this to False before releasing the player to production.

CUSTOMER_ID is your MediaMelon assigned Customer ID. If you do not know your Customer ID contact MediaMelon at [e-mail].

Wrap your Video component with the MMReactPlayerSDK.

const MMReactPlayerSDK = MMReactPlayerSDK(ReactPlayer);

<MMReactPlayerSDK
  ref={this.ref}
  playerRef={this.player}
  className='react-player'
  width='100%'
  height='100%'
  url={url}
  ...
  mmOptions={{
    register: {
      customerId: 'CUSTOMER_ID',      
      subscriberId: 'SUBSCRIBER_ID',   
      subscriberType: 'SUBSCRIBER_TYPE',
      subscriberTag:'SUBSCRIBER_TAG',  
      playerName: 'PLAYER_NAME',
      playerBrand:"PLAYER_BRAND",
      playerModel:"PLAYER_MODEL",
      playerVersion:'PLAYER_VERSION',
      basePlayerName: "BASE_PLAYER_NAME",
      basePlayerVersion: "BASE_PLAYER_VERSION",
      experimentName: "EXPERIMENT_NAME",
      subPropertyId: "SUB_PROPERTY_ID",
      viewSessionId: "VIEW_SESSION_ID",
      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,
    },
    customTags:{
      "KEY1": "VALUE_STRING1",
      "KEY2": "VALUE_STRING2"
    },
    enableLogTrace:false
  }}
/>

Step 5: Report Ad Information

const mmAdAdapter = MMIMAAdapter();

const sdkAdInfo = MMAdInfo();
sdkAdInfo.adClient = "AD_CLIENT";
sdkAdInfo.adId = "AD_ID";
sdkAdInfo.adCreativeId = "CREATIVE_ID";
sdkAdInfo.adUrl = "AD_URL";
sdkAdInfo.adTitle = "AD_TITLE";
sdkAdInfo.adServer = "AD_SERVER";
sdkAdInfo.adCreativeType = "AD_CREATIVE_TYPE";
sdkAdInfo.adDuration = <ad_duration_in_seconds>;
sdkAdInfo.adPodLength = <ad_pod_length>;
sdkAdInfo.adIsLinear = <is_ad_linear_boolean>;

mmAdAdapter.reportAdInfo(sdkAdInfo);

Step 6: Report Ad Events

mmAdAdapter.reportAdEvent(<MMAdState>);

Step 7: MMAdState

MMAdState Enum has the following fields:

• AD_REQUEST

• AD_IMPRESSION

• AD_PLAY

• AD_PLAYING

• AD_MIDPOINT

• AD_FIRST_QUARTILE

• AD_THIRD_QUARTILE

• AD_CLICKED

• AD_PAUSED

• AD_RESUMED

• AD_SKIPPED

• AD_ENDED

• AD_COMPLETED

• AD_ERROR

• AD_BLOCKED

• AD_BUFFERING

Step 8: Variables and Description

Variable	Description	Optional/Mandatory
PLAYER_NAME	String containing the Player Name.	Mandatory
CUSTOMER_ID	String containing your MediaMelon-assigned Customer ID.	Mandatory
SUBSCRIBER_ID	String containing your Subscriber’s ID.	Mandatory
DOMAIN_NAME	String containing your section of your subscriber or assets.	Mandatory
SUBSCRIBER_TYPE	String containing the Subscriber Type (e.g. “Free”, “Paid”).	Mandatory
SUBSCRIBER_TAG	String containing additional subscriber-specific information. This is sent in clear (not hashed) to SmartSight and it is advised not to send sensitive information in this field.	Optional
ASSET_ID	String containing Asset Id.	Mandatory
ASSET_NAME	String containing Asset Name.	Mandatory
VIDEO_ID	String containing your video’s ID.	Mandatory
CONTENT_TYPE	String containing the type of the Content. For example - "Movie", "Special", "Clip", "Scene" or "Episode".	Mandatory
GENRE	String containing the Genre of the content. For example - "Comedy", "Horror".	Optional
DRM_PROTECTION	Widevine, Fairplay, Playready, etc. Unknown means content is protected, but the protection type is unknown. For clear contents, do not set this field	Optional
EPISODE_NUMBER	String containing sequence number of the Episode.	Optional
SEASON	String containing the Season. For example - "Season 1".	Optional
SERIES_TITLE	String containing Title of the Series.	Optional
VIDEO_TYPE	String containing Video Type. For example - "LIVE", and "VOD".	Optional
PLAYER_BRAND	String containing Player Brand (e.g. “Exo Player”).	Mandatory
PLAYER_MODEL	String containing Player Model. For example - This could be a variant of a player. Say the name of third third-party player used by the organization. Or any human-readable name of the player.	Mandatory
PLAYER_VERSION	String containing Player Version.	Mandatory
BASE_PLAYER_NAME	String containing base player name	Optional
BASE_PLAYER_VERSION	String containing base player version	Optional
EXPERIMENT_NAME	You can use this field to categorise views into different experiments, allowing you to filter by this dimension later.	Optional
SUB_PROPERTY_ID	A sub-property is an optional feature that allows you to organize data within a property. For instance, a video platform could use sub-properties to group data by customer, or a media company might use them to differentiate between its various websites.	Optional
VIEW_SESSION_ID	An ID that can be used to link the view with upstream platform services, such as CDN or origin logs, for correlation purposes.	Optional
isLive	Set this boolean variable to true if the content is Live else set it to false for VOD content.	Optional