Add voice recording to user profile

[grace0925]

Closes #548 Related to #429

Overview

• Added AudioPlay component that is an html audio player under the hood. It takes audioUrl as a prop which links to a mp3 file stored on firebase.
• Added AudioRecord component which handles audio recording, saving, deleting and rendering of the AudioPlay component.
• Added an additional input type audio in FormDynamicInput
• Added a new question in MentorConfig that allows mentors to add an audio clip to their mentor profiles.
• Added new field bio_recording_url in Mentor type.
• Added UI components AudioTimer and PulsingRedDot.

More on AudioRecord

This component uses the MediaRecorder to record audio in mp3 format. The sound blob is stored on firebase as an mp3 file under the specified filePath (mentor-profile-audio for the mentor profile audio messages). Each audio file has a name of random string of length 8.

On button press, the browser asks the user for permission to use the microphone for audio recording. On confirmation, voice recording begins until the confirm button is pressed.

After the audio message is saved, the AudioPlay component is rendered. The delete button will reset the recorder and remove the audio file url from postgres db.

TODOs/Known issues

• Handle situations when the user does not grant permission for audio recording.
• On my chrome, sometimes the audio permission prompt doesn't show up on the first try, but works after refreshing the page. It seems to work consistently on other browsers. Investigate why..
• Allow 'previewing' the audio clip before saving to the database
• Default html audio player doesn't display duration
• Test on other browsers/mobile

[ademidun]

Excellent work @grace0925 thanks for the detailed PR description. Some feedback:

1. Make sure you create new files as .tsx files, we now support typescript, so let's use it.

2. Moving forward, use reaction functional components instead of class components and hooks. See this SO answer and this conversation.

   3. Protip: Use this extension and you can make components with rfce. I saw you did that for `Audi

3. deleteAudioRecording should also delete the file in Firebase