@theoplayer/react-native-ui/lib/module/ui/components/ads/AdClickThroughButton.js

A React Native UI for @theoplayer/react-native

import React, { PureComponent } from 'react';
import { Linking, Text, TouchableOpacity } from 'react-native';
import { PlayerContext } from '../util/PlayerContext';
import { AdEventType, PlayerEventType } from 'react-native-theoplayer';
import { arrayFind } from '../../utils/ArrayUtils';
import { isLinearAd } from '../../utils/AdUtils';
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
export class AdClickThroughButton extends PureComponent {
  static initialState = {
    currentAd: undefined,
    clickThrough: undefined
  };
  constructor(props) {
    super(props);
    this.state = AdClickThroughButton.initialState;
  }
  componentDidMount() {
    const context = this.context;
    const player = context.player;
    player.addEventListener(PlayerEventType.AD_EVENT, this.onAdEvent);
    if (context.adInProgress) {
      void this.update();
      player.addEventListener(PlayerEventType.TIME_UPDATE, this.onTimeUpdateEvent);
    }
  }
  componentWillUnmount() {
    const player = this.context.player;
    player.removeEventListener(PlayerEventType.AD_EVENT, this.onAdEvent);
  }
  onAdEvent = event => {
    const player = this.context.player;
    if (event.subType === AdEventType.AD_BREAK_BEGIN) {
      void this.update();
      player.addEventListener(PlayerEventType.TIME_UPDATE, this.onTimeUpdateEvent);
    } else if (event.subType === AdEventType.AD_BREAK_END) {
      this.setState(AdClickThroughButton.initialState);
      player.removeEventListener(PlayerEventType.TIME_UPDATE, this.onTimeUpdateEvent);
    }
  };
  onTimeUpdateEvent = _event => {
    void this.update();
  };
  async update() {
    const player = this.context.player;
    const currentAds = await player.ads.currentAds();
    const linearAd = arrayFind(currentAds ?? [], isLinearAd);
    const clickThrough = linearAd?.clickThrough;
    if (clickThrough !== undefined) {
      this.setState({
        clickThrough: clickThrough
      });
    }
  }
  onPress = () => {
    const {
      clickThrough
    } = this.state;
    const player = this.context.player;
    player.pause();
    if (clickThrough) {
      void Linking.openURL(clickThrough);
    }
  };
  render() {
    const {
      clickThrough,
      currentAd
    } = this.state;
    const {
      style
    } = this.props;
    if (clickThrough === undefined || currentAd && currentAd.integration === 'google-ima') {
      return /*#__PURE__*/_jsx(_Fragment, {});
    }
    return /*#__PURE__*/_jsx(PlayerContext.Consumer, {
      children: context => /*#__PURE__*/_jsx(TouchableOpacity, {
        style: {
          padding: 5
        },
        onPress: this.onPress,
        children: /*#__PURE__*/_jsx(Text, {
          style: [context.style.text, {
            color: context.style.colors.text
          }, style],
          children: context.locale.adClickThroughButton
        })
      })
    });
  }
}
AdClickThroughButton.contextType = PlayerContext;
//# sourceMappingURL=AdClickThroughButton.js.map