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.

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

Improve audio record button #455

Merged
merged 4 commits into from
Feb 15, 2024
Merged

Improve audio record button #455

merged 4 commits into from
Feb 15, 2024

Conversation

Amnish04
Copy link
Collaborator

@Amnish04 Amnish04 commented Feb 14, 2024

As requested in #369, I have added a tooltip to the mic button indicating the use to either start or stop recording.

When not Recording:
image

When not Recording:
image

Transition:
MicAnimation

I tried to find a way to add the animation that @tarasglek suggested, but couldn't find a free and convenient way for that.
https://www.shutterstock.com/video/clip-1071785533-microphone-signal-animated-icon-animation-4k-green

This closes #413

@Amnish04 Amnish04 self-assigned this Feb 14, 2024
@Amnish04 Amnish04 requested a review from humphd February 14, 2024 23:54
Copy link
Collaborator

@humphd humphd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking great. A few things I notice, some of which is likely for follow-up:

  1. I think these tooltip/popups help a lot
  2. What is the blue checkmark for?
  3. Is the height change between Recording... and Transcribing... intentional, or part of the animation? There's a lot of movement.
  4. Can we make the button Red while it is recording, to indicate you can stop it by clicking?

Copy link

cloudflare-workers-and-pages bot commented Feb 15, 2024

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 5e74ef8
Status: ✅  Deploy successful!
Preview URL: https://322892c1.console-overthinker-dev.pages.dev
Branch Preview URL: https://amnish04-issue-413.console-overthinker-dev.pages.dev

View logs

@Amnish04
Copy link
Collaborator Author

Amnish04 commented Feb 15, 2024

2. What is the blue checkmark for?

That is a grammar check tool installed on my mac, shouldn't appear normally.

3. Is the height change between Recording... and Transcribing... intentional, or part of the animation?  There's a lot of 

That is part of the animation, I am changign the size property and applying a transition to that. We can remove it if doesn't look good.

4. Can we make the button Red while it is recording, to indicate you can stop it by clicking?

Sure, just pushed the change.
MicColorChange

Copy link
Collaborator

@humphd humphd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love it ❤️

@Amnish04
Copy link
Collaborator Author

@tarasglek Are you also okay with merging this?

@tarasglek tarasglek merged commit ca5d7b6 into main Feb 15, 2024
4 checks passed
@tarasglek
Copy link
Owner

This is awesome! Too bad we don't have a way to make it glow while it's recording :)

@tarasglek
Copy link
Owner

@Amnish04 fyi chatcraft has a good suggestion https://chatcraft.org/api/share/tarasglek/swpAJH4JeBzW2nQjE4TGG

@Amnish04
Copy link
Collaborator Author

This is awesome! Too bad we don't have a way to make it glow while it's recording :)

Yeah I also want to have that :)

@Amnish04
Copy link
Collaborator Author

Amnish04 commented Feb 15, 2024

@Amnish04 fyi chatcraft has a good suggestion https://chatcraft.org/api/share/tarasglek/swpAJH4JeBzW2nQjE4TGG

Can't open :(
image

Edit: @tarasglek Sorry I was opening the wrong link, will take a look
image

@Amnish04
Copy link
Collaborator Author

@tarasglek I was able to do something like this based on your suggestion.
MicPulseAnimation

What do you think?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve audio recording UX
3 participants