Lovelace: Mini Media Player

kalkih · December 12, 2018, 3:35am

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

V0.9.5 example 11020×748 1010 KB

skynet01 · December 12, 2018, 5:15am

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 · December 12, 2018, 5:31am

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 · December 12, 2018, 6:09am

What version is that?

philhawthorne · December 12, 2018, 8:01am

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 · December 12, 2018, 12:36pm

@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 · December 12, 2018, 2:26pm

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 · December 12, 2018, 2:34pm

@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

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.

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 · December 12, 2018, 2:42pm

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 · December 12, 2018, 3:26pm

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

kalkih · December 12, 2018, 5:22pm

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 · December 12, 2018, 5:26pm

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

maurizio53 · December 12, 2018, 6:58pm

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 · December 12, 2018, 7:34pm

Awesome!

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 · December 12, 2018, 7:41pm

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 · December 12, 2018, 7:46pm

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 · December 12, 2018, 7:50pm

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

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

maurizio53 · December 12, 2018, 7:52pm

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 · December 12, 2018, 7:54pm

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

kalkih · December 12, 2018, 7:58pm

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