Start playing a track from the UI

music-player/client/src/client.ts

@@ -9,3 +9,10 @@ export interface TrackInfo {
 
 export const getTracks = (): Promise<TrackInfo[]> =>
   fetch("/api/v1/tracks").then((r) => r.json());
+
+export const playTrack = (id: string): Promise<Response> =>
+  fetch("/api/v1/play", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ id: id }),
+  });

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

@@ -0,0 +1,34 @@
+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);
+  }
+}

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

@@ -8,7 +8,7 @@ export class TrackCard extends HTMLElement {
   durationContainer: TextField;
 
   static get observedAttributes() {
-    return ["id", "trackNumber", "name", "album", "artist", "duration"];
+    return ["trackId", "trackNumber", "name", "album", "artist", "duration"];
   }
 
   constructor() {
@@ -29,6 +29,18 @@ export class TrackCard extends HTMLElement {
     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");
   }

music-player/client/src/main.ts

@@ -1,14 +1,16 @@
 import * as _ from "lodash";
-import { TrackInfo, getTracks } from "./client";
+import { TrackInfo, getTracks, playTrack } from "./client";
 import { DataCard } from "./components/DataCard";
 import { NowPlaying } from "./components/NowPlaying";
 import { TextField } from "./components/TextField";
 import { TrackCard } from "./components/TrackCard";
+import { PlaylistRow } from "./components/PlaylistRow";
 
 window.customElements.define("data-card", DataCard);
 window.customElements.define("now-playing", NowPlaying);
 window.customElements.define("text-field", TextField);
 window.customElements.define("track-card", TrackCard);
+window.customElements.define("playlist-row", PlaylistRow);
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -16,25 +18,30 @@ declare global {
     "now-playing": NowPlaying;
     "text-field": TextField;
     "track-card": TrackCard;
+    "playlist-row": PlaylistRow;
   }
 }
 
 const updateTrackList = (tracks: TrackInfo[]) => {
-  const track_list = document.querySelector(".track-list__tracks");
-  if (track_list) {
-    let track_formats = _.map(tracks, (info) => {
+  const playlist = document.querySelector(".track-list__tracks");
+  if (playlist) {
+    _.map(tracks, (info) => {
       let card: TrackCard = document.createElement("track-card");
+      let listItem: PlaylistRow = document.createElement("playlist-row");
+
+      card.trackId = info.id;
       card.name = info.name || null;
       card.album = info.album || null;
       card.artist = info.artist || null;
       card.duration = (info.duration && `${info.duration}`) || null;
-      return card;
-    });
-    _.map(track_formats, (trackCard) => {
-      let listItem = document.createElement("li");
-      listItem.classList.add("track-list__row");
-      listItem.appendChild(trackCard);
-      track_list.appendChild(listItem);
+
+      listItem.appendChild(card);
+      listItem.trackId = info.id;
+      listItem.onPlay = (id: string) => {
+        console.log("time to play ", id);
+        playTrack(id);
+      };
+      playlist.appendChild(listItem);
     });
   } else {
     console.log("track_list does not exist");

music-player/client/styles.scss

@@ -143,6 +143,11 @@ body {
     list-style: none;
 }
 
+.playlist-row {
+    display: flex;
+    margin-top: 32px;
+}
+
 .track-list__row {
     margin-top: 32px;
 }