MediaPlayerContextWrapper

Wraps its children in a MediaPlayerContext.
Children can be a ReactNode or a Render Props function receiving TrackingContext.

MediaPlayerContextWrapper: (props: {
  children: ReactNode | ((parameters: TrackingContext) => ReactNode),
  id: string
}) => ReactElement

Parameters​

type
requiredchildrenReactNode | ((parameters: TrackingContext) => void)
requiredidstring

Returns​

ReactElement

Usage example​

Enrich Locations​

import { MediaPlayerContextWrapper } from '@objectiv/tracker-react-native';

<MediaPlayerContextWrapper id={'video'}>
  <Video source={{uri: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'}} />
</MediaPlayerContextWrapper>

Tracking via Render Props​

import { 
  MediaPlayerContextWrapper, 
  trackMediaLoadEvent, 
  trackMediaPauseEvent,
  trackMediaStartEvent,
  trackMediaStopEvent
} from '@objectiv/tracker-react-native';

<MediaPlayerContextWrapper id={'video'}>
  {(trackingContext) => (
    <Video 
      source={{uri: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'}} 
      onLoad={() => trackMediaLoadEvent(trackingContext)}
      onPlaybackStateChanged={({isPlaying}) => {
        if(isPlaying) {
          trackMediaStartEvent(trackingContext);
        } else {
          trackMediaPauseEvent(trackingContext);
        } 
      }}
      onEnd={() => trackMediaStopEvent(trackingContext)}
    />
  )}
</MediaPlayerContextWrapper>

Did you know ?

MediaPlayerContextWrapper internally uses LocationContextWrapper.


See also