{"size": 5852, "ext": "js", "max_stars_repo_path": "src/app/CallBoxHead.js", "max_stars_repo_name": "FanapSoft/pod-chat-react-module", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/app/CallBoxHead.js", "max_issues_repo_name": "FanapSoft/pod-chat-react-module", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/app/CallBoxHead.js", "max_forks_repo_name": "FanapSoft/pod-chat-react-module", "max_forks_repo_forks_event_min_datetime": "2021-11-10T08:46:32.000Z", "max_forks_repo_forks_event_max_datetime": "2022-01-09T11:01:47.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 2, "avg_line_length": 35.2530120482, "max_line_length": 183, "alphanum_fraction": 0.6654135338}
import React, {Component, Fragment} from "react";
import {connect} from "react-redux";
import Timer from 'react-compound-timer'

//actions
import {threadCreateWithExistThread, threadGoToMessageId} from "../actions/threadActions";
import {
  chatCallStatus as chatCallStatusAction,
  chatCallBoxShowing,
  chatRejectCall,
  chatCallGroupSettingsShowing, chatCallBoxShowing as chatCallBoxShowingAction
} from "../actions/chatActions";

//components
import Container from "../../../pod-chat-ui-kit/src/container";
import {ButtonFloating} from "../../../pod-chat-ui-kit/src/button"
import {Text} from "../../../pod-chat-ui-kit/src/typography";
import {
  MdExpandLess,
  MdSettings,
  MdFullscreen,
  MdFullscreenExit
} from "react-icons/md";

//styling
import style from "../../styles/app/CallBoxHead.scss";
import {
  CHAT_CALL_BOX_COMPACTED,
  CHAT_CALL_BOX_FULL_SCREEN, CHAT_CALL_BOX_NORMAL,
  CHAT_CALL_STATUS_INCOMING,
  CHAT_CALL_STATUS_STARTED
} from "../constants/callModes";
import strings from "../constants/localization";
import {isGroup, isVideoCall, mobileCheck} from "../utils/helpers";
import {chatCallGroupSettingsShowingReducer} from "../reducers/chatReducer";

window.calltimer = 0;

@connect(store => {
  return {
    chatCallStatus: store.chatCallStatus
  }
})
export default class CallBoxHead extends Component {

  constructor(props) {
    super(props);
    this.onDropCallClick = this.onDropCallClick.bind(this);
    this.onVolumeClick = this.onVolumeClick.bind(this);
    this.onMicClick = this.onMicClick.bind(this);
    this.onFullScreenClick = this.onFullScreenClick.bind(this);
    this.groupSettingView = this.groupSettingView.bind(this);
    this.switchBetweenView = this.switchBetweenView.bind(this);
    this.state = {
      volume: true,
      mic: true
    }
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    const {chatCallStatus} = this.props;
    const {chatCallStatus: oldChatCallStatus} = prevProps;
    const {status: oldStatus} = oldChatCallStatus;
    const {status} = chatCallStatus;
    if (oldStatus !== status) {
      if (oldStatus === CHAT_CALL_STATUS_STARTED) {
        window.calltimer = 0;
      }
    }
  }

  onDropCallClick(e) {
    e.stopPropagation();
    const {dispatch} = this.props;
    dispatch(chatCallBoxShowing(false, null, null));
  }

  onVolumeClick(e) {
    e.stopPropagation();
    this.setState({
      volume: !this.state.volume,
    })
  }

  onMicClick(e) {
    e.stopPropagation();
    this.setState({
      mic: !this.state.mic,
    })
  }

  switchBetweenView(e) {
    e.stopPropagation();
  }

  groupSettingView(e) {
    e.stopPropagation();
    this.props.dispatch(chatCallGroupSettingsShowing(true));
  }

  onFullScreenClick(e) {
    e.stopPropagation();
    const {dispatch, chatCallBoxShowing} = this.props;
    const {thread, contact} = chatCallBoxShowing;
    dispatch(chatCallBoxShowingAction(chatCallBoxShowing.showing === CHAT_CALL_BOX_FULL_SCREEN ? CHAT_CALL_BOX_NORMAL : CHAT_CALL_BOX_FULL_SCREEN, thread, contact));
  }

  render() {
    const {chatCallStatus, thread, chatCallBoxShowing} = this.props;
    const {status, call} = chatCallStatus;
    const incomingCondition = status === CHAT_CALL_STATUS_INCOMING;
    const callStarted = status === CHAT_CALL_STATUS_STARTED;
    const fullScreenCondition = chatCallBoxShowing.showing === CHAT_CALL_BOX_FULL_SCREEN || mobileCheck();
    const isMobileCondition = mobileCheck();
    const isVideoCallBool = (isVideoCall(call));
    const accentTextColorCondition = isVideoCallBool && callStarted ? "accent" : "";
    const invertTextColorCondition = (fullScreenCondition && !incomingCondition && !isVideoCallBool) || (isVideoCallBool && fullScreenCondition && !incomingCondition && !callStarted);
    return <Container className={style.CallBoxHead}>
      <Container className={style.CallBoxHead__StatusContainer}>
        <Text bold
              invert={invertTextColorCondition}
              color={accentTextColorCondition}
              size="sm">{incomingCondition ? strings.ringing(isVideoCallBool) : callStarted ? strings.callStarted : strings.calling(isVideoCallBool)}</Text>
        {callStarted &&
        <Timer
          formatValue={(value) => `${(value < 10 ? `0${value}` : value)}`}
          initialTime={window.calltimer}>
          {({getTime}) => {
            window.calltimer = getTime();
            return <Text size="xs" invert={invertTextColorCondition} color={accentTextColorCondition} bold>
              <Timer.Minutes/>:<Timer.Seconds/>
            </Text>
          }}
        </Timer>
        }
      </Container>
      <Container className={style.CallBoxHead__StatusIconContainer}>
        {(isVideoCallBool && callStarted && thread && isGroup(thread)) &&
        <Fragment>
          {/*          <MdGridOn size={style.iconSizeSm} color={style.colorAccent} style={{marginLeft: "7px", cursor: "pointer"}}
                    onClick={this.switchBetweenView}/>*/}
          <MdSettings size={style.iconSizeSm} color={style.colorAccent}
                      style={{marginLeft: "10px", marginBottom: "3px", cursor: "pointer"}}
                      onClick={this.groupSettingView}/>
        </Fragment>
        }
        {!isMobileCondition &&
        <Fragment>
          {
            fullScreenCondition ?
              <MdFullscreenExit size={style.iconSizeMd} color={style.colorAccent} style={{marginLeft: "7px"}}
                                onClick={this.onFullScreenClick}/> :
              <MdFullscreen size={style.iconSizeMd} color={style.colorAccent} style={{marginLeft: "7px"}}
                            onClick={this.onFullScreenClick}/>
          }
        </Fragment>
        }

        <MdExpandLess size={style.iconSizeMd} color={style.colorAccent}
                      onClick={this.onCallBoxClick}/>

      </Container>

    </Container>
  }
}