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

[ASNNetworks]

Yeah, that’s an entirely different concept/project. So what I understand is that you’re basically having issues with displaying the media player popup_card. This is not related to the media player code of mine on this thread though.

You should ask in the thread of that card if you’re having issues displaying the card. I have this code myself in different places in my UI and works fine (this is light popup as example, but identical for media player popup):

                                  - borderRadius: 30px
                                    brightnessHeight: 280px
                                    brightnessWidth: 150px
                                    icon: 'mdi:speaker-group'
                                    entity: light.afzuigkap
                                    fullscreen: false
                                    sliderThumbColor: var(--light-accent-color)
                                    sliderHeight: 280px
                                    switchWidth: 150px
                                    type: 'custom:light-popup-card'

Perhaps icon: no is the issue. I use a non-existing icon code so it doesn’t show. (mdi:speaker-group doesn’t exist). Try changing that, maybe icon: no is not a correct syntax.

In any case: the volume slider is not part of this media player code I wrote. So it should be a separate card and has nothing to do with this player.

[xADDRx (Ben)]

Thank you so much for this work!!

I use you code (update):

How can I put the buttons down?

[ASNNetworks]

No idea. The code I posted works exactly like the screenshot. So either you’re not using the code correctly (the style code) or you’re having issues with card mod or other components.

[xADDRx (Ben)]

It works now :). Thank you!

[Umbe (Umberto)]

Hi , great stuff… i have 3 rpi with picoreplayer , using playlist of lms , can you share the view with players and volumes and i will give a try to adjust this to my environment?
Thanks so much

[ASNNetworks]

I don’t use that concept anymore. It was an experiment to learn and try new ways. Ultimately I decided that it’s better to have popup volume sliders instead, so I have more media content. I use LMS material skin now.

[Umbe (Umberto)]

Thanks , i am using material too, but the volume sliders and main functions were nice

[Martin_Pejstrup (mpejstrup)]

Hi @ASNNetworks

Really cool concept. I have been looking for something like it (not having the skills to do it myself).

Can’t wait to try and implement it in my setup.

Great work man!

[Martin_Pejstrup (mpejstrup)]

Hi @ASNNetworks

Didn’t last long untill I needed a hint

I want to make the icon “multiple speakers” into a popup for further media control. Volume, group/ungroup my Sonos, etc.

Shouldn’t this work as a tap_action button?

            - type: picture-elements
              image: local/overlay.svg
              style: |
                ha-card {
                  --ha-card-background: none !important;
                  box-shadow: none !important;
                }                          
              elements:
                - aspect_ratio: 1/1
                  entity: media_player.alrum
                  icon: 'mdi:speaker-multiple'
                  label: Sonos Connect
                  name: Alrum
                  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.alrum
                    group: false
                    hide:
                      controls: true
                      icon: false
                      name: false
                      power: true
                      runtime: false
                      source: true
                      volume: true
                    hold_action:
                      action: none
                    tap_action: !include popup/popup_media_card.yaml 
                    icon: 'mdi:speaker-multiple'
                    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'

Another question: Is there a way to integrate the volume slider in a nice way? Turning it to false, doesn’t look nice at all.

Thanks in advance

[ASNNetworks]

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.

[Martin_Pejstrup (mpejstrup)]

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

[ASNNetworks]

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

[Martin_Pejstrup (mpejstrup)]

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

[ASNNetworks]

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

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;
        }

[Martin_Pejstrup (mpejstrup)]

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…

[Umbe (Umberto)]

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;
                                        }

[Martin_Pejstrup (mpejstrup)]

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

[Umbe (Umberto)]

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!

[Martin_Pejstrup (mpejstrup)]

Hi
Yes, just change to fullscreen: true.

Sorry no. That seems strange. Works fine for me

[Umbe (Umberto)]

Hi , yes was that

                        fullscreen: false   

thank you