MultiStream

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 Events API exposes eventIds as numbers, while Interactive Streaming SDK is typed to accept strings.