Install the package using your preferred package manager:

npm install @img-arena/streaming-sdk

yarn add @img-arena/streaming-sdk

React Component

Import the React component if you are using React:

import { StreamingSDKComponent } from '@img-arena/streaming-sdk';

To render the Streaming SDK you must pass these required props:

<StreamingSDKComponent
    eventId={'2'}
    operatorId={'your-operator-id'}
    isOperatorEnvProd={process.env.NODE_ENV === 'production'}
    environment={'staging'}
    fetchToken={getToken}
/>

Non-React environments

Import the SDK class if you aren't using React:

import { StreamingSDK } from '@img-arena/streaming-sdk';

To render the product, you must pass these required props:

new StreamingSDK({
  eventId: '2',
  operatorId: 'your-operator-id',
  domTarget: document.querySelector("#interactive-streaming-container"),
  fetchToken: getToken,
  isOperatorEnvProd: process.env.NODE_ENV === 'production',
  environment: 'staging',
});

To get an eventId use the Events API.

To learn more about authentication flow and fetching the token, read about the Authentication Flow.

This configuration should get you Video for any event, and Timeline and Statistics for supported events.

See Configuration options for full details of all configuration options available.

Users can switch between multiple events by using the MultiStream menu.

For MultiStream support you have to pass a MultiStream object to the multiStreamEvents prop.

type MultiStream = Categories | Streams

interface Categories {
  type: 'categories';
  label: string;
  categories: MultiStream[];
}

interface Streams {
  type: 'streams';
  label: string;
  streams: Stream[];
}

interface Stream {
  id: string;
  title: string;
  thumbnail: string;
}

Categories are labeled groups of Categories and Streams.

You can fetch events using the Events API, collect them into categories and pass to the Interactive Streaming SDK.

Here is an example function: after fetching the events from the API it gets the events and categorises them by sport. You can create multiple levels of categories, each level can contain both streams and subcategories inside a category.

import { categories, streams } from '@img-arena/streaming-sdk';

fetchEvents().then(events => {
  const rec: Record<string, Array<StreamingEvent>> = {};

  for (const event of events) {
    const key = event?.tournament?.property?.sport?.name;
    if (!rec[key]) rec[key] = [];
    rec[key].push(event);
  }

  return categories(
    'Live Streams',
     Object.entries(rec).map(([k, v]) =>
       streams(
         k,
         v.map(e => ({ ...e, id: e.id.toString() }))
       )
     )
   );
});

The fetchToken callback passed to the SDK must return a Promise which resolves to an object containing a token and a timestamp.

Please refer to the IMGA Streaming Authentication Flow documentation for full details on how to generate these.

Below is the typescript type needed to initialise the SDK. The default requirements are

• Event Id

• OperatorId

• isOperatorEnvProd

• Environment

• fetchToken

All other configuration options are optional for video streaming, but may be required for other features (Markets, Betting, MultiStream).

type IMGAStreamingSDKConfig = {
  // STREAM / TIMELINE / STATS
  eventId: string;
  operatorId: string;
  isOperatorEnvProd: boolean;
  environment: 'local' | 'dev' | 'staging' | 'prod' | 'test';
  fetchToken: () => Promise<{ token: string; timestamp: number; }>;  
  disableLocalstorage?: boolean; 
  languageCode?: string;
  domTarget?: HTMLElement;
  // MARKETS
  currencyPlaceholder?: string;
  formatCurrency?: (value: string) => string;
  oddsFormat?: 'decimal' | 'american' | 'fractional';
  onEventChanged?: (newEventId: number) => Promise<void>;
  onBetPlaced?: (args: PlaceBetArgs) => Promise<PlaceBetSuccess>;
  onFullscreenChanged?: (isFullscreen: boolean) => void;
  marketGroups?:        MarketGroup[];
  markets?:             Market[];  
  // MULTISTREAM
  multiStreamEvents?: MultiStream
  // OTHER
  availableFeatures?: {
    marketsEnabled?: boolean;
    betslipEnabled?: boolean;
    statsEnabled?: boolean;
    multistreamEnabled?: boolean;
    timelineEnabled?: boolean;
  };
  theme?: {
    colorPrimary: string;
    colorTeamsHome: string;
    colorTeamsAway: string;
  };
  onVolumeChanged?: (value: string) => void;
}

STREAM INTEGRATION

eventId: See the Events API documentation for full details on how to get available events

operatorId: Use the operator ID provided to you by our integrations team

isOperatorEnvProd: To prevent the SDK from collecting analytics on your local, dev, or staging environments. Please pass isOperatorEnvProd: true only when the SDK is being used for true production traffic.

environment: To give us more granularity about when to collect analytics or error logs. Please pass local for your local dev environment , pass dev if you have a regularly changing environment where errors may be expected or pass test if you have any automated test environments which will be using the SDK. For local and dev we will not collect analytics or error logs. For staging and prod we will collect this data.

fetchToken: See Generating a token for more details

disableLocalStorage: The SDK will use localStorage to store some user preferences and analytics information. Pass disableLocalStorage: true to disable this

domTarget: If you aren't using React, this should be the HTML element inside which the product will be rendered

languageCode: A language tag as defined here

MARKETS INTEGRATION

currencyPlaceholder: This is displayed in the betslip as a placeholder before the user has entered a stake value

formatCurrency: A function used to display a currency value in the same format used on your site

oddsFormat: The format of the odds to be displayed

onEventChanged: An optional function which will be called when the user switches to another event from the MultiStream menu, essential for synchronising markets with the displayed stream

onBetPlaced: See Placing a bet for more details

markets: a list of Markets, see Markets

marketGroups: a list of Market Groups to display Markets under

MULTISTREAM INTEGRATION

multiStreamEvents: a Rose Tree of categorised available streams, see MultiStream

OTHER

availableFeatures: Use this to disable certain features of the product, all are enabled by default

theme: To customise the colours displayed to match your brand, see Customising themes

onFullscreenChanged: This is called when the app goes in or out of fullscreen mode

onVolumeChanged: This is called with the new volume level when the volume is changed.

The SDK displays markets in groups, e.g. markets related to "Goals" or markets related to "Corners".

The operator must pass an array of MarketGroups and an array of Markets to enable this functionality.

interface Market {
  id: string;
  options: MarketOption[];
  groupIds: string[];
  title: string;
  suspended?: boolean;
}

interface MarketOption {
  title: string;
  odds: string;
  id: string;
}

interface MarketGroup {
  id: string;
  title: string;
}

If you are using the React component, pass marketGroups and markets as props and update the markets by changing the props.

On an instance of the SDK, call updateMarkets and updateMarketGroups

Markets can be updated at any time and can be suspended by including suspended: true or by passing an array of market IDs to suspendMarkets .

Markets can be removed at any time by passing an array of market IDs to removeMarkets.

You can configure the odds format you are using by passing 'decimal', 'american' or 'fractional' to the oddsFormat prop.

Interactive Streaming comprises of 6 main features:

1. Video / Stream integration (Required for new streaming customers only)

2. Stats

3. Timeline

4. Multistream

5. Markets (Required)

6. Betslip (Required)

To allow users to place a bet, pass onBetPlaced

type OnBetPlaced = (args: PlaceBetArgs) => Promise<PlaceBetSuccess>;

interface PlaceBetArgs {
  stake: string;
  market: Market;
  option: MarketOption;
  requestId: string;
}


interface PlaceBetSuccess {
  marketName: string;
  optionName: string;
  stake: string;
  odds: string;
  betRef: string;
}

class SDKError extends Error {
  constructor(message: string) {
    super(message || 'Unknown Error');
    this.name = 'SDKError';
  }
}

onBetPlaced callback should return a Promise which resolves to PlaceBetSuccess if the bet was successfully placed and should reject with an SDKError and a message to the user if placing the bet fails or something unexpected went wrong.

The SDK component supports an optional theme property enabling you to customise the colours displayed to match the preferred colour scheme.

theme configuration object accepts the following properties:

theme?: {
  colorPrimary?: string;
  colorTeamsHome?: string;
  colorTeamsAway?: string;
  colorWarn?: string;
  colorError?: string;
  colorSuccess?: string;
} 

EXAMPLE #1

theme={{
  colorPrimary: '#0091ff',
  colorTeamsHome: '#1bda02',
  colorTeamsAway: '#ffa200',
}}

EXAMPLE #2

theme={{
  colorPrimary: '#e0eb11',
  colorTeamsHome: '#ff0088',
  colorTeamsAway: '#00daa0',
}}

EXAMPLE #3

theme={{
  colorPrimary: '#ff00ff',
  colorTeamsHome: '#ffff00',
  colorTeamsAway: '#ff0000',
}}