Lovelace: Mini Media Player

Share your Projects! Dashboards & Frontend
409

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 1
    V0.9.5 example 11020×748 1010 KB

5 Likes
410

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.

411

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.

412

What version is that?

413

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.

414

@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

415

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
416

@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 :slightly_smiling_face:

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?

417

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.

1 Like
418

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

1 Like
419

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

420

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

421

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?

422

Awesome! :smiley:

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.

image

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

423

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?

424

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

425

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

426

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

spotify:user:kalkih:playlist:3aCOlJJ3OrOrM5FzdAt1eZ

I am using the web client.

427

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

428

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