Add a playback stop button
This commit is contained in:
parent
414627555a
commit
4f47bcd9c3
|
@ -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);
|
||||
});
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue