async componentWillMount()

in TailwindTraders.Website/Source/Tailwind.Traders.Web/ClientApp/src/pages/home/components/videoCall/CallCard.js [43:200]
143 lines of code
18 McCabe index (conditional complexity)

  async componentWillMount() {
    if (this.props.isVideoCall !== "true") {
      this.setState({ chatView: true });
      await this.handleMicOnOff();
      await this.handleVideoOnOff();
    }
    if (this.call) {
      const cameraDevices = await this.deviceManager.getCameras();
      const speakerDevices = await this.deviceManager.getSpeakers();
      const microphoneDevices = await this.deviceManager.getMicrophones();

      cameraDevices.map((cameraDevice) => {
        return this.state.cameraDeviceOptions.push({
          key: cameraDevice.id,
          text: cameraDevice.name,
        });
      });
      speakerDevices.map((speakerDevice) => {
        return this.state.speakerDeviceOptions.push({
          key: speakerDevice.id,
          text: speakerDevice.name,
        });
      });
      microphoneDevices.map((microphoneDevice) => {
        return this.state.microphoneDeviceOptions.push({
          key: microphoneDevice.id,
          text: microphoneDevice.name,
        });
      });

      this.deviceManager.on("videoDevicesUpdated", (e) => {
        e.added.forEach((cameraDevice) => {
          this.state.cameraDeviceOptions.push({
            key: cameraDevice.id,
            text: cameraDevice.name,
          });
        });

        e.removed.forEach((removedCameraDevice) => {
          this.state.cameraDeviceOptions.forEach(async (value, index) => {
            if (value.key === removedCameraDevice.id) {
              this.state.cameraDeviceOptions.splice(index, 1);
              if (removedCameraDevice.id === this.state.selectedCameraDeviceId) {
                const cameraDevice = await this.deviceManager.getCameras()[0];
                this.setState({ selectedCameraDeviceId: cameraDevice.id });
              }
            }
          });
        });
      });

      this.deviceManager.on("audioDevicesUpdated", (e) => {
        e.added.forEach((audioDevice) => {
          if (audioDevice.deviceType === "Speaker") {
            this.state.speakerDeviceOptions.push({
              key: audioDevice.id,
              text: audioDevice.name,
            });
          } else if (audioDevice.deviceType === "Microphone") {
            this.state.microphoneDeviceOptions.push({
              key: audioDevice.id,
              text: audioDevice.name,
            });
          }
        });

        e.removed.forEach((removedAudioDevice) => {
          if (removedAudioDevice.deviceType === "Speaker") {
            this.state.speakerDeviceOptions.forEach(async (value, index) => {
              if (value.key === removedAudioDevice.id) {
                this.state.speakerDeviceOptions.splice(index, 1);
                if (
                  removedAudioDevice.id === this.state.selectedSpeakerDeviceId
                ) {
                  const speakerDevice = await this.deviceManager.getSpeakers()[0];
                  this.deviceManager.setSpeaker(speakerDevice);
                  this.setState({ selectedSpeakerDeviceId: speakerDevice.id });
                }
              }
            });
          } else if (removedAudioDevice.deviceType === "Microphone") {
            this.state.microphoneDeviceOptions.forEach(async (value, index) => {
              if (value.key === removedAudioDevice.id) {
                this.state.microphoneDeviceOptions.splice(index, 1);
                if (
                  removedAudioDevice.id ===
                  this.state.selectedMicrophoneDeviceId
                ) {
                  const microphoneDevice = await this.deviceManager.getMicrophones()[0];
                  this.deviceManager.setMicrophone(microphoneDevice);
                  this.setState({
                    selectedMicrophoneDeviceId: microphoneDevice.id,
                  });
                }
              }
            });
          }
        });
      });

      const onCallStateChanged = () => {
        console.log("stateChanged ", this.state.callState);
        this.setState({ callState: this.call.state });

        if (
          this.state.callState !== "None" &&
          this.state.callState !== "Connecting" &&
          this.state.callState !== "Incoming"
        ) {
          if (this.callFinishConnectingResolve) {
            this.callFinishConnectingResolve();
          }
        }
        if (this.state.callState === "Incoming") {
          this.selectedCameraDeviceId = cameraDevices[0]?.id;
          this.selectedSpeakerDeviceId = speakerDevices[0]?.id;
          this.selectedMicrophoneDeviceId = microphoneDevices[0]?.id;
        }
      };
      onCallStateChanged();
      this.call.on("stateChanged", onCallStateChanged);

      this.call.on("idChanged", () => {
        console.log("idChanged ", this.call.id);
        this.setState({ callId: this.call.id });
      });

      // this.call.on("isRecordingActiveChanged", () => {
      //   console.log("isRecordingActiveChanged ", this.call.isRecordingActive);
      // });

      this.call.on("isMutedChanged", () => {
        this.setState({ micMuted: this.call.isMicrophoneMuted });
      });

      this.call.on("isScreenSharingOnChanged", () => {
        this.setState({ screenShareOn: this.call.isScreenShareOn });
      });

      this.call.remoteParticipants.forEach((rp) =>
        this.subscribeToRemoteParticipant(rp)
      );
      this.call.on("remoteParticipantsUpdated", (e) => {
        console.log(
          `Call=${this.call.callId}, remoteParticipantsUpdated, added=${e.added}, removed=${e.removed}`
        );
        e.added.forEach((p) => {
          console.log("participantAdded", p);
          this.subscribeToRemoteParticipant(p);
          this.setState({ remoteParticipants: this.call.remoteParticipants });
        });
        e.removed.forEach((p) => {
          console.log("participantRemoved", p);
          this.setState({ remoteParticipants: this.call.remoteParticipants });
        });
      });
    }
  }