# Mushroom - Media Player Card

**URL:** <https://forum.hacf.fr/t/mushroom-media-player-card/18649>\
**Category:** Interface / Lovelace / Thème / Custom Card\
**Created:** [Décembre 22, 2022, 1:40 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649 "2022-12-22T13:40:02Z")\
**Posts on this page:** 20\
**Page:** 6

<div class="post-metadata">

**Author:** ![lilp](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lilp/32/39729_2.png) [@lilp](https://forum.hacf.fr/u/lilp)\
**Post date:** [Mai 31, 2024, 2:16 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/103 "2024-05-31T14:16:58Z")

</div>

J'ai tout repris depuis le début.  
Et j'ai bien avancé.  
Voici le résultat

 ![](https://forum.hacf.fr/uploads/default/original/3X/9/f/9f7a3c15e3325e8185826d76cf473762a55c2808.png)

> **La carte**
>
> ```auto
> type: custom:local-conditional-card
> default: show
> id: Plex
> 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: LilPlex
> 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_movie_content_type
> state: 'on'
> card:
> type: custom:mushroom-chips-card
> chips:
> - type: template
> content: >
> {% if
> (states['media_player.currently_playing'].attributes['media_content_type']
> == 'movie') %}
> Film
> {% endif %}
> 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_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_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_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/image/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_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/image/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_tvshow_content_type
> state: 'on'
> card:
> type: custom:mushroom-chips-card
> chips:
> - type: template
> content: >
> {% if
> (states['media_player.currently_playing'].attributes['media_content_type']
> == 'tvshow') %}
> Série
> {% endif %}
> 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_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/image/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_music_content_type
> state: 'on'
> card:
> type: custom:mushroom-chips-card
> chips:
> - type: template
> content: >
> {% if
> (states['media_player.currently_playing'].attributes['media_content_type']
> == 'music') %}
> Musique
> {% endif %}
> 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_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/image/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') %}
> {{ 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.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);
> }
> 
> ```

> **Configuration.yaml**
>
> ```auto
> # Loads default set of integrations. Do not remove.
> # themes: !include_dir_merge_named themes
> automation: !include automations.yaml
> script: !include scripts.yaml
> scene: !include scenes.yaml
> switch: !include switches.yaml
> template: !include template.yaml
> command_line: !include command_line.yaml
> homeassistant:
> customize: !include customize.yaml
> 
> ##Groupe Media Player
> media_player:
> - platform: universal
> name: Currently Playing
> children:
> - media_player.plex_plex_web_chrome_windows_1
> - media_player.plex_plex_web_chrome_windows_2
> - media_player.plex_plex_web_chrome_windows_3
> - media_player.plex_plex_web_chrome_windows_4
> - media_player.plex_plex_web_chrome_windows_5
> - media_player.plex_plex_web_chrome_windows_6
> - media_player.plex_plex_web_chrome_windows_7
> - media_player.plex_plex_web_chrome_windows_8
> - media_player.plex_plex_web_chrome_windows_9
> - media_player.plex_plexamp_android
> - media_player.plex_plexamp_android_2
> 
> #Alarme météo
> binary_sensor:
> ## Sensors pour l'affichage du lecteur multimédia
> - platform: template
> sensors:
> plex_music_content_type:
> friendly_name: 'Plex OnePlus Music'
> value_template: >-
> {{ (state_attr('media_player.currently_playing','media_content_type') == 'music') }}
> plex_tvshow_content_type:
> friendly_name: 'Plex OnePLus TV Show'
> value_template: >-
> {{ (state_attr('media_player.currently_playing','media_content_type') == 'tvshow') }}
> plex_movie_content_type:
> friendly_name: 'Plex OnePlus Movie'
> value_template: >-
> {{ (state_attr('media_player.currently_playing','media_content_type') == 'movie') }}
> 
> ```

Il me manque l'affichage de l'image lorsque rien n'est joué. Et régler quelques détails dans les alignements.  
Les boutons ne fonctionnent pas non plus.

PS : Merci pour ton temps et ton aide @Guizmos

---

<div class="post-metadata">

**Author:** ![Schumi](https://forum.hacf.fr/user_avatar/forum.hacf.fr/schumi/32/21330_2.png) [@Schumi](https://forum.hacf.fr/u/Schumi)\
**Post date:** [Mai 31, 2024, 6:21 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/104 "2024-05-31T18:21:32Z")

</div>

pas d’info pour moi @Guizmos ?

---

<div class="post-metadata">

**Author:** ![Guizmos](https://forum.hacf.fr/user_avatar/forum.hacf.fr/guizmos/32/11929_2.png) [@Guizmos](https://forum.hacf.fr/u/Guizmos)\
**Post date:** [Mai 31, 2024, 7:39 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/105 "2024-05-31T19:39:50Z")

</div>

Hello

Je t’avais renvoyé un code à tester il me semble…  
Regarde plus haut

---

<div class="post-metadata">

**Author:** ![Schumi](https://forum.hacf.fr/user_avatar/forum.hacf.fr/schumi/32/21330_2.png) [@Schumi](https://forum.hacf.fr/u/Schumi)\
**Post date:** [Juin 1, 2024, 6:18 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/106 "2024-06-01T06:18:35Z")

</div>

Cc.  
desolé, je n'avais pas vu que le code etait pour moi, je viens de tester et ca fonctionne, impec.  
seul "petit" soucis, c'est que la barre n'est pas vraiment au bonne endroit.  
je preferais l'avoir en dessous du titre de la serie, mais ici, elle se met sur la pochette du film ou de la serie.  
ou puis je modifier le placement de cette barre de progression ?  
Merci a toi.

 ![Capture d’écran 2024-06-01 à 08.15.47](https://forum.hacf.fr/uploads/default/original/3X/5/3/536e7360dcdf579a2c2db0993ff0b31997f6d464.png)

---

<div class="post-metadata">

**Author:** ![Guizmos](https://forum.hacf.fr/user_avatar/forum.hacf.fr/guizmos/32/11929_2.png) [@Guizmos](https://forum.hacf.fr/u/Guizmos)\
**Post date:** [Juin 1, 2024, 7:29 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/107 "2024-06-01T07:29:50Z")

</div>

Tu peux jouer sur ces valeurs pour déplacer la barre. En changeant le 0 par une autre valeur +/- ça devrait le faire

> [@Guizmos](#):
>
> ```auto
> .: |
> 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));
> 
> ```

---

<div class="post-metadata">

**Author:** ![Schumi](https://forum.hacf.fr/user_avatar/forum.hacf.fr/schumi/32/21330_2.png) [@Schumi](https://forum.hacf.fr/u/Schumi)\
**Post date:** [Juin 2, 2024, 4:13 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/108 "2024-06-02T16:13:37Z")

</div>

Impec ! ca fonctionne.  
un grand merci a toi @Guizmos  
super travail…

---

<div class="post-metadata">

**Author:** ![Guizmos](https://forum.hacf.fr/user_avatar/forum.hacf.fr/guizmos/32/11929_2.png) [@Guizmos](https://forum.hacf.fr/u/Guizmos)\
**Post date:** [Juin 2, 2024, 4:16 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/109 "2024-06-02T16:16:46Z")

</div>

Au top, avec plaisir

---

<div class="post-metadata">

**Author:** ![jeromarsan](https://forum.hacf.fr/user_avatar/forum.hacf.fr/jeromarsan/32/67866_2.png) [@jeromarsan](https://forum.hacf.fr/u/jeromarsan)\
**Post date:** [Juin 12, 2024, 8:40 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/110 "2024-06-12T08:40:16Z")

</div>

Super carte merci beaucoup !

Pour la musique on peut resize la taille de l’image ? Ca déborde sur ma tablette sur le mur 😃 Obligé de scroller pour voir la carte complete ahah

Merci 🙂

---

<div class="post-metadata">

**Author:** ![Guizmos](https://forum.hacf.fr/user_avatar/forum.hacf.fr/guizmos/32/11929_2.png) [@Guizmos](https://forum.hacf.fr/u/Guizmos)\
**Post date:** [Juin 12, 2024, 5:50 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/111 "2024-06-12T17:50:56Z")

</div>

Tu peux me faire un screenshot que je vois tout ça 😉

---

<div class="post-metadata">

**Author:** ![jeromarsan](https://forum.hacf.fr/user_avatar/forum.hacf.fr/jeromarsan/32/67866_2.png) [@jeromarsan](https://forum.hacf.fr/u/jeromarsan)\
**Post date:** [Juin 13, 2024, 7:16 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/112 "2024-06-13T19:16:51Z")

</div>

Pour arranger le coup j'ai mis une horizontal card avec deux players, ca prend moins de place.

 ![image](https://forum.hacf.fr/uploads/default/original/3X/3/0/301fad8498bd75eaf31c87f999c1d2f188b87bb6.png)

 ![image](https://forum.hacf.fr/uploads/default/original/3X/b/8/b8d2776ce151471d8906d52ab3f8222a43b7ddd6.png)

Idéalement j'aimerai que la carte d'orgine soit resizée en hauteur et largeur, pour rentrer dans mon dashboard sur la tablette. Avec un seul player, celui du salon 🙂

 ![image](https://forum.hacf.fr/uploads/default/original/3X/8/b/8bb644e54f164555f193638d793ee851c6ee0188.jpeg)  
La sur ma tablette, le rendu est le rectanglerouge, du coup, quand il y a la musique bas j'ai plus accès aux ouvertures en entier, je dois scroller. J'aimerai resizé la carte.

Et c'est normal que le player ne soit pas le m^me entre spotify et plex ? J'utilise aussi plexamp pour la musique j'ai pas les boutons pour les boutons de contrôle. Merci 😃

 ![image](https://forum.hacf.fr/uploads/default/original/3X/5/a/5a0fe2a3a226166e84dede1bef07bc5eea098df7.jpeg)

---

<div class="post-metadata">

**Author:** ![Guizmos](https://forum.hacf.fr/user_avatar/forum.hacf.fr/guizmos/32/11929_2.png) [@Guizmos](https://forum.hacf.fr/u/Guizmos)\
**Post date:** [Juin 14, 2024, 6:04 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/113 "2024-06-14T06:04:32Z")

</div>

Sympa ton dashboard.  
Tu peux partager ton code afin de je fasse quelques essais

Pour les boutons disponible ou non, cela dépend des attributs de ton media\_player…

---

<div class="post-metadata">

**Author:** ![jeromarsan](https://forum.hacf.fr/user_avatar/forum.hacf.fr/jeromarsan/32/67866_2.png) [@jeromarsan](https://forum.hacf.fr/u/jeromarsan)\
**Post date:** [Juin 14, 2024, 7:21 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/114 "2024-06-14T07:21:31Z")

</div>

Merci 🙂 C’est jsute la page d’accueil, j’ia modifié le thème waves à ma sauce ^^

Voilà mon code, merci !

```yaml
type: custom:stack-in-card
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.spotify_salon
    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: 16 / 9;
          {% elif media_type == 'movie' %}
            aspect-ratio: 2 / 3;
          {% else %}
            aspect-ratio: 1 / 1;
          {% endif %}
        }
  - type: conditional
    conditions:
      - entity: media_player.spotify_salon
        state_not: 'off'
      - entity: media_player.spotify_salon
        state_not: idle
    card:
      entity: media_player.spotify_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/medias/aucune_lecture.png') center no-repeat;
      {% if not is_state('media_player.spotify_salon', 'idle') %}
        background: url( '{{ state_attr('media_player.spotify_salon', "entity_picture") }}' ) center no-repeat;
      {% endif %}

      filter: blur(10px) saturate(150%);
      background-size: 100% 100%;
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
    }

```

---

<div class="post-metadata">

**Author:** ![Guizmos](https://forum.hacf.fr/user_avatar/forum.hacf.fr/guizmos/32/11929_2.png) [@Guizmos](https://forum.hacf.fr/u/Guizmos)\
**Post date:** [Juin 15, 2024, 7:45 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/115 "2024-06-15T07:45:08Z")

</div>

Salut,

Essaye avec ça, j’ai réduit ta carte de 10% dans cette exemple :

```yaml
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 {
          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;
          transform: scale(0.9); /* Reduce size by 10% */
        }
        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.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(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;
              transform: scale(0.9); /* Reduce size by 10% */
            }
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/medias/aucune_lecture.png') center no-repeat;
      {% if not is_state('media_player.currently_playing', 'idle') %}
        background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
      {% endif %}

      filter: blur(10px) saturate(150%);
      background-size: 100% 100%;
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      transform: scale(0.9); /* Reduce size by 10% */
    }

```

Tu peux jouer avec cette valeur :

```yaml
transform: scale(0.9); /* Reduce size by 10% */

```

Plus la valeur sera petite (0.9), plus ta carte le sera  
Cette valeur est à modifier à 3 endroits

---

<div class="post-metadata">

**Author:** ![jeromarsan](https://forum.hacf.fr/user_avatar/forum.hacf.fr/jeromarsan/32/67866_2.png) [@jeromarsan](https://forum.hacf.fr/u/jeromarsan)\
**Post date:** [Juin 15, 2024, 12:09 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/116 "2024-06-15T12:09:07Z")

</div>

Merci de ton retour. Ca réduisait bien la carte, mais j'avais toujours le margin qui me dérangeait du top.

J'ai enfin trouvé en modifiant juste la size du background. Ca prend pas toute la largeur mais finalement ca me va bien 🙂

```auto
          background-size: contain;
          margin: 1px 25px 10px;
          filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.5));
          border-radius: var(--control-border-radius);

```

J'ai du faire sauter les boutons de contrôle. En même temps ils n'apparaissent que sur spotify, pas plex donc ça me va 🙂

 ![image](https://forum.hacf.fr/uploads/default/original/3X/4/5/45ee8596a2fb3885949ac72eb4e053d80f030511.jpeg)

Merci encore !

Maintenant faut que je me penche sur les icônes d'ouverture qui ne se modifient pas, sauf la porte ... lol Seulement la couleur fonctionne

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Juin 28, 2024, 4:30 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/117 "2024-06-28T16:30:27Z")

</div>

Un message a été scindé en un nouveau sujet : [Media player , choix de la source?](https://forum.hacf.fr/t/media-player-choix-de-la-source/44107)

---

<div class="post-metadata">

**Author:** ![d4nm0n](https://forum.hacf.fr/user_avatar/forum.hacf.fr/d4nm0n/32/55436_2.png) [@d4nm0n](https://forum.hacf.fr/u/d4nm0n)\
**Post date:** [Juillet 3, 2024, 3:39 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/118 "2024-07-03T15:39:25Z")

</div>

Hello,  
Est-il possible d'avoir le même genre de card mais plutôt pour une Apple TV ?  
Que la carte affiche une image du contenu se trouvant sur l'apple tv.

j'ai essayer avec ce code et l'image a mettre dans www mais ca n'a pas la meme interface.

```yaml
type: custom:stack-in-card
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.salon_4
    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: 16 / 9;
          {% elif media_type == 'movie' %}
            aspect-ratio: 2 / 3;
          {% else %}
            aspect-ratio: 1 / 1;
          {% endif %}
        }
  - type: conditional
    conditions:
      - entity: media_player.salon_4
        state_not: 'off'
      - entity: media_player.salon_4
        state_not: idle
    card:
      entity: media_player.salon_4
      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/medias/aucune_lecture.png') center no-repeat;
      {% if not is_state('media_player.salon_4', 'idle') %}
        background: url( '{{ state_attr('media_player.salon_4', "entity_picture") }}' ) center no-repeat;
      {% endif %}

      filter: blur(10px) saturate(150%);
      background-size: 100% 100%;
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
    }

```

 ![image](https://forum.hacf.fr/uploads/default/original/3X/7/a/7a9aae4af12d6ce1f4b3692fc076b375990410b5.png)

Merci 🙂

---

<div class="post-metadata">

**Author:** ![Guizmos](https://forum.hacf.fr/user_avatar/forum.hacf.fr/guizmos/32/11929_2.png) [@Guizmos](https://forum.hacf.fr/u/Guizmos)\
**Post date:** [Juillet 4, 2024, 6:36 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/119 "2024-07-04T18:36:32Z")

</div>

Et voilà pour ta demande pour une caméra

```yaml
type: vertical-stack
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-media-player-card
        entity: camera.doorbell_high
        name: Doorbell
        icon: mdi:play
        use_media_info: true
        use_media_artwork: false
        show_volume_level: false
        fill_container: false
        card_mod:
          style: |
            mushroom-shape-icon {
              display: flex;
                --card-mod-icon: mdi:cctv;

              {{ 'animation: none;' if not is_state(config.entity, 'unavailable') }}

            }
            @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/mushroom/UI.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;
              margin: 4px 0px 10px;
              filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
              border-radius: var(--control-border-radius);

              {% if not is_state(config.entity, 'unavailable') %}
                aspect-ratio: 4 / 3;
              {% else %}
                aspect-ratio: 1 / 1;
              {% endif %}
            }
            }
      - type: conditional
        conditions:
          - entity: camera.doorbell_high
            state_not: recording
        card:
          entity: camera.doorbell_high
          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, 'recording') }}
                }
              .: |
                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/mushroom/UI.png') center no-repeat;
          {% if not is_state('camera.doorbell_high', 'unavailable') %}
            background: url( '{{ state_attr('camera.doorbell_high', "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);
        }

```

---

<div class="post-metadata">

**Author:** ![Guizmos](https://forum.hacf.fr/user_avatar/forum.hacf.fr/guizmos/32/11929_2.png) [@Guizmos](https://forum.hacf.fr/u/Guizmos)\
**Post date:** [Juillet 4, 2024, 6:40 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/120 "2024-07-04T18:40:49Z")

</div>

Concernant ta demande pour une Apple TV, je l’utilise aussi, mais la quasi totalité de mes visionnages passent par Plex.

Il faudrait voir ce que te donne ton media\_player (media\_player.salon\_4) dans les outils de dev.  
Il n’a peut être pas les même attributs…

---

<div class="post-metadata">

**Author:** ![Guizmos](https://forum.hacf.fr/user_avatar/forum.hacf.fr/guizmos/32/11929_2.png) [@Guizmos](https://forum.hacf.fr/u/Guizmos)\
**Post date:** [Juillet 4, 2024, 6:44 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/121 "2024-07-04T18:44:14Z")

</div>

> [@d4nm0n](#):
>
> ```auto
> {% 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 %}
> 
> ```

Et je sais que pour mon media\_player.currently\_playing (qui m’affiche le player en cours de lecture suivant une liste prédéfinie), j’ai du ajouter et ajuster une partie du code suivant :

```auto
          {% 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 %}

```

en :

```auto
          {% 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;
          {% elif media_type == 'video' %}
            aspect-ratio: 2 / 3;
          {% else %}
            aspect-ratio: 1 / 1;
          {% endif %}

```

Car suivant le contenu de lecture, j’avais cet attribut ‹&nbsp;video&nbsp;› qui remontait

---

<div class="post-metadata">

**Author:** ![d4nm0n](https://forum.hacf.fr/user_avatar/forum.hacf.fr/d4nm0n/32/55436_2.png) [@d4nm0n](https://forum.hacf.fr/u/d4nm0n)\
**Post date:** [Juillet 5, 2024, 6:55 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/122 "2024-07-05T06:55:58Z")

</div>

Bonjour,

J'ai modifié la carte pour qu'elle corresponde à ce que je voulais. Il est possible que quelques modifications soient nécessaires par la suite.

```yaml
type: custom:stack-in-card
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.salon_4
    icon: mdi:play
    use_media_info: true
    use_media_artwork: false
    show_volume_level: false
    media_controls:
      - play_pause_stop
      - previous
      - next
    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 == 'video' %}
            --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('media_player.salon_4', 'idle') or is_state('media_player.salon_4', 'standby')) %}
            background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
          {% endif %}
          
          width: 50%;
          height: auto;
          background-size: contain;
          margin: 4px 4px 16px;
          margin-left: auto;
          margin-right: auto;
          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;
          {% elif media_type == 'video' %}
            aspect-ratio: 2 / 3;
          {% else %}
            aspect-ratio: 1 / 1;
          {% endif %}
        }
  - type: conditional
    conditions:
      - entity: media_player.salon_4
        state_not: 'off'
      - entity: media_player.salon_4
        state_not: idle
    card:
      entity: media_player.salon_4
      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.salon_4', 'idle') or is_state('media_player.salon_4', 'standby')) %}
        background: url( '{{ state_attr('media_player.salon_4', "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);
    }

```

Cela donne ceci en mode idle ou en standby :  
L'Apple TV me renvoie un statut "standby" lorsqu'elle est en veille.

 ![image](https://forum.hacf.fr/uploads/default/original/3X/e/f/ef77c6d30022dc5cfda95decaaea54a1ad3c57a9.jpeg)

Quand il y a du contenu :

 ![IMG_0144.PNG](https://forum.hacf.fr/uploads/default/original/3X/4/1/41c6541ece29f281b96035034c9d07deb81595d7.jpeg)

[Page précédente](https://forum.hacf.fr/t/mushroom-media-player-card/18649.md?page=5)

[Page suivante](https://forum.hacf.fr/t/mushroom-media-player-card/18649.md?page=7)