Skip to content

Media_player Card

Description

example-image example-image example-image example-image example-image example-image

The card_media_player shows you the app, the title and the album name playing, if the data is available through HA. The app is shown via a different icon.

Variables

Variable Default Required Notes
entity The media-player entity
ulm_card_media_player_name Name to display for your media-player
ulm_card_media_player_icon Change the icon displayed
ulm_card_media_player_enable_art false Enable album picture on background
ulm_card_media_player_enable_controls false Enable controls bellow the title
ulm_card_media_player_enable_volume_slider false Enable volume slider bellow controls
ulm_card_media_player_collapsible false Controls are collapsible when state is off
ulm_card_media_player_player_controls_entity entity Change the controlled entity
ulm_card_media_player_enable_popup false Enable pop-up
ulm_card_media_player_more_info false Displays artist and album info in the sub-label

Note

To use popup_media_player you need to set the variable ulm_card_media_player_enable_popup to true. This is a different approach as the other popup_cards use.

Usage

- type: "custom:button-card"
  template: card_media_player
  entity: media_player.livingroom_shield
  name: Livingroom Nvidia Shield
Template Code
card_media_player.yaml
---
### Card Media Player ###
card_media_player:
  template:
    - "icon_more_info_new"
    - "ulm_actions_card"
    - "ulm_translation_engine"
  variables:
    ulm_card_media_player_name: "[[[ return entity.attributes.friendly_name ]]]"
    ulm_card_media_player_icon: false
    ulm_card_media_player_enable_art: false
    ulm_card_media_player_enable_controls: false
    ulm_card_media_player_enable_volume_slider: false
    ulm_card_media_player_collapsible: false
    ulm_card_media_player_player_controls_entity: "[[[ return entity.entity_id ]]]"
    ulm_card_media_player_enable_popup: false
    ulm_card_media_player_more_info: false
  triggers_update: "all"
  show_icon: false
  show_name: false
  show_label: false
  styles:
    grid:
      - grid-template-areas: |
          [[[
            var areas = "'item1'";
            if (variables.ulm_card_media_player_enable_controls){
              areas = areas + " 'item2'";
            }
            if (variables.ulm_card_media_player_enable_volume_slider){
              areas = areas + " 'item3'";
            }
            return areas;
          ]]]
      - grid-template-columns: "1fr"
      - grid-template-rows: |
          [[[
            var rows = "min-content";
            if (variables.ulm_card_media_player_enable_controls){
              rows = rows + " min-content";
            }
            if (variables.ulm_card_media_player_enable_volume_slider){
              rows = rows + " min-content";
            }
            return rows;
          ]]]
      - row-gap: |-
          [[[
            if (!variables.ulm_card_media_player_collapsible) {
                return "12px";
              } else {
                return entity.state !== "off" ? "12px" : "0px";
              }
          ]]]
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
      - background-blend-mode: "multiply"
      - background: |
          [[[
            return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
            ? 'center / cover url(' + states[entity.entity_id].attributes.entity_picture + ') rgba(0, 0, 0, 0.15)'
            : ''
          ]]]
    custom_fields:
      item2:
        - display: |
            [[[
              if(variables.ulm_card_media_player_enable_controls) {
                if(variables.ulm_card_media_player_collapsible){
                  return entity.state === "off" ? "none" : "block";
                }
                return "block";
              }
              return "none";
            ]]]
      item3:
        - display: |
            [[[
              if(variables.ulm_card_media_player_enable_volume_slider) {
                if(variables.ulm_card_media_player_collapsible){
                  return entity.state === "off" ? "none" : "block";
                }
                return "block";
              }
              return "none";
            ]]]
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_more_info"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              variables:
                ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
                ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
                ulm_card_media_player_enable_popup: "[[[ return variables.ulm_card_media_player_enable_popup; ]]]"
              icon: |
                [[[
                  var icon =  entity.attributes.icon || "mdi:speaker";
                  if(entity.attributes.app_name){
                    var app = entity.attributes.app_name.toLowerCase();
                    var icon = {
                      "spotify": "mdi:spotify",
                      "google podcasts": "mdi:google-podcast",
                      "plex": "mdi:plex",
                      "soundcloud": "mdi:soundcloud",
                      "youtube music": "mdi:youtube",
                      "oto music": "mdi:music-circle",
                      "pandora": "mdi:pandora",
                      "netflix": "mdi:netflix",
                      "bluetooth audio": "mdi:bluetooth"
                    }
                  }
                  return variables.ulm_card_media_player_icon || icon[app];
                ]]]
              styles:
                icon:
                  - color: |
                      [[[
                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
                        ? 'white'
                        : 'rgba(var(--color-theme), 0.2)'
                      ]]]
                img_cell:
                  - background-color: |
                      [[[
                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
                        ? 'rgba(0, 0, 0, 0.2)'
                        : 'rgba(var(--color-theme), 0.05)'
                      ]]]
                card:
                  - background: "none"
          item2:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              variables:
                ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
                ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
                ulm_card_media_player_enable_popup: "[[[ return variables.ulm_card_media_player_enable_popup; ]]]"
              label: "[[[ return variables.ulm_translation_state ]]]"
              state:
                - operator: "template"
                  value: "[[[ return entity.state == 'off' ]]]"
                  name: |
                    [[[
                      let name = variables.ulm_card_media_player_name || states[entity.entity_id].attributes.friendly_name;
                      return name;
                    ]]]
                - operator: "template"
                  value: "[[[ return entity.state != 'off' ]]]"
                  name: |
                    [[[
                      let name = variables.ulm_card_media_player_name || states[entity.entity_id].attributes.friendly_name;
                      if(states[entity.entity_id].attributes.media_title){
                          name = states[entity.entity_id].attributes.media_title;
                      }
                      return name;
                    ]]]
                  label: |
                    [[[
                      let label = variables.ulm_translation_on;
                      if (variables.ulm_card_media_player_more_info && states[entity.entity_id].attributes.media_artist
                          && states[entity.entity_id].attributes.media_album_name) {
                          label = states[entity.entity_id].attributes.media_artist + " • " + states[entity.entity_id].attributes.media_album_name;
                      } else if(states[entity.entity_id].attributes.media_album_name) {
                          label = states[entity.entity_id].attributes.media_album_name;
                      } else if (states[entity.entity_id].attributes.media_artist) {
                          label = states[entity.entity_id].attributes.media_artist
                      }
                      return label;
                    ]]]
              styles:
                label:
                  - opacity: "1"
                  - filter: "opacity(100%)"
                  - text-shadow: |
                      [[[
                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
                        ? '0 0 black'
                        : 'none'
                      ]]]
                  - color: |
                      [[[
                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
                        ? 'white'
                        : 'rgba(var(--color-theme), .5)'
                      ]]]
                name:
                  - color: |
                      [[[
                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
                        ? 'white'
                        : 'rgba(var(--color-theme), 1)'
                      ]]]
                  - text-shadow: "0 0 black"
                card:
                  - padding: "0px"
                  - background: "none"
                  - border-radius: "0"
                  - box-shadow: "none"
    item2:
      card:
        type: "custom:button-card"
        template: "list_3_items"
        styles:
          card:
            - padding: "0px"
            - background: "none"
            - border-radius: "0"
            - box-shadow: "none"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              hold_action:
                action: >
                  [[[
                      return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
                  ]]]
                browser_mod:
                  command: "popup"
                  large: true
                  hide_header: true
                  card:
                    type: "custom:button-card"
                    template: "popup_media_player_infos"
                    variables:
                      ulm_popup_media_player_entity: "[[[ return entity.entity_id ]]]"
              tap_action:
                action: "call-service"
                service: "media_player.media_previous_track"
                service_data:
                  entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
              icon: "mdi:skip-previous"
              styles:
                card:
                  - background-color: |
                      [[[
                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
                        ? 'rgba(0, 0, 0, 0.2)'
                        : 'rgba(var(--color-theme),0.05)'
                      ]]]
                icon:
                  - color: |
                      [[[
                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
                        ? 'white'
                        : 'rgba(var(--color-theme), 0.9)'
                      ]]]

          item2:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              entity: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
              hold_action:
                action: >
                  [[[
                      return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
                  ]]]
                browser_mod:
                  command: "popup"
                  large: true
                  hide_header: true
                  card:
                    type: "custom:button-card"
                    template: "popup_media_player_infos"
                    variables:
                      ulm_popup_media_player_entity: "[[[ return entity.entity_id ]]]"
              tap_action:
                action: "call-service"
                service: "media_player.media_play_pause"
                service_data:
                  entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
              icon: "mdi:pause"
              state:
                - value: "paused"
                  icon: "mdi:play"
                - value: "off"
                  icon: "mdi:play"
              styles:
                card:
                  - background-color: |
                      [[[
                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
                        ? 'rgba(0, 0, 0, 0.2)'
                        : 'rgba(var(--color-theme),0.05)'
                      ]]]
                icon:
                  - color: |
                      [[[
                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
                        ? 'white'
                        : 'rgba(var(--color-theme), 0.9)'
                      ]]]
          item3:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              hold_action:
                action: >
                  [[[
                      return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
                  ]]]
                browser_mod:
                  command: "popup"
                  large: true
                  hide_header: true
                  card:
                    type: "custom:button-card"
                    template: "popup_media_player_infos"
                    variables:
                      ulm_popup_media_player_entity: "[[[ return entity.entity_id ]]]"
              tap_action:
                action: "call-service"
                service: "media_player.media_next_track"
                service_data:
                  entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
              icon: "mdi:skip-next"
              styles:
                card:
                  - background-color: |
                      [[[
                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
                        ? 'rgba(0, 0, 0, 0.2)'
                        : 'rgba(var(--color-theme),0.05)'
                      ]]]
                icon:
                  - color: |
                      [[[
                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
                        ? 'white'
                        : 'rgba(var(--color-theme), 0.9)'
                      ]]]
    item3:
      card:
        type: "custom:my-slider"
        entity: "[[[ return entity.entity_id ]]]"
        radius: "14px"
        height: "42px"
        mainSliderColor: |
          [[[
            return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
            ? 'rgba(0, 0, 0, 0.2)'
            : 'rgba(var(--color-blue),1)'
          ]]]
        secondarySliderColor: |
          [[[
            return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
            ? 'rgba(0, 0, 0, 0.1)'
            : 'rgba(var(--color-blue),0.2)'
          ]]]
        mainSliderColorOff: "rgba(var(--color-theme),0.05)"
        secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
        thumbHorizontalPadding: "0px"
        thumbVerticalPadding: "0px"
        thumbWidth: "0px"
        card_mod:
        style: |
          ha-card {
            border-radius: 14px;
            background-color: transparent;
            box-shadow: none;
          }