render()

in source/client/src/liveness/nose/NoseChallenge.tsx [78:126]

• 46 lines of code
• 7 McCabe index (conditional complexity)

  render() {
    const videoWidth = MediaUtils.getMediaStreamInfo().actualWidth;
    const videoHeight = MediaUtils.getMediaStreamInfo().actualHeight;
    const shouldRotate = ConfigUtils.getConfigBooleanValue("FLIP_VIDEO");
    // @ts-ignore
    const lottieOptions1 = { animationData: help1.default };
    // @ts-ignore
    const lottieOptions2 = { animationData: help2.default };

    return (
      <div>
        {!this.state.uploading && (
          <div className="videoContainer mx-auto" style={{ width: videoWidth }}>
            <video
              id="cameraVideo"
              className={shouldRotate ? "rotate" : ""}
              width={videoWidth}
              height={videoHeight}
              autoPlay
              muted
              playsInline
              style={{ width: videoWidth, height: videoHeight }}
            />
            <canvas
              id="overlayCanvas"
              className={shouldRotate ? "rotate" : ""}
              width={videoWidth}
              height={videoHeight}
            />
            <div
              className="helpContainer clearfix"
              style={{ paddingTop: MediaUtils.getMediaStreamInfo().actualHeight + 5 + "px" }}
            >
              <div className="float-left messageContainer">
                <div className="message">
                  <h5>{this.state.message}</h5>
                </div>
              </div>
              <div className="float-right">
                {this.state.animation === 1 && <Lottie options={lottieOptions1} height={100} width={100} />}
                {this.state.animation === 2 && <Lottie options={lottieOptions2} height={100} width={100} />}
              </div>
            </div>
          </div>
        )}
        {this.state.uploading && <SpinnerMessage message={"Uploading..."} />}
      </div>
    );
  }