render()

in source/client/src/liveness/pose/PoseChallenge.tsx [89:199]

• 96 lines of code
• 5 McCabe index (conditional complexity)

  render() {
    const videoWidth = MediaUtils.getMediaStreamInfo().actualWidth;
    const videoHeight = MediaUtils.getMediaStreamInfo().actualHeight;
    const shouldRotate = ConfigUtils.getConfigBooleanValue("FLIP_VIDEO");

    return (
      <div className="container">
        {!this.state.uploading && (
          <div>
            <div className={this.state.stepName !== STEP_1 ? "hidden" : ""}>
              {/* <button type="button">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  className="bi bi-arrow-left"
                  viewBox="0 0 16 16"
                >
                  <path
                    fillRule="evenodd"
                    d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"
                  />
                </svg>
              </button> */}

              <h4 className="h4 font-weight-bold mt-5">Get ready to copy the pose</h4>
              <p className="gray-darker mx-5">In the next step, copy the facial expression shown below.</p>
              <div className="my-4">
                <canvas id="canvas-pose-big" width={videoWidth} height={videoHeight} />
              </div>
              <button type="button" className="btn btn-primary btn-lg btn-block" onClick={this.startChallenge}>
                Start Challenge
              </button>
            </div>
            <div className={this.state.stepName !== STEP_2 ? "hidden" : "p-relative"}>
              <h4 className="h34 font-weight-bold mt-3">Copy the pose</h4>
              <p className="gray-darker mx-5">Avoid rotating your face and make sure it is well-illuminated.</p>
              <div className="videoContainer mx-auto" style={{ width: videoWidth }}>
                <canvas id="canvas-invisible" style={{ display: "none" }} />
                <video
                  id="video-camera"
                  className={shouldRotate ? "rotate" : ""}
                  width={videoWidth}
                  height={videoHeight}
                  autoPlay
                  muted
                  playsInline
                  style={{ width: videoWidth, height: videoHeight }}
                />
                <canvas
                  id="canvas-pose-small"
                  width="100"
                  height="100"
                  style={{
                    left: videoWidth - 105,
                    top: 10,
                    position: "absolute",
                    objectFit: "contain"
                  }}
                />
                {/* <div id="text-info" style={{ width: videoWidth, top: videoHeight - 50, position: "absolute" }}>
                  Avoid rotating your face and make sure it is well-illuminated.
                </div> */}
              </div>
              <button
                style={{ position: "absolute", top: MediaUtils.getMediaStreamInfo().actualHeight + 96 + "px" }}
                type="button"
                className="btn btn-primary btn-lg btn-block take-button"
                onClick={this.takePhoto}
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  className="bi bi-camera mr-2"
                  viewBox="0 0 16 16"
                >
                  <path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z" />
                  <path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z" />
                </svg>
                Take picture
              </button>
            </div>
            <div className={this.state.stepName !== STEP_3 ? "hidden" : ""}>
              <h4 className="font-weight-bold mt-5">Do these pictures match?</h4>
              <p className="gray-darker">Check if your pose is as similar as possible.</p>
              <div className="my-4 d-flex justify-content-center check-canvas">
                <canvas id="canvas-photo-check" width={videoWidth / 2} height={videoHeight / 2} />
                <canvas id="canvas-pose-check" width={videoWidth / 2} height={videoHeight / 2} />
              </div>
              <div className="d-flex justify-content-center">
                <button
                  type="button"
                  className="btn btn-outline-primary btn-lg mr-4 w-50"
                  onClick={this.startChallenge}
                >
                  Retake
                </button>
                <button type="button" className="btn btn-primary btn-lg w-50" onClick={this.endChallenge}>
                  Continue
                </button>
              </div>
            </div>
          </div>
        )}
        {this.state.uploading && <SpinnerMessage message={"Uploading..."} />}
      </div>
    );
  }