I think he needs to update it for 2023.4, cuz I was using that but its different on 2023.4 it just sticks to the top now instead of overlaying on other cards
1 Like
Can you share the code for the sticky media player?
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.ytube_music_player
icon: mdi:play
use_media_info: true
icon_type: entity-picture
show_volume_level: false
media_controls:
- on_off
fill_container: false
layout: horizontal
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |
--popup-background-color: none;
--popup-max-width: 600px;
--popup-min-width: 450px;
--popup-border-width: 0px;
--popup-border-radius: 10px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em) brightness(1.2);
content:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.ytube_music_player
use_media_info: true
show_volume_level: false
icon_type: none
layout: vertical
media_controls:
- play_pause_stop
- previous
- next
card_mod:
style:
mushroom-state-info$: |
.secondary:before {
white-space: pre;
text-overflow: ellipsis;
}
.: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
ha-card {
--ha-card-border-width: 0;
}
ha-card:before {
content: "";
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
margin: 8px 8px 24px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: 10px;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
background-size: 100% 100%;
}
- type: custom:mushroom-media-player-card
entity: media_player.ytube_music_player
show_volume_level: false
icon_type: none
primary_info: none
secondary_info: none
volume_controls:
- volume_buttons
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
margin-top: -12px;
}
- type: custom:mini-media-player
entity: media_player.ytube_music_player
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
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
--paper-progress-container-color: rgba(var(--progress-bar), 0.08) !important;
--paper-progress-active-color: rgba(var(--progress-bar), 0.6) !important;
}
.: |
ha-card {
margin: 6px 12px 18px 12px;
--mmp-progress-height: 14px !important;
height: var(--mmp-progress-height);
--mmp-border-radius: 10px !important;
--ha-card-border-width: 0;
transition: all 0s;
}
card_mod:
style: |
ha-card:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url( '{{ state_attr('media_player.ytube_music_player', "entity_picture") }}' ) center no-repeat;
filter: blur(150px) saturate(200%);
}
card_mod:
style: |
ha-dialog {
--vertical-align-dialog: center !important;
}
card_mod:
style: |
.actions {
/*--rgb-primary-text-color: ;*/
/*--primary-text-color: ;*/
max-width: 40px;
}
card_mod:
style: |
:host {
position: sticky;
bottom: 0px;
z-index: 2;
{% if is_state('media_player.ytube_music_player', ['playing', 'paused']) %}
--album-art-color: {{ states('sensor.muted_color') }};
{% else %}
display: none !important;
{% endif %}
--ha-card-background: none;
}
ha-card:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url( '{{ state_attr('media_player.ytube_music_player', "entity_picture") }}' ) center no-repeat;
filter: blur(150px) saturate(200%);
}
ha-card {
background: rgba(var(--rgb-card-background-color), 0.6);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 0px;
margin: 0px -8px 0px -8px;
border-top-width: 1px;
box-shadow-top: 0px 0px 4px 0px rgba(var(--player-shadow), 0.6);
--ha-card-border-width: 0;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 11px;
}
and theme file:
Mushroom:
# Nothing here as it's the default HA theme since 2022.11
modes:
light:
progress-bar: 0, 0, 0
dark:
progress-bar: 255, 255, 255
3 Likes
Just a 2 column Grid.
1 Like
Hi, after update to 2023.4.1 and update to newest version of kiosk mode from hacs, kiosk mode is working again. When Ha top bar is hidden sticky header (also bottom media player) is not sticky. When top bar is visible sticky header and media player is working as expected. Any solution?
Modern Dashboard Lite Version - Part 1
Ä°t is finally ready.
Page Properties:
- One single page for your home.
- Wonderful colors.
- Ambilight effect on everywhere.
- Glowing lights all around the page, dynamic to the state of the devices.
- Hidden sections through Swipe Card.
- Last motion detected room is shown with art effected pictures
- Secret Light Control.
- Exclusive person card (Thanks to Rhysb).
- Animated design.
- Live dynamic cards.
- Individual light control. Everything you need for controlling your lights in your house.
- Live Android Tv control with remote. See what is on your TV screen.
- Full page display thanks to Kiosk Mode.
- Netflix Card (Start shows on your Android Tv from your Dashboard)
- What to wear suggestions (with pictures) for your home depending on house temperature.
- Animated Weather Card.
- Easy calendar and camera access.
- Live birthday Card with pictures.
- Animated Spotify Card.
- Control all your Media Players
- Room cards.
- Light control based on room presence. Close all house lights expect the room you are in.
- Multimedia files are included. I have also added additional multimedia files for you to customise your screen.
- Installation manual for every part. The manuel overviews the code line by line. Even the templates are given and briefly explained.
Everything you need and the manual for part 1 is at :
Screenshots:
8 Likes
Hello, Youâre media card seems great. however it doesnât stick at bottom for me on latest ha version.
And it disappear when off. How you launch media then?
Thanks for your work
Hi,
Yes it stick on bottom but only when I have kiosk mode off. When HA top bar is visible header and media player is sticky. When kiosk mode is on (HA top bar is hidden) header and media player do not stick.
I have asked @rhysb for help already if is any solution for that. He is the MASTER here.
Media Player appear only when youtube music is playing and disappear when is off. I have media card to start playing music. So I have full control on media card and then sticky player on another cards just for quick stop.
3 Likes
do you mind sharing the code for this one please?
Thanks thats perfect!
1 Like
Hello
Nice work.
What is sensor.google_ev_is
I canât find it.
It is my Google Maps travel time sensor. Read my manual for the topbar.
Anyone play with the Mushroom Number card?
Is it possible to customise? For example change colour based on value? Display units after the number?
Beautiful⌠I was not knowing how to do the node-red thing⌠this helped me a lot⌠thank you for the code
just two questionsâŚ
Is there an option to close the sticky window???..in case if i donât need it??
also when I click the volume up and down buttons?? why does it show failed to call service media_player/volume up . Am i missing some script?? I havenât used the media player card before much⌠just starting with my mushroom dashboardâŚif so, could you please share it???
i went through several posts in this topic and this is what i found somewhere
script:
volume_up:
sequence:
service: media_player.volume_set
entity_id: media_player.YourPlayer
data_template:
volume_level: '{{ states.media_player.YourPlayer.attributes.volume_level + 5 }}'
But if i use this as a script with id volume_up and entity as media_player.homepod_mini then, how will i add the same code to another media player which also needs a volume-up actionâŚ
Sorry⌠if i am going wrong on the conceptâŚ
Beautiful Dashboard
What is that sensor?
Any additional script is not required. I am using standard volume buttons from mushroom media player card. Maybe you did not changed entity name.
- type: custom:mushroom-media-player-card
entity: media_player.ytube_music_player <------ HERE
show_volume_level: false
icon_type: none
primary_info: none
secondary_info: none
volume_controls:
- volume_buttons
Saying sticky window do you mean popup window with cover? If yes, to disappear you need to click any space outside the window or if you want top bar with X in corner to close the window you need to add
title: Media Player
to data: section (any title you want).
If you mean to close bottom sticky bar, there is no option for that.
Good question. This code is based on @rhysb code which you can find here above. He had done some color flow in nodered. I just modified his code because I do not use NodeRed. Looks like I missed this line. I do not have this sensor. You can just delete this line.
Can you share your television card and computer card please. Also what font you are using and color theme?
Just of doubt, i reconfirmed the full code for any area wher i might have left out to replace the entity name. i have replaced it all.
So, it tried adding a normal mushroom media player card. there to the issue reflects. So problem with my home assistant internals??? this is my code for normal default mushroom media player
type: custom:mushroom-media-player-card
entity: media_player.gf_lr_homepod_mini
volume_controls:
- volume_mute
- volume_set
- volume_buttons
media_controls:
- on_off
- shuffle
- previous
- play_pause_stop
- next
- repeat
use_media_info: true
show_volume_level: true
collapsible_controls: true
icon_type: entity-picture
fill_container: false
card_mod:
style: |
mushroom-state-item {
{{ 'max-width: fit-content;' if not is_state(config.entity, 'off') }}
}
When I click the volume increase button, it repeats the same error
But if i use the volume slider, it works ok and the volume changes
Any suggestion on why this happens or how to correct it??