Pop Up Media Player for Plex Showing Code

[ravensvoice]

Describe the bug A clear and concise description of what the bug is.

When I go to the pop up media player that is configured with a plex source, my screen looks like this:

Here is all the code that is in that screenshot:

tap_action:
  action: more-info
type: custom:button-card
group_expand: false
hold_action:
  action: none
double_tap_action:
  action: none
layout: vertical
size: 40%
color_type: icon
show_name: true
show_state: false
show_icon: true
show_units: true
show_label: true
show_entity_picture: false
show_live_stream: false
card_size: 3
color: var(--primary-color)
styles:
  grid:
    - grid-template-areas: '''i'' ''n'''
    - grid-template-columns: auto
    - grid-template-rows: min-content min-content
    - grid-template-areas: '''i n'' ''i l'''
    - grid-template-columns: min-content auto
    - grid-template-rows: min-content min-content
  card:
    - background: none
    - box-shadow: none
    - border-radius: none
    - padding: 12px
  icon:
    - color: var(--primary-color)
    - color: |
        [[[
          var color = "var(--color-theme)";
          if(entity?.attributes?.app_name){
            var app = entity.attributes?.app_name.toLowerCase();
            if(app = "spotify"){
              var color = "#1DB954";
            }
          } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){
            var color = "#1DB954";
          }
          return color;
        ]]]
  img_cell:
    - background-color: var(--card-background-color)
    - border-radius: 50%
    - place-self: center
    - width: 42px
    - height: 42px
    - box-shadow: var(--ha-card-box-shadow)
    - border: 1px solid var(--color-theme)
    - border-shadow: none
    - background-color: |
        [[[
          var color = "var(--color-theme)";
          if(entity?.attributes?.app_name){
            var app = entity?.attributes?.app_name?.toLowerCase();
            if(app = "spotify"){
              var color = "#434343";
            }
          } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){
            var color = "#434343";
          }
          return color;
        ]]]
  name:
    - justify-self: center
    - font-weight: bold
    - font-size: 14px
    - margin-top: 12px
    - align-self: end
    - justify-self: start
    - font-weight: bold
    - font-size: 14px
    - margin-left: 12px
    - margin-top: 0px
  label:
    - justify-self: start
    - align-self: start
    - font-weight: bolder
    - font-size: 12px
    - filter: opacity(40%)
    - margin-left: 12px
template: popup_button_app
icon: |
  [[[
    var icon =  entity.attributes.icon || "mdi:speaker";
    if(entity?.attributes?.app_name){
      var app = entity.attributes.app_name.toLowerCase();
      if(app == "spotify"){
        var icon = "mdi:spotify";
      } else if(app == "google podcasts"){
        var icon = "mdi:google-podcast";
      } else if(app == "plex"){
        var icon = "mdi:plex";
      } else if(app == "soundcloud"){
        var icon = "mdi:soundcloud";
      } else if(app == "youtube music"){
        var icon = "mdi:youtube";
      } else if (app == "oto music"){
        var icon = "mdi:music-circle";
      } else if(app == "pandora"){
        var icon = "mdi:pandora";
      } else if(app == "netflix"){
        var icon = "mdi:netflix";
      } else if(app == "bluetooth audio"){
        var icon = "mdi:bluetooth";
      }
    } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){
        var icon = "mdi:spotify";
    }
    return icon;
  ]]]
label: |
  [[[
    var label = entity.attributes.media_title || entity.attributes.friendly_name;
    return label;
  ]]]
name: |
  [[[
    var name =  entity.attributes.friendly_name;
    if(entity?.attributes?.app_name){
      var app = entity?.attributes?.app_name?.toLowerCase();
      if(app == "spotify"){
        var name = "Spotify";
      } else if(app == "google podcasts"){
        var name = "Google-Podcast";
      } else if(app == "plex"){
        var name = "Plex";
      } else if(app == "soundcloud"){
        var name = "Soundcloud";
      } else if(app == "youtube music"){
        var name = "Youtube";
      } else if (app == "oto music"){
        var name = "Oto Music";
      } else if(app == "pandora"){
        var name = "Pandora";
      } else if(app == "netflix"){
        var name = "Netflix";
      } else if(app == "bluetooth audio"){
        var name = "Bluetooth";
      }
    } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){
        var name = "Spotify";
    }
    return name;
  ]]]
state: []
entity: media_player.plex_plex_for_android_tv_chromecast_google_tv
default_color: var(--primary-text-color)
color_off: var(--paper-item-icon-color)
color_on: var(--paper-item-icon-active-color)
lock:
  enabled: false
  duration: 5
  unlock: tap

tap_action:
  action: more-info
type: custom:button-card
group_expand: false
hold_action:
  action: none
double_tap_action:
  action: none
layout: vertical
size: 40%
color_type: icon
show_name: true
show_state: false
show_icon: true
show_units: true
show_label: true
show_entity_picture: false
show_live_stream: false
card_size: 3
color: var(--primary-color)
styles:
  grid:
    - grid-template-areas: '''i'' ''n'''
    - grid-template-columns: auto
    - grid-template-rows: min-content min-content
    - grid-template-areas: '''i n'' ''i l'''
    - grid-template-columns: min-content auto
    - grid-template-rows: min-content min-content
  card:
    - background: none
    - box-shadow: none
    - border-radius: none
    - padding: 12px
  icon:
    - color: var(--primary-color)
    - color: |
        [[[
          var color = "var(--color-theme)";
          if(entity?.attributes?.app_name){
            var app = entity.attributes?.app_name.toLowerCase();
            if(app = "spotify"){
              var color = "#1DB954";
            }
          } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){
            var color = "#1DB954";
          }
          return color;
        ]]]
  img_cell:
    - background-color: var(--card-background-color)
    - border-radius: 50%
    - place-self: center
    - width: 42px
    - height: 42px
    - box-shadow: var(--ha-card-box-shadow)
    - border: 1px solid var(--color-theme)
    - border-shadow: none
    - background-color: |
        [[[
          var color = "var(--color-theme)";
          if(entity?.attributes?.app_name){
            var app = entity?.attributes?.app_name?.toLowerCase();
            if(app = "spotify"){
              var color = "#434343";
            }
          } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){
            var color = "#434343";
          }
          return color;
        ]]]
  name:
    - justify-self: center
    - font-weight: bold
    - font-size: 14px
    - margin-top: 12px
    - align-self: end
    - justify-self: start
    - font-weight: bold
    - font-size: 14px
    - margin-left: 12px
    - margin-top: 0px
  label:
    - justify-self: start
    - align-self: start
    - font-weight: bolder
    - font-size: 12px
    - filter: opacity(40%)
    - margin-left: 12px
template: popup_button_app
icon: |
  [[[
    var icon =  entity.attributes.icon || "mdi:speaker";
    if(entity?.attributes?.app_name){
      var app = entity.attributes.app_name.toLowerCase();
      if(app == "spotify"){
        var icon = "mdi:spotify";
      } else if(app == "google podcasts"){
        var icon = "mdi:google-podcast";
      } else if(app == "plex"){
        var icon = "mdi:plex";
      } else if(app == "soundcloud"){
        var icon = "mdi:soundcloud";
      } else if(app == "youtube music"){
        var icon = "mdi:youtube";
      } else if (app == "oto music"){
        var icon = "mdi:music-circle";
      } else if(app == "pandora"){
        var icon = "mdi:pandora";
      } else if(app == "netflix"){
        var icon = "mdi:netflix";
      } else if(app == "bluetooth audio"){
        var icon = "mdi:bluetooth";
      }
    } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){
        var icon = "mdi:spotify";
    }
    return icon;
  ]]]
label: |
  [[[
    var label = entity.attributes.media_title || entity.attributes.friendly_name;
    return label;
  ]]]
name: |
  [[[
    var name =  entity.attributes.friendly_name;
    if(entity?.attributes?.app_name){
      var app = entity?.attributes?.app_name?.toLowerCase();
      if(app == "spotify"){
        var name = "Spotify";
      } else if(app == "google podcasts"){
        var name = "Google-Podcast";
      } else if(app == "plex"){
        var name = "Plex";
      } else if(app == "soundcloud"){
        var name = "Soundcloud";
      } else if(app == "youtube music"){
        var name = "Youtube";
      } else if (app == "oto music"){
        var name = "Oto Music";
      } else if(app == "pandora"){
        var name = "Pandora";
      } else if(app == "netflix"){
        var name = "Netflix";
      } else if(app == "bluetooth audio"){
        var name = "Bluetooth";
      }
    } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){
        var name = "Spotify";
    }
    return name;
  ]]]
state: []
entity: media_player.plex_chromecast_google_tv
default_color: var(--primary-text-color)
color_off: var(--paper-item-icon-color)
color_on: var(--paper-item-icon-active-color)
lock:
  enabled: false
  duration: 5
  unlock: tap

The only other account I have is Spotify and the pop up media player works fine there, shows album art, etc it ONLY does it for me when I go to Plex. Since Spotify is working I am presuming my set up is good

To Reproduce

I go to the media player card and hold down on the icon so the pop up appears.

Expected behavior I expect to see the cover art for the show that is streaming and not code. I would also expect some controls as well.

Screenshots See above but this is what it looks like when something is playing:

But (and I just noticed this, when I exit Plex it looks fine on my device (Chromecast but also does it on Plex from my Xbox) it looks fine:

Additional context

My config:

Home Assistant Core 2022.6.5 Home Assistant Supervisor 2022.05.3 Home Assistant OS 8.1

This was happening before I update to 2022.6.5, I was hoping it would fix it.

[basbruss]

@ravensvoice Could you provide a screenshot from the dev-console. This provides the needed information to debug the error. This screenshot only shows the combined code of the popup itself.

[ravensvoice]

@basbruss heads up I'm a n00b, so let me know if this isn't what you are looking for:

r

[bedar89]

I'm currently experiencing the same issue. For some reason my Android TV integration doesn't provide me with cover art, so I was testing by using the media_player entity created by the Plex integration.

This Chrome console error gets repeated every second or so:

I'm also unable to get the whole error to show up on my screen, but I'm extracting it with Chrome dev tools. The title of the error:

The full error "content":

  action: more-info
type: custom:button-card
group_expand: false
hold_action:
  action: none
double_tap_action:
  action: none
layout: vertical
size: 40%
color_type: icon
show_name: true
show_state: false
show_icon: true
show_units: true
show_label: true
show_entity_picture: false
show_live_stream: false
card_size: 3
color: var(--primary-color)
styles:
  grid:
    - grid-template-areas: '''i'' ''n'''
    - grid-template-columns: auto
    - grid-template-rows: min-content min-content
    - grid-template-areas: '''i n'' ''i l'''
    - grid-template-columns: min-content auto
    - grid-template-rows: min-content min-content
  card:
    - background: none
    - box-shadow: none
    - border-radius: none
    - padding: 12px
  icon:
    - color: var(--primary-color)
    - color: |
        [[[
          var color = "var(--color-theme)";
          if(entity?.attributes?.app_name){
            var app = entity.attributes?.app_name.toLowerCase();
            if(app = "spotify"){
              var color = "#1DB954";
            }
          } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){
            var color = "#1DB954";
          } 
          return color;
        ]]]
  img_cell:
    - background-color: var(--card-background-color)
    - border-radius: 50%
    - place-self: center
    - width: 42px
    - height: 42px
    - box-shadow: var(--ha-card-box-shadow)
    - border: 1px solid var(--color-theme)
    - border-shadow: none
    - background-color: |
        [[[
          var color = "var(--color-theme)";
          if(entity?.attributes?.app_name){
            var app = entity?.attributes?.app_name?.toLowerCase();
            if(app = "spotify"){
              var color = "#434343";
            }
          } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){
            var color = "#434343";
          } 
          return color;
        ]]]
  name:
    - justify-self: center
    - font-weight: bold
    - font-size: 14px
    - margin-top: 12px
    - white-space: initial
    - text-overflow: initial
    - overflow: initial
    - align-self: end
    - justify-self: start
    - font-weight: bold
    - font-size: 14px
    - margin-left: 12px
    - margin-top: 0px
  label:
    - justify-self: start
    - align-self: start
    - font-weight: bolder
    - font-size: 12px
    - filter: opacity(40%)
    - margin-left: 12px
template: popup_button_app
icon: |
  [[[
    var icon =  entity.attributes.icon || "mdi:speaker";
    if(entity?.attributes?.app_name){
      var app = entity.attributes.app_name.toLowerCase();
      if(app == "spotify"){
        var icon = "mdi:spotify";
      } else if(app == "google podcasts"){
        var icon = "mdi:google-podcast";
      } else if(app == "plex"){
        var icon = "mdi:plex";
      } else if(app == "soundcloud"){
        var icon = "mdi:soundcloud";
      } else if(app == "youtube music"){
        var icon = "mdi:youtube";
      } else if (app == "oto music"){
        var icon = "mdi:music-circle";
      } else if(app == "pandora"){
        var icon = "mdi:pandora";
      } else if(app == "netflix"){
        var icon = "mdi:netflix";
      } else if(app == "bluetooth audio"){
        var icon = "mdi:bluetooth";
      }
    } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){
        var icon = "mdi:spotify";
    }
    return icon;
  ]]]
label: |
  [[[
    var label = entity.attributes.media_title || entity.attributes.friendly_name;
    return label;
  ]]]
name: |
  [[[
    var name =  entity.attributes.friendly_name;
    if(entity?.attributes?.app_name){
      var app = entity?.attributes?.app_name?.toLowerCase();
      if(app == "spotify"){
        var name = "Spotify";
      } else if(app == "google podcasts"){
        var name = "Google-Podcast";
      } else if(app == "plex"){
        var name = "Plex";
      } else if(app == "soundcloud"){
        var name = "Soundcloud";
      } else if(app == "youtube music"){
        var name = "Youtube";
      } else if (app == "oto music"){
        var name = "Oto Music";
      } else if(app == "pandora"){
        var name = "Pandora";
      } else if(app == "netflix"){
        var name = "Netflix";
      } else if(app == "bluetooth audio"){
        var name = "Bluetooth";
      }
    } else if(entity?.attributes?.media_content_id?.toLowerCase().includes("spotify")){
        var name = "Spotify";
    } 
    return name;
  ]]]
state: []
entity: media_player.plex_plex_for_android_tv_shield_android_tv
default_color: var(--primary-text-color)
color_off: var(--paper-item-icon-color)
color_on: var(--paper-item-icon-active-color)
lock:
  enabled: false
  duration: 5
  unlock: tap

And this is the entity I'm using: