Update looping recording UX per newest

[hburgund]

This is only for UX updates, not look and feel UI updates, hence this should be done in this original template repository, not the Invisible Choir project repo. @shreyas-jadhav has been making these updates to the shreyas-dev branch, so please make your feature branch off that.

I'll make a different issue in the Invisible Choir repo for UI changes, but want to get the overall UX in place here first.

The new design (UX and UI) is in this Figma document. The UI is specific to the Invisible Choir app, but the UX changes are "universal".

https://www.figma.com/design/mm7j2m1luMamFBqI99HKra/InvisibleChoir_UXUI_20241125-HRB?node-id=321-9643

LMK if you can access it OK or if I need to change any privileges.

I have added a number of comments in Figma to help clarify various things. Feel free to respond in Figma if best, but generally, we should try to have the discussion here to consolidate.

I put the corresponding current RW app screens in a row above the new UX/UI ones to link the old to the new.

[hburgund]

UPDATED: Here's a quick video mock-up of the design. It's slightly less refined than the Figma, but useful to see how the flow goes.

ic-join-mockup2.mp4

[shreyas-jadhav]

@EngineerDev11

Git: Create branch from…
origin/shreyas-dev
shubham/new-ui-ux

refer this guide to override global theme
https://mui.com/material-ui/customization/theme-components/

for animations:
https://mui.com/material-ui/transitions
https://motion.dev/

NOTE:

• Cursor AI still sometimes uses older framer-motion prompt it to use motion/react
• Create /icons directory. export figma icons as SVG and create react component for each icon. support size and color prop. Uninstall material ui icons.
• Create global config file for framer motion, export transition prop value same as used in vocalize.

[EngineerDev11]

@shreyas-jadhav Can you please give me step-by-step instructions so that I can understand better?

[shreyas-jadhav]

Start by updating LoopingRecordingForm.tsx

Current:

update with this flow:

https://www.figma.com/design/mm7j2m1luMamFBqI99HKra/InvisibleChoir_UXUI_20241125-HRB?node-id=321-31175&t=nsyngjKQ7jd4zmbl-4

For example,

• Add three stages on top. refer mode in useLoop
• Remove autoplay, add Play button, update text according to figma file, make full screen
• update the stages on top accordingly
• on clicking X on top, if recording is not submitted show prompt, otherwise redirect to /listen with correct ?latitude & longitude
• use two CountdownCircleTimer, inner one only visible when recording or previewing.

get rid of react-countdown-circle-timer library.
use SVG code to render the circles
example: https://codepen.io/charlenopires/pen/JMoxdb

ask cursor AI to make them look like one in figma.
tip: send figma screenshots to Cursor. or send this codepen example.

• remove react-router prompt. make a custom component. refer this style for <Prompt/>:
  https://www.figma.com/design/mm7j2m1luMamFBqI99HKra/InvisibleChoir_UXUI_20241125-HRB?node-id=765-19509&t=nsyngjKQ7jd4zmbl-4

NOTE:

1. for colors, don't hardcode anything. use useTheme hook from material ui, and access the palette colors
2. for styling try use the sx prop instead of style or custom css. because spacing, colors, etc. will be configured from the globally declared theme.
3. import available material ui components wherever possible, instead of writing custom. for example <Tabs> is already available for top tabs.

[EngineerDev11]

@shreyas-jadhav The old flow mentioned below is correct

How can I check the new flow for the Invisible Choir app?

[shreyas-jadhav]

Invisible Choir app

Changes to do here are not for Invisible Choir App. Invisible Choir App will be a variant of this just with different theme.
Think of this as the official Roundware app. You just have to update the flow here.

Refer the video above for new flow, it is the updated flow for "Add your voice here"

Zoom out the Figma file. There are wireframes for each screen. Ask here if anything missing or if you are not sure to replace with what flow.
See 3.0

[EngineerDev11]

@shreyas-jadhav Should I fully replace the old dialog box by referring to the new design (e.g., changing the text, buttons, etc.)?

refer this new design:

[shreyas-jadhav]

the new design doesn't seem to be using a dialog component.
@hburgund
let use know if we should remove modal and make it full screen with video link (will it be given later?)

[hburgund]

@shreyas-jadhav @EngineerDev11 Correct, the new design uses full screen overlays rather than discreet dialog boxes. We should put everything into this form instead of what it currently is. To be clear, this is still an "overlay" in that we want it to disrupt the current screen and require a response from the user and it sits on top of the current view, not a full replacement, just like a popup does. We may want these views to have semi-transparent or blurred backgrounds to show through a bit as well as do some animation that reinforces this overlay idea. LMK if this makes sense.

For now, on this particular screen, just link out to https://roundware.org and we can replace with the proper url for the off-site videos etc.
Thanks.

[EngineerDev11]

@shreyas-jadhav

1. Where should i put this launch button ?
2. Should I add a pulse effect to the outer border of the "Launch" button?

Old Design mentioned below :