bitmovin-player-ui/src/ts/components/ads/AdClickOverlay.ts

Bitmovin Player UI Framework

import { ClickOverlay, ClickOverlayConfig } from '../overlays/ClickOverlay';
import { UIInstanceManager } from '../../UIManager';
import { Ad, AdEvent, PlayerAPI } from 'bitmovin-player';

/**
 * A simple click capture overlay for clickThroughUrls of ads.
 *
 * @category Components
 */
export class AdClickOverlay extends ClickOverlay {
  constructor(config: ClickOverlayConfig = {}) {
    super(config);

    this.config = this.mergeConfig(
      config,
      {
        acceptsTouchWithUiHidden: true,
      },
      this.config,
    );
  }

  configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
    super.configure(player, uimanager);

    let clickThroughCallback: () => void = null;

    player.on(player.exports.PlayerEvent.AdStarted, (event: AdEvent) => {
      const ad = event.ad;
      this.setUrl(ad.clickThroughUrl);
      clickThroughCallback = ad.clickThroughUrlOpened;
    });

    // Clear click-through URL when ad has finished
    const adFinishedHandler = () => {
      this.setUrl(null);
    };

    player.on(player.exports.PlayerEvent.AdFinished, adFinishedHandler);
    player.on(player.exports.PlayerEvent.AdSkipped, adFinishedHandler);
    player.on(player.exports.PlayerEvent.AdError, adFinishedHandler);

    this.onClick.subscribe(() => {
      // Pause the ad when overlay is clicked
      player.pause('ui-ad-click-overlay');

      if (clickThroughCallback) {
        clickThroughCallback();
      }
    });
  }
}