90 lines
2.2 KiB
TypeScript
90 lines
2.2 KiB
TypeScript
import { TextField } from "./TextField";
|
|
|
|
export class NowPlaying extends HTMLElement {
|
|
onStop: () => void;
|
|
nameContainer: TextField;
|
|
albumContainer: TextField;
|
|
artistContainer: TextField;
|
|
|
|
static get observedAttributes() {
|
|
return ["name", "album", "artist"];
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
this.nameContainer = document.createElement("text-field");
|
|
this.nameContainer.classList.add("now-playing__name");
|
|
|
|
this.albumContainer = document.createElement("text-field");
|
|
this.albumContainer.classList.add("now-playing__album");
|
|
|
|
this.artistContainer = document.createElement("text-field");
|
|
this.artistContainer.classList.add("now-playing__artist");
|
|
|
|
this.onStop = () => {};
|
|
}
|
|
|
|
get name(): string | null {
|
|
return this.getAttribute("name");
|
|
}
|
|
|
|
set name(name: string | null) {
|
|
if (name) {
|
|
this.setAttribute("name", name);
|
|
this.nameContainer.text = name;
|
|
} else {
|
|
this.removeAttribute("open");
|
|
this.nameContainer.text = null;
|
|
}
|
|
}
|
|
|
|
get artist(): string | null {
|
|
return this.getAttribute("artist");
|
|
}
|
|
|
|
set artist(artist: string | null) {
|
|
if (artist) {
|
|
this.setAttribute("artist", artist);
|
|
this.artistContainer.text = artist;
|
|
} else {
|
|
this.removeAttribute("open");
|
|
this.artistContainer.text = null;
|
|
}
|
|
}
|
|
|
|
get album(): string | null {
|
|
return this.getAttribute("album");
|
|
}
|
|
|
|
set album(album: string | null) {
|
|
if (album) {
|
|
this.setAttribute("album", album);
|
|
this.albumContainer.text = album;
|
|
} else {
|
|
this.removeAttribute("open");
|
|
this.albumContainer.text = null;
|
|
}
|
|
}
|
|
|
|
connectedCallback() {
|
|
const container = document.createElement("data-card");
|
|
container.classList.add("card");
|
|
container.classList.add("card--recessed");
|
|
container.classList.add("now-playing");
|
|
|
|
container.appendChild(this.nameContainer);
|
|
container.appendChild(this.albumContainer);
|
|
container.appendChild(this.artistContainer);
|
|
|
|
const stopButton = document.createElement("button");
|
|
stopButton.innerHTML = "Stop";
|
|
stopButton.addEventListener("click", (_) => {
|
|
this.onStop();
|
|
});
|
|
|
|
this.appendChild(container);
|
|
this.appendChild(stopButton);
|
|
}
|
|
}
|