Touchy - Touch friendly media player card (combination of cards)

Hi , yes was that :slight_smile:

                        fullscreen: false   

thank you

Hello, I am curious to know what is your LMS setup and especially your card/lovelace setup.

I have a 3 RPi setup with PicorePlayer and a LMS server on MAC.but my lovelace setup sucks, I need inspiration and guidance. I am kinda new to the Home assistant world. Would you be kind enough to show your current setup, I would really like to be able to learn from you, I sould say learn MORE from you because you’ve been helping me learn a whole lot already.

Please please please :wink:

I second that. :slight_smile:

s’il te plait tu rendrait un petit quebecois bien heureux!

Mais, je ne parle pas Francais.

If this help, you can look at “Burningstone91” Setup he is on Git:

2 Likes

Hi, a user recreated my previous setup and has shared his code. So you can use that :slight_smile:

I now use a LMS webview in fullscreen, which I can access through Lovelace with webcard. There is not much to share about that, since its just my LMS server (with material skin) which I added the volume popup sliders to.

But that is a separate thing, this thread is only about the media player card, which I use on my dashboard as media entities.

This was my previous music setup: Show off your picture-elements uses - #259 by ASNNetworks

Now using this: Show off your picture-elements uses - #290 by ASNNetworks Which is LMS material skin (inside Lovelace and addes volume sliders).

1 Like

Thats also what Ive been using with my rpi4 + khadas LeTone 2 DAC. I am really digging this little DAC… its the best sounding thing i’ve bought… you should check it out its cheap for the sound quality… anyways im off topic. thanks for this answer ill go check it out. Ill let you know what ive ended up doing… thanks for answering!

Hi. How can i do to make this card fit in a swiper card? because of the multiple button card entity, it will not work.

Thxs

EDIT: Ok, i managed to do it by setting all the button card inside a picture element

How you make this ? Can you config delen whit me ?

Thank you for sharing !
i would like to test but the link for your overlay svg is dead. Can you post a new link please ?
thanks

I updated the link. Btw: I don’t get notifications with new responses, only when mentioned directly.

Thanks you very much !

Hey @ASNNetworks
Love you media card.
I have implemented it in Mattias’s homekits beautiful concept but I get errors. I’m thinking it’s styling errors?
The music works though and the cover art is shown.

