Skip to content

Fix audio re-record validation using stale duration metadata

mondyagu abhilash requested to merge fix/audio-record-again-state-reset into develop

Description:

This merge request fixes an issue in the audio upload flow where duration validation continued to use metadata from the previous recording after the user clicked Record Again.

Problem

If a user:

Recorded an audio clip shorter than the minimum required duration (10 seconds), Received the validation error, Clicked Record Again, Recorded a new clip longer than 10 seconds,

the application still displayed the old validation error (for example, 4 seconds), even though the UI showed the new recording duration (for example, 12 seconds).

The upload only worked after navigating away from the page and recording again.

Root Cause

The previous recording state was not fully cleared. The application retained stale duration metadata in component state and/or form state, and validation continued to reference the old value instead of the newly recorded audio.

Changes Made Reset all audio-related state when Record Again is clicked. Cleared previous validation errors. Cleared stored duration metadata. Replaced the old audio file/blob with the new recording. Updated form values with the new file and recalculated duration. Ensured validation always uses the latest recording metadata. Revoked old object URLs to avoid memory leaks. Reset file input values where applicable. Expected Behavior After Fix Short recordings still show the minimum duration validation error. Clicking Record Again fully clears the previous recording state. New recordings replace the old audio and duration metadata. Validation uses the latest recording. Valid recordings longer than 10 seconds upload successfully without leaving the page.

Type of Change:

  • Bug Fix
  • Feature Development
  • Documentation

Testing:

  • Tested on desktop
  • Tested on mobile
  • Tested in different browsers

Screenshots (if applicable):

Screenshot_from_2026-05-12_16-30-51

Screenshot_from_2026-05-12_16-31-19

Screenshot_from_2026-05-12_16-32-01

Video Demo

Add a link to the demo of the PR

If you have used AI create this PR, please also record video of yourself explaining the changes.

Link to code walkthrough

Checklist:

  • Code follows project style guidelines
  • Self-review completed
  • No console errors
  • TypeScript types are correct
Edited by mondyagu abhilash

Merge request reports