Mushroom - Media Player Card

Hello,

D’après ce que je peux voir sur les captures, il n’y a pas d’entité qui remonte l’image de ce que tu regarde.

Par contre chez moi en faisant quelques tests, j’ai un media_player (via l’intégration Apple) pour mon Apple TV qui remonte bien l’image de la chaine OQEE.

Du coup je ferais un screen ce soir quand je serais à la maison pour te faire voir la petite carte que j’ai bricolé.

Et donc pour toi, si tu passes directement via l’intégration Freebox, j’ai bien l’impression que tu n’auras pas cette possibilité

C’est pas finis mais en gros ca donne ca:

Incrustation du fond de carte avec l’image du programme en cours de lecture sur OQEE

3 « J'aime »

Tu aurais le code pour afficher ta carte de la Freebox avec les images des émissions ? Merci.

Salut,
C’est top !
Je veux bien faire le test sur mon installation une fois que tu auras fini.
:slight_smile:

Salut, je suis navré de revenir demander de l’aide. Mais j’ai récemment migré mon installation et réorganisé les fichiers de configs pour avoir les templates dans des fichiers séparés dans le dossier templates.
J’ai deux entités à suivre :
media_player.freebox_player_pop → Pour la freebox
media_player.plex_plex_for_android_tv_freebox_player_pop_2 → Pour Plex sur la Freebox

Depuis ces changements, ma carte ne fonctionne plus.
La carte

type: vertical-stack
cards:
  - 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_music_content_type
                        state: "on"
                    card:
                      type: custom:mushroom-chips-card
                      chips:
                        - type: template
                          content: >
                            {% if
                            (states['media_player.currently_playing'].attributes['active_child']
                            == 'media_player.plex_plex_web_chrome_windows_9') %}
                                LilP'PC Plex
                            {% endif %} {% if
                            (states['media_player.currently_playing'].attributes['active_child']
                            == 'media_player.plex_plexamp_android') %}
                                LilP OnePlus
                            {% 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);
          }

media_player.yaml présent dans config/packages

##Groupe Media Player
media_player:
  - platform: universal
    name: Currently Playing
    children:
      - media_player.freebox_player_pop
      - media_player.freebox_player_pop_2
      - media_player.plex_plex_for_android_tv_freebox_player_pop_2

sensors_template.yaml présent dans config/template

# packages/sensors_template.yaml
sensor:
  - 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') }}

Le statut de media.player_currently



Le premier player controle la télé, via les boutons play, pause et le bouton poweroff.
Le deuxième permet de naviguer dans les médias et permet d’éteindre aussi.


Et le dernier est le controle de plex sur la freebox.

Edit : L’erreur venait de mon appel au fichier sensors_template.yaml et de sa structure, le bon format du fichier devant être

# packages/sensors_template.yaml
binary_sensor:
  - 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' }}

Vu que mon fichie configuration.yaml l’appel de la manière suivante :

homeassistant:
  packages: !include_dir_named packages

Bonjour, avez vous eu le code ? ou avez vous trouver une solution ? je passe directement par l’application oqee by free sur mon android TV je n’ai pas non plus les vignettes qui remonte. D’avance merci.

pour info: je n’utilise pas plex, mais les applications directement via mon android TV (netflix, prime, disney…etc) si qu’elqu’un a un code fonctionnelle cela serait top :smiley:

Salut la team,

Désolé pour mon absence :slight_smile:
Pour rappel, voici les éléments dont je dispose :

  • Apple TV
  • Application Plex
  • Application OQEE by Free

Non obligatoire, ajout d’un template pour créer un sensor utilisant le nom OQEE by Free pour pouvoir l’utiliser avec une conditional card (permet d’afficher ou non la carte). J’utilise l’attribut « app_name » du media_player apple tv

template:
  - sensor:
      - name: "Apple TV App"
        state: "{{ state_attr('media_player.apple_tv_4k', 'app_name') }}"

