Lovelace: Mini Media Player

[kalkih (Karl Kihlström)]

New version v0.9.6

Including Sonos group arrangement, artwork improvements & more.

I want to give a big thank you to @hdaalder for testing and helping me with the Sonos group functionality.

And as usual, visit the Github repo for the updated readme, with instructions and examples.

Changelog

• Added: sonos_grouping option for Sonos group management

• Added: showing app_name if no other media information is available #38

• Changed: artwork images renders in base64, should result in faster rendering

• Fixed: improvements to artwork logic, should result in smoother transitions

• Fixed: artwork: full-cover now displays “non music” artwork in a 16:9 aspect ratio

• Fixed: paper slider pin now displays correctly even in collapsed view @jcrowegitHu8

  

[skynet01 (Alex)]

Yeah man, same here, fully and the latest Fire HD8 with Fully Browser. So annoying, just got it all set up only to find out I can’t use it with my tablet that’s mounted.

[philhawthorne]

Yeah, I am using an older version of this card, before lit-html was used. So it is working on my FireHD tablets, just not with the latest and greatest features. But I can live with that for the time being.

[skynet01 (Alex)]

@philhawthorne

lit-html

What version is that?

[philhawthorne]

@skynet01

What version is that?

0.4.1

Although looking at all the new features, damn. Sonos grouping would be nice. Might have to move away from fully kiosk browser or something.

[cjsimmons (Chris Simmons)]

@kalkih hey mate, any chance of a modification to the background images so that they don’t overlay the card? I’m trying to use card-modder to add some rounded corners to my card, but the background images are on top of the border and the rounded corners are not visible.

See the discussion here with the card-modder developer. My Lovelace Plugins

[klogg]

This looks great.
I say ‘looks’ because it doesn’t seem to work for me…
Am I doing something wrong?

I get this error:

Log Details (ERROR)
Wed Dec 12 2018 14:25:16 GMT+0000 (Greenwich Mean Time)
http://192.168.1.25:8123/lovelace/6:0:0 Uncaught

---

  - type: entities
    title: Sonos
    entities:
      - type: custom:mini-media-player
        entity: media_player.kitchen
        icon: 'mdi:stove'
        hide_power: true
        artwork: full-cover
        show_progress: true
        scroll_info: true
        idle_view: true
        consider_pause_idle: true
        show_source: small
        sonos_grouping:
          - entity_id: media_player.kitchen
            name: Sonos Kitchen
          - entity_id: media_player.dining_room
            name: Sonos Dining room
          - entity_id: media_player.tv_room
            name: Sonos TV Room

      - type: custom:mini-media-player
        entity: media_player.dining_room
        icon: 'mdi:silverware-fork-knife'
        hide_power: true
        artwork: full-cover
        show_progress: true
        scroll_info: true
        idle_view: true
        consider_pause_idle: true
        show_source: small
    
      - type: custom:mini-media-player
        entity: media_player.tv_room
        icon: 'mdi:television-classic'
        hide_power: true
        artwork: full-cover
        show_progress: true
        scroll_info: true
        idle_view: true
        consider_pause_idle: true
        show_source: small

[kalkih (Karl Kihlström)]

@skynet01 @philhawthorne, Yes this is unfortunate.
However I now compile the source through babel, so you could give it a shot again with the latest bundle version.

You would need to change type: module to type: js in your resource reference, since I believe es modules isn’t supported in the WebView version running on the fire tablets.

- url: /local/mini-media-player-bundle.js?v=0.9.6
  type: js

Let me know if it works, would be cool

@cjsimmons

@kalkih hey mate, any chance of a modification to the background images so that they don’t overlay the card? I’m trying to use card-modder to add some rounded corners to my card, but the background images are on top of the border and the rounded corners are not visible.

Oooh yeah… that issue was actually introduced with the fix for the paper slider pin included in the last update. For the pin to not be cut off, overflow has to be set to visible, which is what causes the background to overflow the border radius you set to ha-card.

@jcrowegitHu8

