Properly set up the track card as an element

music-player/client/src/blocks/track.ts

@@ -1,23 +1,107 @@
 import { TrackInfo } from "../client";
 
-export class TrackCard extends HTMLElement {
+export class TitleText extends HTMLElement {
-  track_info: TrackInfo;
+  title: string;
 
-  constructor(info: TrackInfo) {
+  constructor(title: string) {
     super();
-    this.track_info = info;
+    this.title = title;
   }
 
   connectedCallback() {
     const container = document.createElement("div");
-    container.classList.add("track-card");
+    container.appendChild(document.createTextNode(this.title));
     this.appendChild(container);
+  }
+}
 
-    this.track_info.name &&
+export class TrackCard extends HTMLElement {
-      container.appendChild(document.createTextNode(this.track_info.name));
+  static get observedAttributes() {
+    return ["id", "trackNumber", "name", "album", "artist"];
+  }
+
+  constructor() {
+    super();
+  }
+
+  attributeChangeCallback(
+    attrName: string,
+    oldValue: string,
+    newValue: string
+  ): void {
+    if (newValue !== oldValue) {
+      this.updateContent();
+    }
+  }
+
+  get name(): string | null {
+    return this.getAttribute("name");
+  }
+
+  set name(name: string | null) {
+    if (name) {
+      this.setAttribute("name", name);
+    } else {
+      this.removeAttribute("open");
+    }
+    this.updateContent();
+  }
+
+  get artist(): string | null {
+    return this.getAttribute("artist");
+  }
+
+  set artist(artist: string | null) {
+    if (artist) {
+      this.setAttribute("artist", artist);
+    } else {
+      this.removeAttribute("open");
+    }
+    this.updateContent();
+  }
+
+  get album(): string | null {
+    return this.getAttribute("album");
+  }
+
+  set album(album: string | null) {
+    if (album) {
+      this.setAttribute("album", album);
+    } else {
+      this.removeAttribute("open");
+    }
+    this.updateContent();
+  }
+
+  get length(): string | null {
+    return this.getAttribute("length");
+  }
+
+  set length(length: string | null) {
+    if (length) {
+      this.setAttribute("length", length);
+    } else {
+      this.removeAttribute("open");
+    }
+    this.updateContent();
+  }
+
+  connectedCallback() {
+    this.updateContent();
   }
 
   updateContent() {
-    console.log("updateContent");
+    const container = document.createElement("div");
+    container.classList.add("track-card");
+    this.innerHTML = "";
+
+    this.appendChild(container);
+
+    this["name"] && container.appendChild(new TitleText(this.name));
+    this["length"] && container.appendChild(document.createTextNode("1:23"));
+    this["album"] &&
+      container.appendChild(document.createTextNode("Shatter Me"));
+    this["artist"] &&
+      container.appendChild(document.createTextNode("Lindsey Stirling"));
   }
 }

music-player/client/src/main.ts

@@ -1,9 +1,16 @@
 import * as _ from "lodash";
 import { TrackInfo, getTracks } from "./client";
-import { TrackCard } from "./blocks/track";
+import { TitleText, TrackCard } from "./blocks/track";
 
+window.customElements.define("title-text", TitleText);
 window.customElements.define("track-card", TrackCard);
 
+declare global {
+  interface HTMLElementTagNameMap {
+    "track-card": TrackCard;
+  }
+}
+
 const replaceTitle = () => {
   const title = document.querySelector(".js-title");
   if (title && title.innerHTML) {
@@ -11,52 +18,13 @@ const replaceTitle = () => {
   }
 };
 
-/*
-const formatTrack = (track: TrackInfo) => {
-  let row = document.createElement("tr");
-  row.classList.add("track-list__row");
-
-  let track_id = document.createElement("td");
-  track_id.appendChild(document.createTextNode(track.id));
-  track_id.classList.add("track-list__cell");
-
-  let track_number = document.createElement("td");
-  track_number.appendChild(
-    document.createTextNode(track.track_number?.toString() || "")
-  );
-  track_number.classList.add("track-list__cell");
-
-  let name = document.createElement("td");
-  name.appendChild(document.createTextNode(track.name || ""));
-  name.classList.add("track-list__cell");
-
-  let album = document.createElement("td");
-  album.appendChild(document.createTextNode(track.album || ""));
-  album.classList.add("track-list__cell");
-
-  let artist = document.createElement("td");
-  artist.appendChild(document.createTextNode(track.artist || ""));
-  artist.classList.add("track-list__cell");
-
-  let length = document.createElement("td");
-  artist.appendChild(document.createTextNode(""));
-  length.classList.add("track-list__cell");
-
-  row.appendChild(track_id);
-  row.appendChild(track_number);
-  row.appendChild(name);
-  row.appendChild(artist);
-  row.appendChild(album);
-  row.appendChild(length);
-  return row;
-};
-*/
-
 const updateTrackList = (tracks: TrackInfo[]) => {
   const track_list = document.querySelector(".track-list__tracks");
   if (track_list) {
     let track_formats = _.map(tracks, (info) => {
-      return new TrackCard(info);
+      let card: TrackCard = document.createElement("track-card");
+      card.name = info.name || null;
+      return card;
     });
     _.map(track_formats, (trackCard) => {
       let listItem = document.createElement("li");

music-player/client/styles.css

@@ -46,3 +46,16 @@ body {
     width: 300px;
     height: 100px;
 }
+
+.track-card__name {
+}
+
+.track-card__length {
+}
+
+.track-card__album {
+}
+
+.track-card__artist {
+}
+