Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React for New Candidate Conversation Viewer UI #41

Closed
ddfridley opened this issue Dec 20, 2019 · 7 comments
Closed

React for New Candidate Conversation Viewer UI #41

ddfridley opened this issue Dec 20, 2019 · 7 comments
Assignees
@beribak
Labels
Effort-medium Looks like more than a small effort enhancement New feature or request React
Projects
Development: Ballotpedia March Elections

Comments

@ddfridley
Copy link
Contributor

take the design from #18 and implement it in react. The design is here:
https://www.figma.com/file/jtIoqpnhGfBEAHSVLAIVf4/undebate_UI?node-id=0%3A1

focus specifically on this layout: https://www.figma.com/file/jtIoqpnhGfBEAHSVLAIVf4/undebate_UI?node-id=61%3A631

Except:
Do not implement the "^" (fold) feature to the right of "Introduction"
And the ">" feature at the right of the line of videos is optional since the videos will rotate.

we will get more detail on how the layout should be in portrait mode soon.

Take the copy the undebate.jsx file into candidate-conversation.jsx and implement it there, and call the component CandidateConversation

To test it, you will have to edit the database, and add a new Iota record. To add the record, go to your heroku account, and click on this app. Then you will see a link for mLab MongoDB, click on that. Then you will see a new tab with a list of collections, click on iota. Then you will see a [+ Add document] button. Click on that. Then you will see an empty record. Then delete the "{}" that's there and paste in this text:

    {
        "path": "/candidate-conversation",
        "subject": "School Board Candidate Conversation - Candidate Conversation",
        "description": "A prototype Candidate Conversation for schoolboard",
        "component": {
            "component": "MergeParticipants"
        },
        "webComponent": {
            "webComponent": "CandidateConversation",
            "opening": {
                "line1": "You are about to experience a new kind of conversation",
                "line2": "This is how voters can learn about candidates in a more human way",
                "line3": "And this is how we can efficiently facilitate 500K conversations all over the country, every election season",
                "line4": "The topic of the discussion is:",
                "bigLine": "US School Board Candidate Conversation",
                "subLine": "This is a mock conversation, these are not real candidates"
            },
            "audio": {
                "intro": {
                    "url": "https://res.cloudinary.com/hf6mryjpf/video/upload/v1567095028/Generic_Light_Intro_7_sec_yp3lxk.wav",
                    "volume": 0.8
                },
                "ending": {
                    "url": "https://res.cloudinary.com/hf6mryjpf/video/upload/v1567096104/Heart_Soul_Entire_Duet_2_min_45_sec_1_j5sbpj.wav",
                    "volume": 0.7
                }
            },
            "participants": {
                "moderator": {
                    "name": "David Fridley",
                    "speaking": [
                        "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566788682/candidate-conversation-moderator-0_at5un1.mp4",
                        "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566788667/candidate-converation-moderator-1_z2kjhr.mp4",
                        "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566788659/candidate-confersation-moderator-2_cid3dq.mp4",
                        "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566788634/candidate-conversation-moderator-3_iq0npa.mp4"
                    ],
                    "listening": "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566788719/candidate-conversation-moderator-listening_nlfeoy.mp4",
                    "agenda": [
                        [
                            "Introductions",
                            "1- Who you are",
                            "2- Where you are",
                            "3- One word to describe yourself",
                            "4- What office you are running for"
                        ],
                        [
                            "What type of skills should students be learning for success in the 21st century?"
                        ],
                        [
                            "Closing Remarks"
                        ]
                    ],
                    "timeLimits": [
                        10,
                        60,
                        60
                    ]
                }
            }
        }
    }

This record is the same as the one for localhost://schoolboard-conversation except that:

  1. the _id is deleted so that the database will give it a new, unique id when you create it.
  2. path: is now /candidate-conversation
  3. and webComponent.webComponent is now CandidateConvesation

you'll be able to access this at localhost://candidate-conversation
@ddfridley ddfridley added enhancement New feature or request Effort-medium Looks like more than a small effort React labels Dec 20, 2019
@ddfridley ddfridley added this to Ice Box in Development: Ballotpedia March Elections via automation Dec 20, 2019
@ddfridley
Copy link
Contributor Author

@beribak Update. After receiving more feedback, we want to target the layout that has the line of windows on top, https://www.figma.com/file/jtIoqpnhGfBEAHSVLAIVf4/undebate_UI?node-id=66%3A1 (rather than the one above with the line of windows on the bottom). Extra credit if you can have a hidden feature like Control-W or something that lets us switch between the two layouts - but having one layout working is most important. Sorry for the change.

@ddfridley
Copy link
Contributor Author

The cursor needs to change when you hover over the icon/buttons: probably just add cursor: pointer to the css style for that.

@ddfridley
Copy link
Contributor Author

Also, it would be nice to add a style={{title: ...}} to each each button saying Previous Section, Previous Speaker, Pause, Continue, Next Speaker, Next Section. So that when you hover over it, you will see the name of it.

@ddfridley
Copy link
Contributor Author

@beribak To address the problem of not having any candidates, in the candidate conversation that was created in the database, do this:

  1. go to the iotas collection, in your mLab database as described above.
  2. find the record with "path": "candidate-conversation" that you created above.
  3. the first line in the record will be the "_id", it will look like this:
    "_id": {
        "$oid": "5dfc539a7c213e6bf14d7ee2"
    },
    "path": "/candidate-conversation",
    "subject": "School Board Candidate Conversation - Candidate Conversation",
    ...

  1. copy the value assigned to $oid - in this example it's 5dfc539a7c213e6bf14d7ee2 and paste it into an empty file so you can copy it again.

  2. copy the record below, and then use +Add Document as you did previously, and paste it in, and hit "Create and continute editing"

{
    "parentId": "5d6350b0e7179a084ef376b9",
    "subject": "Participant:School Board Candidate Conversation - Candidate Conversation",
    "description": "A participant in the following discussion:A prototype Candidate Conversation for schoolboard",
    "component": {
        "component": "MergeParticipants",
        "participant": {
            "speaking": [
                "https://res.cloudinary.com/hf6mryjpf/video/upload/v1567120064/5d685ab98d5ab100175a1dd7-1-speaking20190829T230738520Z.webm",
                "https://res.cloudinary.com/hf6mryjpf/video/upload/du_41/v1567120076/5d685ab98d5ab100175a1dd7-2-speaking20190829T230743431Z.webm",
                "https://res.cloudinary.com/hf6mryjpf/video/upload/v1567120089/5d685ab98d5ab100175a1dd7-3-speaking20190829T230802074Z.webm"
            ],
            "name": "MaryBeth MaryBeth McGarvey",
            "listening": "https://res.cloudinary.com/hf6mryjpf/video/upload/v1567120083/5d685ab98d5ab100175a1dd7-2-nextUp20190829T230755711Z.webm"
        }
    },
    "userId": "5d685ab98d5ab100175a1dd7"
}
  1. go get the value of $oid that you saved in step 4 and change the value of parentId to be this value. Make sure you have quotes around it, and then hit Save and go back.

You have just added one candidate to your conversation. You can repeat steps 5 and 6 with the data below to add more candidates.

Joe

{
    "_id": {
        "$oid": "5db33f0bc39ee70017cc7274"
    },
    "parentId": "5d6350b0e7179a084ef376b9",
    "subject": "Participant:School Board Candidate Conversation - Candidate Conversation",
    "description": "A participant in the following discussion:A prototype Candidate Conversation for schoolboard",
    "component": {
        "component": "MergeParticipants",
        "participant": {
            "speaking": [
                "https://res.cloudinary.com/hanexvucz/video/upload/v1572028149/5db33bc5c39ee70017cc7249-0-speaking20191025T182904502Z.webm",
                "https://res.cloudinary.com/hanexvucz/video/upload/v1572028152/5db33bc5c39ee70017cc7249-1-speaking20191025T182909287Z.webm",
                "https://res.cloudinary.com/hanexvucz/video/upload/v1572028158/5db33bc5c39ee70017cc7249-2-speaking20191025T182912325Z.webm"
            ],
            "name": "Joe",
            "listening": "https://res.cloudinary.com/hanexvucz/video/upload/v1572028169/5db33bc5c39ee70017cc7249-0-listening20191025T182917804Z.webm"
        }
    },
    "userId": "5db33bc5c39ee70017cc7249"
}

