Lovelace: Mini Media Player

mitchell · September 12, 2019, 10:57pm

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

kalkih · September 13, 2019, 9:35am

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

moostmartijn · September 13, 2019, 11:51am

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.

kalkih · September 13, 2019, 2:36pm

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

mitchell · September 16, 2019, 5:14pm

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?

kalkih · September 16, 2019, 10:32pm

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

Darbos · September 17, 2019, 1:45am

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

kalkih · September 17, 2019, 1:27pm

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

Darbos · September 18, 2019, 1:36am

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

mitchell · September 18, 2019, 8:22pm

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.

kalkih · September 20, 2019, 10:52am

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;
}

crazytok · September 20, 2019, 11:10am

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

tormagj · September 22, 2019, 2:32pm

@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

kalkih · September 22, 2019, 4:08pm

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.

kalkih · September 22, 2019, 4:24pm

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.

github.com/kalkih/mini-media-player

Feature request: medium-media-player

opened 03:45PM - 01 Aug 19 UTC

closed 04:38PM - 12 Dec 19 UTC

rdehuyss

enhancement

Hi, First of all: thanks for this excellent card which we use daily. Some …minor annoyance that we have is that the mini-media-player is sometimes too mini :-). We use it on a wall mounted tablet and we often press the wrong button. The only buttons we really use are play, pause and the volume. Would there be a way to have the play/pause buttons a little bit bigger? So they can be easily controlled by finger? Thanks again, Ronald

tormagj · September 23, 2019, 6:01am

@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?

filiplaznicka · September 23, 2019, 9:24am

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.

crazytok · September 23, 2019, 12:25pm

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?

kalkih · September 23, 2019, 12:52pm

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.

github.com/kalkih/mini-media-player

services for Shortcuts not working correctly due to always added `entity_id` data

opened 09:00AM - 23 Aug 19 UTC

closed 03:07PM - 23 Aug 19 UTC

da-anda

bug

Some services are strict about the params/data they receive and thus can't be tr…iggered by the current service calling implementation of the player object, since that one is always adding the `entity_id` as service parameter/data. Would it be possible to remove it by default? Simplest solution might be to distinguish between external (shortcut buttons) and internal service calls and only add it to internally triggered calls. Noticed the issue when I tried to add a party mode button for my Soundtouch speakers (play everywhere -> https://www.home-assistant.io/components/soundtouch/#service-soundtouch_play_everywhere). This service f.e. doesn't like the `entity_id` as service param. Thanks.

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

kalkih · September 23, 2019, 1:07pm

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.