Peut-être une solution pour toi :
Je vais allez lire tout ca 
ah oui par contre ça t’oblige a utiliser plex pour le visionnage de films series etc ?
Je ne passe que par plex. Sur TV, tablette ou téléphone 
Je l’utilise depuis des années et ça fonctionne parfaitement
Avec emby c’est fonctionnel aussi.
Hello
J’ai fait une nouvelle card media_player :
En veille
Un film
Une série
De la musique
Pré recquis :
Je l’uitlise pour afficher/masquer les cards
- Template pour extraire l’image du dernier film/série et l’afficher sur la card TV en mode idle
Sensor
- platform: template
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'] }}"
- Template pour extraire le type de media
Binary_sensor
- platform: template
sensors:
plex_iphone_music_content_type:
friendly_name: 'Plex Iphone Music'
value_template: >-
{{ (state_attr('media_player.plex_iphone_damien','media_content_type') == 'music') }}
plex_iphone_tvshow_content_type:
friendly_name: 'Plex Iphone TV Show'
value_template: >-
{{ (state_attr('media_player.plex_iphone_damien','media_content_type') == 'tvshow') }}
plex_iphone_movie_content_type:
friendly_name: 'Plex Iphone Movie'
value_template: >-
{{ (state_attr('media_player.plex_iphone_damien','media_content_type') == 'movie') }}
- Le code de la card
Card
type: custom:local-conditional-card
default: hide
id: iphone1
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: iPhone Dam
subtitle: >
{% if is_state('media_player.plex_iphone_damien', 'playing')
%}
Lecture en cours
{% elif is_state('media_player.plex_iphone_damien',
'paused') %}
En pause
{% else %}
En veille
{% endif %}
alignment: center
- type: conditional
conditions:
- entity: media_player.plex_iphone_damien
state_not: unavailable
- entity: media_player.plex_iphone_damien
state_not: idle
card:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:skip-backward
entity: media_player.plex_iphone_damien
tap_action:
action: call-service
service: media_player.media_previous_track
data: {}
target:
entity_id: media_player.plex_iphone_damien
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.plex_iphone_damien
icon: >-
{% if is_state('media_player.plex_iphone_damien',
'playing') %}
mdi:pause
{% else %}
mdi:play
{% endif %}
tap_action:
action: call-service
service: media_player.media_play_pause
data: {}
target:
entity_id: media_player.plex_iphone_damien
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.plex_iphone_damien
icon: mdi:skip-forward
tap_action:
action: call-service
service: media_player.media_next_track
data: {}
target:
entity_id: media_player.plex_iphone_damien
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_iphone_movie_content_type
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: >
{{ state_attr('media_player.plex_iphone_damien',
'media_library_title') }}
entity: media_player.plex_iphone_damien
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_iphone_music_content_type
state: 'on'
card:
type: custom:mushroom-title-card
title: ''
alignment: center
subtitle: >-
{{ state_attr('media_player.plex_iphone_damien',
'media_artist') }} - {{
state_attr('media_player.plex_iphone_damien',
'media_title') }}
- type: conditional
conditions:
- entity: binary_sensor.plex_iphone_movie_content_type
state: 'on'
card:
type: custom:mushroom-title-card
title: ''
alignment: center
subtitle: >-
{{ state_attr('media_player.plex_iphone_damien',
'media_title') }}
- type: conditional
conditions:
- entity: binary_sensor.plex_iphone_tvshow_content_type
state: 'on'
card:
type: custom:mushroom-title-card
title: ''
alignment: center
subtitle: >-
{{ state_attr('media_player.plex_iphone_damien',
'media_series_title') }}
- type: conditional
conditions:
- entity: media_player.plex_iphone_damien
state_not: playing
- entity: media_player.plex_iphone_damien
state_not: paused
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.plex_iphone_damien
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_iphone_tvshow_content_type
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.plex_iphone_damien
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_iphone_tvshow_content_type
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: >
{{ state_attr('media_player.plex_iphone_damien',
'media_library_title') }}
entity: media_player.plex_iphone_damien
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_iphone_music_content_type
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.plex_iphone_damien
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_iphone_music_content_type
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: >
{{ state_attr('media_player.plex_iphone_damien',
'media_library_title') }}
entity: media_player.plex_iphone_damien
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_iphone_movie_content_type
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.plex_iphone_damien
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.plex_iphone_damien', 'idle') and not is_state('media_player.plex_iphone_damien', 'off') %}
{{ states('sensor.plex_recently_all_poster_1') }}
{% 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.plex_iphone_damien', "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);
}
1 « J'aime »
Salut Guizmos,
Merci pour le travail que tu fais, je viens d’intégrer cette config mais j’ai juste un petite soucis de bordure comme tu peux le voir dans le screen
Salut,
Merci pour ton message.
Alors pour cette bordure, j’ai aussi parfois ce bug, il faut que je creuse pour trouver une solution.
Mais en gros si tu refresh (F5) ton navigateur, la bordure doit disparaitre…
1 « J'aime »
Salut sur l’image de la « la compétition de snowboard » est-il possible de la mettre sur mon dashboard et voir ce que la personne regarde sur la tv via une box bouygues ? (tv connecté)
Salut,
Bonne question, je ne sais pas s’il existe une intégration HA ou HACS pour les box Bouygues. Il faudrait d’abord regarder de ce côté. Et voir s’il existe quelque chose qui fasse remonter un media_player. Ensuite théoriquement il te suffira de remplacer le media_player de la card pour voir les infos remonter
Oui il existe une intégration bouygues (appelé bbox)
Tu peux me montrer ce qu’elle remonte comme info ?
Je te montre ceci vers 14h le temps que EDF remette le courant après l’installation des panneaux
Hello ,
Bravo pour le travail 
Chez moi ça donne :
type: custom:mushroom-template-card
primary: Plex
secondary: '{{ states(''sensor.plex_tv_playing'')}}'
entity: media_player.plex_plex_XXXXX
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),0.8);
background-blend-mode: overlay;
{% endif %}
--rgb-state-media-player: var(--rgb-teal);
}
Une idée ou j’ai mal fait le truc ?
Merci à vous
Salut,
Je pense qu’il te manque le sensor ‹ sensor.plex_tv_playing ›.
Il te suffit d’ajouter ça à ton fichier sensor.yaml (ou configuration.yaml si tu n’as pas splitté tes fichiers)
sensor:
- platform: template
sensors:
plex_tv_playing:
value_template: "{{ states.media_player.xxx.attributes.media_title }}"
friendly_name: "Plex TV - Titre"
Il te faudra modifier xxx par le nom de ton media_player
Ensuite tu redémarre ton HA ou que ton sensor remonte et tu devrais avoir la carte fonctionnelle
media_player c’est bien mon entité ?
oui tout à fait, tu peux très bien créer plusieurs sensors si tu as plusieurs media_player plex
Merci, par contre j’ai cette erreur :
Logger: homeassistant.components.homeassistant
Source: components/homeassistant/__init__.py:312
Integration: Home Assistant Core Integration (documentation, issues)
First occurred: 14:50:10 (1 occurrences)
Last logged: 14:50:10
The system cannot reload because the configuration is not valid: Invalid config for [sensor.template]: [plex_tv_playing] is an invalid option for [sensor.template]. Check: sensor.template->plex_tv_playing. (See ?, line ?).
## PLEX ##
- platform: template
plex_tv_playing:
value_template: "{{ states.media_player.plex_plex_for_windows_jr_p_04.attributes.media_title }}"
friendly_name: "Plex TV - Titre"
Voila ma configuration
Tu as un fichier sensor.yaml ou pas? ou est-ce que tu passes tout par configuration.yaml ?
J’ai un fichier sensor. C’est le deuxième code.