rustic-ai / ui-components

React component library for crafting user-friendly and engaging conversational experiences
https://rustic-ai.github.io/ui-components/
MIT License
40 stars 10 forks source link

feat(sound): create Sound component #48

Closed kaseyvee closed 1 month ago

kaseyvee commented 2 months ago

Changes

Screenshots/Videos

Design

Desktop

Screenshot 2024-04-02 at 2 37 16 PM

Mobile

Screenshot 2024-04-02 at 2 36 53 PM

Show Transcript

Storybook

Screenshot 2024-04-06 at 4 36 40 PM Screenshot 2024-04-06 at 4 37 46 PM

Interactions

Controls

sound

Captions

captions

Dark Mode

Screenshot 2024-04-06 at 4 36 10 PM

Mobile

Screenshot 2024-04-06 at 4 39 24 PM Screenshot 2024-04-06 at 4 38 57 PM
Shiti commented 2 months ago

Some feedback about the component:

  1. The dropdown for speed is too wide. Screenshot from 2024-03-26 10-47-45

  2. There is no option to mute the audio immediately.

lyjeileen commented 2 months ago

When clicking on the unmute button, should we do unmute instead of setting it to the largest volume?

lyjeileen commented 2 months ago

I found a bug. Here are the steps to reproduce the bug:

  1. Click play button to play the song
  2. Drag the volume bar to mute the SoundPlayer
  3. Change speed
  4. Click unmute button once: Unmute button is not changed to the mute button. Can't hear anything.
  5. Click unmute button twice: Unmute button is changed to the mute button, but still can't hear anything.
lyjeileen commented 1 month ago

Question: Do we want to have fixed position for the play speed and cc icons?

Screenshot 2024-04-05 at 10 35 41 AM