render()

in TailwindTraders.Website/Source/Tailwind.Traders.Web/ClientApp/src/pages/home/components/videoCall/CallCard.js [373:500]

• 128 lines of code
• 15 McCabe index (conditional complexity)

  render() {
    return (
      <>
        {!this.state.chatView ? (
          <div className="call-screen text-center mt-3">
            {this.state.callState !== "Connected" && (
              <div>Tailwind Traders</div>
            )}
            {this.state.callState === "Connecting" && (
              <div
                className="lobby card p-5 text-center w-50 mx-auto"
              >
                <div className="pt-5 t-call-info">
                  Checking for available representatives
                </div>
              </div>
            )}
            {this.state.callState === "InLobby" && (
              <div
                className="lobby card p-5 text-center w-50 mx-auto"
              >
                <div className="pt-5 t-call-info">
                  Waiting for representative to connect
                </div>
              </div>
            )}
            {this.state.callState === "Connected" && (
              <div className="incall-section">
                <div className="remote-participant w-50 mx-auto">
                  <div className="remote-video-stream">
                    {this.state.callState === "Connected" &&
                      this.state.streams.map((v, index) => (
                        <div>
                          {index === 0 && (
                            <div className="d-inline-block mx-auto remote-participant-name px-2 py-1 bg-dark text-white rounded-lg">
                              Connected with:{" "}
                              <div className="d-inline-block font-weight-light">
                                {v.participant.displayName}
                              </div>
                            </div>
                          )}
                        </div>
                      ))}
                    <div className="call-vid-grid">
                      {this.state.callState === "Connected" &&
                        this.state.streams.map((v, index) => (
                            <StreamMedia
                              key={index}
                              stream={v.stream}
                              remoteParticipant={v.participant}
                            />
                        ))}
                        {
                          this.state.videoOn ? 
                          <LocalVideoPreviewCard
                            selectedCameraDeviceId={
                              this.state.selectedCameraDeviceId
                            }
                            deviceManager={this.deviceManager}
                          /> : <></>
                        }
                    </div>
                  </div>
                </div>
              </div>
            )}
            <div
              className="call-options"
            >
              <button
                className="call-option-btn d-block mb-3 p-3 bg-dark border-0 rounded-circle"
                onClick={() => {
                  this.setState({ chatView: !this.state.chatView });
                }}
              >
                <img src={chatIcon} alt="chat" />
              </button>
              <button
                className="call-option-btn d-block mb-3 p-3 bg-dark border-0 rounded-circle"
                onClick={async () => await this.handleVideoOnOff}
              >
                <img
                  src={this.state.videoOn ? videoOnIcon : videoOffIcon}
                  alt="videoOn/Off"
                />
              </button>
              <button
                className="call-option-btn call-option-btn-ex d-block mb-3 py-3 bg-dark border-0 rounded-circle"
                onClick={async () => await this.handleMicOnOff}
              >
                <img
                  src={this.state.micMuted ? micOffIcon : micIcon}
                  alt="micOn/Off"
                />
              </button>
            </div>
            <div
              className="call-footer w-100 d-block mt-5 pt-3 pb-5 text-center"
            >
              <button
                className="btn btn-danger call-end-btn rounded-circle py-4 mt-3 mx-auto"
                onClick={() => {
                  this.call
                    .hangUp({ forEveryone: false })
                    .catch((e) => console.error(e));
                  window.location.reload();
                }}
              >
                <img src={hangupIcon} alt="hangup" />
              </button>
            </div>
          </div>
        ) : this.state.callState === "Connected" ? (
          <Chat
            userDetails={this.props.userDetails}
            threadId={this.props.threadId}
            userName={this.props.userName}
            callState={this.state.callState}
            switchToCallView={this.switchToCallView}
          />
        ) : (
          <div className="text-center mh-info-text">
            <div className="mt-5">Please wait...</div>
          </div>
        )}
      </>
    );
  }