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

A React Native UI for @theoplayer/react-native

import React, { PureComponent } from 'react';
import { PlayerContext } from '../util/PlayerContext';
import { Text } from 'react-native';
import { AdEventType, PlayerEventType } from 'react-native-theoplayer';
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
export class AdCountdown extends PureComponent {
  static initialState = {
    maxRemainingDuration: undefined
  };
  constructor(props) {
    super(props);
    this.state = AdCountdown.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);
    player.removeEventListener(PlayerEventType.TIME_UPDATE, this.onTimeUpdateEvent);
  }
  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(AdCountdown.initialState);
      player.removeEventListener(PlayerEventType.TIME_UPDATE, this.onTimeUpdateEvent);
    }
  };
  onTimeUpdateEvent = _event => {
    void this.update();
  };
  async update() {
    const player = this.context.player;
    const currentAdBreak = await player.ads.currentAdBreak();
    const maxRemainingDuration = currentAdBreak?.maxRemainingDuration;
    this.setState({
      maxRemainingDuration: maxRemainingDuration
    });
  }
  render() {
    const {
      maxRemainingDuration
    } = this.state;
    const {
      style
    } = this.props;
    if (maxRemainingDuration === undefined || isNaN(maxRemainingDuration) || maxRemainingDuration < 0) {
      return /*#__PURE__*/_jsx(_Fragment, {});
    }
    return /*#__PURE__*/_jsx(PlayerContext.Consumer, {
      children: context => /*#__PURE__*/_jsx(Text, {
        style: [context.style.text, {
          color: context.style.colors.text,
          padding: 10
        }, style],
        children: context.locale.adCountdown({
          remainingDuration: maxRemainingDuration
        })
      })
    });
  }
}
AdCountdown.contextType = PlayerContext;
//# sourceMappingURL=AdCountdown.js.map