Skip to main content

App

- import { StreamLayerProvider, StreamLayerSDKReact } from '@streamlayer/react'
+ import { MastersStreamLayerProvider, MastersStreamLayerSDKReact } from '@streamlayer/react/masters'

Props​

type Overlays = {
    leaderboard: React.ReactNode;
};
type MastersAppChildrenProps = {
    activateEventWithId: (event: string) => void;
    deactivate: () => void;
};
type DeepLinkUrlParams = {
  // StreamLayer user id
  sldl_uid?: string
  // StreamLayer event id
  sldl_eid?: string
  // Masters event id
  sldl_e_eid?: string
}
type VideoPlayerData = {
  muted: boolean
}
type MastersAppProps = {
    overlays?: Overlays;
    children: (methods: MastersAppChildrenProps) => React.ReactNode;
    onDeepLinkHandled: ({ sldl_uid, sldl_eid, sldl_e_eid }: DeepLinkUrlParams) => void;
    videoPlayerController: ({ muted }: VideoPlayerData) => void;
};

type MastersStreamLayerSDKReact = React.FC<MastersAppProps>;
  • The children prop is a function that returns a React Node wrapped in StreamLayer SDK UI. The children function is called with an arguments which provides the activateEventWithId and deactivate methods to the function. These methods are used to enable and disable the StreamLayerSDK respectively.
  • The overlays prop is an object that contains different custom overlays defined by integrators that can be displayed on the app.
  • The onDeepLinkHandled prop is a function that is called when a deep link is handled.
  • The videoPlayerController prop is a function that is called when SDK needs to control the host video.