Improve styling for track cards and add the component building blocks

music-player/client/src/components/DataCard.ts

@@ -0,0 +1,9 @@
+export class DataCard extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.classList.add("card");
+  }
+}

music-player/client/src/components/TextField.ts

@@ -0,0 +1,23 @@
+export class TextField extends HTMLElement {
+  static get observedAttributes() {
+    return ["text"];
+  }
+
+  constructor() {
+    super();
+  }
+
+  get text(): string | null {
+    return this.getAttribute("text");
+  }
+
+  set text(text: string | null) {
+    if (text) {
+      this.setAttribute("text", text);
+      this.innerHTML = text;
+    } else {
+      this.removeAttribute("text");
+      this.innerHTML = "";
+    }
+  }
+}

music-player/client/src/components/TrackCard.ts

@@ -0,0 +1,101 @@
+import { TextField } from "./TextField";
+import { DataCard } from "./DataCard";
+
+export class TrackCard extends HTMLElement {
+  trackNumberContainer: TextField;
+  nameContainer: TextField;
+  albumContainer: TextField;
+  artistContainer: TextField;
+  durationContainer: TextField;
+
+  static get observedAttributes() {
+    return ["id", "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 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);
+  }
+}

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

@@ -1,137 +0,0 @@
-import { TrackInfo } from "../client";
-
-export class TrackName extends HTMLElement {
-  container: HTMLElement;
-
-  static get observedAttributes() {
-    return ["name"];
-  }
-
-  constructor() {
-    super();
-    this.container = document.createElement("div");
-  }
-
-  get name(): string | null {
-    return this.getAttribute("name");
-  }
-
-  set name(name: string | null) {
-    while (this.container.lastChild) {
-      this.container.removeChild(this.container.lastChild);
-    }
-    if (name) {
-      this.setAttribute("name", name);
-      this.container.appendChild(document.createTextNode(name));
-    } else {
-      this.removeAttribute("name");
-    }
-  }
-
-  connectedCallback() {
-    this.appendChild(this.container);
-  }
-}
-
-export class TrackCard extends HTMLElement {
-  static get observedAttributes() {
-    return ["id", "trackNumber", "name", "album", "artist", "duration"];
-  }
-
-  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() {
-    const container = document.createElement("div");
-    container.classList.add("track-card");
-    this.innerHTML = "";
-
-    this.appendChild(container);
-
-    while (container.lastChild) {
-      container.removeChild(container.lastChild);
-    }
-
-    if (this["name"]) {
-      const trackName = document.createElement("track-name");
-      trackName.name = this["name"];
-      container.appendChild(trackName);
-    }
-    if (this["length"]) {
-      container.appendChild(document.createTextNode(this["length"]));
-    }
-    if (this["album"]) {
-      container.appendChild(document.createTextNode(this["album"]));
-    }
-    if (this["artist"]) {
-      container.appendChild(document.createTextNode(this["artist"]));
-    }
-  }
-}

music-player/client/src/main.ts

@@ -1,13 +1,17 @@
 import * as _ from "lodash";
 import { TrackInfo, getTracks } from "./client";
-import { TrackName, TrackCard } from "./components/track";
+import { DataCard } from "./components/DataCard";
+import { TextField } from "./components/TextField";
+import { TrackCard } from "./components/TrackCard";
 
-window.customElements.define("track-name", TrackName);
+window.customElements.define("data-card", DataCard);
+window.customElements.define("text-field", TextField);
 window.customElements.define("track-card", TrackCard);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "track-name": TrackName;
+    "data-card": DataCard;
+    "text-field": TextField;
     "track-card": TrackCard;
   }
 }
@@ -20,7 +24,7 @@ const updateTrackList = (tracks: TrackInfo[]) => {
       card.name = info.name || null;
       card.album = info.album || null;
       card.artist = info.artist || null;
-      card.length = (info.duration && `${info.duration}`) || null;
+      card.duration = (info.duration && `${info.duration}`) || null;
       return card;
     });
     _.map(track_formats, (trackCard) => {

music-player/client/styles.css

@@ -29,17 +29,7 @@ body {
     margin-top: 32px;
 }
 
-/*
+.card {
-.track-list__row:nth-child(even) {
-    background-color: rgb(255, 255, 255);
-}
-
-.track-list__row:nth-child(odd) {
-    background-color: rgb(200, 200, 200);
-}
-*/
-
-.track-card {
     border: 1px solid black;
     border-radius: 5px;
     padding: 8px;
@@ -47,15 +37,32 @@ body {
     height: 100px;
 }
 
+.track-card {
+    display: grid;
+    gap: 4px 4px;
+}
+
 .track-card__name {
+    display: block;
+    grid-column: 1 / span 1;
+    grid-row: 1 / span 1;
 }
 
 .track-card__length {
+    display: block;
+    grid-column: 1 / span 1;
+    grid-row: 2 / span 1;
 }
 
 .track-card__album {
+    display: block;
+    grid-column: 2 / span 1;
+    grid-row: 1 / span 1;
 }
 
 .track-card__artist {
+    display: block;
+    grid-column: 2 / span 1;
+    grid-row: 2 / span 1;
 }