Add a playback stop button

This commit is contained in:
Savanni D'Gerinel 2023-03-11 15:08:39 -05:00
parent 725c96bc1b
commit 40cce7ce00
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>) => { .then((result: Response<null>) => {
console.log("result: ", result); 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"; import { TextField } from "./TextField";
export class NowPlaying extends HTMLElement { export class NowPlaying extends HTMLElement {
onStop: () => void;
nameContainer: TextField; nameContainer: TextField;
albumContainer: TextField; albumContainer: TextField;
artistContainer: TextField; artistContainer: TextField;
@ -20,6 +21,8 @@ export class NowPlaying extends HTMLElement {
this.artistContainer = document.createElement("text-field"); this.artistContainer = document.createElement("text-field");
this.artistContainer.classList.add("now-playing__artist"); this.artistContainer.classList.add("now-playing__artist");
this.onStop = () => {};
} }
get name(): string | null { get name(): string | null {
@ -74,6 +77,13 @@ export class NowPlaying extends HTMLElement {
container.appendChild(this.albumContainer); container.appendChild(this.albumContainer);
container.appendChild(this.artistContainer); container.appendChild(this.artistContainer);
const stopButton = document.createElement("button");
stopButton.innerHTML = "Stop";
stopButton.addEventListener("click", (_) => {
this.onStop();
});
this.appendChild(container); this.appendChild(container);
this.appendChild(stopButton);
} }
} }

View File

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