# 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:** 4

<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:** [Mars 17, 2024, 6:23 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/62 "2024-03-17T06:23:28Z")

</div>

Salut

Peux-Tu copier le code complet de ta card s’il te plait?

Merci

---

<div class="post-metadata">

**Author:** ![Geoffrey\_Pariset](https://forum.hacf.fr/user_avatar/forum.hacf.fr/geoffrey_pariset/32/47628_2.png) [@Geoffrey\_Pariset](https://forum.hacf.fr/u/Geoffrey_Pariset)\
**Post date:** [Mars 17, 2024, 12:28 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/63 "2024-03-17T12:28:48Z")

</div>

> **Code**
>
> ```auto
> 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);
> }
> 
> ```

---

<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:** [Mars 17, 2024, 2:46 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/64 "2024-03-17T14:46:29Z")

</div>

Essaye en retirant la ligne  
« name: Plex »

Redis moi

---

<div class="post-metadata">

**Author:** ![Geoffrey\_Pariset](https://forum.hacf.fr/user_avatar/forum.hacf.fr/geoffrey_pariset/32/47628_2.png) [@Geoffrey\_Pariset](https://forum.hacf.fr/u/Geoffrey_Pariset)\
**Post date:** [Mars 17, 2024, 3:20 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/65 "2024-03-17T15:20:40Z")

</div>

Non toujours rien.

Ya t’il de quoi a rajouter dans YAML ?

---

<div class="post-metadata">

**Author:** ![Geoffrey\_Pariset](https://forum.hacf.fr/user_avatar/forum.hacf.fr/geoffrey_pariset/32/47628_2.png) [@Geoffrey\_Pariset](https://forum.hacf.fr/u/Geoffrey_Pariset)\
**Post date:** [Mars 17, 2024, 3:34 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/66 "2024-03-17T15:34:57Z")

</div>

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é ?

---

<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:** [Mars 17, 2024, 5:10 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/67 "2024-03-17T17:10:53Z")

</div>

Test avec ce code:

```yaml
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);
      }

```

---

<div class="post-metadata">

**Author:** ![Geoffrey\_Pariset](https://forum.hacf.fr/user_avatar/forum.hacf.fr/geoffrey_pariset/32/47628_2.png) [@Geoffrey\_Pariset](https://forum.hacf.fr/u/Geoffrey_Pariset)\
**Post date:** [Mars 17, 2024, 5:24 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/68 "2024-03-17T17:24:41Z")

</div>

Non malheureusement j'ai toujours ce message

 ![1000001646](https://forum.hacf.fr/uploads/default/original/3X/f/8/f866ab4a3dbc80f2be8a40caa59f50bc6ca394fc.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:** [Mars 17, 2024, 5:43 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/69 "2024-03-17T17:43:34Z")

</div>

Bizarre je n’ai pas de message avec ce code

Tu as bien installé card-mod depuis hacs?

---

<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:** [Mars 17, 2024, 7:32 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/70 "2024-03-17T19:32:04Z")

</div>

Et comme ça c’est mieux ?

```yaml
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 :

```auto
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);
     }

```

---

<div class="post-metadata">

**Author:** ![Geoffrey\_Pariset](https://forum.hacf.fr/user_avatar/forum.hacf.fr/geoffrey_pariset/32/47628_2.png) [@Geoffrey\_Pariset](https://forum.hacf.fr/u/Geoffrey_Pariset)\
**Post date:** [Mars 17, 2024, 9:35 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/71 "2024-03-17T21:35:56Z")

</div>

Oui c'est bien installé

Voilà le résultat pour les 2

 ![1000001648](https://forum.hacf.fr/uploads/default/original/3X/9/9/994963d0feb092572a34a27cd9d96f9c559db2b3.png)

---

<div class="post-metadata">

**Author:** ![Geoffrey\_Pariset](https://forum.hacf.fr/user_avatar/forum.hacf.fr/geoffrey_pariset/32/47628_2.png) [@Geoffrey\_Pariset](https://forum.hacf.fr/u/Geoffrey_Pariset)\
**Post date:** [Mars 19, 2024, 2:36 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/72 "2024-03-19T02:36:02Z")

</div>

Bon bah ça fonctionne.  
Pourquoi ? Je sais pas, ça c’est mis a marché d’un coup.  
😁😁

---

<div class="post-metadata">

**Author:** ![voyagers21](https://forum.hacf.fr/user_avatar/forum.hacf.fr/voyagers21/32/23254_2.png) [@voyagers21](https://forum.hacf.fr/u/voyagers21)\
**Post date:** [Mai 18, 2024, 6:06 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/73 "2024-05-18T06:06:09Z")

</div>

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 ?

 ![Screenshot 2024-05-18 08.05.42](https://forum.hacf.fr/uploads/default/original/3X/7/a/7a0e7d946a9436a26859eb917ed1d5645b530662.png)

```yaml
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);
    }

```

---

<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 23, 2024, 11:01 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/74 "2024-05-23T11:01:05Z")

</div>

Salut,

Pour moi cela fonctionne mais uniquement en local. A distance je ne peux pas obtenir les contrôles

---

<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 25, 2024, 7:46 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/75 "2024-05-25T07:46:52Z")

</div>

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 ??

 ![Capture d’écran 2024-05-25 à 09.47.43](https://forum.hacf.fr/uploads/default/original/3X/f/2/f258793bf9c2b25194537b0e1bdf88b01aa2c17c.png)

voici mon code:

```yaml
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...

---

<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 30, 2024, 7:28 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/76 "2024-05-30T07:28:22Z")

</div>

Salut et merci pour le partage et l'aide.  
Voici mon code :

```yaml
  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

```yaml
##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:

```yaml
## 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

 ![](https://forum.hacf.fr/uploads/default/original/3X/a/6/a6aeae62888aebbbde20c2e43619f34276275a64.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:** [Mai 30, 2024, 10:13 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/77 "2024-05-30T10:13:57Z")

</div>

Salut,

Est-ce que tu as bien installé l’intégration «&nbsp;Plex Recently Added&nbsp;» ?

---

<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 30, 2024, 10:17 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/78 "2024-05-30T10:17:11Z")

</div>

Salut,

Test avec ce code pour voir :

```yaml
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);
    }

```

---

<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 30, 2024, 11:58 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/79 "2024-05-30T11:58:29Z")

</div>

Avec le code partager, cela m'affiche :

 ![](https://forum.hacf.fr/uploads/default/original/3X/b/c/bcf80d8c2ee36e8f3a149ba456499c69c5093c84.png)  
Je n'ai par contre pas les boutons de navigation ou l'affichage du genre.  
 ![](https://forum.hacf.fr/uploads/default/original/3X/3/4/349d5c8e88b0d2cd251431f56d0d27bf7457921d.png)  
Plex Recently Added, semble bien installé, en tout cas il est présent dans les intégrations HACS  
 ![](https://forum.hacf.fr/uploads/default/original/3X/6/c/6c967f2e4432d1264dfbf181756fb9739ecbf4fd.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:** [Mai 30, 2024, 12:07 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/80 "2024-05-30T12:07:55Z")

</div>

Fais voir ton code complet s’il te plait

---

<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 30, 2024, 12:24 UTC](https://forum.hacf.fr/t/mushroom-media-player-card/18649/81 "2024-05-30T12:24:32Z")

</div>

Le code de la carte

```yaml
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);
      }

```

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

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