search

magicuidesign / magicui

UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. Open Source.
https://magicui.design
MIT License
11.96k stars 474 forks source link

Allow users to customize Hero Video Dialog Play Button #317

Open alamenai opened 2 months ago

alamenai commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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

itsarghyadas commented 2 months ago

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 commented 2 months ago

Any update?

sanjay-mali commented 1 month ago

Hi @itsarghyadas

I hope you're doing well. It's been [16 days] since I raised the pull request regarding #317 , and I haven't received any feedback yet. If there's no interest in reviewing or merging the PR, please let me know. I can close it and focus on contributing to other repositories. Thanks for your time, and I appreciate your response.