Set up the infrastructure to play music #29

Merged
savanni merged 3 commits from feature/play-music into main 2023-03-10 14:35:18 +00:00
5 changed files with 77 additions and 12 deletions
Showing only changes of commit fb3218ff58 - Show all commits

View File

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

View File

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

View File

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

View File

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

View File

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