This is the code:

      - type: grid
        title: Media
        view_layout:
          grid-area: media
        columns: 1
        cards:
          - type: custom:swipe-card
            start_card: 1
            parameters:
              roundLengths: true
              effect: coverflow
              speed: 650
              spaceBetween: 20
              threshold: 7
              coverflowEffect:
                rotate: 80
                depth: 300
            cards:

              - type: horizontal-stack
                cards:
                  - type: picture-elements
                    image: 'local/tablet/overlay.svg'
                    style: |
                      ha-card {
                        --ha-card-background: none !important;
                        box-shadow: none !important;
                      }                          
                    elements:
                      - aspect_ratio: 1/1
                        entity: media_player.lesboutin
                        icon: 'mdi:speaker-wireless'
                        label: Living Room Sonos
                        name: Sonos
                        show_icon: false
                        show_label: false
                        show_last_changed: false
                        show_entity_picture: true
                        show_name: false
                        show_state: false
                        tap_action:
                          action: none
                        style:
                          height: 100%
                          width: 100%
                          top: 50%
                          left: 50%
                        state:
                          - styles:
                              entity_picture:
                                - filter: grayscale(100%) blur(4px)
                                - transition: all 0.5s ease
                            value: paused
                        styles:
                          card:
                            - padding: 0px
                            - background-color: var(--card-background-off) #the color when there is no artwork, change or remove to use own color
                          entity_picture:
                            - border-radius: 20px
                            - height: 100%
                            - width: 100%
                            - position: absolute
                            - transition: all 0.5s ease
                        type: 'custom:button-card'
                      - type: 'custom:mod-card'
                        style:
                          '--mini-media-player-icon-color': var(--text-color) #change or remove to use own color
                          '--mini-media-player-base-color': var(--text-color) #change or remove to use own color
                          '--mini-media-player-accent-color': var(--music-accent-color) #change or remove to use own color
                          border-top-left-radius: 0px !important
                          border-top-right-radius: 0px !important   
                          width: 100%
                          transform: 'translate(0%, -100%'
                        card:
                          artwork: none
                          entity: media_player.lesboutin
                          group: false
                          hide:
                            controls: true
                            icon: false
                            name: false
                            power: true
                            runtime: false
                            source: true
                            volume: true
                          hold_action:
                            action: none
                          tap_action:
                            action: none
                          icon: 'mdi:speaker-wireless'
                          info: scroll
                          source: true
                        # change the styling variable below to the color and width of scrolling info you want. Change height or remove line for default.
                          style: |
                            .mmp-player {          
                              background: rgba(0, 0, 0, 0.75) !important;
                              border-top-left-radius: 0px !important;
                              border-top-right-radius: 0px !important;
                              height: 95px;
                            }      
                            .entity__info {
                              max-width: 60% !important;
                            }                           
                          type: 'custom:mini-media-player'
                        #This here below is if you want to have the option to tap_hold anywhere on the card for more-info popup. Remove this part if not needed.
                      - aspect_ratio: 1.2/1
                        entity: media_player.lesboutin
                        icon: 'mdi:speaker-wireless'
                        label: Living Room Sonos
                        name: Sonos
                        show_icon: false
                        show_label: false
                        show_last_changed: false
                        show_entity_picture: false
                        show_name: false
                        show_state: false
                        tap_action:
                          action: none
                        hold_action:
                          action: more-info
                        style:
                          height: 80%
                          width: 100%
                          top: 40%
                          left: 50%
                        styles:
                          card:
                            - filter: opacity(0%)
                        type: 'custom:button-card'
                      - aspect_ratio: 1/1
                        show_name: false
                        show_icon: true
                        icon: 'mdi:skip-next-circle'
                        type: 'custom:button-card'
                        size: 100%
                        entity: media_player.lesboutin
                        style:
                          right: '-5%'
                          top: 50%
                          height: 25%
                          width: 25%
                        state:
                          - styles:
                              icon:
                                - filter: opacity(100%)
                                - transition: all 0.5s ease
                                - color: '#FFFFFF' #color of button while paused
                            value: paused
                        styles:
                          card:
                            - padding: 0px
                            - border-radius: 50%
                          icon:
                            - filter: opacity(30%)
                            - transition: all 0.5s ease
                            - color: var(--music-accent-color) #color of button while playing
                        tap_action:
                          action: call-service
                          service: media_player.media_next_track
                          service_data:
                            entity_id: media_player.lesboutin
                          haptic: medium
                        hold_action:
                          action: none
                      - aspect_ratio: 1/1
                        show_name: false
                        show_icon: true
                        icon: 'mdi:skip-previous-circle'
                        type: 'custom:button-card'
                        size: 100%
                        entity: media_player.lesboutin
                        style:
                          right: 55%
                          top: 50%
                          height: 25%
                          width: 25%
                        state:
                          - styles:
                              icon:
                                - filter: opacity(100%)
                                - transition: all 0.5s ease
                                - color: '#FFFFFF' #color of button while paused
                            value: paused
                        styles:
                          card:
                            - padding: 0px
                            - border-radius: 50%
                          icon:
                            - filter: opacity(30%)
                            - transition: all 0.5s ease
                            - color: var(--music-accent-color) #color of button while playing
                        tap_action:
                          action: call-service
                          service: media_player.media_previous_track
                          service_data:
                            entity_id: media_player.lesboutin
                          haptic: medium
                        hold_action:
                          action: none
                      - aspect_ratio: 1/1
                        show_name: false
                        show_icon: true
                        icon: 'mdi:pause-circle'
                        type: 'custom:button-card'
                        size: 100%
                        entity: media_player.lesboutin
                        style:
                          right: 10%
                          top: 50%
                          height: 40%
                          width: 40%
                        state:
                          - styles:
                              icon:
                                - filter: opacity(100%)
                                - transition: all 0.5s ease
                                - color: '#FFFFFF' #color of button while paused
                            value: paused
                            icon: 'mdi:play-circle'
                        styles:
                          card:
                            - padding: 0px
                            - border-radius: 50%
                          icon:
                            - filter: opacity(30%)
                            - transition: all 0.5s ease
                            - color: var(--music-accent-color) #color of button while playing
                        tap_action:
                          action: call-service
                          service: media_player.media_play_pause
                          service_data:
                            entity_id: media_player.lesboutin
                          haptic: medium
                        hold_action:
                          action: none
                      - aspect_ratio: 1/1
                        show_name: false
                        show_icon: true
                        icon: 'mdi:heart-plus'
                        type: 'custom:button-card'
                        size: 90%
                        style:
                          right: 10%
                          top: 88%
                          height: 5%
                          width: 5%
                        styles:
                          card:
                            - padding: 0px
                            - border-radius: 50%
                          icon:
                            - color: var(--text-color)
                        tap_action:
                          action: call-service
                          service: script.add_to_playlist_sonos
                          haptic: medium
                        hold_action:
                          action: none
                      - aspect_ratio: 1/1
                        show_name: false
                        show_icon: true
                        icon: 'mdi:power-standby'
                        type: 'custom:button-card'
                        size: 90%
                        style:
                          right: 2%
                          top: 88%
                          height: 5%
                          width: 5%
                        styles:
                          card:
                            - padding: 0px
                            - border-radius: 50%
                          icon:
                            - color: var(--text-color)
                        tap_action:
                          action: call-service
                          service: media_player.turn_off
                          service_data:
                            entity_id: media_player.lesboutin
                          haptic: medium
                        hold_action:
                          action: none
                      - aspect_ratio: 1/1
                        show_name: false
                        show_icon: true
                        icon: 'mdi:dots-horizontal-circle'
                        type: 'custom:button-card'
                        size: 90%
                        style:
                          right: 18%
                          top: 88%
                          height: 5%
                          width: 5%
                        styles:
                          card:
                            - padding: 0px
                            - border-radius: 50%
                          icon:
                            - color: var(--text-color)
                        tap_action:
                          action: call-service
                          service: browser_mod.more_info
                          service_data:
                            entity_id: media_player.lesboutin
                            deviceID: this
                          haptic: medium
                        hold_action:
                          action: none

              - type: grid
                columns: 2
                cards:
                  - type: custom:button-card
                    entity: media_player.livingroom_appletv
                    name: Living Room
                    template:
                      - media
                      - icon_apple_tv

                  - type: custom:button-card
                    name: Bedroom
                    entity: media_player.bedroom_appletv
                    template:
                      - media
                      - icon_apple_tv

                  - type: custom:button-card
                    entity: media_player.spotify_cheznath
                    name: Spotify
                    template:
                      - media
                      - icon_spotify

                  - type: custom:button-card
                    entity: media_player.livingroom_sonos
                    name: Sonos
                    template:
                      - media
                      - icon_sonos

