components/TopBar/LiveCountDown.js

/**
 * @module TopBar/LiveCountDown
 */
import React, { Component } from 'react';
import SVGComponent from '../SVG/SVGComponent';
import Constants, { SVG_ICONS, GAME_TYPE, MATCH_STATUS } from '../../constants';
import { isLivePage } from '../../utils/common';
/**
 * @typedef {object} props
 * @property {number} liveCountdown
 * @property {object} selectedLeague
 * @property {number} liveDecrement
 * @property {number} liveMatchDuration
 * @property {number} liveStart
 * @property {boolean} isSetup
 * @property {string} currentPage
 * @property {string} gameType
 * @property {Function} setupLive
 * @property {Function} getScores
 */
export default class LiveCountDown extends Component {
  componentWillUnmount() {
    this.isUnmounted = true;
  }

  /**
   * Call setup live for classic game or turbo.
   *
   * @function
   * @param {object} payload
   * @returns {void}
   */
  setupLive=(payload) => {
    if (this.props.gameType === GAME_TYPE.CLASSIC) {
      this.props.setupLive(payload);
    } else {
      this.props.setupTurboLive(payload);
    }
  }

  /**
   * Call tickets if user is on bet history page,
   * handle showing live in bottom menu
   *
   * @function
   * @returns {void}
   */
  liveFinished=() => {
    const checkLivePage = isLivePage(this.props.currentPage);
    this.props.liveFinished({ gameType: this.props.gameType, extraDuration: checkLivePage });
    if (checkLivePage) {
      this.props.openModal({
        modal: Constants.MODALS.LIVE_FINISH,
        props: {
          round: this.props.selectedLeague.week,
          liveRound: this.props.selectedLeague.liveWeek,
          gameType: this.props.gameType,
        },
      });
    }
    if (this.props.currentPage === Constants.PAGES.TICKETS
   || this.props.currentPage === Constants.PAGES.TICKET_DETAILS) {
      this.props.getTickets(true);
    }
  }

  /**
   * Calculate live countdown time, scores, blink animations
   *
   * @function
   * @param {Array} leagues
   * @returns {void}
   */
  startLiveCountdown=(leagues) => {
    if (!this.props.isSetup) {
      this.setupLive({
        league: this.props.selectedLeague,
        leagues,
        liveStart: this.props.liveStart,
        liveMatchDuration: this.props.liveMatchDuration,
        roundId: this.props.roundId,
      });
    } else {
      const timeDiff = parseInt((new Date().getTime() - this.props.liveStart.getTime()) / 1000);
      if (this.props.gameType === GAME_TYPE.CLASSIC) {
        const startMinutes = Constants.REAL_MATCH_DURATION - this.props.liveCountdown;
        const endMinute = startMinutes + this.props.liveDecrement;
        this.props.getScores({
          startMinutes,
          endMinute,
          league: this.props.selectedLeague,
          leagues,
        });
      } else if (timeDiff > parseInt(this.props.liveMatchDuration / 2)
      && this.props.liveCountdown === MATCH_STATUS.HALFTIME) {
        this.setupLive({
          league: this.props.selectedLeague,
          leagues,
          liveStart: this.props.liveStart,
          liveMatchDuration: this.props.liveMatchDuration,
          roundId: this.props.roundId,
        });
      } else if (timeDiff > this.props.liveMatchDuration) {
        this.liveFinished();
      }
    }
  }

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    const classicLiveCountup = (this.props.liveCountdown === ''
      || (this.props.liveCountdown > Constants.REAL_MATCH_DURATION))
      ? '' : Math.floor(Constants.REAL_MATCH_DURATION - this.props.liveCountdown);
    const liveTimer = this.props.gameType === GAME_TYPE.CLASSIC
      ? classicLiveCountup : this.props.liveCountdown;
    const isWeekHidden = this.props.currentPage === Constants.PAGES.ALL_LIVE
    || this.props.currentPage === Constants.PAGES.MY_LIVE;
    return (
      <div className="live-bar">
        <div className="live-bar__date">
          {!isWeekHidden && (
          <span>
            Week
            {' '}
            {this.props.selectedLeague.liveWeek}
          </span>
          )}
        </div>
        <div className="live-bar__heading">
          <span>LIVE</span>
        </div>
        <div className="live-bar__time">
          <span className="live-bar__time-txt mr-3">{liveTimer}</span>
          <SVGComponent
            className="icon-l"
            src={`${SVG_ICONS.utility}#icon__clock`}
          />
        </div>
      </div>
    );
  }
}