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

You can hide the icon on mini media player card, and add a button card on that location. The ‘more’ button I created (the circle with dots in them) opens the more-info dialogue. You can also envoke a popup using browser mod.

Thanks. I’ve gotten browser_mod popup to work, but do you know why it doesn’t accepts “this” as entity_id?

                    action: call-service
                    service: browser_mod.popup
                    service_data:
                      deviceID: this
                      style: |
                        :host .content {
                          width: calc(400px + 555px);
                        }                      
                      card:
                        type: custom:media_player-popup-card
                        actions:
                          - service: media_player.media_previous_track
                            service_data:
                              entity_id: this
                            name: previous
                            icon: mdi:skip-previous
                          - service: media_player.media_play_pause
                            service_data:
                              entity_id: this
                            name: play/pause
                            icon: mdi:play-pause
                          - service: media_player.media_next_track
                            service_data:
                              entity_id: this
                            name: next
                            icon: mdi:skip-next

You’re mixing up the commands and components. this command is for browser mod service calls. Where you need to use it as deviceID: this. You have that as well, so I believe you understand how browser mod works.

But in your code, you’re trying to use this inside media_player-popup-card. That card doesn’t support the this option. More info on media_player-popup-card and all the options see GitHub - DBuit/media_player-popup-card

Thanks for explaining. Put in entity: media_player.abdc. Now the popup works, but I get this?


How would you style it, to give it a clean look like in DBuit’s example?
It’s implemented in Matthias Persson’s setup, in a swipe card on your mini_media_player setup.

Thanks in advance

You’re missing the syle options. Since a few versions ago HA and browser mod changed, which change styling of popup cards. You can use DBuit’s example of his light popup-card. Change the settings to your liking :slight_smile:

GitHub - DBuit/light-popup-card: Lovelace card to use as custom pop-up for light in homekit style

Scroll below for his style codes.

    style:
      $: |
        .mdc-dialog .mdc-dialog__container {
          width: 100%;
        }
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          width:100%;
          box-shadow:none;
        }
      .: |
        :host {
          --mdc-theme-surface: rgba(0,0,0,0);
          --secondary-background-color: rgba(0,0,0,0);
          --ha-card-background: rgba(0,0,0,0);
          --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
          --mdc-dialog-min-height: 100%;
          --mdc-dialog-min-width: 100%;
          --mdc-dialog-max-width: 100%;
        }
        mwc-icon-button {
          color: #FFF;
        }

Cool, thanks man!
Works perfectly.

Do you know if it’s possible to fully remove the “popup background” or make it fit the full screen?


Another question:
Have you found a nice way to use the built-in speaker group management. It looks like this for me…
2020-12-30_15h45_40

1 Like

Hi , i tried to use your card and on the 3 dots placing the popup… but nothing show up.
any idea?
i actually have card mod but no configutation at all, shall i configure something in specific ?
thanks

                            - 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.popup
                                service_data:
                                  deviceID: this
                                  style: |
                                    :host .content {
                                      width: calc(400px + 555px);
                                    }                      
                                  card:
                                    type: custom:media_player-popup-card
                                    actions:
                                      - service: media_player.media_previous_track
                                        service_data:
                                          entity_id: media_player.pi1
                                        name: previous
                                        icon: mdi:skip-previous
                                      - service: media_player.media_play_pause
                                        service_data:
                                          entity_id: media_player.pi1
                                        name: play/pause
                                        icon: mdi:play-pause
                                      - service: media_player.media_next_track
                                        service_data:
                                          entity_id: media_player.pi1
                                        name: next
                                        icon: mdi:skip-next
                                    style:
                                      $: |
                                        .mdc-dialog .mdc-dialog__container {
                                          width: 100%;
                                        }
                                        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
                                          width:100%;
                                          box-shadow:none;
                                        }
                                      .: |
                                        :host {
                                          --mdc-theme-surface: rgba(0,0,0,0);
                                          --secondary-background-color: rgba(0,0,0,0);
                                          --ha-card-background: rgba(0,0,0,0);
                                          --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
                                          --mdc-dialog-min-height: 100%;
                                          --mdc-dialog-min-width: 100%;
                                          --mdc-dialog-max-width: 100%;
                                        }
                                        mwc-icon-button {
                                          color: #FFF;
                                        }

Hi @Umbe

Just made the exact same thing. I can see that you are trying to style the media_player-popup-card. It should be on the styling you have under browser_mod.popup.
See my config below.

                    action: call-service
                    service: browser_mod.popup
                    service_data:
                      title: Sonos Alrum
                      hide_header: true
                      deviceID: this
                      style:
                        $: |
                          .mdc-dialog .mdc-dialog__container {
                            width: 100%;
                          }
                          .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
                            width:100%;
                            box-shadow:none;
                          }
                        .: |
                          :host {
                            --mdc-theme-surface: rgba(0,0,0,0);
                            --secondary-background-color: rgba(0,0,0,0);
                            --ha-card-background: rgba(0,0,0,0);
                            --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
                            --mdc-dialog-min-height: 100%;
                            --mdc-dialog-min-width: 100%;
                            --mdc-dialog-max-width: 100%;
                          }
                          mwc-icon-button {
                            color: #FFF;
                          }                
                      card:
                        type: custom:media_player-popup-card
                        entity: media_player.alrum
                        icon: none
                        fullscreen: false                                                
                        actions:
                          - service: media_player.media_previous_track
                            service_data:
                              entity_id: this
                            name: previous
                            icon: mdi:skip-previous
                          - service: media_player.media_play_pause
                            service_data:
                              entity_id: this
                            name: play/pause
                            icon: mdi:play-pause
                          - service: media_player.media_next_track
                            service_data:
                              entity_id: this
                            name: next
                            icon: mdi:skip-next

Hope it works

1 Like

thanks so much!!
just a question , you know why is on the left instead in the middle ?
and also how to fix the dot instead of the line of the volume ?

anyway… thanks!

Hi
Yes, just change to fullscreen: true.

Sorry no. That seems strange. Works fine for me

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 ?