Add a playback stop button

This commit is contained in:
Savanni D'Gerinel 2023-03-11 15:08:39 -05:00
parent 414627555a
commit 4f47bcd9c3
3 changed files with 21 additions and 1 deletions

View File

@ -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);
});

View File

@ -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);
}
}

View File

@ -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();
}
};