Show Rhythm detail

[gregdyke]

Story

• As a website visitor

• I Want to view media associated with a rhythm on the map

• So That I can see/hear what the rhythm looks like

Data

1. DC Hand dancing
   • https://www.youtube.com/watch?v=M6uM0qrjetQ
   • washington DC
2. Rumba Guaguanco
   • https://www.youtube.com/watch?v=gJVT_5swkhA
   • Havana, Cuba

Acceptance Criteria

1. Given 2 hard coded data points above are displayed on a map
   • When a data point is clicked
   • Then a popup/overlay appears with the title of the rhythm
2. Given the popup/overlay appears
   • Then the associated youtube uri is displayed as embedded playable media

Implementation Notes

1. This can be split into a "display embedded media component" (no dependency) and "pop up including display embedded media component" (dependent on issue xxxxx): acceptance criteria 2 and 1 respectively

Checklist:

• [ ] I have defined the user story
• [ ] I have defined some acceptance criteria
• [ ] I have included any implementation notes
• [ ] I have included all relevant links

[mferryRV]

Not going to put this on the map yet, just going to make a pop-up from a button.

• [x] Create a rhythm details testing page
• [x] Show the basic information (name, location)
• [x] Show an embedded video
• [x] Create a button component
• [x] Trigger a function by clicking the button
• [x] Create a "modal" component (or use one from a library, possibly React Bootstrap)
• [x] Make the modal closable

~3 evenings, 11 hours, doable this week

[mferryRV]

Render takes a long time to boot up, but this is available here: https://starter-kit-al84.onrender.com/modaltesting