Voici le code de la carte Free avec affichage du programme en fond de carte:

    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: conditional
            conditions:
              - entity: media_player.apple_tv_4k
                state_not: playing
              - entity: media_player.apple_tv_4k
                state_not: paused
            card:
              type: vertical-stack
              cards:
                - type: custom:mushroom-media-player-card
                  entity: media_player.apple_tv_4k
                  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('{{ states('sensor.plex_recently_all_poster_1') }}') center no-repeat;
                        {% if not is_state(config.entity, ['standby', 'unavailable']) %}
                          background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
                          width: 50%;
                        {% 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: 2 / 3;
                        {% elif media_type == 'movie' %}
                          aspect-ratio: 2 / 3;
                        {% elif media_type == 'video' %}
                          aspect-ratio: 2 / 3;
                        {% elif media_type == 'music' %}
                          aspect-ratio: 1 / 1;
                        {% else %}
                          aspect-ratio: 2 / 3;
                        {% 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: media_player.apple_tv_4k
                state: playing
            card:
              type: vertical-stack
              cards:
                - type: custom:mushroom-media-player-card
                  entity: media_player.apple_tv_4k
                  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, ['standby', '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: 2 / 3;
                          margin: 0px -45px 0px 0px;
                          margin-top: 1px;
                        {% elif media_type == 'movie' %}
                          aspect-ratio: 2 / 3;
                        {% elif media_type == 'video' %}
                          aspect-ratio: 16 / 9;
                          width: 190%;
                          margin: -50px -6px 0px -10px;
                        {% else %}
                          aspect-ratio: 1 / 1;
                          width: 99%;
                        {% endif %}
                      }
                      ha-card {
                        transform: translate3d(0,0,0);
                        -webkit-transform: translate3d(0,0,0);
                        border-radius: 30px;
                        margin: 50px -25px 0px 10px;
                        overflow: visible !important;
                        box-shadow: none !important;
                        background-color: transparent;
                        border: none !important;
                      }
          - type: grid
            columns: 1
            square: false
            cards:
              - type: horizontal-stack
                cards:
                  - type: conditional
                    conditions:
                      - entity: media_player.apple_tv_4k
                        state: playing
                    card:
                      type: custom:mushroom-chips-card
                      chips:
                        - type: template
                          content: >
                            {{ state_attr('media_player.apple_tv_4k',
                            'app_name') }}
                          entity: media_player.apple_tv_4k
                          tap_action:
                            action: none
                      alignment: center
                      card_mod:
                        style:
                          style: |
                            ha-card {
                              margin: 5px -15px 0px 0px;
                              --chip-background: rgba(var(--rgb-disabled), 0.95);
                              --ha-card-box-shadow: none;
                              --chip-border-radius: 12px;
                              --chip-height: 30px;
                              --chip-padding: 10px;
                  - type: conditional
                    conditions:
                      - entity: media_player.apple_tv_4k
                        state: playing
                    card:
                      type: custom:mushroom-chips-card
                      chips:
                        - type: template
                          content: >
                            {{ state_attr('media_player.apple_tv_4k',
                            'media_title') }}
                          entity: media_player.apple_tv_4k
                          tap_action:
                            action: none
                      alignment: center
                      card_mod:
                        style:
                          style: |
                            ha-card {
                              margin: 5px 10px 0px 0px;
                              --chip-background: rgba(var(--rgb-disabled), 0.95);
                              --ha-card-box-shadow: none;
                              --chip-border-radius: 12px;
                              --chip-height: 30px;
                              
                            }
    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.apple_tv_4k', "entity_picture") }}') center no-repeat;
          {% if not is_state('sensor.recently_added', 'Online') %}
            background: url('{{ states('sensor.plex_recently_all_poster_1_poster_1') }}') 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);
        }

2 « J'aime »

Tu fais bien une carte personnalisée quand tu veux l’ajouter ?

Après pas mal de prises de têtes.
Voici le code, que j’ai et l’affichage fournis.
Je n’ai pas l’image des émissions TV car juste avec l’application Free cela ne semble pas fonctionner.

