Hi @rhysb I have just had a play, Once again could you help. When I try to include the progress bar it goes underneath this card and the artwork with gradient is on top, how can I make the artwork cover the complete card?
hi, nice to see that it works for you!
you did nothing wrong, on my pc I also got alignment off
my screenshot was taken from my mobile, my main view is my mobile view
You can play with the margin-top and margin-left vaolues (or remove them) and it will be aligned corectly
sorry I;m not good at scaling mobile vs pc 
for the third person you need to copy and paste section from line 118 to 296, however I;m not sure if for 3 people it would look good in a row
the stack-in-card is already there
not to mess this thread (and if you want to) we can try to figure it out via PM
2 Likes
Thanks for your input, but the general statement of:
There are two settings you could have a play with:
mush-slider-threshold
mush-input-number-debounce
Means almost absolutely nothing to me. No idea where to apply them, no idea what their values mean, no documentation in anyway. I tried many things in theme and card-mod, I see no difference. Perhaps I am targeting the wrong thing but with any guidance of what they mean and to what element they apply to, this is not workable.
I may try or your other suggestion, but is everyone here saying their volume slide in a mushroom media card works perfect? Slide to 20% and get it? Slide then to 40% and get it? Slide 40% to 0 and get it? If yes, then something is strange in my setup because no way it works that way.
As I said, it seems to be a great looking GUI but the first thing I tried to implement certainly does not work “out-of-the-box”. I am surprised that all those showing their media player volume controls do not see the same. Maybe it’s me.
1 Like
Niceeee! That screenshot was from web yes, will have to test it on mobile next.
And ill have to test if I can make it work with more then 2 people, maybe I can use the Swiper card to put 2 in each one… 
1 Like
hey can you also input_select.mediaplayer_sourceshare with me how this works ?
1 Like
How many forecasts are there in weather.vaughan_hourly? There must be less than the 12 that are being requested in num_segments. Try lowering num_segments until the error goes away.
Yea so that error just randomly went away, and if you mean where it says “forecast” there’s well over 12 it looks like:
Not sure why it did that error when it worked the first time without it.
1 Like
Another glitch in the matrix 
1 Like
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
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
Hey i wanted to use the Folder Drop down, but struggling so if you could share you code that would be great
Man you do some cool shit!! not enough praise goes to i think!
1 Like
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
Ha ha, thanks 
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
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
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.
I saw a post on this. what does the end product look like??