2. It would also be nice if the bubble could not be cutoff.

Currently, overflow is only allowed when either hide_controls and/or hide_volume is set to true, so you should technically be able to have rounded corners if you skip those options, I believe.

I’m not sure what to do to fix this, since this is a custom modification your issue is related to, I think I would have to prioritize the paper slider pin over this. But I’m open for suggestions.

I’ve not looked into card modder, does it only allow styling of the ha-card element?

[kalkih (Karl Kihlström)]

@klogg

I get this error:

Log Details (ERROR)
Wed Dec 12 2018 14:25:16 GMT+0000 (Greenwich Mean Time)
http://192.168.1.25:8123/lovelace/6:0:0 Uncaught

I know some people had this error after an update before, clearing cache/restarting browser solved it I believe.

If that doesn’t help, you could try downloading the js file again, if you use custom_updater double check the file so nothing wonky happened while updating.
Otherwise try restarting HA.

[klogg]

Well… that fixed it.
Simple.
And it does indeed look good.
Thank you.

[kalkih (Karl Kihlström)]

New version v0.9.7

Had to put out a minor update since I’m stupid and there were some issues introduced with the last update.

And as usual, visit the Github repo for the updated readme, with instructions and examples.

Changelog

• Fixed: card will now grow taller instead of clipping content if more space is needed when using artwork: full-cover

• Fixed: height issue while using group option

[skynet01 (Alex)]

Woohoo! Setting it to js now fixes the issues with Fire tablets! Thanks so much!

[maurizio53 (Maurizio Fabiani)]

Which is the correct syntax to use media_buttons?
I see in the example this line:

  type: playlist
  url: spotify:user:kalkih:playlist:1HsopVo0BO6p5Qg52ly5oq

What must i change according to my account other than my account name?

[kalkih (Karl Kihlström)]

@skynet01

Woohoo! Setting it to js now fixes the issues with Fire tablets! Thanks so much!

Awesome!

@maurizio53

Which is the correct syntax to use media_buttons?

Depends on what media player you are using and what media you want to play.
If it’s spotify, like in my example you can get the playlist or song url by right clicking the playlist/song -> Share -> Copy playlist URI. In the Spotify desktop client.

If it’s a song you specify type as music, if it’s a playlist, you specify type as playlist.

[maurizio53 (Maurizio Fabiani)]

Ok that’s clear, but what to put after the url: option? Just the URI ?
If i right click over a playlist i get only three options: Start Radio, Save and Copy Playlist link, no Share option.
Maybe i need a Premium account?

[deluxestyle]

since the last update I get a lot of error messages in my log

Error handling message: {‘entity_id’: ‘media_player.sonos_mediaplayer’, ‘id’: 42, ‘type’: ‘media_player_thumbnail’}

but only for the universal media player

[kalkih (Karl Kihlström)]

@maurizio53

If i right click over a playlist i get only three options: Start Radio, Save and Copy Playlist link, no Share option.

Strange, are you using the desktop client?

But yes.
A track would look like this: spotify:track:285pBltuF7vW8TeWk8hdRR
A playlist would look like this: spotify:user:kalkih:playlist:3aCOlJJ3OrOrM5FzdAt1eZ

@deluxestyle

since the last update I get a lot of error messages in my log

Error handling message: {‘entity_id’: ‘media_player.sonos_mediaplayer’, ‘id’: 42, ‘type’: ‘media_player_thumbnail’}

Check your card configuration, looks like you have type: media_player_thumbnail?
Should be type: custom:mini-media-player

[maurizio53 (Maurizio Fabiani)]

In this case i must only change your name with my account name?

spotify:user:kalkih:playlist:3aCOlJJ3OrOrM5FzdAt1eZ

I am using the web client.

[deluxestyle]

I only have type: custom:mini-media-player

[kalkih (Karl Kihlström)]

@maurizio53

In this case i must only change your name with my account name?

No, you also have to change the playlist id. spotify:user:kalkih:playlist:3aCOlJJ3OrOrM5FzdAt1eZ.