Would you be able to help me out, trying to figure things out?

I’m also using this in my config:

media_player:
  - platform: universal
    name: media_player.lesboutin
    children:
      - media_player.bathroom_sonos
      - media_player.livingroom_sonos
      - media_player.onkyo_tx_nr686_f0935c_2
      - media_player.spotify_cheznath

And I’m using your script too. But I’m guessing I’m missing something with iftt.

alias: add_to_playlist_sonos
sequence:
  - service: ifttt.trigger
    data_template:
      event: add_to_playlist
      value1: '{{ states.media_player.lesboutin.attributes.media_title }}'
      value2: '{{ states.media_player.lesboutin.attributes.media_artist }}'
mode: single

Thanks. And I realize it’s been a while for you. :joy:
No problem if you can’t bother.
Thanks again

EDIT: Yes, I do have card-mod, mini media player and button card. also using your overlay.svg in the correct folder.

Oh, when music is playing it look the same.

How can I not have the code in there? And bringing down the buttons?

@xADDRx
Do you remember what you did to bring those buttons down?

I’m getting places… I got the damn overlay to now be seen. Now, what is that css text in the button? How can I take that out?

So I’m guessing this needs to be re written with card_mod 3 changes.
I’ll try and see if I can do that? But I doubt it.

EDIT: I got tit working.
I just switched - type: 'custom:mod-card' to

card_mod:

Hi, I’ve been busy on holidays. Have you gotten everything working now? Yes, I changed the codes when card_mod was updated. I don’t visit this thread much, so haven’t updated the code on here.

@ASNNetworks Yes, it’s all working great.
I had one though. When nothing is playing, it’s blank right? Do you have any else going on while it’s blank? I mean, did you update it to show something else or you just see it blank?

Glad you got it working. I just updated the code in my post. Btw regarding the favorite/heart button: I used that prior when I used Spotcast and created a script using IFTTT. I switched all my audio to Logitech Media Server for a while now and ditched IFTTT. Currently it’s a non-functional button in my own setup.

When nothing is playing the card is blank, since there is no artwork. In my case all my media players are hidden. All my speakers have their own media card, which are all inside their own conditional card. So when a speaker is off, the specific media card is hidden. I also wrapped them all inside one swiper card, so I can easily swipe between media cards/speakers.

See in action: Imgur: The magic of the Internet

Oh wow, that’s cool. Something new I have to do now… argh… haha. It just never ends it seems.
You wouldn’t happen to have your code on a github. :wink:
I know Mattias also did something like this, with conditions. I didn’t dwell into conditions yet.
On your code, the only thing that doesn’t work are the actions. For some reason, the three dot actions and the main whole button press action don’t work at all.