music-player/client/src/client.ts

@@ -38,3 +38,12 @@ export const playTrack = (id: string): Promise<void> =>
     .then((result: Response<null>) => {
       console.log("result: ", result);
     });
+
+export const stopPlayback = (): Promise<void> =>
+  fetch("api/v1/stop", {
+    method: "POST",
+  })
+    .then((r) => r.json())
+    .then((result: Response<null>) => {
+      console.log("result: ", result);
+    });

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

@@ -1,6 +1,7 @@
 import { TextField } from "./TextField";
 
 export class NowPlaying extends HTMLElement {
+  onStop: () => void;
   nameContainer: TextField;
   albumContainer: TextField;
   artistContainer: TextField;
@@ -20,6 +21,8 @@ export class NowPlaying extends HTMLElement {
 
     this.artistContainer = document.createElement("text-field");
     this.artistContainer.classList.add("now-playing__artist");
+
+    this.onStop = () => {};
   }
 
   get name(): string | null {
@@ -74,6 +77,13 @@ export class NowPlaying extends HTMLElement {
     container.appendChild(this.albumContainer);
     container.appendChild(this.artistContainer);
 
+    const stopButton = document.createElement("button");
+    stopButton.innerHTML = "Stop";
+    stopButton.addEventListener("click", (_) => {
+      this.onStop();
+    });
+
     this.appendChild(container);
+    this.appendChild(stopButton);
   }
 }

music-player/client/src/main.ts

@@ -1,5 +1,5 @@
 import * as _ from "lodash";
-import { TrackInfo, getTracks, playTrack } from "./client";
+import { TrackInfo, getTracks, playTrack, stopPlayback } from "./client";
 import { DataCard } from "./components/DataCard";
 import { NowPlaying } from "./components/NowPlaying";
 import { TextField } from "./components/TextField";
@@ -55,6 +55,7 @@ const updateNowPlaying = (track: TrackInfo) => {
     card.album = track.album || null;
     card.artist = track.artist || null;
     track_list.appendChild(card);
+    card.onStop = () => stopPlayback();
   }
 };