Light Plugin — Component Events

The <waymark-light-plugin-button> custom element emits the following events:

videoChanged

Event type: CustomEvent<VideoData | null>

Emitted when the user's current video changes. This will be emitted when:

• The user closes the editor without completing a video
  • The event's detail will be null
• The user opens a new video in the Waymark editor.
  • The event's detail will be a VideoData object representing info about the video.

On the React component, this event can be subscribed to via an onVideoChanged prop as well.

React component example:

<WaymarkLightPluginButton
  partner-id="my-partner-id"
  onVideoChanged={(e) => {
    console.log('videoChanged:', e.detail);
  }}
/>

Web component example:

<waymark-light-plugin-button partner-id="my-partner-id"></waymark-light-plugin-button>
<script>
  const waymarkButton = document.getElementsByTagName('waymark-light-plugin-button')[0];

  waymarkButton.addEventListener('videoChanged', (e) => {
    console.log('videoChanged:', e.detail);
  });
</script>

videoCompleted

Event type: CustomEvent<VideoData>

Emitted when the user clicks the "Finish" button in the editor to complete the video and Waymark begins rendering it. The event's detail will be a VideoData object representing info about the completed video.

On the React component, this event can be subscribed to via an onVideoCompleted prop as well.

React component example:

<WaymarkLightPluginButton
  partner-id="my-partner-id"
  onVideoCompleted={(e) => {
    console.log('videoCompleted:', e.detail);
  }}
/>

Web component example:

<waymark-light-plugin-button partner-id="my-partner-id"></waymark-light-plugin-button>
<script>
  const waymarkButton = document.getElementsByTagName('waymark-light-plugin-button')[0];

  waymarkButton.addEventListener('videoCompleted', (e) => {
    console.log('videoCompleted:', e.detail);
  });
</script>

videoRendered

Event type: CustomEvent<VideoData>

Emitted when the user's completed video finishes rendering. The event's detail will be a VideoData object representing info about the video, including the video's renders.

Note that we render videos in two different formats, and each format may emit a separate videoRendered event when it completes:

• email: A lower-quality format intended for digital use
• broadcast_quality: A higher-quality format intended for TV broadcast

Depending on your app, you may only want one of or both of those formats, so it is recommended that you check which renders are available when handling this event.

On the React component, this event can be subscribed to via an onVideoRendered prop as well.

React component example:

<WaymarkLightPluginButton
  partner-id="my-partner-id"
  onVideoRendered={(e) => {
    const videoData = e.detail;

    const broadcastQualityRender = videoData.renders.find(
      (render) => render.format === 'broadcast_quality' && render.status === 'succeeded',
    );
    const emailQualityRender = videoData.renders.find(
      (render) => render.format === 'email' && render.status === 'succeeded',
    );
  }}
/>

Web component example:

<waymark-light-plugin-button partner-id="my-partner-id"></waymark-light-plugin-button>
<script>
  const waymarkButton = document.getElementsByTagName('waymark-light-plugin-button')[0];

  waymarkButton.addEventListener('videoRendered', (e) => {
    const videoData = e.detail;

    const broadcastQualityRender = videoData.renders.find(
      (render) => render.format === 'broadcast_quality' && render.status === 'succeeded',
    );
    const emailQualityRender = videoData.renders.find(
      (render) => render.format === 'email' && render.status === 'succeeded',
    );
  });
</script>