const template = document.createElement("template");

template.innerHTML = `
<style>
	.cover {
		object-fit: cover;
	}
</style>

<figure class="mplayer" part="main">
	<div class="coverContainer" part="coverContainer">
		<img src="" class="cover" part="cover">
	</div>
	<div part="captionAndPlayer">
		<figcaption part="caption">
			<span class="title" part="title"></span><br /><span class="artist" part="artist"></span>
		</figcaption>
		<audio controls src="" class="player" part="player"></audio>
	</div>
</figure>
`;

class mplayer extends HTMLElement {
	constructor() {
		super();

		this._shadowRoot = this.attachShadow({ mode: "open" });
		this._shadowRoot.appendChild(template.content.cloneNode(true));
		this.$mplayer = this._shadowRoot.querySelector(".mplayer");
	}

	static get observedAttributes() {
		return ["title", "artist", "media_url", "cover_url"];
	}

	attributeChangedCallback(name, oldVal, newVal) {
		if (oldVal != newVal) {
			this[name] = newVal;
			this.render();
		}
	}

	render() {
		this.$mplayer.querySelector(".title").innerHTML = this.title;
		this.$mplayer.querySelector(".artist").innerHTML = this.artist;
		this.$mplayer.querySelector(".player").src = this.media_url;
		this.$mplayer.querySelector(".coverContainer > img").src = this.cover_url;
	}
}

window.customElements.define("wc-mplayer", mplayer);