monorepo/music-player/client/src/components/PlaylistRow.ts

35 lines
736 B
TypeScript

export class PlaylistRow extends HTMLElement {
onPlay: (trackId: string) => void;
static get observedAttributes() {
return ["trackId"];
}
constructor() {
super();
this.onPlay = (_) => {};
}
get trackId(): string | null {
return this.getAttribute("trackId");
}
set trackId(id: string | null) {
id ? this.setAttribute("trackId", id) : this.removeAttribute("trackId");
}
connectedCallback() {
this.classList.add("playlist-row");
const playButton = document.createElement("button");
playButton.innerHTML = "Play";
playButton.addEventListener("click", (_) => {
if (this.trackId) {
this.onPlay(this.trackId);
}
});
this.appendChild(playButton);
}
}