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

aladin · November 15, 2020, 4:00pm

Thks for answering so Quick
I will continue with requirements as expected

ASNNetworks · November 15, 2020, 4:11pm

Keep me posted !

aladin · November 16, 2020, 8:36pm

Hi again
I finally succeded to have rid off the error after deleting each style bloc
Example in this extract

    tap_action:
      action: none
    hold_action:
      action: more-info
    style:
      height: 80%
      width: 100%
      top: 40%
      left: 50%

got the error

And :

    tap_action:
      action: none
    hold_action:
      action: more-info
#    style:
#      height: 80%
#      width: 100%
#      top: 40%
#      left: 50%

the error gone

hope it is clear ?

ASNNetworks · November 16, 2020, 8:46pm

So you can confirm you have custom-button-card, mini-media-player and card-mod installed and working? And you have the overlay.svg in that location stored that you have in your code?

Please first check you have all the components needed installed ánd working. Otherwise I’m just wasting time trying to figure out what the issue is if that’s not certain.

aladin · November 17, 2020, 2:25pm

You are right
Sorry for disturbing you.
I realized that card-mod wad not active even if I follow the installation to do it

May be its my problem. I continue to investigate

Question : how to 'patch" card-mod to use mod-card instead ? It is not clear
to me.

ASNNetworks · November 17, 2020, 2:40pm

Mod-card isn’t a patch. You can use that by simply using the code. Card mod needs to be fully installed and working ofcourse. Then you can just use the ‘mod-card’ part of my code, no patch needed.

Read for more info: https://github.com/thomasloven/lovelace-card-mod#mod-card

aladin · November 20, 2020, 5:10pm

Hi again me
I finally know hos to solve the problem and I would like to share it with you in case of other diag from you.

I opened an issue at card-mod and at hacs without succes
AND I finally found what was wrong from my side :
Each style block have been change to fix it on my installation :

style:
height: 80%
width: 100%
top: 40%
left: 50%

instead of 2 spaces in front of each attribute for style
Now I have no error but i dont have the miniplayer occupying the whole overlaping
What should be change to have the size of mini player alligne with overlay ?
I tried to change height without success

ASNNetworks · November 20, 2020, 11:52pm

The card is already setup properly to have the mini player alligne with the overlay, that’s the whole point of the syling I experimented with myself. Honestly I have no clue what you’re doing and why it doesn’t work for you. Other users have copied the code, pasted it and edited the entities and variables. And have it working. Theres nothing I can do to check, because the code works for me everytime. Even the code you gave me which gave you issues, works fine on my system.

Edit: Judging by your code you are not using card mod correctly. You say:

instead of 2 spaces in front of each attribute for style

You left out the indentations (the 2 spaces), which simply removes the whole style. That’s why your card is not alligned, because you have NO style setup. Your issue is card mod and how to use it. I honestly think you’re not totally sure how card-mod works, which gives you issues.

So you didn’t ‘fix’ anything and you didn’t find out what was wrong on your side. You simply changed the code of style, which made the code become empty. Removing the spaces literally takes out the style. It HAS to have the spaces in order for card mod to even function.

Edit 2: reading your Github ticket now and I think you are confused about card-mod and mod-card. Which are part of the same component, but used very differently. If you have card-mod installed and you have succesfully styled something (like on Github screenshot), then my code should work for you now. Just copy it, edit the parts and save it. USE the indentations, do NOT remove the spaces under style.

aladin · November 27, 2020, 11:27am

Hi

you were completlye right

I put the browser in dev mode and I realize my problem was link to dedondancy in my ressources I presume

Now every thing is working welll

Sorry for disturbing you

Thanks a lot for your efforts

Best regards

Aladin

ASNNetworks · November 27, 2020, 12:03pm

Glad it’s all sorted !

EvanPerks · November 28, 2020, 10:09am

Really awesome project I have already implemented in my lovelace with your last setup, so far so good, now i’m in a bit of trouble as i am trying to implement the volume slider with the Media player popup card under my player, as you showed in the first setup, i have code but when I put it on lovelace it disappears, i need another overlay for placing that too ?

The code is :

      - type: 'custom:media_player-popup-card'
        entity: media_player.spotify
        fullscreen: false
        icon: 'no'
        sliderWidth: 60px
        sliderHeight: 125px
        sliderThumbColor: '#00b7ff'
        sliderTrackColor: '#a1a1a1'

Any help is appreciated,
Thank You

ASNNetworks · November 28, 2020, 4:01pm

Hi, what do you mean by this?

I don’t have a volume slider here. Or do you mean a different project?

EvanPerks · November 28, 2020, 4:06pm

Yeah, sorry i mean this :

ASNNetworks · November 28, 2020, 4:51pm

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 · November 30, 2020, 4:48pm

Thank you so much for this work!!

I use you code (update):

How can I put the buttons down?

ASNNetworks · November 30, 2020, 10:00pm

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 · December 1, 2020, 10:01am

It works now :). Thank you!

Umbe · December 28, 2020, 9:55pm

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 · December 29, 2020, 1:36am

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 · December 29, 2020, 8:11am

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