Lovelace: Mini Media Player

Thank you!

The theme is based on the popular midnight theme with some tweaks by myself.

Here it is if you want to take a look :slight_smile:

1 Like

Thanks, I will update the OP right away!

If you’re browser has loaded the dependency once it should stay cached for a while so tyou should be able to be offline and still being able to use the card.

Alternatively, you could download the dependency and put it in the same directory as your mini-media-player.js and then change the import line to something like this:

import { LitElement, html } from './lit-element.js?module';
1 Like

that will be perfect, thanks for clearing that up!

2 Likes

This i great, thank you

1 Like

My new favourite card!
One possible issue, the title doesn’t seem to be overriding the media player’s assigned title.
Thanks

1 Like

Thank you for this. I completely missed to add that back when I rewrote the code last update.

I’ve fixed this and it will be included in the next release.

Thank you!

Great work in this one! IÂŽve been wanting a slick simple media player with volume control without entering more-info screen for quite some time now. The only thing IÂŽm missing is the source selection. Would it be possible to add a small input select to the left of the volume settings or under it like the tts option? Preferably it will show and change the option automatically when source is changed but also clickable.

Either way, great work!

Hmm, I will add that as an option in the next release. What do you think of something similar to the input select dropdown in the more info dialog?

Unfortunately I don’t think it would be possible to add it to the left of the volume, the space there is just too small. Maybe below, like the tts input. what do you think?

Cool! I would like to keep it as minimal as possible thats why I thought to have it next to the left of the volume control. If its not doable I guess it could be added under like tts. But lets say you want to have both tts and input selection. It will make the player rather big.

Would it be possible to have the part of “now playing” (yellow in your screen shots) clickable to pop a dropdown input select?

Would it be possible to add an option to hide the power button? On Sonos the power button is the same as pause.

Love the card an a big thank you for creating it!

1 Like

Yeah, me as well. I wanna keep it small and slim. That was my main purpose of this card. :smile:

What do you think?

2 Likes

For sure, I’ve gone ahead and added the option hide_power in the dev branch. It will be included in the next release.

Appreciate the feedback!

3 Likes

@kalkih Maybe you can have a look at the custom card tracker.
That shows new versions of the custom cards so people can easily update to the latest version.

5 Likes

Sweet! I definitely like the second approach, real nice!

1 Like

A most wonderful design, thank you Kalkih!

Is is possible to also make it work on a white background instead of the midnight theme? Right now the source, play, next, previous button are hidden in white on white.

Edit: For some reason, the controls show up on a white background and sometimes not. I have not yet figured out what causes this.

(upload://1DFOILB6MeasURDjY0Oii0USBlA.png)

ad://tWsQY7r47di9bPpUQv2yguvxhzt.png)

1 Like

Hey, thank you!

That is strange, the icons and most of the text (except with artwork: cover) is set by the theme variables.
To be more specific below are some of the different variables some elements use:.

  • Name, source: var(–primary-text-color)
  • media-info: var(–secondary-text-color)
  • buttons: var(–iron-icon-fill-color) and var(–paper-item-icon-color)

The only white theme I’ve tried is the default theme though (below).

It would be great if you could send me your theme, so I can check for issue/issues.

Thanks Kalle, the theme is the standard theme that comes with HA.

It happens on two machines, on different browsers. Clearing the cache did not make a difference.

1 Like

Ok, I’ll try to specifically set the color variables for all elements, currently some elements are relying on them being set by default, but that does not work as expected in browsers/cases it seems.


Ok, so I’ve made some changes, and It would be great if you could try this version.

Don’t forget to change your card reference in ui-lovelace.yaml and add something like ?ver=0.8-beta at the end. Alternatively clear the browser cache

I run it with both default and custom theme but never seen the icons disappear.