@theoplayer/react-native-ui/lib/commonjs/ui/components/ads/AdDisplay.js

A React Native UI for @theoplayer/react-native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AdDisplay = void 0;
var _react = _interopRequireWildcard(require("react"));
var _PlayerContext = require("../util/PlayerContext");
var _reactNative = require("react-native");
var _reactNativeTheoplayer = require("react-native-theoplayer");
var _ArrayUtils = require("../../utils/ArrayUtils");
var _AdUtils = require("../../utils/AdUtils");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
class AdDisplay extends _react.PureComponent {
  static initialState = {
    adPlaying: false,
    currentAd: undefined,
    totalAds: undefined
  };
  constructor(props) {
    super(props);
    this.state = AdDisplay.initialState;
  }
  componentDidMount() {
    const context = this.context;
    const player = context.player;
    player.addEventListener(_reactNativeTheoplayer.PlayerEventType.AD_EVENT, this.onAdEvent);
    if (context.adInProgress) {
      void this.updateAdDisplayState();
    }
  }
  componentWillUnmount() {
    const player = this.context.player;
    player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.AD_EVENT, this.onAdEvent);
  }
  onAdEvent = event => {
    void this.updateAdDisplayState(event.subType);
  };
  async updateAdDisplayState(type) {
    const {
      adPlaying
    } = this.state;
    const context = this.context;
    if (type === _reactNativeTheoplayer.AdEventType.AD_BREAK_END) {
      this.setState(AdDisplay.initialState);
    } else if (adPlaying || context.adInProgress || type === _reactNativeTheoplayer.AdEventType.AD_BREAK_BEGIN) {
      const player = context.player;
      const currentAdBreak = await player.ads.currentAdBreak();
      const currentLinearAds = (currentAdBreak.ads ?? []).filter(_AdUtils.isLinearAd);
      let index = 0;
      if (currentLinearAds.length > 1) {
        const currentAds = await player.ads.currentAds();
        const currentLinearAd = (0, _ArrayUtils.arrayFind)(currentAds, _AdUtils.isLinearAd);
        if (currentLinearAd) {
          index = currentLinearAds.indexOf(currentLinearAd);
        }
      }
      this.setState({
        adPlaying: true,
        currentAd: index + 1,
        totalAds: currentLinearAds.length
      });
      return;
    }
  }
  render() {
    const {
      adPlaying,
      currentAd,
      totalAds
    } = this.state;
    const {
      style
    } = this.props;
    if (!adPlaying || totalAds === undefined || currentAd === undefined) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayerContext.PlayerContext.Consumer, {
      children: context => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [context.style.text, {
          color: context.style.colors.adDiplayText,
          backgroundColor: context.style.colors.adDisplayBackground,
          borderRadius: 2,
          padding: 5
        }, style],
        children: context.locale.adProgress({
          currentAd,
          totalAds
        })
      })
    });
  }
}
exports.AdDisplay = AdDisplay;
AdDisplay.contextType = _PlayerContext.PlayerContext;
//# sourceMappingURL=AdDisplay.js.map