Mushroom - Media Player Card

Bonjour,

Je voulais partager une card media_player que je trouve plutôt jolie.
J’utilise le thème Mushroom.

Pour la partie card lovelace :

mushroom - media
Verson large avec affichage du media en cours + image en fond

Code
type: custom:mushroom-template-card
primary: Plex
secondary: '{{ states(''sensor.plex_tv_playing'')}}'
entity: media_player.plex_tv
name: Plex
layout: vertical
secondary_info: none
icon: mdi:multimedia
card_mod:
  style: |
    ha-card {
      {% if not is_state(config.entity, 'idle') %}
        background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: rgba(var(--rgb-card-background-color),0.8);
        background-blend-mode: overlay;
      {% endif %}  
      --rgb-state-media-player: var(--rgb-teal);
    }

card mushroom
Version petite avec affichage du nom du média en cours + image en fond ou (si off) affichage du nom du dernier films téléchargé

Code
type: custom:mushroom-template-card
primary: Multimédia
secondary: |-
  {% if is_state('sensor.plex_tv_playing', '') %}
   {{ states('sensor.plex_recently_movies_name_1') }}
  {% else %}
   {{ states('sensor.plex_tv_playing') }}
  {% endif %}
icon: mdi:multimedia
layout: vertical
icon_color: grey
picture: ''
entity: media_player.plex_tv
card_mod:
  style: |
    ha-card {
      {% if not is_state(config.entity, 'idle') %}
        background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: rgba(var(--rgb-card-background-color),0.8);
        background-blend-mode: overlay;
      {% endif %}  
      --rgb-state-media-player: var(--rgb-teal);
    }

La partie media_player :


Affichage d’un image si aucun media en cours de lecture

media - tvshow
Afichage d’une série en cours


Affichage d’un film en cours

