Example of a React component wrapping the Vidyard Embed V4 API

VidyardEmbed.tsx

import * as React from 'react';
import * as vidyardEmbed from '@vidyard/embed-code';
import ErrorBoundary from './error-boundary';

type VidyardPlayer = typeof vidyardEmbed['players'][0];

export interface Props {
  api?: (player: VidyardPlayer, api: typeof vidyardEmbed.api) => unknown;
  aspect?: 'portrait' | 'landscape' | number;
  maxHeight?: string;
  maxWidth?: string;
  params?: { [key: string]: string | number };
  playbackUrl?: string;
  type?: 'inline' | 'lightbox' | 'modal';
  uuid: string;
}

export default class VidyardEmbed extends React.Component<Props> {
  public state = { hasError: false };

  private container: HTMLElement | undefined;
  private player: VidyardPlayer | undefined;

  public handleContainerRef = (ref: HTMLElement | null) => {
    if (ref) {
      this.container = ref;
    }
  };

  public componentDidMount() {
    if (!this.container) {
      return;
    }

    if (this.props.playbackUrl) {
      vidyardEmbed._debug.setPlaybackURL(this.props.playbackUrl);
    }

    vidyardEmbed.api
      .renderPlayer({
        aspect: this.props.aspect,
        container: this.container,
        height: this.props.maxHeight,
        type: this.props.type,
        uuid: this.props.uuid,
        width: this.props.maxWidth,
        ...this.props.params,
      })
      .then((player: VidyardPlayer) => {
        this.player = player;
        if (typeof this.props.api === 'function') {
          this.props.api(player, vidyardEmbed.api);
        }
      })
      .catch((e: ErrorEvent) => {
        this.setState({ hasError: true });
        console.warn(e.message);
      });
  }

  public componentWillUnmount() {
    if (this.player) {
      vidyardEmbed.api.destroyPlayer(this.player);
    }
  }

  public render() {
    return (
      <ErrorBoundary externalError={this.state.hasError}>
        <div ref={this.handleContainerRef} />
      </ErrorBoundary>
    );
  }
}