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

ASNNetworks · January 7, 2022, 12:47pm

UPDATE: added fast forward and rewind templates to skip/previous button. Holding the skip button fast forwards 15 seconds. Holding previous button rewinds 15 seconds. Keep holding will keep forwarding/rewinding 15 seconds, every 1 second. I added that to the original code. For people wanting to add the without searching for code, replace this part with the current hold_actions for both buttons. Ofcourse you can change the seconds and hold repeat durations.

Hold to fast forward

          hold_action:
            action: call-service
            service: media_player.media_seek
            service_data:
              seek_position: "[[[ return entity.attributes.media_position + 15 ]]]"
              entity_id: '[[entity]]'
            haptic: heavy          
            repeat: 1000

Hold to rewind

          hold_action:
            action: call-service
            service: media_player.media_seek
            service_data:
              seek_position: "[[[ return entity.attributes.media_position - 15 ]]]"
              entity_id: '[[entity]]'
            haptic: heavy          
            repeat: 1000

elik745i · January 22, 2022, 9:14am

Stupid question, but how to play mp3 and other files stored in memory using this player?

ASNNetworks · January 22, 2022, 2:54pm

This is not a player, it’s a control card (like default media card and mini-media-player card). Use the media browser in your sidebar to play your media. See the media source integration on how to play local music with Home Assistant: Media Source - Home Assistant

note: this has nothing to do with my player card. I don’t use local music, so I can’t help on this matter further.

xADDRx · February 3, 2022, 12:36pm

HI ASNNetworks,

thank you so much, Great Style.

One Question:

Why isn’t border-Radius shown to me like you, even though I’m using the same code.

ASNNetworks · February 3, 2022, 4:50pm

I use border-radius for my cards in my theme, instead of the picture-elements card. Add --ha-card-border-radius to the card-mod variable at the top and it should work outside of theme. Change 20px to what you like.

media_card_speaker:
  card:
    type: picture-elements
    image: local/overlay.svg
    card_mod:
      style: |
        ha-card {
          --ha-card-background: none !important;
          --ha-card-border-radius: 20px !important;
          # box-shadow: none !important;
        }

I did this because most people have their own border-radius setup (or have it all square), so it won’t override it with different radius.

robbhar · April 18, 2022, 6:58pm

Having trouble getting this running, I have added the button under template in lovelace ui and the speaker under decluttering templates, then created card with entity setup correctly. This is what I get:
"Cannot read properties of null (reading ‘media_card_speaker’)
When I look in the lovelace yaml after both templates and decluttering templates it says “null”. Any ideas what I have done wrong?

robbhar · April 18, 2022, 7:33pm

Argh…yaml spacing, but now getting error button card is missing. I have, just above the decluttering templates entry:
templates:
music_card_speaker_button:
aspect_ratio: 1/1
show_name: false
show_icon: true
size: 100%
entity: ‘[[entity]]’
styles:
card:
- background: none
- padding: 0px
- border-radius: 50%
- box-shadow: none
- ‘-webkit-box-shadow’: none
- border-style: none
icon:
- color: rgba(255, 255, 255, 1)
- filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.7))

robbhar · April 18, 2022, 7:37pm

so is the template in the wrong location? this is what I see:

ASNNetworks · April 18, 2022, 7:54pm

Please read button-card and decluttering-card README’s from their Github. You’re not using the templates correctly.

Also please post code inside the code format, like this:

- Paste your code in here so it uses the correct formatting and indents.
  Like this

Button-card template should be declared in your lovelace yaml at the top under:

button_card_templates:

And for decluttering- card templates:

decluttering_templates:

So all you need to do is add those two in your lovelace yaml and copy/paste the templates under in and make sure your indents are correct.

robbhar · April 18, 2022, 8:42pm

Wow thanks for the quick response. I have moved the button card info and now it is working! I have visited several dozen websites about the lovelace ui yaml file and how to use templates not seen anything clearly stated about where to place these.
New to HA, now I know I will put all code in the correct format.

ASNNetworks · April 18, 2022, 8:57pm

Happy you got it working

