Skip to content

The variable isProcessingRecordedAudio flag is not being set back to false after the loading completes. #43

@MateusGurgel

Description

@MateusGurgel

Describe the bug
The isProcessingRecordedAudio flag is not being set back to false after the loading completes.
This make the process of creating a custom loading bar impossible

To Reproduce
Here’s the component where the issue occurs:

export function VoiceRecorderButton() {
  const recorderControls = useVoiceVisualizer();
  const [isPlaying, setIsPlaying] = useState(false);

  const onHoldRecordButton = () => {
    recorderControls.startRecording();
  };

  const onReleaseRecordButton = () => {
    recorderControls.stopRecording();
  };

  const onClickDelete = () => {
    recorderControls.clearCanvas();
  };

  const onTogglePlayButton = () => {
    if (isPlaying) {
      recorderControls.stopAudioPlayback();
    } else {
      recorderControls.startAudioPlayback();
    }

    setIsPlaying(!isPlaying);
  };

  console.log("isProcessingStartRecording " + recorderControls.isProcessingRecordedAudio);

  const expression = !recorderControls.isProcessingRecordedAudio;
  return (
    <div className="flex flex-row gap-4">
      {!recorderControls.isCleared && (
        <Button
          type="button"
          onClick={onClickDelete}
          className="bg-primary rounded-full h-12 w-12 flex items-center justify-center text-white transition-all duration-200 "
        >
          <Trash />
        </Button>
      )}

      <div className="rounded-md">
        {expression && (
          <VoiceVisualizer
            height={50}
            width={200}
            controls={recorderControls}
            isControlPanelShown={false}
            isDefaultUIShown={false}
          />
        )}
      </div>

      {!recorderControls.isCleared && (
        <Button
          type="button"
          onClick={onTogglePlayButton}
          className="bg-primary rounded-full h-12 w-12 flex items-center justify-center text-white transition-all duration-200 "
        >
          {isPlaying ? <Pause /> : <Play />}
        </Button>
      )}

      <Button
        onMouseDown={onHoldRecordButton}
        onMouseUp={onReleaseRecordButton}
        type="button"
        className="bg-primary rounded-full h-12 w-12 flex items-center justify-center text-white transition-all duration-200 "
      >
        <Mic size={44} />
      </Button>
    </div>
  );
}

Expected behavior
After the loading process finishes, isProcessingRecordedAudio should be set back to false.
Currently, it remains true, which prevents the UI from updating correctly.

Package info (please complete the following information):

  • Version: ^2.0.8

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions