Please read the docs and try them. Look at when_standby.
Iāve just tried both, with no change to behaviour.
when_standby: true
when_idle: true
Then I think your options are to use card-mod (expanding on what you have in the config you shared) or make a background image that matches what size a cover would be when the player is on.
Thanks Pieter, I hadnt thought of the background image, that could work wellā¦ will investigate!
While investigating how to do the background image, I came across the idea of using card_mod to set hight. Iām sure Iād tried that already, but nevertheless tried again and voila, the below solves the problem. Now I just need to work out how to centre the text vertically (place-self: center doesnāt seem to work in this section)
- type: custom:mini-media-player
card_mod:
style: |
ha-card {
height: 65px;
}Hi,
Is it possible to have vertical volume slider?
This thread was a looong time ago! Need to pick your brains. I have the yaml belowā¦based on your post. I have two questions.
First, you will note that I am repeating exactly the same styling for each mini-media-player card. (I will eventually have 8 of them!). There must be a way of moving the styling up a level, once, so that all cards reflect the styling. Try as I might, I canāt get it to work. Maybe its a css specificity thing? Or a syntax thing. Have tried 50 combos. to no avail.
Second, Iād like a bottom divider (border) between the cards. Just a 1 pixel straight line. No matter what I do, even editing the css in dev tools, I canāt get it to work!
Thanks in advance.
- type: custom:vertical-stack-in-card
title: Matrix
cards:
- type: custom:mini-media-player
entity: media_player.xantech8_main_xxx
hide:
play_pause: true
prev: true
next: true
info: true
volume_level: false
group: false
source: full
sound_mode: full
card_mod:
style: |
ha-card div.mmp-player {
padding-bottom: 0px;
}
ha-card div.mmp-player__adds {
min-height:40px !important;
}
- type: custom:mini-media-player
entity: media_player.xantech8_z2_porch_rear
hide:
play_pause: true
prev: true
next: true
info: true
volume_level: false
group: false
source: full
sound_mode: full
card_mod:
style: |
ha-card div.mmp-player {
padding-bottom: 0px;
}
ha-card div.mmp-player__adds {
min-height:40px !important;
}
Questions above still valid. But the divider thing is a non-thing.
I have a working integration of mini media player and custom sonos card.
Lookās like this (with full access to favorites, grouping etcā¦ from the sonos card.
I would love to be able to show the currently playing playlist (itās an attribute) in the top right of the mini media player card. Is it possible? Could it be added?
Thanks.
Why not use a decluttering card and put all the players in there. My DAX88 Xantech8 players are done that way.
decluttering_templates:
mediaplayer:
default:
- mediaplayer: media_player.xantech8_deck
card:
type: custom:mushroom-media-player-card
tap_action:
action: call-service
service: media_player.toggle
target:
entity_id: '[[mediaplayer]]'
entity: '[[mediaplayer]]'
layout: horizontal
fill-container: true
show_volume_level: true
collapsible_controls: false
use_media_info: true
volume_controls:
- volume_set
card_mod:
style:
mushroom-shape-icon$: |
.shape {
perspective: 7px;
}
.: |
ha-state-icon {
{% if is_state(config.entity,'on') %}
{% set animation_sec_min = 0.15 %}
{% set animation_sec_max = 5 %}
{% set vol_min = 0 %}
{% set vol_max = 0.7 %}
{% if state_attr(config.entity,'volume_level') > vol_max %}
{% set input_value = vol_max %}
{% else %}
{% set input_value = state_attr(config.entity,'volume_level') %}
{% endif %}
{% set output_value = (input_value - vol_max) / (vol_min - vol_max) * (animation_sec_max - animation_sec_min) + animation_sec_min %}
animation: music {{output_value}}s ease-in-out infinite alternate;
{% endif %}
}
@keyframes music {
0%, 100% { transform: translateY(0px) scaleX(1); }
20% { transform: translateY(2px) scaleX(0.9); }
40% { transform: rotateY(10deg) rotateZ(-10deg); }
60% { transform: translateY(-4px) scaleX(1.1); }
80% { transform: rotateY(-10deg) rotateZ(10deg); }
}
Then I use this to draw every media player (which is actually multiple cards, see image below):
- type: custom:stack-in-card
view_layout:
grid-area: col2
mode: vertical
cards:
- type: custom:auto-entities
card:
type: vertical-stack
show_header_toggle: false
state_color: true
square: false
title: Music Zones
card_param: cards
filter:
template: >
{% for MEDIAPLAYER in states.media_player |
selectattr("entity_id","in",integration_entities("xantech")) -%}
{% set SELECTZONE = "input_select.dax_source_" + (MEDIAPLAYER.entity_id).split("xantech8_")[1]
-%}
{% if MEDIAPLAYER.entity_id != "media_player.xantech8_xantech_house_audio"
-%}
{{
{
'type': 'custom:layout-card',
'layout_type': 'custom:grid-layout',
'layout': {
'max_cols': 3,
'grid-template-columns': 'auto 150px'
},
'cards': [
{
'type': 'custom:decluttering-card',
'template': 'mediaplayer',
'variables': [
{
'mediaplayer': MEDIAPLAYER.entity_id
}
]
},
{
"type": "custom:mushroom-select-card",
"entity": SELECTZONE,
"name": "Set Zone Sources",
"layout": "horizontal",
"icon_type": "none",
"primary_info": "none",
"secondary_info": "none",
"card_mod": {"style": "ha-card {box-shadow: none;}"}
}
]}
}},
{%- endif %}
{%- endfor %}
This is what the whole panel look like, the area highlighted is what this draws:
While this uses mushroom, you could do the same with mini-media-player
i want card corner more radius, why radius not work, anybody help me please
- type: custom:mini-media-player
artwork: full-cover
entity: media_player.demir
idle_view: when_idle
info: scroll
max_volume: 100
name: null
sound_mode: full
volume_stateless: false
hide:
icon: true
name: true
toggle_power: true
card_mod:
style: |
ha-card {
width: 200px;
height: 200px;
card-border-radius: 90px;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
background: transparent;
}
Very cool. Thanks!
Hi, i have an issue with the covers. Its not a mini media player problem, i belive, is most a css problem.
I have the aspect ratio like this:
ha-card {
aspect-ratio: 1 / 1;
}
And i have 3 vertical stacks, all works great this way but if i put the 3 vertical stacks inside and horizontal one in some random songs the player is bigger than the vertical stack as you can see in the image.Only the player is bigger, the rest of the content of the vertical stack remains in its original size. The player overflow the stack and goes behinds the next vertical stack,
If i remove the aspect-ratio the problem is fixed but i need it. Does anyone know a way to avoid this issue?.
Thanks in advance.
EDIT: Easy fix. In case anyone encounters the same problem
ha-card {
aspect-ratio: 1 / 1;
width: 100% !important;
}
Soo close.
Am loving mini media player and card-mod (and lovelace_gen).
But stuck on two things.
In the image below, I want to change the down icon to an input icon, and I want to make the volume and transport icons bigger - and bonus - increase size of power icon.
I have tried every thing I could find in the (long) threadā¦but without success.
Existing yaml snippet below:
- type: custom:mini-media-player
entity: media_player.samsung_q90_porch
volume_stateless: true
artwork: cover
scale: 1.1
source: icon
info: scroll
group: true
hide:
jump: false
volume_level: false
power_state: false
card_mod:
style: |
:host {
margin: 12px 12px 12px 12px !important;
}
.entity__info__name {
font-size: 15px !important;
#color: magenta !important;
}
div.mmp-player__adds mmp-media-controls {
opacity: 75%;
font-size: smaller;
}
div.mmp-player {
border: 0px solid rgba(0,0,0,0.12);
border-radius: 12px 12px 12px 12px;
}
div.mmp-player__adds {
margin-left: 12px;
margin-right: 0px;
}
Can you post the entire cards code? The icon sizes are tied to a multiplier --mmp-unit:
Do you care if the TV gets bigger too?
PSā¦I like the card layout!
type: vertical-stack
cards:
- type: custom:mini-media-player
entity: media_player.media_players
volume_stateless: true
artwork: cover
scale: 1.1
source: icon
info: scroll
group: true
hide:
volume: true
controls: true
progress: true
toggle_power: false
card_mod:
style:
mmp-powerstrip $: |
ha-icon-button {
color: red !important;
}
.: |
ha-card {
--mmp-icon-color: yellow !important;
--mmp-text-color: lime !important;
--mmp-unit: 1.5 !important;
--mdc-icon-size: 50px !important;
}
- type: custom:mini-media-player
entity: media_player.media_players
volume_stateless: true
artwork: null
scale: 1.1
source: icon
info: scroll
group: true
hide:
icon: true
info: true
name: true
volume: false
power: true
progress: true
toggle_power: false
card_mod:
style: |
ha-card {
--mmp-text-color: blue !important;
--mmp-unit: 1.5 !important;
--mdc-icon-size: 50px !important;
}
If my code works for you, Iād still would like the whole card to possibly useā¦
I would prefer individual control. I inserted your helpful code and Iāve tried playing with --mmp-unit, but it wrecks havoc! ).
card_mod:
style: |
ha-card {
--mmp-text-color: blue !important;
--mmp-unit: 1.1 !important;
--mdc-icon-size: 32px !important;
}
:host {
margin: 12px 12px 12px 12px !important;
}
.entity__info__name {
font-size: 15px !important;
#color: magenta !important;
}
div.mmp-player__adds mmp-media-controls {
opacity: 75%;
font-size: smaller;
}
div.mmp-player {
border: 0px solid rgba(0,0,0,0.12);
border-radius: 12px 12px 12px 12px;
}
div.mmp-player__adds {
margin-left: 12px;
margin-right: 0px;
}
The main file code is below, but if you want it all, Iād need to make a repo - which I can. Thereās a lot of code for the fancy dpad!
Full Main File Code:
# lovelace_gen
# setup variables
{% set dpad_entity = "remote.samsung_q90_porch" %}
{% set menu_entity = "media_player.samsung_q90_porch" %}
{% set dpad_menu_icon_color = "white" %}
{% set dpad_menu_bg = "dimgrey" %}
{% set dpad_menu_br = "10px" %}
{% set dpad_bg = "lightgrey" %}
{% set dpad_icon_color = "black" %}
{% set dpad_br_center = "0% 0% 0% 0% / 50%" %}
{% set btn_data = {
"btnTopLeft": {"command": "KEY_INFO", "icon": "mdi:information-variant"},
"btnTopRight": {"command": "KEY_MENU", "icon": "mdi:tools"},
"btnBotLeft": {"command": "KEY_RETURN", "icon": "mdi:arrow-u-left-top"},
"btnBotRight": {"command": "KEY_HOME", "icon": "mdi:home"},
"btnLeft": {"command": "KEY_LEFT", "icon": "mdi:arrow-left-thick"},
"btnUp": {"command": "KEY_UP", "icon": "mdi:arrow-up-thick"},
"btnRight": {"command": "KEY_RIGHT", "icon": "mdi:arrow-right-thick"},
"btnDown": {"command": "KEY_DOWN", "icon": "mdi:arrow-down-thick"},
"btnCenter": {"command": "KEY_ENTER", "icon": "mdi:circle-outline"}
} %}
{% set shortcut_data = [
{"command": "JBL BAR 9.1", "icon": "mdi:hdmi-port", "color": "black"},
{"command": "Peacock TV", "icon": "fapro:peacock#fullcolor"},
{"command": "Prime Video", "icon": "si:prime", "color": "rgb(0,168,225)"},
{"command": "Netflix", "icon": "fapro:netflix#fullcolor"},
{"command": "YouTube TV", "icon": "mdi:youtube-tv", "color": "rgb(255, 0, 0)"},
{"command": "YouTube", "icon": " fapro:youtube#fullcolor"},
{"command": "Apple TV", "icon": "si:appletv", "color": "black", "size":'64px'},
{"command": "ESPN", "icon": "fapro:espn3#fullcolor", "size":'48px'},
{"command": "Paramount+", "icon": "fapro:paramounto#fullcolor", "size":"64px"},
{"command": "KEY_ENTER", "icon": "mdi:circle-outline"},
] %}
{% set test = (btn_data | tojson) %}
# remote_command, remote_icon
# send variables to include file
button_card_templates:
!include
- includes/components/dpad/dpad_bc_template.yaml
- dpad_bg: {{ dpad_bg }}
menu_bg: {{ dpad_menu_bg }}
menu_br: {{ dpad_menu_br }}
dpad_entity: {{ dpad_entity }}
menu_entity: {{ menu_entity }}
menu_icon_color: {{dpad_menu_icon_color}}
dpad_icon_color: {{dpad_icon_color}}
dpad_br_default: {{ dpad_br_center }}
title: My Awesome Home
views:
# View tab title.
- title: Example
type: masonry
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
max-width: 388px;
#lenght: 500px;
#height: 65px;
#border-radius: 20px;
#margin-bottom: 1px;
}
cards:
- type: custom:mini-media-player
entity: media_player.samsung_q90_porch
volume_stateless: true
artwork: cover
scale: 1.1
source: icon
info: scroll
group: true
hide:
jump: false
volume_level: false
power_state: false
card_mod:
style: |
ha-card {
--mmp-text-color: blue !important;
--mmp-unit: 1.1 !important;
--mdc-icon-size: 32px !important;
}
:host {
margin: 12px 12px 12px 12px !important;
}
.entity__info__name {
font-size: 15px !important;
#color: magenta !important;
}
div.mmp-player__adds mmp-media-controls {
opacity: 75%;
font-size: smaller;
}
div.mmp-player {
border: 0px solid rgba(0,0,0,0.12);
border-radius: 12px 12px 12px 12px;
}
div.mmp-player__adds {
margin-left: 12px;
margin-right: 0px;
}
# ********* top menu shortcuts ***********
- !include
- includes/components/services_menu.yaml
- menu_bg: {{ dpad_menu_bg }}
btn_data: {{ btn_data }}
shortcut_data: {{shortcut_data}}
# ********* dpad shortcut ***********
- !include
- includes/components/dpad/dpad.yaml
- dpad_bg: {{ dpad_bg }}
menu_bg: {{ dpad_menu_bg }}
entity: {{ entity }}
menu_icon_color: {{dpad_menu_icon_color}}
dpad_icon_color: {{dpad_icon_color}}
btn_data: {{ btn_data }}
#- type: custom:button-card
# entity: media_player.samsung_q90_porch
# name: >
# [[[
# return entity.attributes['source']
# ]]]
#- type: custom:button-card
# icon: mdi:circle-outline
# name: {{(test | fromjson).btnTopLeft.icon}}
I donāt get the same spacing issues you see with your code. Can you test removing the max width?
--mmp-unit: has to be at least 2.1
type: custom:stack-in-card
card_mod:
style: |
ha-card {
#lenght: 500px;
#height: 65px;
#border-radius: 20px;
#margin-bottom: 1px;
}
cards:
- type: custom:mini-media-player
entity: media_player.media_players
volume_stateless: true
artwork: cover
scale: 1.1
source: icon
info: scroll
group: true
hide:
jump: false
volume_level: false
power_state: false
card_mod:
style: |
ha-card {
--mmp-text-color: blue !important;
--mmp-unit: 2.1 !important;
--mdc-icon-size: 32px !important;
}
:host {
margin: 12px 12px 12px 12px !important;
}
.entity__info__name {
font-size: 15px !important;
color: magenta !important;
}
div.mmp-player__adds mmp-media-controls {
opacity: 75%;
font-size: smaller;
}
div.mmp-player {
border: 0px solid rgba(0,0,0,0.12);
border-radius: 12px 12px 12px 12px;
}
div.mmp-player__adds {
margin-left: 12px;
margin-right: 0px;
}
I think you can scale your mod code down a bit
type: custom:stack-in-card
cards:
- type: custom:mini-media-player
entity: media_player.media_players
volume_stateless: true
artwork: cover
source: icon
info: scroll
group: true
hide:
jump: false
volume_level: false
power_state: false
card_mod:
style: |
ha-card {
--mmp-text-color: blue !important;
--mmp-unit: 2.1 !important;
--mdc-icon-size: 40px !important;
font-size: 10px !important;
}
.entity__info__name {
font-size: 15px !important;
color: magenta !important;
}
.mmp-player__adds mmp-media-controls {
opacity: 75%;
}
}
You rock. Your code got me moving in the right direction!
Below is a pic and below that is the card-mod stuff.
You will note that I did the opposite of scaling down the card-mod code! Iām only a few weeks into homeassistant, yaml, card-mod etcā¦ so Iām using this little component to help me understand how it all works.
I donāt actually understand it all ā but Iāve fudged it and my code works.
Hereās what I think I understand, but would love plain English explanations of:
-
There are two modes in card-mod, object mode and text/css. Default is āobject modeā that letās us navigate to elements. We use a
$:to get into a shadow-root. When we get to the element we want to style we use the pipe (|) + newline, that now puts us into css/text mode for applying the actual styles. -
I donāt know what ā
.:ā actually does, but Iām guessing it moves us up a level in the object hierarchy and we can start with #1 again, from that point in the hierarchy. I donāt quite know why we need the ā.:ā if we donāt need to go up a level, but I canāt find any other way (see ha-icon-button stuff in code below).
Iām sure Iām missing the joke, and certain that I am using terrible syntax to describe it all. As I said Iām a newbie. If folk can unpack #1 and #2 it would be super helpful, for me and all other newbies!
Right, hereās the card:
I have changed the icon sizes and text styles of various elements in mini-media-player and adjusted formatting so it sits nicely with the menu and dpad below.
I would love to switch the dropdown icon for an mdi:import icon, but canāt figure out if and how that would be possible.
And now the code (for the mini-media-player):
- type: custom:mini-media-player
entity: media_player.samsung_q90_porch
volume_stateless: true
artwork: cover
scale: 1.1
source: icon
info: scroll
group: true
hide:
jump: false
volume_level: false
power_state: false
card_mod:
# the pipe ("|") + newline says what follows is a string block.
# we need it behind any css styling. but not before object oriented shadowroot selection
# when in object mode, the ".:" seems to be needed to reselect the current level of objects.
style:
mmp-powerstrip:
$:
ha-icon-button:
$:
mwc-icon-button:
# increase the size of the power button
$: |
button {
padding: 4px !important;
justify-content: flex-end !important;
--mdc-icon-size: 36px;
--mmp-unit: 2.1;
}
# the pipe moves us up a level (in object mode) to the mmp-powerstrip$
# i don't understand it exactly. but it works!
# styling the ha-icon-button, the parent of mwc-icon-button
# don't need it. just to show it can be done.
# mmp-source-menu -- shrink the dropdown icon
.: |
ha-icon-button {
# for testing padding-left: 180px;
}
mmp-source-menu {
--mmp-unit: 2.1;
--mdc-icon-size: 24px;
}
# ".: |" seems to say, move up a level (in this case to ha-card $)
# the pipe puts us into css selector mode (string)
# there is no shadow-root in the way of accessing the below.
# set the device name size .entity__info__name
# increase the size of volume and transport controls
# .mmp-player__adds > mmp-media-controls
# finally go up a level (mini-media-player) create a margin
# using :host
.: |
.entity__info__name {
font-size: 16px !important;
/* color: magenta !important; note css style comments */
}
.mmp-player__adds > mmp-media-controls {
--mmp-unit: 2.1 !important;
--mdc-icon-size: 32px !important;
}
:host {
margin: 12px 12px 0px 12px !important;
}
div.mmp-player__adds>mmp-media-controls:
# finally, shrink and fade the displayed volume % and push it right a little.
$: |
div.--buttons.mmp-media-controls__volume.flex>span {
opacity: 75%;
font-size: 12px !important;
padding-left: 6px;
}
2 Likes
Check out this guide if you havenāt already
1 Like
As usual thanks. Yes - Iāve read so many of those links!
Can you explain what exactly .: means? I have it working, but donāt know what it means. i.e. select parent object from current level?