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 | ||
---|---|---|
required | children | ReactNode | ((parameters: TrackingContext) => void) |
required | id | string |
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.