Allow users to customize Hero Video Dialog Play Button

[alamenai]

Is your feature request related to a problem? Please describe. The play button has a standard gray color. However, most brands (YouTube, Twitch, Dailymotion... ) use their brand color in this button.

Describe the solution you'd like I would see a new exposed prop to customize the color of this button.

[sanjay-mali]

The play button currently uses a default gray color. However, popular platforms like YouTube, Twitch, and Dailymotion use their brand colors for this button, enhancing visual appeal and aligning with their branding.

Solution:

To address this, I suggest exposing a new prop that allows users to customize the play button’s color. You can find the relevant code in the hero-video-dialog.tsx file, located in your components folder after installing the Hero Video Dialog.

Installation Steps:

1. First, install the Hero Video Dialog using MagicUI CLI:

   npx magicui-cli add hero-video-dialog

2. After installation, navigate to your components folder and locate the hero-video-dialog.tsx file. Inside this file, you'll find the following className for the play button:

   <div className={`flex items-center justify-center bg-gradient-to-b from-primary/30 to-primary shadow-md rounded-full size-20 transition-all ease-out duration-200 relative group-hover:scale-[1.2] scale-100`}>
    </div>

   To customize the play button’s color, you can modify the from-primary/30 and to-primary gradient classes with your desired colors.

[itsarghyadas]

Do you explicitly need a prop for this colour customization, otherwise solution of @sanjay-mali can easily work.

Let me know. Thank you.

[sanjay-mali]

@itsarghyadas can i make PR for it. pass start and end color using props.

[itsarghyadas]

please go ahead and also think about what will be the best way - explicit props or somehow I can pass to the tailwind merge.

Thank you.

[sanjay-mali]

Any update?