52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
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);
|