type: vertical-stack
cards:
  - 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: MediaPlayer
                      subtitle: >
                        {% if is_state('media_player.currently_playing',
                        'playing') %}
                          Lecture en cours
                        {% elif is_state('media_player.currently_playing', 'on')
                        %}
                          Lecture en cours
                        {% elif is_state('media_player.currently_playing',
                        'idle') %}
                          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: media_player.currently_playing
                          attribute: active_child
                          state: media_player.freebox_player_pop
                      card:
                        type: custom:mushroom-chips-card
                        chips:
                          - type: template
                            content: >
                              {% if states('media_player.currently_playing') !=
                              'off' %}
                                {% if state_attr('media_player.currently_playing', 'app_name') %}
                                  TV - {{ state_attr('media_player.freebox_player_pop_2', 'media_title') }}
                                {% else %}
                                  TV - {{ state_attr('media_player.freebox_player_pop_2', 'media_title') }}
                                {% endif %}
                              {% 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: media_player.currently_playing
                          attribute: active_child
                          state: media_player.freebox_player_pop_2
                      card:
                        type: custom:mushroom-chips-card
                        chips:
                          - type: template
                            content: >
                              {% if states('media_player.currently_playing') !=
                              'off' %}
                                {% if state_attr('media_player.currently_playing', 'app_name') %}
                                  TV - {{ state_attr('media_player.currently_playing', 'media_title') }}
                                {% else %}
                                  TV - {{ state_attr('media_player.freebox_player_pop_2', 'media_title') }}
                                {% endif %}
                              {% 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_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') }} - {{
                          state_attr('media_player.currently_playing',
                          'media_title') }} - S{{
                          state_attr('media_player.currently_playing',
                          'media_season') }}E{{
                          state_attr('media_player.currently_playing',
                          'media_episode') }}
            - 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_music_content_type
                        state: "on"
                    card:
                      type: custom:mushroom-chips-card
                      chips:
                        - type: template
                          content: >
                            {% if
                            (states['media_player.currently_playing'].attributes['active_child']
                            == 'media_player.plex_plex_web_chrome_windows_9') %}
                                LilP'PC Plex
                            {% endif %} {% if
                            (states['media_player.currently_playing'].attributes['active_child']
                            == 'media_player.plex_plexamp_android') %}
                                LilP OnePlus
                            {% 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);
          }

1 « J'aime »

@Guizmos coucou :slight_smile:

Quelques mois après je suis de retour, pour essayer de modifier la carte !

On peut rajouter la source en bouton ?

Et autre question, est-ce qu’il est possible de mettre l’effet flou seulement lors de la lecture d’un media ? Quand rien n’est joué, j’avais mes enfants en photo ^^ j’avais enlevé le flou, mais je perdais l’effet flouté lors de la lecture.

Merci à toi :wink:

Oui tu ajoutes une carte « manuelle » puis tu copies/colle le code

Pour rajouter la source en bouton je sais pas trop. Tu peux lui attribuer un tap_action. A toi d’imaginer le reste :wink:
Pour le floue j’ai pas trop compris…

ChatGPT m’a aidé :slight_smile: je m’étais peut être mal exprimé :

card_mod:
  style: |
    ha-card:before {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;

      {% if is_state('media_player.currently_playing', 'idle') or is_state('media_player.currently_playing', 'standby') %}
        background: url('/local/medias/aucune_lecture.png') center no-repeat;
        filter: none;
      {% else %}
        background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
        filter: blur(20px) saturate(100%);
      {% endif %}

      background-size: 100% 100%;
    }
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
    }

Ce que ça fait :

  • Si le media player est en idle ou standby → image statique sans effet.
  • Sinon (donc en lecture) → entity_picture avec blur + saturation.

En lecture :

Quand rien est lu :

Je vais remettre une photo de mes enfants, ou plusieurs qui défilent à voir ^^

1 « J'aime »