Code
type: custom:stack-in-card
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.plex_tv
    name: Philips TV - Plex
    icon: mdi:play
    use_media_info: true
    use_media_artwork: false
    show_volume_level: false
    media_controls:
      - play_pause_stop
      - previous
      - next
    volume_controls:
      - volume_buttons
      - volume_set
    fill_container: false
    card_mod:
      style: |
        mushroom-shape-icon {
          display: flex;
          {% set media_type = state_attr(config.entity, 'media_content_type') %}
          {% if media_type == 'tvshow' %}
            --card-mod-icon: mdi:television-classic;
            animation: flicker 1s linear infinite alternate;
          {% elif media_type == 'movie' %}
            --card-mod-icon: mdi:movie-roll;
            animation: spin 2s linear infinite reverse;
          {% elif media_type == 'music' %}
            --card-mod-icon: mdi:music;
            animation: beat 1.3s ease-out infinite both;
          {% elif media_type == 'playlist' %}
            --card-mod-icon: mdi:music;
            animation: beat 1.3s ease-out infinite both;
          {% else %}
            --card-mod-icon: mdi:play;
          {% endif %}

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

        }
        @keyframes flicker {
          0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
          32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
        }
        @keyframes beat {
          0%, 60% { --icon-symbol-size: 21px; }
          5%, 17%, 57% { --icon-symbol-size: 22px; }
          10%, 20%, 51% { --icon-symbol-size: 23px; }
          25%, 45% { --icon-symbol-size: 24px; }
          30%, 39% { --icon-symbol-size: 25px; }
          33% { --icon-symbol-size: 26px; }
        }
        ha-card {
          --ha-card-border-width: 0;
        }
        ha-card:before {
          transform: translate3d(0,0,0);
          -webkit-transform: translate3d(0,0,0);
          content: "";

          background: url('/local/idle_art.png') center no-repeat;
          {% if not is_state(config.entity, 'idle') %}
            background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
          {% endif %}

          background-size: contain;
          margin: 4px 4px 16px;
          filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
          border-radius: var(--control-border-radius);

          {% set media_type = state_attr(config.entity, 'media_content_type') %}
          {% if media_type == 'tvshow' %}
            aspect-ratio: 16 / 9;
          {% elif media_type == 'movie' %}
            aspect-ratio: 2 / 3;
          {% else %}
            aspect-ratio: 1 / 1;
          {% endif %}
        }
  - type: conditional
    conditions:
      - entity: media_player.plex_tv
        state_not: 'off'
      - entity: media_player.plex_tv
        state_not: idle
    card:
      entity: media_player.plex_tv
      hide:
        icon: true
        name: true
        runtime: true
        source: true
        power: true
        state_label: true
        volume: true
        info: true
        progress: false
        controls: true
      more_info: false
      type: custom:mini-media-player
      toggle_power: false
      group: true
      card_mod:
        style:
          mmp-progress$: |
            paper-progress {
              {{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
            }
          .: |
            ha-card {
              margin: 0px 12px 12px;
              --mmp-progress-height: 12px !important;
              height: var(--mmp-progress-height);
              --mmp-accent-color: rgb(var(--rgb-indigo-color));
              --mmp-border-radius: 12px !important;
              --ha-card-border-width: 0;
            }
card_mod:
  style: |
    ha-card:before {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;

      background: url('/local/idle_art.png') center no-repeat;
      {% if not is_state('media_player.plex_tv', 'idle') %}
        background: url( '{{ state_attr('media_player.plex_tv', "entity_picture") }}' ) center no-repeat;
      {% endif %}

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

Image de fond quand aucune lecture (à copier dans /config/www)

Adaptation:
On peut aussi très bien imaginer se servir de cette card pour l’affichage d’une caméra :

camera - exemple

Ou juste pour mettre en valeur une image (ici le poster du dernier film téléchargé) :


Ou pour afficher l’écran d’un PC :

Source :

Voila, amusez-vous bien :wink:

5 « J'aime »

Avec le lien où tu as pris l’inspiration ce serait mieux.

3 « J'aime »

Yes, merci je n’arrivais plus à mettre la main dessus @cob94440
Je l’ai ajouté à mon premier post

Bonjour Merci pour le Mushroom.
Pourriez-vous m’aider, je n’arrive pas à le faire fonctionner :slight_smile:
je passe a côté de qque chose. J’ai bien installé dans Hacs Mushroom et Mushroom themes.j’ai modifié l’info entity, il y a autre chose à modifier ?
Voici mon erreur dans la configuration de la carte.
rd_mod – Expected a value of type never, but received: [object Object]
Vous pouvez toujours modifier votre configuration dans YAML.

merci beaucoup

Bonjour cardmod est bien installé ?

Salut
je me suis intéressé à ce sujet.
Pour la vue des images des films série etc… comment cela marche ? la carte va directement trouvé l’info ou c’est à nous de lui « donner » l’image ?

J’ai testé un peu hier avec Netflix par exemple sur une série qui est sortie récemment l’image de la série n’apparaît pas.
En revanche si je dit pas de bêtise ça marche pour la musique

Salut,

Alors pour les images, pour ma part c’est l’intégration Plex qui me permet ça.

Capture d’écran 2023-01-19 095314

Elle me remonte les devices sur lequel sont installés Plex puis créé des appareils media_player.
Ce media_player remonte les images automatiquement.

Il te suffit de remplacer les media_player du code par le tiens et normalement ça roule

1 « J'aime »

ah oui ok d’accord je vais tester ça je te remercie

Salut,
j’utilise Kodi et avec mini media player ca m’affiche un Screenshot du film et pas la jaquette.
J’ai bien les jaquettes, comme j’utilise la médiathèque avec les images stocker sur nas et mysql.
Mais je trouve rien pour choisir jaquette ou Screenshot du film, une idée ?

pour moi le media_player (lorsqu’il est en playing) affiche toutes ces infos :

Du coup si je comprends bien le code de la card, il va chercher l’attribut « media_content_type » pour définir le ratio d’affichage de la jaquette :

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

il va aussi l’utiliser pour l’animation :

          {% set media_type = state_attr(config.entity, 'media_content_type') %}
          {% if media_type == 'tvshow' %}
            --card-mod-icon: mdi:television-classic;
            animation: flicker 1s linear infinite alternate;
          {% elif media_type == 'movie' %}
            --card-mod-icon: mdi:movie-roll;
            animation: spin 2s linear infinite reverse;
          {% elif media_type == 'music' %}
            --card-mod-icon: mdi:music;
            animation: beat 1.3s ease-out infinite both;
          {% elif media_type == 'playlist' %}
            --card-mod-icon: mdi:music;
            animation: beat 1.3s ease-out infinite both;
          {% else %}
            --card-mod-icon: mdi:play;
          {% endif %}

Pour la jaquette il va chercher l’attribut « entity_picture » du media_player :

          background: url('/local/idle_art.png') center no-repeat;
          {% if not is_state(config.entity, 'idle') %}
            background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
          {% endif %}

Il y a peut-être un attribut différent avec kodi ?
Tu as quoi comme attributs qui remonte sur ton media_player ?

J’ai une version « simpliste » de la card.
Avec quelques nouveautés:

  • Fond animé qui reprend toujours les couleur de la pochette
  • Fond qui déborde légèrement de la card
  • Affichage du title du media en cours de lecture

Capture d’écran 2023-01-19 105218
Quand aucun media en cours de lecture


Exemple film et musique

Code
type: custom:stack-in-card
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.plex_iphone_damien
    primary_info: none
    secondary_info: none
    icon_type: none
    use_media_info: false
    use_media_artwork: false
    show_volume_level: false
    fill_container: false
    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 0;
        }
        ha-card:before {
          transform: translate3d(0,0,0);
          -webkit-transform: translate3d(0,0,0);
          content: "";

          background: url('/local/mushroom/idle_art.png') center no-repeat;
          {% if not is_state(config.entity, 'unavailable') %}
            background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
          {% endif %}

          background-size: contain;
          margin: 4px 4px 0px;
          filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
          border-radius: var(--control-border-radius);

          {% set media_type = state_attr(config.entity, 'media_content_type') %}
          {% if media_type == 'tvshow' %}
            aspect-ratio: 16 / 9;
          {% elif media_type == 'movie' %}
            aspect-ratio: 2 / 3;
          {% else %}
            aspect-ratio: 1 / 1;
          {% endif %}
        }
  - type: conditional
    conditions:
      - entity: media_player.plex_iphone_damien
        state_not: 'off'
      - entity: media_player.plex_iphone_damien
        state_not: idle
      - entity: media_player.plex_iphone_damien
        state_not: unavailable
    card:
      type: custom:mushroom-title-card
      title: ''
      alignment: center
      subtitle: >-
        {{ state_attr('media_player.plex_iphone_damien', 'media_artist') }} - {{
        state_attr('media_player.plex_iphone_damien', 'media_title') }}
card_mod:
  style: |
    ha-card:before {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      content: "";
      position: absolute;
      height: 100%;
      width: 100%;

      background: url('/local/mushroom/idle_art.png') center no-repeat;
      {% if not is_state('media_player.plex_iphone_damien', 'idle') and not is_state('media_player.plex_iphone_damien', 'off') and not is_state('media_player.plex_iphone_damien', 'paused') and not is_state('media_player.plex_iphone_damien', 'unavailable') %}
        background: url( '{{ state_attr('media_player.plex_iphone_damien', "entity_picture") }}' ) center no-repeat;
        animation: Gradient 20s linear 3;
      {% endif %}

      filter: blur(100px) saturate(200%);
      background-size: 100% 100%;
    }
    @media (max-width: 600px) {
      ha-card:before {
        background-size: 60% 60%;
        filter: blur(70px) saturate(200%);
      }
    }
    @keyframes Gradient {
      0% {
        background-position: 0% 50%;
      }
      25% {
        background-position: 50% 0%;
      }
      50% {
        background-position: 100% 50%;
      }
      75% {
        background-position: 50% 100%;
      }
      100% {
        background-position: 0% 50%;
      }
    } 
    ha-card {
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      border-radius: 30px;
      overflow: visible !important;
      background-color: transparent;
      border: none !important;
    }
    @media (min-width: 1200px) {
      ha-card {
        margin-top: 30px;
      }
    }
    :host {
      margin-top: 50px !important;
      --album-art-color:      
      {% if not is_state('media_player.plex_iphone_damien', 'idle') and not is_state('media_player.plex_iphone_damien', 'off') %}
        {{ states('sensor.plex_recently_all_poster_1') }}
      {% else %}
        var(--rgb-indigo-color)
      {% endif %};
    }

voila les attributs de kodi, et comme toi j’utilise le « entity_picture » mais c’est pas la jaquette. :stuck_out_tongue:
Pas sur que ca soit possible sur kodi.

Et si tu test avec mon code ça donne quoi ?
Pas de jaquette non plus ?

Après c’est surement Kodi qui remonte cette image au lieu de la jaquette

Je testerai ton code, mais je pense plutôt que c’est kodi le soucis. Car dans MultiMedia, il y a aucune jaquette sur ma bibliothèque.

Peut-être une solution pour toi :

Je vais allez lire tout ca :wink:

ah oui par contre ça t’oblige a utiliser plex pour le visionnage de films series etc ?

Je ne passe que par plex. Sur TV, tablette ou téléphone :stuck_out_tongue_winking_eye:
Je l’utilise depuis des années et ça fonctionne parfaitement

Avec emby c’est fonctionnel aussi.