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>) => {
|
.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);
|
||||||
|
});
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue