Salut
Peux-Tu copier le code complet de ta card s’il te plait?
Merci
Code
type: custom:mushroom-template-card
primary: Plex
secondary: >-
{% if is_state('media_player.plex_plex_for_android_tv_shield_android_tv_2',
'playing') %}
'{{ states.media_player.plex_plex_for_android_tv_shield_android_tv_2.attributes.media_title }}'
{% elif is_state('media_player.plex_plex_for_android_tv_shield_android_tv_2',
'paused') %}
'{{ states.media_player.plex_plex_for_android_tv_shield_android_tv_2.attributes.media_title }}'
{% else %}
{% endif %}
entity: media_player.plex_plex_for_android_tv_shield_android_tv_2
name: Plex
layout: vertical
secondary_info: none
icon: mdi:multimedia
card_mod:
style: |
ha-card {
{% if not is_state(config.entity, 'idle') %}
background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color),);
background-blend-mode: overlay;
{% endif %}
--rgb-state-media-player: var(--rgb-teal);
}
Essaye en retirant la ligne
« name: Plex »
Redis moi
Non toujours rien.
Ya t’il de quoi a rajouter dans YAML ?
J’ai remarqué apparemment que c’est lorsque que la ligne style est la que ça met le message d’erreur.
Peux être un style de carte que je n’ai pas installé ?
Test avec ce code:
type: custom:mushroom-template-card
primary: Plex
secondary: >-
{% if is_state('media_player.plex_plex_for_android_tv_shield_android_tv_2',
'playing') %}
'{{ states.media_player.plex_plex_for_android_tv_shield_android_tv_2.attributes.media_title }}'
{% elif is_state('media_player.plex_plex_for_android_tv_shield_android_tv_2',
'paused') %}
'{{ states.media_player.plex_plex_for_android_tv_shield_android_tv_2.attributes.media_title }}'
{% else %}
{% endif %}
entity: media_player.plex_plex_for_android_tv_shield_android_tv_2
layout: vertical
secondary_info: none
icon: mdi:multimedia
card_mod:
style: |
ha-card {
{% if not is_state(config.entity, 'idle') %}
background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color),);
background-blend-mode: overlay;
{% endif %}
--rgb-state-media-player: var(--rgb-teal);
}
Bizarre je n’ai pas de message avec ce code
Tu as bien installé card-mod depuis hacs?
1 « J'aime »
Et comme ça c’est mieux ?
type: custom:mushroom-media-player-card
primary: Plex
secondary: >-
{% if is_state('media_player.plex_plex_for_android_tv_shield_android_tv_2',
'playing') %}
'{{ states.media_player.plex_plex_for_android_tv_shield_android_tv_2.attributes.media_title }}'
{% elif is_state('media_player.plex_plex_for_android_tv_shield_android_tv_2',
'paused') %}
'{{ states.media_player.plex_plex_for_android_tv_shield_android_tv_2.attributes.media_title }}'
{% else %}
{% endif %}
entity: media_player.plex_plex_for_android_tv_shield_android_tv_2
layout: vertical
secondary_info: none
icon: mdi:multimedia
card_mod:
style: |
ha-card {
{% if not is_state(config.entity, 'idle') %}
background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color),);
background-blend-mode: overlay;
{% endif %}
--rgb-state-media-player: var(--rgb-teal);
}
Ou ça :
type: custom:mushroom-media-player-card
entity: media_player.plex_plex_for_android_tv_shield_android_tv_2
use_media_artwork: false
use_media_info: true
media_controls:
- play_pause_stop
- previous
- next
collapsible_controls: true
volume_controls:
- volume_set
show_volume_level: false
fill_container: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% if not is_state(config.entity, 'idle') %}
background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color),0.5);
{% endif %}
--rgb-state-media-player: var(--rgb-teal);
}
Bon bah ça fonctionne.
Pourquoi ? Je sais pas, ça c’est mis a marché d’un coup.
1 « J'aime »
Bonjour j’ai copié ton code de carte mais les contrôles de lecture n’apparaissent pas je comprends pas pk peux tu m’aider ?
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.plex_nous2_plex_for_android_tv_bravia_vh2
name: Sony TV - Plex
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: true
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% 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 %}
}
- type: conditional
conditions:
- entity: media_player.plex_nous2_plex_for_android_tv_bravia_vh2
state_not: 'off'
- entity: media_player.plex_nous2_plex_for_android_tv_bravia_vh2
state_not: idle
card:
entity: media_player.plex_nous2_plex_for_android_tv_bravia_vh2
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(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--rgb-indigo-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.plex_nous2_plex_for_android_tv_bravia_vh2', 'idle') %}
background: url( '{{ state_attr('media_player.plex_nous2_plex_for_android_tv_bravia_vh2', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
Salut,
Pour moi cela fonctionne mais uniquement en local. A distance je ne peux pas obtenir les contrôles
Bonjour @Guizmos
Bravo pour ton travail.
j’ai tester ta carte media, tout fonctionne sauf une chose:
je n’ai pas de barre de progression, elle reste tout le temps vide.
y a t-il quelques chose de spécial a faire ??
voici mon code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.plex_apple_tv_salon
name: Philips TV - Plex
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 {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 2 / 3;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.plex_apple_tv_salon
state_not: 'off'
- entity: media_player.plex_apple_tv_salon
state_not: idle
card:
entity: media_player.plex_apple_tv_salon
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(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--rgb-indigo-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.plex_apple_tv_salon', 'idle') %}
background: url( '{{ state_attr('media_player.plex_apple_tv_salon', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
Merci a toi pour tout info…
Salut et merci pour le partage et l’aide.
Voici mon code :
type: custom:local-conditional-card
default: show
id: OnePlus
card:
type: custom:stack-in-card
keep:
box_shadow: false
border_radius: true
margin: true
outer_padding: false
background: false
cards:
- type: grid
columns: 2
square: false
cards:
- type: grid
columns: 1
square: false
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: OnePLus
subtitle: >
{% if
is_state('media_player.currently_playing',
'playing') %}
Lecture en cours
{% elif
is_state('media_player.currently_playing',
'paused') %}
En pause
{% else %}
En veille
{% endif %}
alignment: center
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: unavailable
- entity: media_player.currently_playing
state_not: idle
card:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:skip-backward
entity: media_player.currently_playing
tap_action:
action: call-service
service: media_player.media_previous_track
data: {}
target:
entity_id: media_player.currently_playing
card_mod:
style:
style: |
ha-card {
margin: 0px 10px 0px 0;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 10px;
}
- type: template
entity: media_player.currently_playing
icon: >-
{% if
is_state('media_player.currently_playing',
'playing') %}
mdi:pause
{% else %}
mdi:play
{% endif %}
tap_action:
action: call-service
service: media_player.media_play_pause
data: {}
target:
entity_id: media_player.currently_playing
card_mod:
style:
style: |
ha-card {
margin: 0px 0px 0px 0px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 10px;
}
- type: template
entity: media_player.currently_playing
icon: mdi:skip-forward
tap_action:
action: call-service
service: media_player.media_next_track
data: {}
target:
entity_id: media_player.currently_playing
card_mod:
style:
style: |
ha-card {
margin: 0px 0px 0px 10px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 10px;
}
alignment: center
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_movie_content_type
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: >
{{
state_attr('media_player.currently_playing',
'media_library_title') }}
entity: media_player.currently_playing
tap_action:
action: none
alignment: center
card_mod:
style:
style: |
ha-card {
margin: 20px 0 0 0;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 60px;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_music_content_type
state: 'on'
card:
type: custom:mushroom-title-card
title: ''
alignment: center
subtitle: >-
{{
state_attr('media_player.currently_playing',
'media_artist') }} - {{
state_attr('media_player.currently_playing',
'media_title') }}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_movie_content_type
state: 'on'
card:
type: custom:mushroom-title-card
title: ''
alignment: center
subtitle: >-
{{
state_attr('media_player.currently_playing',
'media_title') }}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_tvshow_content_type
state: 'on'
card:
type: custom:mushroom-title-card
title: ''
alignment: center
subtitle: >-
{{
state_attr('media_player.currently_playing',
'media_series_title') }}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: playing
- entity: media_player.currently_playing
state_not: paused
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
primary_info: none
secondary_info: none
icon_type: none
use_media_info: false
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') and not is_state(config.entity, 'idle') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
border-radius: var(--control-border-radius);
{% 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 %}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-radius: 30px;
overflow: visible !important;
box-shadow: none !important;
background-color: transparent;
border: none !important;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_tvshow_content_type
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
primary_info: none
secondary_info: none
icon_type: none
use_media_info: false
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
margin: 0px 0px 0px -45px;
margin-top: 1px;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
width: 99%;
{% endif %}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-radius: 30px;
overflow: visible !important;
box-shadow: none !important;
background-color: transparent;
border: none !important;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_tvshow_content_type
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: >
{{
state_attr('media_player.currently_playing',
'media_library_title') }}
entity: media_player.currently_playing
tap_action:
action: none
alignment: center
card_mod:
style:
style: |
ha-card {
margin: 0px 40px 10px 0px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 60px;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_music_content_type
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
primary_info: none
secondary_info: none
icon_type: none
use_media_info: false
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
margin: 0px -5px -20px -20px;
margin-top: 20px;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
width: 99%;
{% endif %}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-radius: 30px;
overflow: visible !important;
box-shadow: none !important;
background-color: transparent;
border: none !important;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_music_content_type
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: >
{{
state_attr('media_player.currently_playing',
'media_library_title') }}
entity: media_player.currently_playing
tap_action:
action: none
alignment: center
card_mod:
style:
style: |
ha-card {
margin: -10px 0px 10px 0;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none !important;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 60px;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_movie_content_type
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
primary_info: none
secondary_info: none
icon_type: none
use_media_info: false
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
margin: 0px -5px -20px -20px;
margin-top: 20px;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
width: 99%;
{% endif %}
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-radius: 30px;
overflow: visible !important;
box-shadow: none;
background-color: transparent;
border: none !important;
}
@media (min-width: 1200px) {
ha-card {
margin-top: 30px;
}
}
:host {
margin-top: 50px !important;
--album-art-color:
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
{{ state_attr('media_player.currently_playing', "entity_picture") }}
{% else %}
var(--rgb-indigo-color)
{% endif %};
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('{{ state_attr('media_player.currently_playing', "entity_picture") }}') center no-repeat;
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
Dans mon fichier configuration.yaml, j’ai
##Groupe Media Player
media_player:
- platform: universal
name: Currently Playing
children:
- media_player.plex_plex_web_chrome_windows_X
- media_player.plex_plex_web_chrome_windows_Y
Dans le fichier template.yaml, j’ai ajouter les sensors:
## Sensors pour l'affichage du lecteur multimédia
- sensors:
plex_oneplus_music_content_type:
friendly_name: 'Plex OnePlus Music'
value_template: >-
{{ (state_attr('media_player.plex_plex_X','media_content_type') == 'music') }}
plex_oneplus_tvshow_content_type:
friendly_name: 'Plex OnePlus TV Show'
value_template: >-
{{ (state_attr('media_player.plex_plex_X','media_content_type') == 'tvshow') }}
plex_oneplus_movie_content_type:
friendly_name: 'Plex OnePlus Movie'
value_template: >-
{{ (state_attr('media_player.plex_plex_web_chrome_windows_8','media_content_type') == 'movie') }}
- sensors:
plex_recently_all_poster_1:
friendly_name: "All 1 poster"
icon_template: mdi:movie-roll
value_template: "{{ state_attr('sensor.recently_added', 'data')[1]['poster'] }}"
- sensors:
plex_tv_playing:
value_template: "{{ states.media_player.plex_plex_web_chrome_windows_8.attributes.media_title }}"
friendly_name: "Plex TV - Titre"
Mais sur le dashboard, je n’ai rien
Salut,
Est-ce que tu as bien installé l’intégration « Plex Recently Added » ?
Salut,
Test avec ce code pour voir :
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.plex_apple_tv_salon
name: Philips TV - Plex
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 {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 2 / 3;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.plex_apple_tv_salon
state_not: 'off'
- entity: media_player.plex_apple_tv_salon
state_not: idle
card:
entity: media_player.plex_apple_tv_salon
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 {
/* Apply album art color to progress bar when paused */
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
/* Apply album art color to progress bar when playing */
--paper-progress-active-color: rgb(var(--album-art-color)) !important;
}
.: |
ha-card {
/* Move progress bar up into gap. Check if PLAY|STOP are supported */
--base-offset: calc(0 * var(--mush-spacing, 12px)
+ 1.33 * var(--mush-spacing, 12px)
+ var(--mush-card-primary-line-height, 1.5) * var(--mush-card-primary-font-size, 14px)
+ var(--mush-card-secondary-line-height, 1.5) * var(--mush-card-secondary-font-size, 12px)
+ var(--mush-control-height, 42px));
/* Check if Play (16385) or Stop (4096) are supported and add control button height if they are */
{% if state_attr(config.entity, 'supported_features') | int | bitwise_and(20480) > 0 %}
--control-offset: calc(var(--mush-spacing, 12px) + var(--mush-control-height, 42px));
{% else %}
--control-offset: 0px;
{% endif %}
/* Check if album name is present and add to height if it is */
{% set album_name = state_attr(config.entity, 'media_album_name') %}
{% if album_name == None or album_name == "" %}
--album-offset: 0px;
{% else %}
--album-offset: calc(var(--mush-card-secondary-line-height, 1.5) * var(--mush-card-secondary-font-size, 12px));
{% endif %}
bottom: calc(var(--base-offset) + var(--control-offset) + var(--album-offset));
/* Correct margins for progress bar */
margin: 0px 28px -12px;
/* Set height of card to match pregress bar height */
height: var(--mmp-progress-height);
/* Remove border outline */
--ha-card-border-width: 0;
/* Round corners of progress bar */
--mmp-border-radius: var(--control-border-radius, 12px) !important;
/* Set height of progress bar */
--mmp-progress-height: 12px !important;
/* Remove transitions to prevent progress bar floating in */
transition: all 0s;
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.plex_apple_tv_salon', 'idle') %}
background: url( '{{ state_attr('media_player.plex_apple_tv_salon', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
Avec le code partager, cela m’affiche :
Je n’ai par contre pas les boutons de navigation ou l’affichage du genre.
Plex Recently Added, semble bien installé, en tout cas il est présent dans les intégrations HACS
Fais voir ton code complet s’il te plait
Le code de la carte
type: custom:local-conditional-card
default: show
id: OnePlus
card:
type: custom:stack-in-card
keep:
box_shadow: false
border_radius: true
margin: true
outer_padding: false
background: false
cards:
- type: grid
columns: 2
square: false
cards:
- type: grid
columns: 1
square: false
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: OnePLus
subtitle: >
{% if is_state('media_player.currently_playing', 'playing')
%}
Lecture en cours
{% elif is_state('media_player.currently_playing', 'paused')
%}
En pause
{% else %}
En veille
{% endif %}
alignment: center
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: unavailable
- entity: media_player.currently_playing
state_not: idle
card:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:skip-backward
entity: media_player.currently_playing
tap_action:
action: call-service
service: media_player.media_previous_track
data: {}
target:
entity_id: media_player.currently_playing
card_mod:
style:
style: |
ha-card {
margin: 0px 10px 0px 0;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 10px;
}
- type: template
entity: media_player.currently_playing
icon: >-
{% if is_state('media_player.currently_playing',
'playing') %}
mdi:pause
{% else %}
mdi:play
{% endif %}
tap_action:
action: call-service
service: media_player.media_play_pause
data: {}
target:
entity_id: media_player.currently_playing
card_mod:
style:
style: |
ha-card {
margin: 0px 0px 0px 0px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 10px;
}
- type: template
entity: media_player.currently_playing
icon: mdi:skip-forward
tap_action:
action: call-service
service: media_player.media_next_track
data: {}
target:
entity_id: media_player.currently_playing
card_mod:
style:
style: |
ha-card {
margin: 0px 0px 0px 10px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 10px;
}
alignment: center
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_movie_content_type
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: >
{{ state_attr('media_player.currently_playing',
'media_library_title') }}
entity: media_player.currently_playing
tap_action:
action: none
alignment: center
card_mod:
style:
style: |
ha-card {
margin: 20px 0 0 0;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 60px;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_music_content_type
state: 'on'
card:
type: custom:mushroom-title-card
title: ''
alignment: center
subtitle: >-
{{ state_attr('media_player.currently_playing',
'media_artist') }} - {{
state_attr('media_player.currently_playing',
'media_title') }}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_movie_content_type
state: 'on'
card:
type: custom:mushroom-title-card
title: ''
alignment: center
subtitle: >-
{{ state_attr('media_player.currently_playing',
'media_title') }}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_tvshow_content_type
state: 'on'
card:
type: custom:mushroom-title-card
title: ''
alignment: center
subtitle: >-
{{ state_attr('media_player.currently_playing',
'media_series_title') }}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: playing
- entity: media_player.currently_playing
state_not: paused
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
primary_info: none
secondary_info: none
icon_type: none
use_media_info: false
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') and not is_state(config.entity, 'idle') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
border-radius: var(--control-border-radius);
{% 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 %}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-radius: 30px;
overflow: visible !important;
box-shadow: none !important;
background-color: transparent;
border: none !important;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_tvshow_content_type
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
primary_info: none
secondary_info: none
icon_type: none
use_media_info: false
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
margin: 0px 0px 0px -45px;
margin-top: 1px;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
width: 99%;
{% endif %}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-radius: 30px;
overflow: visible !important;
box-shadow: none !important;
background-color: transparent;
border: none !important;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_tvshow_content_type
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: >
{{ state_attr('media_player.currently_playing',
'media_library_title') }}
entity: media_player.currently_playing
tap_action:
action: none
alignment: center
card_mod:
style:
style: |
ha-card {
margin: 0px 40px 10px 0px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 60px;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_music_content_type
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
primary_info: none
secondary_info: none
icon_type: none
use_media_info: false
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
margin: 0px -5px -20px -20px;
margin-top: 20px;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
width: 99%;
{% endif %}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-radius: 30px;
overflow: visible !important;
box-shadow: none !important;
background-color: transparent;
border: none !important;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_music_content_type
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: >
{{ state_attr('media_player.currently_playing',
'media_library_title') }}
entity: media_player.currently_playing
tap_action:
action: none
alignment: center
card_mod:
style:
style: |
ha-card {
margin: -10px 0px 10px 0;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none !important;
--chip-border-radius: 12px;
--chip-height: 35px;
--chip-padding: 60px;
}
- type: conditional
conditions:
- entity: binary_sensor.plex_oneplus_movie_content_type
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
primary_info: none
secondary_info: none
icon_type: none
use_media_info: false
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
margin: 0px -5px -20px -20px;
margin-top: 20px;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
width: 99%;
{% endif %}
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-radius: 30px;
overflow: visible !important;
box-shadow: none;
background-color: transparent;
border: none !important;
}
@media (min-width: 1200px) {
ha-card {
margin-top: 30px;
}
}
:host {
margin-top: 50px !important;
--album-art-color:
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
{{ state_attr('media_player.currently_playing', "entity_picture") }}
{% else %}
var(--rgb-indigo-color)
{% endif %};
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('{{ state_attr('media_player.currently_playing', "entity_picture") }}') center no-repeat;
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}