now-playing-card.js

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
			{
				const img = new Image();
				img.onload = () => {
					this.content.innerHTML = `
					<!-- now playing card ${entityId}  -->
					<img src="${movposter}" width=100% height=100%">
					`;
				};
				img['src']= movposter
			}
		}
		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);