feat(llc, ui): Async audio [DoNotMerge]

[leandroBorgesFerreira]

Submit a pull request

CLA

• I have signed the Stream CLA (required).
• The code changes follow best practices
• Code changes are tested (add some information if not applicable)

Description of the pull request

This PR adds support for recorded audio messages (async audio messages).

The added functionalities to async audio messages are (Users are able to):

• Record an audio message and send then directly OR
• Record an audio message and send it to the message composer.
• Pause/Resume record of the audio message.
• Listen to the audio message inside the message composer.
• Stop/Resume audio messages in the message composer.
• Have a list of recorded audio messages inside the message composer and scroll then.
• Add and remove audio messages to/from the list.
• Send audio messages together with video, images, links... etc.
• Edit audio messages.
• Quote audio messages
• Listen to audio messages.
• Listen to all audio messages inside the same message with just one "play" press.
• Stop/Resume audio messages in the message list.
• Seek a time of the audio.
• React to an audio message.
• Change the speed of reproduction of audio to 1.0x, 1.5x and 2.0x.

Recording 1	Recording 2
Screen.Recording.2023-03-16.at.21.51.50.mov	Screen.Recording.2023-03-16.at.21.52.49.mov
Listening 1	Listening 2
Screen.Recording.2023-03-16.at.21.56.25.mov	Screen.Recording.2023-03-16.at.21.56.58.mov

Implementation details

When recording, the audio bars are presented to the user and also stored in a list. After audio recording is complete normalization is done in the bars and they are presented to the users. The duration of the audio is also calculated during recording. After audio bars and duration are calculated, the audio is sent to the backend as an attachment with the type "voicenote". The duration and the bars are used when the message is displayed in the message list to present the correct UI without loading the audio file.

When the audio message doesn't have the audio bars. They are shown as a list of dots instead of the variables bars.

The audio file is streamed once "play" is pressed. So the message is only loaded when the user wants to hear it.

The wave bars are calculated from 0 to 1 and send to the backend as a list of doubles. The duration is sent to the backend in milliseconds.