rhysb
September 1, 2022, 7:49am
2629
Here you go. The Mushroom Media Card with faded art and progress bar:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
{% set media_type = state_attr(config.entity, 'media_content_type') %}
--card-mod-icon:
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:play
{% endif %};
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
entity: media_player.currently_playing
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(63, 81, 181, 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 42px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(63, 81, 181);
--ha-card-border-radius: 12px;
}
card_mod:
style: |
ha-card {
{% if not is_state('media_player.currently_playing', 'off') and not is_state('media_player.currently_playing', 'idle') %}
background: url( '{{ state_attr("media_player.currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
{% if state_attr('media_player.currently_playing', 'media_content_type') == 'tvshow' %}
background-size: auto 100%, cover;
{% else %}
background-size: 50% auto, cover;
{% endif %}
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
}
15 Likes
tfmeier
September 1, 2022, 8:23am
2630
I had a look at the Universal media player. So if I have 3 media players; e.g. a Spotify player, Google TV and an AVR) I can create them as 3 children within the universal media player and this player recognises whether I play music on Spotify or watch a movie on Google TV?
Does this card automatically create the entity media_player.currently_playing which is referenced in the code?
Lastly the universal media player is created in configuration.yaml. When you say this is the mushroom media card would I simply use the code editor and replace the code with the adopted code or do I use a standard YAML card (from the UI)?
Once again, perfect! Understanding how and to indent the card mods and where to place them is a learning curve for me.
1 Like
cloudbr34k
September 1, 2022, 8:30am
2632
Hey i wanted to use the Folder Drop down, but struggling so if you could share you code that would be great
cloudbr34k
September 1, 2022, 8:38am
2633
Man you do some cool shit!! not enough praise goes to i think!
1 Like
rhysb
September 1, 2022, 8:45am
2634
Yes, that is basically how it works.
media_player.currently_playing is just the name that I have called this Universal Media Player.
The Universal Media Player creates an entity that works like any other Media Player entity. You can use it with Mushroom Media Card or any other media card in HA.
This is my currently playing one:
- platform: universal
name: Currently Playing
children:
- media_player.lounge_tv
- media_player.lounge
- media_player.family_room_tv
- media_player.family_room
- media_player.office
- media_player.bedroom
- media_player.garage
- media_player.elijahs_bedroom
This one combines a Plex player with HTPC volume control:
- platform: universal
name: Lounge TV
children:
- media_player.lounge_tv_plex
commands:
turn_on:
service: switch.turn_on
target:
entity_id: switch.lounge_pc
turn_off:
service: switch.turn_off
target:
entity_id: switch.lounge_pc
toggle:
service: switch.toggle
target:
entity_id: switch.lounge_pc
volume_set:
service: input_number.set_value
target:
entity_id: input_number.lounge_pc_volume
data:
value: "{{ volume_level }}"
volume_up:
service: input_number.increment
target:
entity_id: input_number.lounge_pc_volume
data: {}
volume_down:
service: input_number.decrement
target:
entity_id: input_number.lounge_pc_volume
data: {}
attributes:
volume_level: input_number.lounge_pc_volume
9 Likes
cloudbr34k
September 1, 2022, 9:12am
2636
Im just using your media card, and i was wondering how you get it to show artwork when its playing plex?
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.lg_master_bedroom_tv
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
{% set media_type = state_attr(config.entity, 'media_content_type') %}
--card-mod-icon:
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:play
{% endif %};
}
- type: conditional
conditions:
- entity: media_player.lg_master_bedroom_tv
state_not: 'off'
- entity: media_player.lg_master_bedroom_tv
state_not: idle
card:
entity: media_player.lg_master_bedroom_tv
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(63, 81, 181, 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 42px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(63, 81, 181);
--ha-card-border-radius: 12px;
}
card_mod:
style: |
ha-card {
{% if not is_state('media_player.lg_master_bedroom_tv', 'off') and not is_state('media_player.lg_master_bedroom_tv', 'idle') %}
background: url( '{{ state_attr("media_player.lg_master_bedroom_tv", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
{% if state_attr('media_player.lg_master_bedroom_tv', 'media_content_type') == 'tvshow' %}
background-size: auto 100%, cover;
{% else %}
background-size: 50% auto, cover;
{% endif %}
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
}
Same TV, different devices
2 Likes
rhysb
September 1, 2022, 9:25am
2637
Sorry, I should have explained better
These variables go in your theme file or can be used in card_mod like this:
type: custom:mushroom-media-player-card
layout: horizontal
primary_info: none
secondary_info: none
icon_type: none
volume_controls:
- volume_set
show_volume_level: true
entity: media_player.rhys_laptop_plexamp
card_mod:
style: |
:host {
--mush-slider-threshold: 1;
--mush-input-number-debounce: 500;
}
The default value for mush-slider-threshold is 10 and for mush-input-number-debounce it is 2000, presumably in ms.
Hope that helps.
2 Likes
rhysb
September 1, 2022, 9:35am
2638
LG Master Bedroom TV is the TV media player entity right? You would need to use the Plex media player entity for your LG TV to get the artwork. You could combine them using Universal Media Player though.
cloudbr34k
September 1, 2022, 9:51am
2640
I saw a post on this. what does the end product look like??
amfadten
September 1, 2022, 10:27am
2641
media_player.currently_playing is it binary_sensor
rhysb
September 1, 2022, 10:34am
2642
No, goes under media_player:
1 Like
rhysb
September 1, 2022, 10:37am
2644
Looks and acts like any other media entity. If two children are active the higher in the list is displayed.
image969
September 1, 2022, 10:39am
2645
Hello. So I copied a snippet of the code you gave me for the fan. Can you tell me if I’m close with the part I have in asterisks. I simply need a way to call a script when greater than 80%. If I know how to do that I’ll be able to do the rest on my own
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_number.fan_slider
icon: |
{% set vol_level = states(entity) | float %}
{% if vol_level == 0 %}
mdi:fan
{% elif vol_level > 80 %}
mdi:volume-high
*** Tap_action:
Action: call-service
Enter script here***
{% elif vol_level < 40 %}
mdi:volume-low
{% else %}
mdi:volume-medium
{% endif %}
icon_color: indigo
1 Like
cloudbr34k
September 1, 2022, 10:42am
2646
Great, ill start tinkering!
Thanks again
1 Like
rhysb
September 1, 2022, 11:04am
2648
Getting a little off-topic for Mushroom Cards, but have a look at the Fan Template:
image969
September 1, 2022, 11:08am
2649
Ya I know sorry. I looked at that yesterday and just couldn’t figure out how to incorporate that with a mushroom slider. I’ll keep googling. Thanks.
And I feel like I don’t need all of that. It could be a button it could be anything. I simply need to know how to call a service of any kind when a mushroom slider is at a certain percentage. It could be a light a camera the television turning on anything.
1 Like
stevo92
September 1, 2022, 11:16am
2650
@rhysb can you help ?
I’m hoping to remove the gray from the background of my icons:
So they all look like this:
But by adding
--shape-color-disabled: none !important;}
It removes the animation…
My full code:
- type: custom:mushroom-template-card
icon: fapro:fish1
layout: vertical
icon_color: cyan
tap_action:
action: navigate
navigation_path: pondpatio
multiline_secondary: false
fill_container: false
entity: ''
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon
{
--icon-animation: wobbling 0.4s linear infinite alternate;
}
@keyframes wobbling {
0% {
transform: rotate(-10degree);
}
100% {
transform: rotate(20deg);
}
}
1 Like
.
