Media player card scale

Configuration Frontend
1

Hi,

I created a wall panel with an rpi4 and a 7" display and it is working great. My only problem is that using the standard media player card the controls are a bit too small. I can’t find a way to scale the card and was wondering if anyone has any idea how I can get a larger player. I have HACS installed but I didn’t see anything that offered scaling.

TIA,

Jon

2

I’m using this to adjust the media info to the size of my tablet screen, it uses the custom mod-card for the necessary adjustment(s):

type: custom:mod-card
style:
  .: |
    ha-card {
      overflow: hidden;
      width: 79%;
      margin: 0 auto;
      padding-top: 0px;
    }
card:
  type: horizontal-stack
  cards:
    - type: custom:mini-media-player
      entity: media_player.allhome
      group: false
      volume_stateless: false
      toggle_power: true
      artwork: full-cover
      sound_mode: full
      info: scroll

Not sure, if this is what you’re looking for or if you just want the controls to be larger.

3
  1. The posted code will not work since card-mod changed a syntax long time ago. Now it needs “card_mod” keyword. See details in Docs. (of course with my due respect to the person who proposed this code).
  2. Probably there is no need to place the media-player card inside a stack and then use mod-card - instead a user can directly apply a card-mod to the media-player card directly.
  3. The proposed code is about resizing a whole card. Probably resizing / repositioning a particular UI element might be enough. Suggest OP to ask in the main card-mod thread which already has plenty of examples for media-player cards (both stock and custom).
4

What chairstacker posted will help you out if you switch to using the custom:mini-media-player which is also what I use. However, since you’re using the standard media player you’re going to need something different.

Question: Which View type are you using? Masonry, panel, or one of the views from the custom:layout-card? I’m asking because I’m trying to understand the column constraints you’re working with. For example, if you’re using the panel view, the easiest solution might be to simply scale the entire card larger, as it doesn’t have the same column constraints as other views. However, with other views, you’ll need to take those constraints into consideration.

Rather than posting a bunch of code that may not work or isn’t what you want, I instead posted just a few lines for you to try. You’ll need to install card-mod from HACS in order for it to work. It should increase the size of the control buttons on your media player. I included a screenshot so you can see what it should look like once applied.

type: media-control
entity: ENTITY_ID OF YOUR MEDIA PLAYER
card_mod:
  style:
    .top-info: |
      .title-controls .controls {
        scale: 150%;
        justify-content: center;
      }

image
image1135×537 76.9 KB

5

This is not a valid card-mod code.
“card_mod” keyword is missing. Extra indent. Pipe is misplaced. The “player: null” is wrong.

Update: the code was corrected.

1 Like
6

It also won’t work because the code is for the custom:mini-media-player and the OP is using the standard media player.

Thank you for pointing this out. I accidentally deleted “card_mod:” when I was editing the part after “entity:” I also forgot to remove “.player: null” after I was done testing it.

Your post was the first place I checked but none of your examples on your Styling stock Media player card post are for resizing the card. Your examples are only for coloring it unless I missed something. I tried to do the best I could but I’m sure you probably have a more efficient way of styling the size of the elements inside of the card. I always get stuck when it comes to text/icons that are in a flex box inside of a column and extend outside of the card. I don’t know enough about CSS to understand why that’s done and the correct way to handle it.

7

That examples which I usually post for any card - are not covering all possible needs, are just a staring point. They are supposed to make a user to learn himself.
Looking at your way - using a scale and then fixing an alignment - I would say this this is a right method.
Good that you did it yourself!!!
Cannot test it myself now, away from a PC.

1 Like
8

I can use the browser element inspector to figure out most of the styling but I get stuck with the more advanced stuff involving shadow-root and the use of $ or when .: needs to be applied. I’m probably making it a lot harder than it actually is but sooner or later I’ll eventually figure it all out.

9

Look, I have never dealt with CSS (only heard a little about it), and I started learning it when started using card-mod (November 2020), there is no any rocket science about it (btw I specialized in cruise missiles, funny fact), so you will definitely succeed if you want. Since I have only basic knowledge about css - card-modding for me is mainly try/fail/repeat/succeed thing.

1 Like
10

Thanks to everyone for responding. Unfortunately, most of the solutions offered required more effort than I was hoping to put into it. I was hoping I had just missed an easy way to scale a card. I solved my problem(sort of) by downloading the mini media player from HACS. It offers a scale option that will increase the size of the card. Not perfect, but it works.

Thanks again,

Jon