Spotify Metafy Frontend (Spotify playlists as media player entities)

[xqueenslander]

I created a backend integration and a very simple frontend plugin to allow Spotify playlist to be integrated into home assistant.
The frontend simply displays images of the playlist and allows you to tap on them to play the given playlist to a pre-selected Spotify source.

Example config:

        entitys:
          - media_player.john_daily_mix_5
          - media_player.john_daily_mix_6
          - media_player.john_release_radar
          - media_player.john_discover_weekly
        type: 'custom:spotify-metafy-frontend'

My config: (requires custom state switch card)

entity: binary_sensor.john_owns_denon
states:
  'off':
    cards:
      - entitys:
          - media_player.larry_daily_mix_1
          - media_player.larry_daily_mix_2
          - media_player.larry_daily_mix_3
          - media_player.larry_daily_mix_4
        type: 'custom:spotify-metafy-frontend'
      - entitys:
          - media_player.larry_daily_mix_5
          - media_player.larry_daily_mix_6
          - media_player.larry_peaceful_piano
          - media_player.larry_deep_focus
        type: 'custom:spotify-metafy-frontend'
    type: vertical-stack
  'on':
    cards:
      - entitys:
          - media_player.john_daily_mix_1
          - media_player.john_daily_mix_2
          - media_player.john_daily_mix_3
          - media_player.john_daily_mix_4
        type: 'custom:spotify-metafy-frontend'
      - entitys:
          - media_player.john_daily_mix_5
          - media_player.john_daily_mix_6
          - media_player.john_release_radar
          - media_player.john_discover_weekly
        type: 'custom:spotify-metafy-frontend'
    type: vertical-stack
type: 'custom:state-switch'

Source can be found here: https://github.com/rako77/Spotify-Metafy-Frontend

More info about the backend can be found here: Spotify Metafy (Spotify playlists as media player entities)

[raff]

I’ve got everything working, thanks for the great addition! A couple of comments for other users to learn from my mistakes:

1. The backend integration destination key is looking for the friendly name of the media player (ie. Living Room Dot), NOT the yaml name (ie. media_player.living_room_dot)

2. The frontend component requires spelling “entities” as “entitys”, which you must use in the yaml config. @xqueenslander, maybe this is something you would consider changing to match other components?

[xqueenslander]

Thanks @raff. I just pushed an update to allow you to use “entities” instead of “entitys”. but It will still accept “entitys” so I don’t break your config

[maurizio53 (Maurizio Fabiani)]

I get this after installing the custom component through HACS and configuring the card in this way:

    cards:
      - type: 'custom:spotify-metafy-frontend'
        entities:
          - media_player.mfabiani53_200_greatest_songs_of_rock_and_or_roll
          - media_player.mfabiani53_cole_porter_classic_summer_jazz_masters
          - media_player.mfabiani53_daily_mix_1
          - media_player.mfabiani53_daily_mix_2
          - media_player.mfabiani53_daily_mix_3
          - media_player.mfabiani53_i_miei_brani
          - media_player.mfabiani53_rock_classics
          - media_player.mfabiani53_rock_this

In configuration. yaml i have:

  - platform: spotify_metafy
    users:
    - user_prefix: "mfabiani53 "
      spotify_entity_id: media_player.spotify_mfabiani53
      destination: Echo Show
      playlists:
      - uri: spotify:playlist:37i9dQZF1E36buj8U8F3MT
      - uri: spotify:playlist:37i9dQZF1E36oW7hliUcoy
      - uri: spotify:playlist:37i9dQZF1E37KjAfEF3NyW
      - uri: spotify:playlist:5Qg5CEeBBZdDGqgssLWz1Z
      - uri: spotify:playlist:1zizBJjNETIqmSrunb9UwV
      - uri: spotify:playlist:37i9dQZF1DXcF6B6QPhFDv
      - uri: spotify:playlist:3lBH0gxg33eK606SztNCQF
      - uri: spotify:playlist:53tuAdmHXSjjDfrUeTD7aY

[maurizio53 (Maurizio Fabiani)]

Where i can find more infos about how to install the Spotify Metafy Frontend?
I installed the custom component but don’t understand how and where to install the frontend.

[pergola.fabio]

cool, looks similar to this project : https://github.com/dnguyen800/spotify-playlist-card

that projects is a sensor that creates the buttons automaticly based on playlists
this is all manual, right?

[raff]

Have you added the reference to the frontend component in your Lovelace resources?

[maurizio53 (Maurizio Fabiani)]

Yes i found how to add into resources and now it works…
But is there a way to have a chance to choose the destination device directly from the frontend?

[xqueenslander]

Unfortunately, not at this time I’m happy to take feature requests. Would you like the front-end config to overwrite the back-end config. or are you looking for a UI popup like this?:

[maurizio53 (Maurizio Fabiani)]

It’s up to you, what i would like is to choose the device where to play the playlists directly from the card…

[maurizio53 (Maurizio Fabiani)]

Having only one user, how to change the configuration?

Actually i have this:

  - platform: spotify_metafy
    users:
    - user_prefix: "mfabiani53 "
      spotify_entity_id: media_player.spotify_mfabiani53
      destination: Echo Show
      playlists:

But eliminating user_prefix i must eliminate also the users option?
And how will be the indentation?

[xqueenslander]

Hi @maurizio53

no you can’t eliminate the user option just yet try something like:

  - platform: spotify_metafy
    users:
    - spotify_entity_id: media_player.spotify_mfabiani53
      destination: Echo Show
      playlists: