Request: User Experience on stopping and discarding

[MubashirullahD]

In mobile phones, when we want to stop a recording, we press the square icon, and that both stops the recording and triggers save. The experience here is different. Pressing the square icon stops the recording and discards it.

Can there be a prop I can pass to make the square button trigger recording complete as well?

Right now, the user has to press the floppy disc icon for the onRecordingComplete to trigger callback function. They may press the square icon from their experience. I would have to teach them to press the floppy icon instead.

[samhirtarif]

Would hiding the discard (square) icon solve your problem? 🤔
https://stackblitz.com/edit/react-ts-762xh2?file=App.tsx,style.css,index.tsx

[MubashirullahD]

Certainly better. The user can rerecord an audio piece if anything goes bad and it will discard their previous entry. I guess I will use this approach instead.

I noticed it stops on discard in this example. Is this intended behaviour?

[samhirtarif]

Clicking on discard is supposed to stop recording, yes

[MubashirullahD]

As in discard also makes the recording available, not just stops it.