TrackedMediaPlayerContext

HOC wrapping the given Component in a MediaPlayerContext and enriching it with the objectiv prop.

TrackedMediaPlayerContext: <T>(props: T & {
  objectiv: {
    Component: ElementType | keyof ReactHTML,
    id: string,
    normalizeId?: boolean
  }
}) => JSX.Element

objectiv prop attributes​

typedefault value
requiredComponentElementType | keyof ReactHTML
requiredidstring
optionalnormalizeIdbooleantrue

Returns​

JSX.Element

Automatic Events​

None.

Usage example​

Elements​

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

<TrackedMediaPlayerContext<ComponentProps<'video'>> 
  objectiv={{ 
    Component: 'video',
    id: 'player'
  }}
/>

ID normalization​

By default, all Tracked Context Components automatically normalize their Context identifiers to a kebab-cased format.

This can be disabled via the normalizeId option. This is useful when identifiers need to be preserved for cross-platform concerns or if they are standardized identifiers, e.g. a code from a backend API.

In this example the identifier, which would normally be media-player, will be preserved as Media Player:

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

<TrackedMediaPlayerContext<ComponentProps<'video'>> 
  objectiv={{ 
    Component: 'video',
    id: 'player',
    normalizeId: false
  }}
/>

Components​

The Component prop doesn't need to be a JSX Element. Actually, more often than not, it will probably be another Component.
Here is an example of how to wrap around a hypothetical VideoPlayer component. 

import { VideoPlayer, VideoPlayerProps } from './components/ui/buttons';
import { TrackedPressableContext, TrackedContentContextObjectivProp } from '@objectiv/tracker-react';
import React, { ComponentProps } from 'react';

export type TrackedVideoPlayerProps = VideoPlayerProps & {
  objectiv?: Omit<TrackedContentContextObjectivProp, 'Component'>;
};
 
export const TrackedVideoPlayer = React.forwardRef<HTMLButtonElement, TrackedVideoPlayerProps>(
  ({ objectiv, ...nativeProps }, ref) => (
    <TrackedMediaPlayerContext<ComponentProps<typeof VideoPlayer>>
      {...nativeProps}
      ref={ref}
      objectiv={{
        ...objectiv,
        Component: VideoPlayer
      }}
    />
  )
);

This can now be used like this:

<TrackedVideoPlayer
  onStart={...}
  onPause={...}
/>

<TrackedVideoPlayer
  onStart={...}
  onPause={...}
  objectiv={{ id: 'next' }}
/>

<TrackedVideoPlayer
  onStart={...}
  onPause={...}
  id={'next'}
/>
Components how-to guides

The example above is rather simplistic. It assumes the developer has access to the VideoPlayer component for further instrumentation.

When that's not an option, one can wrap around third-party components using Location Wrappers and Event Trackers.

Check out the following how-to guides for more information on how that would work:


Did you know ?

TrackedMediaPlayerContext internally uses MediaPlayerContextWrapper.


See also