fix: progress bar not visible

kalkih / mini-media-player

Minimalistic media card for Home Assistant Lovelace UI

MIT License

1.47k stars 206 forks source link

fix: progress bar not visible #793

Closed punxaphil closed 7 months ago

punxaphil commented 7 months ago

fixes #784

Before

After

Playing

Paused

punxaphil commented 7 months ago

Looks very good 👍 Just a small comment about double quotes.

Thanks! updated

punxaphil commented 7 months ago

We also should add a backdrop fill, as it was before:

You can add this after .mmp-progress:
.mmp-progress:before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: var(--mmp-progress-height);

  background-color: rgba(100,100,100,.15);

}

Thanks! Should be fixed now🙂

punxaphil commented 7 months ago

Thank you🙂 what's the process of getting the bug fix out to users?

alexanderznamensky commented 7 months ago

Is it possible to install dev version of media player card? I didn't find such option in HACS. Or probably we can ask just updated js file?

Anyhow - thankas indeed for your nice contribution !

punxaphil commented 7 months ago

@Drafteed

Drafteed commented 7 months ago

I'm planning to make a new release today.

jhemak commented 7 months ago

@Drafteed - Thank you for working to fix this! Is there some small issue still with the rounded corner, at least when using this with Mushroom? This is more visible in light mode than dark mode.

punxaphil commented 7 months ago

@jhemak I did the fix, so I should probably take the blame 😉 I can't reproduce what you are showing. What does it mean to be "using this with Mushroom"?

jhemak commented 7 months ago

No problem! I just mean that I had Mushroom installed and wasn't sure if that was impacting the formatting in some way.

I noticed the issue I found appears only when Artwork is set to full-cover. For all other Artwork options, it displays without that black corner.

Does that help?

punxaphil commented 7 months ago

Not really, still not seeing it with full-cover.

jhemak commented 7 months ago

Sorry, my mistake. It looks like the issue was not caused by the progress bar fix as I see it present in version 1.16.5 as well. It just wasn't something I noticed until the progress bar was fixed.

Here's what I am seeing:

With full-cover, there is a gray gradient rectangle at the bottom of the artwork that does not have the same radius in the corners as the artwork itself (it's square, not curved). This is what's peeking thru the progress bar.
With cover, there is transparent gray across the entire image, but the corners all reflect the expected radius and the progress bar therefore looks as expected.
With cover1 (an invalid value but one I specified for testing), there is no gradient and the progress bar looks as expected.

I wish I were smart enough to fix the problem with the full-cover option... in the meantime, I am just using "cover1" as my artwork option since it somehow makes the display look correct for my purpose. Thanks for fixing the main issue with the progress bar!

punxaphil commented 7 months ago

Alright. you can always open a separate issue for that.