Skip to main content

Player component

The player component in Elevate Web is implemented in Player.tsx and it used the configuration declared in PlayerConfig.ts to get the correct player to attempt to play the given content.

Narrow your player type​

You may be using multiple players in your application due to different playback requirements like live, VOD, DRM, advertising, etc.

In those cases, you may have implemented special behavior that is not applicable to all the players. This is specially problematic in typescript as the type of the variable GenericPlayer will need to be a more generic type or a union that you need to narrow in order to implement the special behavior needed.

info

The GenericPlayer type is configured by setting the variable Player in PlayerConfig.ts. See more.

Fortunately Elevate Web provides two utility functions to help you in those situations.

  • isEqualPlayerClass: Allows you to narrow the type of the class to a more specific class.
  • isPlayerTypeOf: Allows you to narrow the type of a instance of a player class to a more specific type.

Utility functions usage​

Imagine you are using the most generic player type by using the interface PlayerClass.

const GenericPlayer: PlayerClass = getPlayer();

You also created a new player class that has a method sendAnalytics.

@playerStaticMembers()
export class ProjectPlayer implements PlayerInterface {
  sendAnalytics = () => {
    // Send the analytics
  }
}

Because the type of GenericPlayer does not have any information about the sendAnalytics method, then you cannot do the following:

const player = new GenericPlayer();

// TS Error because 'sendAnalytics' does not exist in type 'PlayerInterface'
player.sendAnalytics();

You can use the helper functions to help you narrow the type.

For example, if you only need to call the function during creation, you can use isEqualPlayerClass:

let player;

if (isEqualPlayerClass(GenericPlayer, ProjectPlayer)) {
  // GenericPlayer will be of type ProjectPlayer
  player = new GenericPlayer();
  // You can safely call your custom function sendAnalytics
  player.sendAnalytics();
} else {
  player = new GenericPlayer();
}

// Player here is of type PlayerClass
player;

Another use case could be that you only need to call your function if playback has run for 5 minutes straight. The you can use isPlayerInstanceOf:

// Run after 5 minutes of playback
if (isPlayerInstanceOf(player, ProjectPlayer)) {
  // Inside this if block, player will be
  // of type InstanceType<ProjectPlayer>
  player.sendAnalytics();
}

// Player here is of type PlayerClass
player;