fantastrick · May 13, 2022, 1:19pm

Will this be released in HACS?

ASNNetworks · May 13, 2022, 2:16pm

Unfortunately not. I have no experience with coding in order to create a custom card. My card basically uses other cards to build this layout. I would need to create a complete stand alone card where I re-write the used components. I would love to do this, because then I won’t depend on other cards, but I have no coding experience at the moment.

weemaba999 · June 22, 2022, 7:01am

Great Work @asnnetworks, but one more small question : how can we ‘shrink’ that card ? Currently it’s taking a lot of space on my dashboard

ASNNetworks · June 22, 2022, 11:10am

It just takes the whole width like any card works. So if you want to take it less space, use it in other cards like horizontal-stack, vertical-stack, grid or layout-card.

Posreg · August 22, 2022, 10:08pm

this post is from almost 2 years ago, but i still hope someone would be able to help here…
since few days I;m trying to style the media player pop up card
I saw your examples, but I feel that I;m missing something important, but pretty easy.
What I understood I should define style in the lovelace editor , correct?
Can you please share the direct code:

what I currently have:

type: custom:stack-in-card
background: false
mode: horizontal
cards:
  - type: custom:media_player-popup-card
    entity: media_player.salon
    icon: mdi:television
    fullscreen: false
    actionsInARow: 1
    sliderWidth: 80px
    sliderHeight: 150px
    actionSize: 50px
    borderRadius: 12px
    sliderTrackColor: grey
    card_mod:
      style: |
        ha-card {
          background: green;
          box-shadow: none;
        }
    actions:
      - service: media_player.turn_off
        service_data:
          entity_id: media_player.salon
        name: Salon
        icon: mdi:power
  - type: custom:media_player-popup-card
    entity: media_player.lazienka_2
    icon: mdi:toilet
    fullscreen: false
    actionsInARow: 1
    sliderWidth: 80px
    sliderHeight: 150px
    actionSize: 50px
    sliderTrackColor: grey
    actions:
      - service: media_player.turn_off
        service_data:
          entity_id: media_player.lazienka_2
        name: Łazienka
        icon: mdi:power
  - type: custom:media_player-popup-card
    entity: media_player.sypialnia
    icon: mdi:bed
    fullscreen: false
    actionsInARow: 1
    sliderWidth: 80px
    sliderHeight: 150px
    actionSize: 50px
    sliderTrackColor: grey
    actions:
      - service: media_player.turn_off
        service_data:
          entity_id: media_player.sypialnia
        name: Sypialnia
        icon: mdi:power

what I want to achieve - change the background of this card

I really appreciate any advise!!!

ASNNetworks · August 23, 2022, 8:31am

Hi, from what I can remember, editing the background of that card was very annoying. I wasn’t so experienced with card_mod shadows and variables, so I ended up editing the code from the card and saving that as an alternative. It was this line in the .js file of that card:

        :host {
            background-color: var(--background-popcard);
        }

And then I added background-popcard in my themes as a color, so I could change that more easily. In my case I wanted the background to be completely gone, so I used:

background-popcard: 'rgba(0, 0, 0, 0.00)'

But you should be able to alter with card_mod. You should ask for help in the card_mod thread, since that’s also what you’re trying to use. There are some great minds there, so I’m sure they can help you find the correct code.

I don’t use this card anymore the way I used it in a horizontal-stack, so I can’t help you any further.

bachoo786 · August 23, 2022, 2:20pm

Hey Steve love your dashboard. Just wonder how do you get the football games schedule showing on HA?

Steveuk · August 23, 2022, 2:47pm

Thanks
I can’t take credit for that part though a guy on Reddit helped me set it a while ago now.
It’s basically a node red flow with code that drags info from the sky sports fixture list so if that changes this changes.
HERES the original post where he helps me.
I can export my node red flow next time I’m on my laptop then you just import that and copy across the images to the correct folder
And if you want the custom pop up you need to add some custom cards and some code to the “raw configuration”
It’s all on that link if you want to try yourself for now.

bachoo786 · August 23, 2022, 3:21pm

thanks mate will have a go at it