Adolf:

{
    "_id": {
        "$oid": "5db34ee7c39ee70017cc72ef"
    },
    "parentId": "5d6350b0e7179a084ef376b9",
    "subject": "Participant:School Board Candidate Conversation - Candidate Conversation",
    "description": "A participant in the following discussion:A prototype Candidate Conversation for schoolboard",
    "component": {
        "component": "MergeParticipants",
        "participant": {
            "speaking": [
                "https://res.cloudinary.com/hanexvucz/video/upload/v1572032218/5db34ecec39ee70017cc72ec-0-speaking20191025T193656908Z.webm",
                "https://res.cloudinary.com/hanexvucz/video/upload/v1572032220/5db34ecec39ee70017cc72ec-1-speaking20191025T193658702Z.webm",
                "https://res.cloudinary.com/hanexvucz/video/upload/v1572032222/5db34ecec39ee70017cc72ec-2-speaking20191025T193700221Z.webm"
            ],
            "name": "Adolf",
            "listening": "https://res.cloudinary.com/hanexvucz/video/upload/v1572032229/5db34ecec39ee70017cc72ec-0-listening20191025T193702315Z.webm"
        }
    },
    "userId": "5db34ecec39ee70017cc72ec"
}

Alex

{
    "_id": {
        "$oid": "5d6569ade7179a084ef472eb"
    },
    "parentId": "5d6350b0e7179a084ef376b9",
    "subject": "Participant:School Board Candidate Conversation - Candidate Conversation",
    "description": "A participant in the following discussion:A prototype Candidate Conversation for schoolboard",
    "component": {
        "component": "MergeParticipants",
        "participant": {
            "speaking": [
                "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566839072/5d64111ba62cb60017dad9eb-1-speaking20190826T170428600Z.webm",
                "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566839081/5d64111ba62cb60017dad9eb-2-speaking20190826T170432708Z.webm",
                "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566839337/5d64111ba62cb60017dad9eb-3-speaking20190826T170818981Z.webm"
            ],
            "name": "Alex Johnson",
            "listening": "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566926818/5d64111ba62cb60017dad9eb-listening20190826T170818981Z_s1wphm.mp4"
        }
    },
    "userId": "5d64111ba62cb60017dad9eb"
}

Will

{
    "_id": {
        "$oid": "5d65a6b877fff400177d50ed"
    },
    "parentId": "5d6350b0e7179a084ef376b9",
    "subject": "Participant:School Board Candidate Conversation - Candidate Conversation",
    "description": "A participant in the following discussion:A prototype Candidate Conversation for schoolboard",
    "component": {
        "component": "MergeParticipants",
        "participant": {
            "speaking": [
                "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566942893/5d5dc697d32514001766ca87-1-speaking20190827T215452394Z.webm",
                "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566942898/5d5dc697d32514001766ca87-2-speaking20190827T215455964Z.webm",
                "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566942903/5d5dc697d32514001766ca87-3-speaking20190827T215503161Z.webm"
            ],
            "name": "Will",
            "listening": "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566942901/5d5dc697d32514001766ca87-2-nextUp20190827T215500659Z.webm"
        }
    },
    "userId": "5d5dc697d32514001766ca87"
}

And if you want to be able to record more, add this, and change the parentId as you have been doing:

