Lovelace: Mini Media Player

Share your Projects! Dashboards & Frontend
1120

This is awesome i use it every day. Would love an option for Night sound for Sonos

1 Like
1121

I prefer to not add platform specific features, but you could always use a shortcut that calls the service.

1122

I have a Media Player that never goes off, but instead only go into the idle state. Is it possible to hide the artwork when it’s in idle state? When my device is off (read: idle) it still shows the artwork.

1123

Hey, there’s an optional idle view implemented in the card and it’s customizable so can manually configure what should be considered as idle, please see the idle_view option.

The following config options should do the trick in your case:

idle_view:
  when_idle: true
1 Like
1124

Awesome working on this now thank you. is it possible to change the icon based on the state of some something?

ie, if mqtt topic = on show icon cat, if off show dog?

1125

No, not possible, but could bee made with the help of something like this config-template-card

1126

Hey your theme is very nice!! Any chance I could get you to share? Thank you.

1127

Hey, It’s heavily inspired by this reddit post.

Here’s a gist of the theme.

Some things are pretty flawed, like the sidebar, that doesn’t really fit with the theme.

I’m also using comptact-custom-header which makes the header look a lot better.

# cch config
cch:
  background: rgba(155,155,155,.25)
  clock_format: 24
  swipe: true
  swipe_animate: fade
  swipe_prevent_default: true

Edit: You’ll also need to specify background: var(--background-image) in your lovelace-ui.yaml / raw config editor

1128

Awesome thanks dude! I use cch and have a background like that setup already also. Gonna try her on tonight thank you for sharing!

1 Like
1129

Is it possible to make the progress bar bigger? i use this a lot to jump through media, it’s quite tricky to use on a touchscreen.

1130

The progress bar (or the touchable area of it) is actually quite a bit bigger than it shows, but it might still not be enough to be suited for touch input. Could probably make the touchable area 16px in the feature (basically the whole bottom card padding), any more and it would interfere with the buttons and rest of the card.

You could try setting --paper-progress-height: 16px !important; on the card with card mod or similar, you can apply this style to the ha-card element.
You would probably also want increase the bottom padding so it doesn’t eat into the buttons and rest of the card.

# card mode styles
ha-card {
  --paper-progress-height: 16px !important;
}
.mmp-player {
  padding-bottom: 32px !important;
}
1131

Can you guys give me some inspiration for how your Multiroom Music tabs look like? :slight_smile:

1132

@kalkih: Love your card, really flexible!

Any chance you would consider adding a possibility to send media_player.media_stop on the toggle_power option? I am using the card with a HEOS integration, and it doesn’t seem to react to neither toggle or turn_off, while media_stop does what I would want it to.

I guess I could replace the mute button with stop to achieve the same, but then I would like to keep the mute button too :slight_smile:

1133

Thanks!
Another option, similar to replace_mute could work I guess (replace_power)?
It’s not the prettiest solution but should be fairly easy to add.

1134

Thanks!
Feels like this should be it’s own card imo, a simpler card with larger touch control areas.

It’s quite tough to implement multiple optional large UI changing options in one card since all options have to play nice together. It also bloats the code quite a bit since you basically have to implement several UI’s in the same card, with conditions for what to render.

A solution that makes more sense to me would be to maybe add some sort of scaling option to the card, which could scale up/down? all/some elements and possibly even hide some less important ones.

I also mentioned this in a similar feature request over at github.

1 Like
1135

@kalkih: Yeah, that would to the trick! Thanks. Another alternative could be to add an optional stop-button together with the play and fwd/rev buttons?

1136

Hello all
I have issue with my mini media player setup and do not seem to be able to find a root cause or fix. I have two Google audio Chromecast devices and for each I have configured number of button shortcuts which calls either media_player.play_media or media_player.volume_set services. Up until month ago everything worked like charm and I could control individual players with its own button set. About month ago something changed and ever since all these buttons always execute the service for both of these players. So when I press set volume to 50% shortcut both players change volume.
Anyone would know what is causing this issue?
This is how my code looks:

      - cards:
          - entity: media_player.philips_fidelio
            shortcuts:
              buttons:
                - data:
                    media_content_id: >-
                      http://bbcmedia.ic.llnwd.net/stream/bbcmedia_radio2_mf_q?s=1533459519&e=1533473919&h=18f6c5b3476af1a615500e65c019ce99
                    media_content_type: audio/mp4
                  id: media_player.play_media
                  name: BBC2
                  type: service

Thanks a lot for any advice.

1137

Im struggling with a couple of things that I dont manage to get working! Please point me in right direction


I want to have the “mute” button to be shown, how do I do this? Set the hide mute to false dont work. Same with progress


Also, the volume sliders lenght is changing depending on the length of the song title/artist. Can this be a fixed lenght instead?

1138

Yes, it’s most likely this PR which introduced a change to service calls in a recent release, should in hindsight have been documented as a breaking change.

Basically, before the card would automatically add entity_id: [entity_from_card_config] as data in service calls, which cause problems when calling services that doesn’t allow extra parameters and where entity_id ins’t a valid one.

With media_player service calls the entity_id parameter is quite important though, and with the recent change you’ll have to manually provide it in your shortcut buttons. If you omit entity_id in media_player service calls it will fallback to all entities within the media_player domain I believe.

So for example, this should work

      - cards:
          - entity: media_player.philips_fidelio
            shortcuts:
              buttons:
                - data:
                    entity_id: media_player.philips_fidelio
                    media_content_id: >-
                      http://bbcmedia.ic.llnwd.net/stream/bbcmedia_radio2_mf_q?s=1533459519&e=1533473919&h=18f6c5b3476af1a615500e65c019ce99
                    media_content_type: audio/mp4
                  id: media_player.play_media
                  name: BBC2
                  type: service
1139

Some features only work on supported platforms, mute and progress is two of them, some components doesn’t have support for these features implemented.
What media player platform is it?

Volume slider width is dynamic in collapsed view, there’s however a min and max width, if you don’t hide controls, it won’t resize depending on artist/title and only by the width of the card.

If you want to customize this behaviour yourself I would recommend checking out card-mod with which you can apply custom styling to the card.

Something like

ha-slider {
  width: 150px;
}

could work, but might not play nice with other elements of the card.