savanni
c296c742ca
This is the most bare-bones setup I could imagine. Pressing a button next to the track in the UI starts up a stream for that track. However it doesn't do anything to stop other tracks that are currently playing. Co-authored-by: Savanni D'Gerinel <savanni@luminescent-dreams.com> Reviewed-on: savanni/tools#29
113 lines
2.8 KiB
TypeScript
113 lines
2.8 KiB
TypeScript
import { TextField } from "./TextField";
|
|
|
|
export class TrackCard extends HTMLElement {
|
|
trackNumberContainer: TextField;
|
|
nameContainer: TextField;
|
|
albumContainer: TextField;
|
|
artistContainer: TextField;
|
|
durationContainer: TextField;
|
|
|
|
static get observedAttributes() {
|
|
return ["trackId", "trackNumber", "name", "album", "artist", "duration"];
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
this.trackNumberContainer = document.createElement("text-field");
|
|
|
|
this.nameContainer = document.createElement("text-field");
|
|
this.nameContainer.classList.add("track-card__name");
|
|
|
|
this.albumContainer = document.createElement("text-field");
|
|
this.albumContainer.classList.add("track-card__album");
|
|
|
|
this.artistContainer = document.createElement("text-field");
|
|
this.artistContainer.classList.add("track-card__artist");
|
|
|
|
this.durationContainer = document.createElement("text-field");
|
|
this.durationContainer.classList.add("track-card__duration");
|
|
}
|
|
|
|
get trackId(): string | null {
|
|
return this.getAttribute("id");
|
|
}
|
|
|
|
set trackId(id: string | null) {
|
|
if (id) {
|
|
this.setAttribute("trackId", id);
|
|
} else {
|
|
this.removeAttribute("trackId");
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
get duration(): string | null {
|
|
return this.getAttribute("duration");
|
|
}
|
|
|
|
set duration(duration: string | null) {
|
|
if (duration) {
|
|
this.setAttribute("duration", duration);
|
|
this.durationContainer.text = duration;
|
|
} else {
|
|
this.removeAttribute("open");
|
|
this.durationContainer.text = null;
|
|
}
|
|
}
|
|
|
|
connectedCallback() {
|
|
const container = document.createElement("data-card");
|
|
container.classList.add("track-card");
|
|
|
|
// this.appendChild(this.trackNumberContainer);
|
|
container.appendChild(this.nameContainer);
|
|
container.appendChild(this.albumContainer);
|
|
container.appendChild(this.artistContainer);
|
|
container.appendChild(this.durationContainer);
|
|
|
|
this.appendChild(container);
|
|
}
|
|
}
|