Lovelace: Mini Media Player

bjorn.sivertsen · September 16, 2022, 5:48am

Here you go:

      type: custom:mini-media-player
      entity: media_player.office
      name: Office
      artwork: material
      source: full
      shortcuts:
        buttons:
          - icon: mdi:star
            id: script.startspotifyshuffled_office
            name: Starred
            type: script
          - icon: mdi:numeric-6-box-multiple-outline
            id: DR P6 BEAT
            name: P6 Beat
            type: source
        columns: 2

The first one is a script that starts a playlist shuffled, that looks like this:

startspotifyshuffled_office:
  alias: StartSpotifyShuffled_Office
  sequence:
  - service: media_player.play_media
    target:
      entity_id: media_player.office
    data:
      media_content_id: spotify://b4a955bbf7cc109a6fee955/spotify:playlist:5tlcvrCUclk
      media_content_type: spotify://playlist
    metadata:
      title: Starred
      thumbnail: https://i.scdn.co/image/ab67706c0000bebb24fc45bf8
      media_class: playlist
      children_media_class: track
      navigateIds:
      - {}
      - media_content_type: spotify://library
        media_content_id: spotify://b4a955bbf7cc109a6fee955d5
      - media_content_type: spotify://current_user_playlists
        media_content_id: spotify://b4a955bbf7cc109a6fee955d55/current_user_playlists
      - media_content_type: spotify://playlist
        media_content_id: spotify://b4a955bbf7cc109a6fee955d55cc7a64/spotify:playlist:5tlcvrCUclka8
  - service: media_player.shuffle_set
    data:
      shuffle: true
    target:
      entity_id: media_player.office
  - service: media_player.media_next_track
    data: {}
    target:
      entity_id: media_player.office
  mode: single
  icon: mdi:spotify

The other is a Radio station.

Dave888 · September 16, 2022, 8:21am

Thanks @bjorn.sivertsen, thats really helpful!

Have been able to use this to create buttons for my Sonos Favourite stations. I use Amazon Music rather than Spotify, but will look and see what I can do about making that work for shuffling playlists too.

For other people, here is the code I used for my Sonos Favourites:

shortcuts:
  columns: 3
  buttons:
    - type: source
      icon: <icon of choice - Optional>
      id: <Favourite name - as displayed within the Sonos App>
      name: <Name to display on the button>

deluxestyle · September 16, 2022, 6:39pm

somehow it does not work for me.
I get following error

jinja2.exceptions.UndefinedError: 'state_attr' is undefined

image969 · September 21, 2022, 2:10am

Is there a way to change the color of the attribute shortcut buttons? But I don’t want them all the same color. If I have six buttons on the media card can I change only one button to a different color?

nickrout · September 21, 2022, 6:06am

What is an attribute shortcut button?

image969 · September 21, 2022, 6:43am

These 6 buttons, maybe I’m saying it wrong

nickrout · September 21, 2022, 7:16am

OK, those are shortcuts, you can use an image, which of course can be any colour. All the shortcut options are here. GitHub - kalkih/mini-media-player: Minimalistic media card for Home Assistant Lovelace UI

image969 · September 21, 2022, 11:46am

Is there a way to target Just one button? This works great to change them all, but what if I had 3 buttons and wanted them three different colors

devedsmith · September 25, 2022, 12:10pm

THANK YOU for putting a volume control on there. There are some really great media players out there and for some reason they lack a volume control. This is the BEST!!

rn1 · September 27, 2022, 8:02pm

Is it possible to display what’s playing on the radio, just the text?

parautenbach · September 28, 2022, 5:04am

Unless you have a Media player - Home Assistant for that radio, the answer is no.

As the card’s documentation says:

An entity_id from an entity within the media_player domain.

belikerich · September 29, 2022, 12:34pm

I get the error described below after installing the Mini Media player and adding the following card;

type: custom:mini-media-player
entity: media_player.woonkamer
hide:
  power: true
  icon: true
  source: true
speaker_group:
  platform: sonos
  show_group_count: true
  entities:
    - entity: media_player.woonkamer
      name: Sonos Living Room
    - entity: media_player.keuken
      name: Sonos Kitchen
group: true
volume_stateless: true

After I try to group of ungroup one media player I got this error;
Failed to call service media_player/join. required key not provided @ data[‘group_members’]

Any idea what I’m missing/ doing wrong?

rbbrewer5 · September 30, 2022, 8:15pm

Complete newb here, trying to figure this out… first custom card.

One of the main reasons I wanted HASS was to control my speakers and Spotify. After a lot of struggling I finally got mini media player installed, but now I’m struggling even harder trying to create the card I want.

I have two Sonos speakers (there are actually five, but four of them are grouped together in Living Room): media_player.living_room and media_player.move

I’m trying to create a card that allows me to do the following:

Group/ungroup the speakers
Change volume of each speaker independently
Change volume of the group
Has a button that allows to “browse media” OR- IF POSSIBLE- Has a button that takes me directly to Spotify media
Potentially more buttons on bottom to start a specific Spotify playlist

Can anyone help me out? I’ve been reading and tinkering but I just can’t figure this out. I’ve gotten maybe one of each of the above accomplished on separate players, just by copying/pasting from the Wiki, but beyond that I’m hitting a wall.

esr2 · October 2, 2022, 4:53am

Is it possible to show the progress of the media but disable the ability to jump around? It’s really easy to accidentally change the progress of our movie when I’m scrolling through my dashboard on my phone.

happyhammer7 · October 5, 2022, 6:06pm

I am using this card with a few alexa speakers. However, every time I try to skip back or skip forward on a song, i get the error

“Failed to call service media_player/media_seek. Entity media_player.office_speaker does not support this service.”

I have only recently switched over from Google Assistant to Alexa and never had this issue. Is this a limitation of the Alexa speakers themselves or the Alexa Media Player integration?

is there any workaround to get this working?

Thanks

nickrout · October 5, 2022, 8:39pm

Are you using this? GitHub - custom-components/alexa_media_player: This is a custom component to allow control of Amazon Alexa devices in Home Assistant using the unofficial Alexa API.

If so, it doesn’t appear to support seek.

happyhammer7 · October 6, 2022, 7:54pm

Thanks for the response. Sorry I should have said what integration I am using and yes it’s that one.

Oh well nevermind, I will just hide the progress bar in that case

Thanks again

fair_dinkum · October 10, 2022, 4:57am

I’m not too sure if this is possible. All buttons sit in the same div container and have the same class assigned. so you would need an individual class for eacht color and apply it to the button. The latter is the tricky part…

image969 · October 11, 2022, 12:42pm

I actually did figure this out…The guy that runs Card Mod page referred me to his link on the first post of the page, that basically gives you the breakdown of everythingyou could possibly need. lol Thanks for the reply though.

nickrout · October 14, 2022, 11:17pm

Are you going to share?