74 lines
1.9 KiB
JavaScript
74 lines
1.9 KiB
JavaScript
const template = document.createElement('template');
|
|
|
|
template.innerHTML = `
|
|
<style>
|
|
audio {
|
|
border-radius: 0px 0px 10px 10px;
|
|
}
|
|
#audioPlayerContainer {
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
}
|
|
#audioDetailsContainer {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
}
|
|
#audioTextContainer {
|
|
padding: 0 1rem 0 1rem;
|
|
}
|
|
img {
|
|
border-radius: 10px 0px 0px 0px;
|
|
height: 10rem;
|
|
object-fit: cover;
|
|
width: 10rem;
|
|
}
|
|
</style>
|
|
|
|
<div id="audioPlayerContainer">
|
|
<div id="audioDetailsContainer">
|
|
<img src="" alt="">
|
|
<div id="audioTextContainer">
|
|
<h3>Title</h3>
|
|
<p>Description</p>
|
|
</div>
|
|
</div>
|
|
<audio controls>
|
|
<source src="">
|
|
Your browser does not support the audio element.
|
|
</audio>
|
|
</div>
|
|
`
|
|
|
|
class AudioPlayer extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
this._shadowRoot = this.attachShadow({ 'mode': 'open' });
|
|
this._shadowRoot.appendChild(template.content.cloneNode(true));
|
|
this.$audioPlayer = this._shadowRoot.querySelector('#audioPlayerContainer');
|
|
}
|
|
|
|
static get observedAttributes() {
|
|
return ['audio', 'cover', 'cover_alt', 'title', 'description'];
|
|
}
|
|
|
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
if (oldVal != newVal) {
|
|
this[name] = newVal;
|
|
this.render();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
this.cover ? this.$audioPlayer.querySelector('img').src = this.cover : null;
|
|
this.cover_alt ? this.$audioPlayer.querySelector('img').alt = this.cover_alt : null;
|
|
this.title ? this.$audioPlayer.querySelector('div h3').innerHTML = this.title : null;
|
|
this.description ? this.$audioPlayer.querySelector('div p').innerHTML = this.description : null;
|
|
this.audio ? this.$audioPlayer.querySelector('audio source').src = this.audio : null;
|
|
}
|
|
}
|
|
|
|
window.customElements.define('audio-player', AudioPlayer);
|