Lovelace: Mini Media Player

Share your Projects! Dashboards & Frontend
1303

This is pretty awesome. I’m trying to get it to work with my Echo multi-room setup. It mostly works, except there’s a couple things that don’t and I’m not sure why.

  1. The Power and Mute buttons do nothing. I can’t figure out how to make them work.
  2. There’s a drop-down next to the power button for the Office Echo; in that drop down there’s one choice, “Local Speaker”. I have no idea what this means, and it doesn’t seem to do anything. What is it, and is there a way to hide this?

This is what it looks like right now:

image

EDIT: For anyone else wondering, I got rid of the power button with a hide setting, and the little drop down next to my one echo was apparently the source so I hid that too because I don’t think that works with Echos. Now if only the Mute button would work…

image

1304

Hi there. Great card btw.
I have a question though: is it possible to combine google mini and sonos speaker in one group?
Thanks.

1305

Hello,

You seem to have figured it out but many features of the card requires that they are implemented in the media player platform/component, sometimes they are implemented differently so results may vary.

I think the mute button should work, it’s at least implemented in the alexa (I think that’s what you use?) component. Try updating the component or open an issue in the component repository on github.

Hey, thanks!
I’m not sure but I don’t think so.
This is what I found when searching for info about it: Cannot group Sonos system with Google Home devices and the answer seem to indicate that it isn’t possible.

1 Like
1306

Karl,

Two screen captures below. First is working fine, second is broken. Please let me know if I can help with this in any way. Both power and mute button work, as well as the sonos player controls. When bringing up the entity details dialogs, the controls are there.

I did install 1.5.1 after taking these captures, still see the problem there.

Chrome-Laptop
Chrome-Laptop524×779 230 KB
!
Screenshot_20191216-145324
Screenshot_20191216-1453241148×2482 173 KB

1307

One of the recent updates caused the input select drop down list to appear behind other elements. Is there any way to prevent this?

Screenshot_2019-12-17 Home Assistant

Edit: reverting to v1.4.2 rectifies the issue.

1308

Okay, I tried adding fallbacks to some CSS variables to see if that solved it, but I guess not.

If you could play around in the element inspector in chrome/firefox dev-tools that would be helpful. Try adding the style color: red; to the invisible buttons, try on the paper-icon-button or ha-icon elements for example and see if the icon become visible.

Thanks!

Yes, broke with v1.5.0 unfortunately, I’ve addressed the issue and it’s fixed in v1.5.1.

1309

Nice card @tom_l, can you post code?

1310

Unfortunately no, updating didn’t solve it. I restarted HA, reload the Lovelace config and did a “Shift” + reload in Chrome and FF. Still behind other entries.

1311

Uninstall through HACS, remove the entry from Lovelace config, then install again (v1.5.1) add to Lovelace (or just use the add option with HACS) then restart HA. This way worked for me :slight_smile:

1 Like
1312

Yeah strange, normally caching isn’t an issue when using HACS, but it seems it could be this time, thanks for sharing!

1 Like
1313

Does this card allow styles? I use the following to round the corners on all of my cards but I cannot get it to work for this one.

    style: |
      ha-card {
        border-radius: 10px;
      }
1314

@VMCosco Rounded corners work through the main theme, at least in my case. I have created a theme and used 10px rounded corners for the cards config. The entities of Mini Media Player adopts this as well automatically. See screenshot below.

image
image1241×1819 155 KB

1315

Yes, I do however recommend setting border-radius through the default ha theme variable instead e.g.

    style: |
      :host {
        --ha-card-border-radius: 10px;
      }

You can also set it in your theme if you want it applied to all cards ha-card-border-radius: 10px

@ASNNetworks, nice setup!

3 Likes
1316

Sorry to bother, but still no luck. But it changed it’s behaviour, so I’m thinking, the new version and cache shouldn’t be the issue.

Maybe it’s something on my side? :slight_smile:

I made a screenshot ( the buttons are just for demo in the picture). With the last version, the select menu is a little too much left (I’d say a minus padding).

Should I open an issue on Github?

ha_mmp_scroll_01
ha_mmp_scroll_01551×835 75.8 KB

1 Like
1317

Hello,
Sure, would be helpful if you could provide the whole config from the screenshot (the media receiver card and the card above it).

Thanks!

1318

@mitchell I like your idea any progress on that idea?

1319

I try to change card height to minimum, but not working as I want:
card_height

      - entity: media_player.bedroom_tv
        hide:
          controls: true
          icon: true
          info: true
          name: true
          power: true
          source: true
        name: TV
        style: |
          ha-card {
            height: 50px;
          }
        type: 'custom:mini-media-player'
1320

You’ll want to change the paddings of the mmp-player div.

To completely remove the paddings (16px is default):

style: |
  .mmp-player {
    padding: 0 !important;
  }
1 Like
1321

I’ve started getting a few random errors in my log recently, anyone seen these?

https://xxxxx.duckdns.org/community_plugin/mini-media-player/mini-media-player-bundle.js:1:0 NotSupportedError: 'mmp-group-item' has already been defined as a custom element

and

http://172.16.x.x:8123/community_plugin/mini-media-player/mini-media-player.js:1:68553 NotSupportedError: Cannot define multiple custom elements with the same tag name

I have a few instances of media player running on a page, and everything still works… so not sure what this is related to

1322

Sounds like your browser is somehow running the mini-media-player code twice.
Make sure you only have one resource reference for the card, you could also try clearing cache.

1 Like