Lovelace: Mini Media Player

[Faecon (Jo)]

{{ states(‘input_text.ruimte_1’)}} does not work to. but @LiQuid_cOOled said it is not possible…

[LiQuid_cOOled]

You may be able to use config-template-card integration, but I have not used it on a sub-menu like the speaker group.

type: custom:config-template-card
variables:
  - states['input_text.test']
entities:
  - ${vars[0].entity_id}
card:
  type: custom:mini-media-player
  group: true
  entity: media_player.media_players
  artwork: cover
  name: ${vars[0].state}

[Faecon (Jo)]

Thanks,

but I gonna try it another way…

[LiQuid_cOOled]

Let us know what you come up with. Multiple ways to skin a cat

[pee82]

Hi, anyone knows how to center the title?

I tried:

.entity__info__media
and
span.attr__media_title
and
attr__media_title

with vartious options like:

Text-align center:

margin-left: auto !important;
margin-right: auto !important;
justify-content: center;

etc. none work

[LiQuid_cOOled]

@pee82

Text-align center:

You can move it with margin-left: or padding-left:

card_mod:
  style: |
    .entity__info__name {
       margin-left: 100px;
    }

[pee82]

Yeah I know, I have a padding-left: 450px already set, but some titles are very short and some very long - I’m displaing them on big tablet so it would be nice to have them centrered…

[LiQuid_cOOled]

What do you get if you add

word-break: normal !important; ?

‘text-align: center !important;’ is working for long titles

card_mod:
  style: |
    .entity__info__media {
              text-align: center !important; }

I’ll take a look at why the first line is not centering when short.

[pee82]

@LiQuid_cOOled

word-break: normal !important;

No effect for me, neither does the text-align: center !important; work

Second and last struggle I have is the opacity of remaining time left - it is set to 0.5 by default and I would like it to be 1.0:

[LiQuid_cOOled]

@LiQuid_cOOled

text-align: center !important; }

The issue is the title field is flexing to the size of the provide title. text-align is working just in a very small field. I colored the background red to highlight what’s happening.

If you make the field static, it will center the text.

Test this out

card_mod:
  style: |
    .entity__info__media {
       width: 330px;
      text-align: center !important;
        }
    @media only screen and (max-width: 700px) {
      .entity__info__media {
        width: 230px;
        text-align: center !important;}
        }

If you are trying to center the name and media this will work as well.

card_mod:
  style: |
    .entity__info {
      width: 330px;
      text-align: center !important;
        }
    @media only screen and (max-width: 700px) {
    .entity__info {
      width: 230px;
      text-align: center !important;
        }

[pee82]

Thanks a lot! I have set the screen width to 1280px and now it is in the middle
Now, opacity of remaining time left is my only problem, I need it 1.0 not 0.5, duration and total time can be 0.5 because it is less important to me (then seeing remaining time left of the movie I’m watching), any ideas?

Edit, I found the solution:

 style:
    mmp-progress:
      $: |
        .mmp-progress__duration__remaining {
          opacity: 1 !important;
        }

[Yasp0]

I use the following code with some shortcuts. In the example I only have 4 shortcuts (2 spotify play lists and 2 radio stations). What I want is to use the ‘icon_image’ to show which radio station is playing.

Is this possible?

type: custom:mini-media-player
entity: media_player.computerkamer_nest_mini
name: Computerkamer
group: false
volume_stateless: false
artwork: cover
toggle_power: false
source: full
icon_image: https://www.nporadio1.nl/apple-touch-icon.png
shortcuts:
  columns: 2
  buttons:
    - name: Golden oldies
      type: service
      id: spotcast.start
      data:
        device_name: Computerkamer Nest Mini
        uri: spotify:playlist:2AgPtzbjyqqm7BnVxBRrSF
        random_song: true
        shuffle: true
    - name: Morning
      type: service
      id: spotcast.start
      data:
        device_name: Computerkamer Nest Mini
        uri: spotify:playlist:7KCF3onDcyOqC9BVf1XnKQ
        random_song: true
        shuffle: true
    - name: Radio 1
      image: https://www.nporadio1.nl/apple-touch-icon.png
      type: playlist
      id: media-source://radio_browser/96126f56-0601-11e8-ae97-52543be04c81
    - name: Radio 2
      image: https://www.nporadio2.nl/apple-touch-icon.png
      type: playlist
      id: media-source://radio_browser/96126e82-0601-11e8-ae97-52543be04c81

[staceydodds]

Hope you figure out the opacity thing. I’m using several mini-media-player cards for this new dashboard and the “Now Playing” card is at 50% opacity vs the rest of the other ones. No idea how or why it’s like this

[LiQuid_cOOled]

@staceydodds Can you point out which part of the card you are referring to?

@pee82 was speaking about the remaining count down, which was resolved with

style:
    mmp-progress:
      $: |
        .mmp-progress__duration__remaining {
          opacity: 1 !important;
        }

[staceydodds]

[LiQuid_cOOled]

Test this. I suggest a color change, but that’s up to you.

card_mod:
  style: |
      .entity__info__media {
        opacity: 1 !important;
        color: white !important;
           }

Great song!

[staceydodds]

Brilliant!!! Thank you for the assist @LiQuid_cOOled

[adissimo]

Hi there,

I have to ask again because I didn’t find anything about this topic. Is it possible to replace the source drop down menu with another drop down menu or add other sources?

I have Logitech Harmony activities and it would be great to be able to choose those activities from the drop down menu.

[nickrout]

You should be able to put any script or service in a drop-down. At least this example suggests so.

GitHub - kalkih/mini-media-player: Minimalistic media card for Home Assistant...

[janstadt]

Curious how are you displaying All Favorites like that? Or are those just shortcuts? I really like your footer showing favorites and home buttons. Is this just some kind of iframe that is displaying the media browser or maybe music-assistant?