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

2 « 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.