Candidate Recorder UI - Directed

[ddfridley]

The Directed U differs from the self directed UI #70 in that in Directed, after the moderator speaks, control fill flow to the next step automatically - like the example speaker. Where as in self directed, after the moderator speaks, nothing happens. It's up to the users to play the example speaker segment, or just record her part. But there is a higher level difference as well, Directed is intended to be conversational - like you were talking to the moderator and the example speaker in a live conversation.

We want to build both in order to test each with uses and see where it goes.

This is the figma link:
https://www.figma.com/file/jtIoqpnhGfBEAHSVLAIVf4/undebate_UI?node-id=320%3A257

This is the figma clickable prototype https://www.figma.com/proto/jtIoqpnhGfBEAHSVLAIVf4/undebate_UI?node-id=320%3A1503&scaling=min-zoom

start by taking app/components/web-components/undebate.jsx and creating cc-recorder-directed.jsx and build this in that.

Here is a video describing the UI: https://drive.google.com/file/d/1mfa1TA2fqFA9-9S3SBESCxZoBLZQxl5Y/view?usp=drive_web

But before you implement this, lets talk through how the UI should go.