Set up the infrastructure to play music #29
|
@ -9,3 +9,10 @@ export interface TrackInfo {
|
||||||
|
|
||||||
export const getTracks = (): Promise<TrackInfo[]> =>
|
export const getTracks = (): Promise<TrackInfo[]> =>
|
||||||
fetch("/api/v1/tracks").then((r) => r.json());
|
fetch("/api/v1/tracks").then((r) => r.json());
|
||||||
|
|
||||||
|
export const playTrack = (id: string): Promise<Response> =>
|
||||||
|
fetch("/api/v1/play", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "content-type": "application/json" },
|
||||||
|
body: JSON.stringify({ id: id }),
|
||||||
|
});
|
||||||
|
|
|
@ -0,0 +1,34 @@
|
||||||
|
export class PlaylistRow extends HTMLElement {
|
||||||
|
onPlay: (trackId: string) => void;
|
||||||
|
|
||||||
|
static get observedAttributes() {
|
||||||
|
return ["trackId"];
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.onPlay = (_) => {};
|
||||||
|
}
|
||||||
|
|
||||||
|
get trackId(): string | null {
|
||||||
|
return this.getAttribute("trackId");
|
||||||
|
}
|
||||||
|
|
||||||
|
set trackId(id: string | null) {
|
||||||
|
id ? this.setAttribute("trackId", id) : this.removeAttribute("trackId");
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
this.classList.add("playlist-row");
|
||||||
|
const playButton = document.createElement("button");
|
||||||
|
playButton.innerHTML = "Play";
|
||||||
|
|
||||||
|
playButton.addEventListener("click", (_) => {
|
||||||
|
if (this.trackId) {
|
||||||
|
this.onPlay(this.trackId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.appendChild(playButton);
|
||||||
|
}
|
||||||
|
}
|
|
@ -8,7 +8,7 @@ export class TrackCard extends HTMLElement {
|
||||||
durationContainer: TextField;
|
durationContainer: TextField;
|
||||||
|
|
||||||
static get observedAttributes() {
|
static get observedAttributes() {
|
||||||
return ["id", "trackNumber", "name", "album", "artist", "duration"];
|
return ["trackId", "trackNumber", "name", "album", "artist", "duration"];
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
|
@ -29,6 +29,18 @@ export class TrackCard extends HTMLElement {
|
||||||
this.durationContainer.classList.add("track-card__duration");
|
this.durationContainer.classList.add("track-card__duration");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get trackId(): string | null {
|
||||||
|
return this.getAttribute("id");
|
||||||
|
}
|
||||||
|
|
||||||
|
set trackId(id: string | null) {
|
||||||
|
if (id) {
|
||||||
|
this.setAttribute("trackId", id);
|
||||||
|
} else {
|
||||||
|
this.removeAttribute("trackId");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
get name(): string | null {
|
get name(): string | null {
|
||||||
return this.getAttribute("name");
|
return this.getAttribute("name");
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,14 +1,16 @@
|
||||||
import * as _ from "lodash";
|
import * as _ from "lodash";
|
||||||
import { TrackInfo, getTracks } from "./client";
|
import { TrackInfo, getTracks, playTrack } 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";
|
||||||
import { TrackCard } from "./components/TrackCard";
|
import { TrackCard } from "./components/TrackCard";
|
||||||
|
import { PlaylistRow } from "./components/PlaylistRow";
|
||||||
|
|
||||||
window.customElements.define("data-card", DataCard);
|
window.customElements.define("data-card", DataCard);
|
||||||
window.customElements.define("now-playing", NowPlaying);
|
window.customElements.define("now-playing", NowPlaying);
|
||||||
window.customElements.define("text-field", TextField);
|
window.customElements.define("text-field", TextField);
|
||||||
window.customElements.define("track-card", TrackCard);
|
window.customElements.define("track-card", TrackCard);
|
||||||
|
window.customElements.define("playlist-row", PlaylistRow);
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
|
@ -16,25 +18,30 @@ declare global {
|
||||||
"now-playing": NowPlaying;
|
"now-playing": NowPlaying;
|
||||||
"text-field": TextField;
|
"text-field": TextField;
|
||||||
"track-card": TrackCard;
|
"track-card": TrackCard;
|
||||||
|
"playlist-row": PlaylistRow;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateTrackList = (tracks: TrackInfo[]) => {
|
const updateTrackList = (tracks: TrackInfo[]) => {
|
||||||
const track_list = document.querySelector(".track-list__tracks");
|
const playlist = document.querySelector(".track-list__tracks");
|
||||||
if (track_list) {
|
if (playlist) {
|
||||||
let track_formats = _.map(tracks, (info) => {
|
_.map(tracks, (info) => {
|
||||||
let card: TrackCard = document.createElement("track-card");
|
let card: TrackCard = document.createElement("track-card");
|
||||||
|
let listItem: PlaylistRow = document.createElement("playlist-row");
|
||||||
|
|
||||||
|
card.trackId = info.id;
|
||||||
card.name = info.name || null;
|
card.name = info.name || null;
|
||||||
card.album = info.album || null;
|
card.album = info.album || null;
|
||||||
card.artist = info.artist || null;
|
card.artist = info.artist || null;
|
||||||
card.duration = (info.duration && `${info.duration}`) || null;
|
card.duration = (info.duration && `${info.duration}`) || null;
|
||||||
return card;
|
|
||||||
});
|
listItem.appendChild(card);
|
||||||
_.map(track_formats, (trackCard) => {
|
listItem.trackId = info.id;
|
||||||
let listItem = document.createElement("li");
|
listItem.onPlay = (id: string) => {
|
||||||
listItem.classList.add("track-list__row");
|
console.log("time to play ", id);
|
||||||
listItem.appendChild(trackCard);
|
playTrack(id);
|
||||||
track_list.appendChild(listItem);
|
};
|
||||||
|
playlist.appendChild(listItem);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
console.log("track_list does not exist");
|
console.log("track_list does not exist");
|
||||||
|
|
|
@ -143,6 +143,11 @@ body {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.playlist-row {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
.track-list__row {
|
.track-list__row {
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue