I’m having issues getting the ‘now playing poster’ to load.
It’s been working smoothly for 12 months, but suddenly is giving a “Custom element doesn’t exist: now-playing-poster” error.
Given nothing has changed except some HA updates, I’m guessing something is broken in that addon. It looks to be a pretty simple addon so I’m hoping someone may have some words of wisdom on how to resolve.
class NowPlayingPoster extends HTMLElement {
set hass(hass) {
if (!this.content) {
const card = document.createElement('ha-card');
this.content = document.createElement('div');
//this.content.style = "!important;";
card.appendChild(this.content);
card.style = "background: none;";
this.appendChild(card);
}
const offposter = this.config.off_image;
const entityId = this.config.entity;
const state = hass.states[entityId];
const stateStr = state ? state.state : 'unavailable';
if (state) {
const movposter = state.attributes.entity_picture;
if (["playing", "on"].indexOf(stateStr) > -1 ) {
if ( !movposter ) {
if ( offposter ) {
this.content.innerHTML = `
<!-- now playing card ${entityId} -->
<img src="${offposter}" width=100% align="center" style="">
`;
}
else
{
this.content.innerHTML = `
<!-- now playing card ${entityId} no image-->
`;
}
}
else
{
this.content.innerHTML = `
<!-- now playing card ${entityId} -->
<img src="${movposter}" width=100% height=100%">
`;
}
}
else
{
if ( offposter ) {
this.content.innerHTML = `
<!-- now playing card ${entityId} -->
<img src="${offposter}" width=100% align="center" style="">
`;
}
else
{
this.content.innerHTML = `
<!-- now playing card ${entityId} no image-->
`;
}
}
}
else
{
this.content.innerHTML = `
<!-- now playing card ${entityId} not playing -->
`;
}
}
setConfig(config) {
if (!config.entity) {
throw new Error('You need to define an entity');
}
this.config = config;
}
// The height of your card. Home Assistant uses this to automatically
// distribute all cards over the available columns.
getCardSize() {
return 3;
}
}
customElements.define('now-playing-poster', NowPlayingPoster);