meditohq/medito-app

End Screen

scouech opened this issue · 2 comments

We want to display an "end screen" after a track ends.

Design

You can find the design here:
https://www.figma.com/file/E9k4sKjlBDUREveJbUtf4A/Medito-2023?type=design&node-id=2495%3A1303&mode=design&t=3wCXmIYFpcr9WkCv-1

  • Top bar is material
  • Closing that screen should also close the player
  • The color of the donationAskCard text and background comes from the payload

Payload

You can find the array called "endScreen" when getting a track ( POST /tracks/{id} )
In this array you will find two sub arrays.

  1. feedbackCard which contains the title and text for the card and the options
  2. donationAskCard which contains the donation ask card title, text, cta info and style details
  • The order of the cards is based on the order in which they come from in the payload
  • The feedbackCard always has the feedback options, they come from the payload
  • The donationAskCard style is based on the payload

feedbackCard

donationAskCard

6 - 8hrs

@osamaasifoak here is the link to the prototype (showcasing the feedback animation).
If we can do something similar it would be great. No need to spend too much time on it.

https://www.figma.com/proto/E9k4sKjlBDUREveJbUtf4A/Medito-2023?type=design&node-id=2542-11893&t=1s4aBNpqNWy8KQoz-1&scaling=min-zoom&page-id=2324%3A10511&starting-point-node-id=2495%3A1303&mode=design

You can find the screen showing the thank you next to the other screen on Figma