Getting relevant info when media is playing

Hi there,

I have 2 people cards with a configuration that shows if they playing media:
image

To get this working I have on each phone in the companion app set the media_session sensor to ON:

Then In Last Notification I added all my mediaplyers to the list.


image

In my configuration.yaml I have this:

  - platform: template
    sensors:
      pixel_7_guy_media_playing:
        value_template: >-
          {% set data = namespace(artist=None, title=None, playing=False, prefix=None) %}
          {% for key, value in states.sensor.pixel_7_guy_media_session.attributes.items() %}
            {% if key.startswith('playback_state_') and value == 'Playing' %}
              {% set data.playing = True %}
              {% set data.prefix = key.split('_')[2] %}
            {% endif %}
          {% endfor %}
          {% if data.playing %}
            {% for key, value in states.sensor.pixel_7_guy_media_session.attributes.items() %}
              {% if key.startswith('title_') and data.prefix in key %}
                {% set data.title = value %}
              {% elif key.startswith('artist_') and data.prefix in key %}
                {% set data.artist = value %}
              {% endif %}
            {% endfor %}
          {% endif %}
          {% if data.title %}
            Playing
          {% else %}
            Not Playing
          {% endif %}
        attribute_templates:
          info: >-
            {% set data = namespace(artist=None, title=None, playing=False, prefix=None) %}
            {% for key, value in states.sensor.pixel_7_guy_media_session.attributes.items() %}
              {% if key.startswith('playback_state_') and value == 'Playing' %}
                {% set data.playing = True %}
                {% set data.prefix = key.split('_')[2] %}
              {% endif %}
            {% endfor %}
            {% if data.playing %}
              {% for key, value in states.sensor.pixel_7_guy_media_session.attributes.items() %}
                {% if key.startswith('title_') and data.prefix in key %}
                  {% set data.title = value %}
                {% elif key.startswith('artist_') and data.prefix in key %}
                  {% set data.artist = value %}
                {% endif %}
              {% endfor %}
            {% endif %}
            {% if data.title %}
              {{ data.title }}
              {% if data.artist %}
                {{ ' by ' ~ data.artist }}
              {% endif %}
            {% else %}
              No media playing
            {% endif %}
        friendly_name: Pixel 7 Guy Media Playing

In the code editor for the grid card I have this:

square: true
type: grid
title: People
columns: 2
cards:
  - type: custom:swipe-card
    parameters:
      effect: coverflow
    cards:
      - type: custom:button-card
        entity: person.guyf
        aspect_ratio: 4/4
        show_name: false
        show_icon: false
        styles:
          custom_fields:
            icon:
              - clip-path: circle()
              - width: 60%
              - pointer-events: none
              - display: grid
              - border: 5px solid
              - border-color: |-
                  [[[
                    if (states['sensor.guy_is_home'].state =='home') {
                    return "#00cc00"; 
                    } else {
                    return "#990000";}
                  ]]]
              - border-radius: 500px
              - margin: 0 0 0 3%
              - justify-self: center
              - position: absolute
              - opacity: 1
            ringer:
              - align-self: right
              - position: absolute
              - left: 4%
              - right: 50%
              - top: 4%
              - color: >-
                  [[[ if (states["sensor.pixel_7_guy_ringer_mode"].state ==
                  "silent") return "#e45649"; if
                  (states["sensor.pixel_7_guy_ringer_mode"].state == "vibrate")
                  return "#FFA500"; else return "#50A14F"; ]]]
            battery:
              - align-self: right
              - position: absolute
              - right: 4%
              - top: 4%
              - color: >-
                  [[[ if (states["sensor.pixel_7_guy_battery_level"].state <=
                  30) return "#e45649"; if
                  (states["sensor.pixel_7_guy_battery_level"].state <= 50)
                  return "#ffa229"; else return "#50A14F"; ]]]
            media:
              - align-self: right
              - position: absolute
              - bottom: 4%
              - right: 4%
              - left: 4%
              - color: >-
                  [[[if (states["sensor.pixel_7_guy_media_playing"].state ==
                  "Playing") return "#50A14F"; else return "#12345600"; ]]]
        custom_fields:
          icon: >
            [[[ return entity === undefined ? null : `<img
            src="${states[entity.entity_id].attributes.entity_picture}"
            width="100%">`; ]]]
          battery: |
            [[[
              return `<ha-icon
                icon="mdi:battery"
                style="width: 20px; height: 20px;"></ha-icon>
                ${states['sensor.pixel_7_guy_battery_level'].state}% `
            ]]]
          ringer: |
            [[[
              if (states["sensor.pixel_7_guy_ringer_mode"].state == "silent")
                return `<ha-icon
                  icon="mdi:cellphone-off"
                  style="width: 22px; height: 22px;">
                  </ha-icon>`
              if (states["sensor.pixel_7_guy_ringer_mode"].state == "vibrate")
                return `<ha-icon
                  icon="mdi:vibrate"
                  style="width: 22px; height: 22px;">
                  </ha-icon>`
              else 
                return `<ha-icon
                  icon="mdi:cellphone"
                  style="width: 22px; height: 22px;">
                  </ha-icon>
                  <span> ${(Math.round(states['sensor.pixel_7_guy_volume_level_ringer'].state * 100/7))}%</span>`
            ]]]
          media: "[[[\n  const stateObj = hass.states['sensor.pixel_7_guy_media_playing'];\n  const title = stateObj.attributes.info;\n  return `<marquee> <ha-icon\n    icon=\"mdi:music\"\n    style=\"width: 20px; height: 20px;\"></ha-icon>\n    <span>\_${title}</span>\n    </marquee>`;\n]]]\n"
      - type: custom:stack-in-card
        mode: vertical
        card_mod:
          style: |
            ha-card { 
              background-color: #f5f5f5;
              box-shadow: none;
              border: none !important;
            }
        cards:
          - type: custom:button-card
            entity: person.guyf
            aspect_ratio: 4/2.85
            show_name: false
            show_icon: false
            styles:
              card:
                - padding: 3%
                - color: '#2b2b2b'
              custom_fields:
                name:
                  - font-size: 30px;
                  - position: absolute
                  - left: 4%
                  - top: 4%
                  - color: '#2b2b2b'
                location:
                  - position: absolute
                  - left: 4%
                  - top: 26%
                  - color: '#000000'
                battery:
                  - align-self: left
                  - position: absolute
                  - left: 4%
                  - top: 40%
                  - color: '#000000'
                steps:
                  - align-self: left
                  - position: absolute
                  - left: 4%
                  - top: 54%
                  - color: '#000000'
                bluetooth:
                  - align-self: left
                  - position: absolute
                  - left: 4%
                  - top: 68%
                  - color: '#000000'
            custom_fields:
              name: |
                [[[ return '<span> Guy </span>'
                ]]]
              location: |
                [[[
                  if (states["device_tracker.pixel_7_guy"].state == "not_home")
                    return `<ha-icon
                      icon="mdi:home-export-outline"
                      style="width: 22px; height: 22px;">
                      </ha-icon>
                      <span>Not Home</span>`
                  else 
                    return `<ha-icon
                      icon="mdi:home"
                      style="width: 22px; height: 22px;">
                      </ha-icon>
                      <span>Home</span>`
                ]]]
              battery: |
                [[[
                  return `<ha-icon
                    icon="mdi:battery"
                    style="width: 20px; height: 20px;"></ha-icon>
                    <span>Battery: ${states['sensor.pixel_7_guy_battery_level'].state}% - ${states['sensor.pixel_7_guy_battery_state'].state}</span>`
                ]]]
              steps: |
                [[[
                  return `<ha-icon
                    icon="mdi:shoe-formal"
                    style="width: 20px; height: 20px;"></ha-icon
                    <span> Steps: ${states['sensor.daily_steps_guy'].state} / 10000</span>`
                ]]]
              bluetooth: |
                [[[
                  if (states["binary_sensor.pixel_7_guy_bluetooth_state"].state == "on")
                    return `<ha-icon
                      icon="mdi:bluetooth"
                      style="width: 22px; height: 22px;">
                      </ha-icon>`
                  else 
                    return `<ha-icon
                      icon="mdi:bluetooth-off"
                      style="width: 22px; height: 22px;">
                      </ha-icon>`

                ]]]
            card_mod:
              style: |
                ha-card { 
                  box-shadow: none;
                }
          - type: custom:mini-graph-card
            entities:
              - sensor.daily_steps_guy
            hours_to_show: 24
            graph: line
            show:
              state: false
              name: false
              icon: false
            points_per_hour: 1
            card_mod:
              style: |
                ha-card { 
                  box-shadow: none;
                  border: none !important;
                }

This seems to work very good for spotify and iBroadcast vlc seems to be needing time.

  • Why is the first song with vlc never picked up.
  • is there a way to extract from android the data from the media that is shown on the lockscreen?
  • how to speed up the refresh for vlc