Feature to record audio (Engineering, and Design Questions)

[briangershon]

Frontend (@briangershon)

• [x] Recording controls UI -- this looks like a possibility: https://github.com/0x006F/react-media-recorder#readme
• [x] Encode audio and post to API
• [x] Style UI

Backend (@kyirong6)

The backend API will need to accept encoded data and process/persist it.

• [x] Add CORS support so we can call API from https://team7-blackfoot-chat-app.netlify.app. See https://flask-cors.readthedocs.io/en/latest/
• Endpoint to accept audio -- see https://github.com/BryceHaley/team7-blackfoot-chat-app/issues/5

Design Questions (@slantingsunrays) (from Discord thread)

I've been playing with the recording UI.

There are more states/actions/instruction needed design-wise.

The screenshots represent a "functional" prototype so you can see the various states. Here are some notes/questions:

• How should we communicate to the user what "record" does and why they want to use it? (I tossed in some example text)

• The "start/stop" button will be styled like your designs, though we'll need two states: idle/stopped and recording. (Maybe just a red version of your current yellow icon?)

• We also need a way to play recording so users can ensure they're happy with it. I'm showing standard controls for now, but could be replaced with a single ">" (play graphic).

• Lastly, when user is happy with their recording, we need a way to allow them to upload, hence the "upload" button

• Could you update the Figma design to represent how all these should look?

• Related question: What's the easiest way to export the various graphics (best would be as SVGs) from Figma? (edited)

[briangershon]

@slantingsunrays and I discussed, I'm working on the UI changes now.