Media_player Card
Description¶
The card_media_player shows you the app, the title and the album name playing, if the data is available through HA. The app is shown via a different icon.
Variables¶
| Variable | Default | Required | Notes |
|---|---|---|---|
| entity | The media-player entity | ||
| ulm_card_media_player_name | Name to display for your media-player | ||
| ulm_card_media_player_icon | Change the icon displayed | ||
| ulm_card_media_player_enable_art | false | Enable album picture on background | |
| ulm_card_media_player_enable_controls | false | Enable controls below the title | |
| ulm_card_media_player_enable_volume_slider | false | Enable volume slider below controls | |
| ulm_card_media_player_enable_volume_buttons | false | Enable volume buttons below controls | |
| ulm_card_media_player_enable_volume_adjust | 5 | Volume Adjust Amount - if not set then 1 for TV and 5 for Speaker | |
| ulm_card_media_player_collapsible | false | Controls are collapsible when state is off | |
| ulm_card_media_player_player_controls_entity | entity | Change the controlled entity | |
| ulm_card_media_player_enable_popup | false | Enable pop-up | |
| ulm_card_media_player_more_info | false | Displays artist and album info in the sub-label | |
| ulm_card_media_player_power_button | false | Show power button | |
| ulm_card_media_player_color | blue |
Set Custom Color | |
| ulm_card_media_player_force_background_color | false |
Set ulm_card_media_player_color as background color in active state ` |
Note
To use popup_media_player you need to set the variable ulm_card_media_player_enable_popup to true. This is a different approach as the other popup_cards use.
Usage¶
- type: "custom:button-card"
template: card_media_player
entity: media_player.livingroom_shield
variables:
ulm_card_media_player_name : Livingroom Nvidia Shield
Template Code
card_media_player.yaml
---
### Card Media Player ###
card_media_player:
template:
- "icon_more_info_new"
- "ulm_translation_engine"
variables:
ulm_card_media_player_name: "[[[ return entity.attributes.friendly_name ]]]"
ulm_card_media_player_icon: false
ulm_card_media_player_enable_art: false
ulm_card_media_player_enable_controls: false
ulm_card_media_player_enable_volume_slider: false
ulm_card_media_player_enable_volume_buttons: false
ulm_card_media_player_enable_volume_adjust: 0
ulm_card_media_player_collapsible: false
ulm_card_media_player_player_controls_entity: "[[[ return entity.entity_id ]]]"
ulm_card_media_player_enable_popup: false
ulm_card_media_player_more_info: false
ulm_card_media_player_power_button: false
ulm_card_media_player_force_background_color: false
ulm_card_media_player_color: "blue"
show_icon: false
show_name: false
show_label: false
state:
- operator: "template"
value: "[[[ return variables.ulm_active_state && !variables.ulm_card_media_player_enable_art ]]]"
styles:
card:
- background-color: >
[[[
if (variables.ulm_card_media_player_color) {
if (variables.ulm_card_media_player_force_background_color) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
}
}
]]]
styles:
grid:
- grid-template-areas: |
[[[
var areas = "'item1'";
if (variables.ulm_card_media_player_enable_controls){
areas = areas + " 'item2'";
}
if (variables.ulm_card_media_player_enable_volume_slider){
areas = areas + " 'item3'";
}
if (variables.ulm_card_media_player_enable_volume_buttons){
areas = areas + " 'item4'";
}
return areas;
]]]
- grid-template-columns: "1fr"
- grid-template-rows: |
[[[
var rows = "min-content";
if (variables.ulm_card_media_player_enable_controls){
rows = rows + " min-content";
}
if (variables.ulm_card_media_player_enable_volume_slider){
rows = rows + " min-content";
}
if (variables.ulm_card_media_player_enable_volume_buttons){
rows = rows + " min-content";
}
return rows;
]]]
- row-gap: |-
[[[
if (!variables.ulm_card_media_player_collapsible) {
return "12px";
} else {
return (entity.state === "off" || entity.state === "standby") ? "0px" : "12px";
}
]]]
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
- background: |
[[[
return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
? 'center / cover url(' + states[entity.entity_id].attributes.entity_picture + ') rgba(0, 0, 0, 0.15)'
: ''
]]]
custom_fields:
power:
- display: "[[[ return variables.ulm_card_media_player_power_button ? 'block' : 'none']]]"
- position: "absolute"
- top: "12px"
- right: "12px"
item2:
- display: |
[[[
if(variables.ulm_card_media_player_enable_controls) {
if(variables.ulm_card_media_player_collapsible){
return (entity.state === "off" || entity.state === "standby") ? "none" : "block";
}
return "block";
}
return "none";
]]]
item3:
- border-radius: "14px"
- background-color: >
[[[
if(variables.ulm_card_media_player_enable_art){
return 'transparent'
}
if(!hass.themes.darkMode){
return 'rgb(250,250,250)' ;
}
]]]
- display: |
[[[
if(variables.ulm_card_media_player_enable_volume_slider) {
if(variables.ulm_card_media_player_collapsible){
return (entity.state === "off" || entity.state === "standby") ? "none" : "block";
}
return "block";
}
return "none";
]]]
item4:
- display: |
[[[
if(variables.ulm_card_media_player_enable_volume_buttons) {
if(variables.ulm_card_media_player_collapsible){
return (entity.state === "off" || entity.state === "standby") ? "none" : "block";
}
return "block";
}
return "none";
]]]
custom_fields:
power:
card:
type: "custom:button-card"
entity: "[[[ return entity.entity_id ]]]"
template: "widget_icon"
icon: "mdi:power"
tap_action:
action: "toggle"
styles:
card:
- background-color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'rgba(0, 0, 0, 0.2)'
}
if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
if (variables.ulm_active_state){
return 'rgb(250,250,250)'
}
}
return 'rgba(var(--color-theme),0.05)'
]]]
img_cell:
- width: "42px"
- heigth: "42px"
- background-color: >
[[[
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),0.2)';
}
return 'rgba(var(--color-theme),0.05)';
]]]
icon:
- color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'white'
}
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),1)';
}
return 'rgba(var(--color-theme),0.9)';
]]]
item1:
card:
type: "custom:button-card"
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return entity.entity_id ]]]"
variables: >
[[[
let vars = variables;
if(variables.ulm_card_media_player_enable_popup) {
vars.ulm_custom_popup = {
'template': 'popup_media_player_infos'
};
}
return vars;
]]]
icon: |
[[[
var icon = entity.attributes.icon || "mdi:speaker";
if(entity.attributes.app_name){
var app = entity.attributes.app_name.toLowerCase();
var icon = {
"spotify": "mdi:spotify",
"google podcasts": "mdi:google-podcast",
"plex": "mdi:plex",
"soundcloud": "mdi:soundcloud",
"youtube music": "mdi:youtube",
"oto music": "mdi:music-circle",
"pandora": "mdi:pandora",
"netflix": "mdi:netflix",
"hulu": "mdi:hulu",
"bluetooth audio": "mdi:bluetooth"
}
}
return variables.ulm_card_media_player_icon || icon[app];
]]]
styles:
icon:
- color: |
[[[
var color = variables.ulm_card_media_player_color;
var active_color = 'rgba(var(--color-theme),0.2)'
if (variables.ulm_active_state){
active_color = 'rgba(var(--color-' + color + '),1)';
}
return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
? 'white'
: active_color
]]]
img_cell:
- background-color: |
[[[
var color = variables.ulm_card_media_player_color;
var active_color = 'rgba(var(--color-theme),0.05)'
if (variables.ulm_active_state){
active_color = 'rgba(var(--color-' + color + '),0.2)';
}
return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
? 'rgba(0, 0, 0, 0.2)'
: active_color
]]]
card:
- background: >
[[[
if(!variables.ulm_card_media_player_enable_art && variables.ulm_card_media_player_force_background_color && !hass.themes.darkMode){
return 'rgb(250,250,250)'
}
return 'none'
]]]
item2:
card:
type: "custom:button-card"
entity: "[[[ return entity.entity_id ]]]"
variables: >
[[[
let vars = variables;
if(variables.ulm_card_media_player_enable_popup) {
vars.ulm_custom_popup = {
'template': 'popup_media_player_infos'
};
}
return vars;
]]]
label: "[[[ return variables.ulm_translation_state ]]]"
state:
- operator: "template"
value: "[[[ return entity.state == 'off' ]]]"
name: |
[[[
let name = variables.ulm_card_media_player_name || states[entity.entity_id].attributes.friendly_name;
return name;
]]]
- operator: "template"
value: "[[[ return entity.state == 'standby' ]]]"
name: |
[[[
let name = variables.ulm_card_media_player_name || states[entity.entity_id].attributes.friendly_name;
return name;
]]]
- operator: "template"
value: "[[[ return entity.state != 'off' || entity.state != 'standby']]]"
name: |
[[[
let name = variables.ulm_card_media_player_name || states[entity.entity_id].attributes.friendly_name;
if(states[entity.entity_id].attributes.media_title){
name = states[entity.entity_id].attributes.media_title;
}
return name;
]]]
label: |
[[[
let label = variables.ulm_translation_on;
if (variables.ulm_card_media_player_more_info && states[entity.entity_id].attributes.media_artist
&& states[entity.entity_id].attributes.media_album_name) {
label = states[entity.entity_id].attributes.media_artist + " • " + states[entity.entity_id].attributes.media_album_name;
} else if(states[entity.entity_id].attributes.media_album_name) {
label = states[entity.entity_id].attributes.media_album_name;
} else if (states[entity.entity_id].attributes.media_artist) {
label = states[entity.entity_id].attributes.media_artist
}
return label;
]]]
styles:
label:
- opacity: "1"
- filter: "opacity(100%)"
- text-shadow: |
[[[
return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
? '0 0 black'
: 'none'
]]]
- color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'white'
}
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state){
return 'rgba(250,250,250,0.5)'
}
return 'rgba(var(--color-theme), .5)'
]]]
name:
- color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'white'
}
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state){
return 'rgb(250,250,250)'
}
return'rgba(var(--color-theme), 1)'
]]]
- text-shadow: "0 0 black"
card:
- padding: "0px"
- background: "none"
- border-radius: "0"
- box-shadow: "none"
item2:
card:
type: "custom:button-card"
template: "list_4_items"
styles:
card:
- padding: "0px"
- background: "none"
- border-radius: "0"
- box-shadow: "none"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "widget_icon"
hold_action:
action: >
[[[
return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
]]]
browser_mod:
service: "browser_mod.popup"
data:
large: true
hide_header: true
content:
type: "custom:button-card"
template: "popup_media_player_infos"
entity: "[[[ return entity.entity_id ]]]"
tap_action:
action: "call-service"
service: "media_player.media_previous_track"
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
icon: "mdi:skip-previous"
entity: "[[[ return entity.entity_id ]]]"
styles:
card:
- background-color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'rgba(0, 0, 0, 0.2)'
}
if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
if (variables.ulm_active_state){
return 'rgb(250,250,250)'
}
}
return 'rgba(var(--color-theme),0.05)'
]]]
img_cell:
- background-color: >
[[[
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),0.2)';
}
return 'rgba(var(--color-theme),0.05)';
]]]
icon:
- color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'white'
}
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),1)';
}
return 'rgba(var(--color-theme),0.9)';
]]]
item2:
card:
type: "custom:button-card"
template: "widget_icon"
entity: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
hold_action:
action: >
[[[
return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
]]]
browser_mod:
service: "browser_mod.popup"
data:
large: true
hide_header: true
content:
type: "custom:button-card"
template: "popup_media_player_infos"
entity: "[[[ return entity.entity_id; ]]]"
tap_action:
action: "call-service"
service: "[[[ return (entity.attributes?.media_duration > 0) ? 'media_player.media_play_pause' : entity.state =='playing' ? 'media_player.media_stop' : 'media_player.media_play']]]"
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
icon: "[[[ return (entity.attributes?.media_duration > 0) ? 'mdi:pause' : 'mdi:stop' ]]]"
state:
- value: "playing"
icon: "mdi:pause"
- value: "paused"
icon: "mdi:play"
- value: "off"
icon: "mdi:play"
- value: "standby"
icon: "mdi:play"
- value: "idle"
icon: "mdi:play"
styles:
card:
- background-color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'rgba(0, 0, 0, 0.2)'
}
if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
if (variables.ulm_active_state){
return 'rgb(250,250,250)'
}
}
return 'rgba(var(--color-theme),0.05)'
]]]
img_cell:
- background-color: >
[[[
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),0.2)';
}
return 'rgba(var(--color-theme),0.05)';
]]]
icon:
- color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'white'
}
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),1)';
}
return 'rgba(var(--color-theme),0.9)';
]]]
item3:
card:
type: "custom:button-card"
template: "widget_icon"
hold_action:
action: >
[[[
return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
]]]
browser_mod:
service: "browser_mod.popup"
data:
large: true
hide_header: true
content:
type: "custom:button-card"
template: "popup_media_player_infos"
entity: "[[[ return entity.entity_id; ]]]"
tap_action:
action: "call-service"
service: "media_player.media_next_track"
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
icon: "mdi:skip-next"
styles:
card:
- background-color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'rgba(0, 0, 0, 0.2)'
}
if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
if (variables.ulm_active_state){
return 'rgb(250,250,250)'
}
}
return 'rgba(var(--color-theme),0.05)'
]]]
img_cell:
- background-color: >
[[[
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),0.2)';
}
return 'rgba(var(--color-theme),0.05)';
]]]
icon:
- color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'white'
}
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),1)';
}
return 'rgba(var(--color-theme),0.9)';
]]]
item4:
card:
type: "custom:button-card"
template: "widget_icon"
icon: "mdi:playlist-music"
entity: "[[[ return entity.entity_id; ]]]"
styles:
card:
- background-color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'rgba(0, 0, 0, 0.2)'
}
if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
if (variables.ulm_active_state){
return 'rgb(250,250,250)'
}
}
return 'rgba(var(--color-theme),0.05)'
]]]
img_cell:
- background-color: >
[[[
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),0.2)';
}
return 'rgba(var(--color-theme),0.05)';
]]]
icon:
- color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'white'
}
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),1)';
}
return 'rgba(var(--color-theme),0.9)';
]]]
hold_action:
action: >
[[[
return variables.ulm_card_media_player_enable_popup && entity.attributes?.source_list ? "fire-dom-event" : "more-info";
]]]
browser_mod:
service: "browser_mod.popup"
data:
large: true
hide_header: true
content:
type: "custom:button-card"
template: "popup_media_player_source_card"
entity: "[[[ return entity.entity_id; ]]]"
tap_action:
action: >
[[[
return variables.ulm_card_media_player_enable_popup && entity.attributes?.source_list ? "fire-dom-event" : "more-info";
]]]
browser_mod:
service: "browser_mod.popup"
data:
large: true
hide_header: true
style: |
--popup-background-color: var(--primary-background-color);
--popup-border-radius: 20px;
--popup-padding-x: 24px;
--popup-padding-y: 20px;
--popup-max-width: auto
--popup-min-width: 800px;
card_mod:
style:
ha-dialog$: |
@media (max-width: 800px){
div.mdc-dialog__container {
--mdc-dialog-min-width: 100vw;
--mdc-dialog-max-width: 100vw;
--mdc-dialog-min-height: 100%;
--ha-dialog-border-radius: 0px;
}
}
content:
type: "custom:button-card"
template: "popup_media_player_source_card"
entity: "[[[ return entity.entity_id; ]]]"
item3:
card:
type: "custom:my-slider"
entity: "[[[ return entity.entity_id ]]]"
radius: "14px"
height: "42px"
mainSliderColor: |
[[[
var color = variables.ulm_card_media_player_color;
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'rgba(0, 0, 0, 0.5)'
}
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
return 'rgb(250,250,250)';
}
return 'rgba(var(--color-' + color + '),1)'
]]]
secondarySliderColor: |
[[[
var color = variables.ulm_card_media_player_color;
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'rgba(0, 0, 0, 0.3)'
}
if (variables.ulm_card_media_player_force_background_color) {
return 'rgba(var(--color-' + color + '),0.3)';
}
return 'rgba(var(--color-' + color + '),0.2)'
]]]
mainSliderColorOff: "rgba(var(--color-theme),0.05)"
secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
thumbHorizontalPadding: "0px"
thumbVerticalPadding: "0px"
thumbWidth: "0px"
card_mod:
style: |
ha-card {
border-radius: 14px;
background-color: transparent;
box-shadow: none;
}
item4:
card:
type: "custom:button-card"
template: "list_3_items"
styles:
card:
- padding: "0px"
- background: "none"
- border-radius: "0"
- box-shadow: "none"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "widget_icon"
entity: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
hold_action:
action: >
[[[
return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
]]]
browser_mod:
service: "browser_mod.popup"
data:
large: true
hide_header: true
content:
type: "custom:button-card"
template: "popup_media_player_infos"
entity: "[[[ return entity.entity_id; ]]]"
tap_action:
action: "call-service"
service: "media_player.volume_mute"
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
is_volume_muted: "[[[ return (states[entity.entity_id].attributes.is_volume_muted) ? false : true; ]]]"
icon: "mdi:volume-mute"
styles:
card:
- background-color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'rgba(0, 0, 0, 0.2)'
}
if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
if (variables.ulm_active_state){
return 'rgb(250,250,250)'
}
}
return 'rgba(var(--color-theme),0.05)'
]]]
img_cell:
- background-color: >
[[[
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),0.2)';
}
return 'rgba(var(--color-theme),0.05)';
]]]
icon:
- color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'white'
}
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),1)';
}
return 'rgba(var(--color-theme),0.9)';
]]]
item2:
card:
type: "custom:button-card"
template: "widget_icon"
entity: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
hold_action:
action: >
[[[
return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
]]]
browser_mod:
service: "browser_mod.popup"
data:
large: true
hide_header: true
content:
type: "custom:button-card"
template: "popup_media_player_infos"
entity: "[[[ return entity.entity_id; ]]]"
tap_action:
action: "call-service"
service: "media_player.volume_set"
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
volume_level: |
[[[
var volume = states[entity.entity_id].attributes.volume_level;
if (variables.ulm_card_media_player_enable_volume_adjust != 0) {
volume = states[entity.entity_id].attributes.volume_level - variables.ulm_card_media_player_enable_volume_adjust;
} else {
if (states[entity.entity_id].attributes.device_class === "tv") {
volume = states[entity.entity_id].attributes.volume_level - 0.01;
}
if (states[entity.entity_id].attributes.device_class === "speaker") {
volume = states[entity.entity_id].attributes.volume_level - 0.05;
}
if (states[entity.entity_id].attributes.device_class === "receiver") {
volume = states[entity.entity_id].attributes.volume_level - 0.025;
} else {
volume = states[entity.entity_id].attributes.volume_level - 0.025;
}
}
return volume;
]]]
icon: "mdi:volume-minus"
styles:
card:
- background-color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'rgba(0, 0, 0, 0.2)'
}
if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
if (variables.ulm_active_state){
return 'rgb(250,250,250)'
}
}
return 'rgba(var(--color-theme),0.05)'
]]]
img_cell:
- background-color: >
[[[
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),0.2)';
}
return 'rgba(var(--color-theme),0.05)';
]]]
icon:
- color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'white'
}
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),1)';
}
return 'rgba(var(--color-theme),0.9)';
]]]
item3:
card:
type: "custom:button-card"
template: "widget_icon"
entity: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
hold_action:
action: >
[[[
return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
]]]
browser_mod:
service: "browser_mod.popup"
data:
large: true
hide_header: true
content:
type: "custom:button-card"
template: "popup_media_player_infos"
entity: "[[[ return entity.entity_id; ]]]"
tap_action:
action: "call-service"
service: "media_player.volume_set"
service_data:
entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
volume_level: |
[[[
var volume = states[entity.entity_id].attributes.volume_level;
if (variables.ulm_card_media_player_enable_volume_adjust != 0) {
volume = states[entity.entity_id].attributes.volume_level + variables.ulm_card_media_player_enable_volume_adjust;
} else {
if (states[entity.entity_id].attributes.device_class === "tv") {
volume = states[entity.entity_id].attributes.volume_level + 0.01;
}
if (states[entity.entity_id].attributes.device_class === "speaker") {
volume = states[entity.entity_id].attributes.volume_level + 0.05;
}
if (states[entity.entity_id].attributes.device_class === "receiver") {
volume = states[entity.entity_id].attributes.volume_level + 0.025;
} else {
volume = states[entity.entity_id].attributes.volume_level + 0.025;
}
}
return volume;
]]]
icon: "mdi:volume-plus"
styles:
card:
- background-color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'rgba(0, 0, 0, 0.2)'
}
if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
if (variables.ulm_active_state){
return 'rgb(250,250,250)'
}
}
return 'rgba(var(--color-theme),0.05)'
]]]
img_cell:
- background-color: >
[[[
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),0.2)';
}
return 'rgba(var(--color-theme),0.05)';
]]]
icon:
- color: |
[[[
if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
return 'white'
}
if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
var color = variables.ulm_card_media_player_color;
return 'rgba(var(--color-' + color + '),1)';
}
return 'rgba(var(--color-theme),0.9)';
]]]