{
    "path": "/candidate-conversation-candidate-recorder",
    "subject": "School Board Candidate Conversation - Candidate Conversation",
    "description": "A prototype Candidate Conversation for schoolboard",
    "component": {
        "component": "UndebateCreator",
        "participants": {
            "moderator": {
                "name": "David Fridley",
                "speaking": [
                    "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566788719/candidate-conversation-creator-moderator-0_d7a3zr.mp4",
                    "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566788635/candidate-conversation-creator-moderator-1_gtchg2.mp4",
                    "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566788669/candidate-conversation-creator-moderator-2_bsceus.mp4",
                    "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566788656/candidate-conversation-creator-moderator-3_qomqgj.mp4"
                ],
                "listening": "https://res.cloudinary.com/hf6mryjpf/video/upload/v1566788719/candidate-conversation-moderator-listening_nlfeoy.mp4",
                "agenda": [
                    [
                        "Introductions",
                        "1- Who you are",
                        "2- Where you are",
                        "3- One word to describe yourself",
                        "4- What office you are running for"
                    ],
                    [
                        "What type of skills should students be learning for success in the 21st century?"
                    ],
                    [
                        "Closing Remarks"
                    ]
                ],
                "timeLimits": [
                    10,
                    60,
                    60
                ]
            },
            "audience1": {
                "name": "Adolf Gundersen",
                "speaking": [
                    "https://res.cloudinary.com/hf6mryjpf/video/upload/v1565640905/undebate-short-a1.mp4",
                    "https://res.cloudinary.com/hf6mryjpf/video/upload/v1565640905/undebate-short-a2.mp4",
                    "https://res.cloudinary.com/hf6mryjpf/video/upload/v1565640905/undebate-short-a3.mp4"
                ],
                "listening": "https://res.cloudinary.com/hf6mryjpf/video/upload/v1565640905/undebate-short-as.mp4"
            },
            "human": {
                "listening": {
                    "round": 2,
                    "seat": "nextUp"
                }
            }
        }
    },
    "webComponent": {
        "webComponent": "Undebate",
        "audio": {
            "intro": {
                "url": "https://res.cloudinary.com/hf6mryjpf/video/upload/v1567095028/Generic_Light_Intro_7_sec_yp3lxk.wav",
                "volume": 0.8
            },
            "ending": {
                "url": "https://res.cloudinary.com/hf6mryjpf/video/upload/v1567096104/Heart_Soul_Entire_Duet_2_min_45_sec_1_j5sbpj.wav",
                "volume": 0.7
            }
        },
        "participants": {},
        "opening": {
            "line1": "Thank you for helping us create a mock candidate conversation.",
            "line2": "All will be explained to you through this interactive video platform",
            "line3": "This is how we could efficiently facilitate 500K conversations all over the country, every election season",
            "line4": "Candidate Recorder for:",
            "bigLine": "US School Board Candidate Conversation",
            "subLine": "Your video will be recorded, you will have the option to upload it or not at the end."
        }
    },
    "parentId": "5d6350b0e7179a084ef376b9"
}

Then you can go to localhost:3011/candidate-conversation-candidate-recorder and record yourself as a candidate.

You can rerecord yourself as many times as you want, and the latest version will be the one that shows up in the conversation. If you want to pretend to be multiple candidates - go to localhost:3011/sign/out to sign out. And then got to the recorder link again and create a new account. And by the way for testing - the email address you use for an account doesn't have to be real- it just has to be a valid email format.

@ddfridley
Copy link
Contributor Author

ddfridley commented Jan 4, 2020 •
edited
Loading

To get at the ballot information, there is going to be a new object in the Iota structure called bp_info. It is optional and won't always be there. The current data format is:

     bp_info: {
            office: "string",
            party: "string"
            candidate_stage_result_id: "string",
            election_date: "string", // like "2020-11-04"
            candidate_name: "string",
            sort: "string", // usually the last name of the candidate, when sorting candidates use this
            profession: "string"
     }

@beribak I mention this because the new UI calls out for showing the date of the election.

@ddfridley ddfridley moved this from Ice Box to In progress (actively working) in Development: Ballotpedia March Elections Jan 7, 2020
@ddfridley
Copy link
Contributor Author

@beribak For the portrait mode here's a ui design: https://www.figma.com/file/jtIoqpnhGfBEAHSVLAIVf4/undebate_UI?node-id=172%3A1143

@ddfridley ddfridley mentioned this issue Jan 17, 2020
Closed
@ddfridley
Copy link
Contributor Author

This is done and incorporated into master - but there are some ui tweaks that will be detailed in a new issue.

Development: Ballotpedia March Elections automation moved this from In progress (actively working) to Done Feb 4, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@beribak beribak

Labels
Effort-medium Looks like more than a small effort enhancement New feature or request React
Projects
No open projects
Development: Ballotpedia March Elections
  
Done
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ddfridley @beribak