diff --git a/music-player/client/src/components/NowPlaying.ts b/music-player/client/src/components/NowPlaying.ts
new file mode 100644
index 0000000..e256a2f
--- /dev/null
+++ b/music-player/client/src/components/NowPlaying.ts
@@ -0,0 +1,79 @@
+import { TextField } from "./TextField";
+
+export class NowPlaying extends HTMLElement {
+ nameContainer: TextField;
+ albumContainer: TextField;
+ artistContainer: TextField;
+
+ static get observedAttributes() {
+ return ["name", "album", "artist"];
+ }
+
+ constructor() {
+ super();
+
+ this.nameContainer = document.createElement("text-field");
+ this.nameContainer.classList.add("now-playing__name");
+
+ this.albumContainer = document.createElement("text-field");
+ this.albumContainer.classList.add("now-playing__album");
+
+ this.artistContainer = document.createElement("text-field");
+ this.artistContainer.classList.add("now-playing__artist");
+ }
+
+ get name(): string | null {
+ return this.getAttribute("name");
+ }
+
+ set name(name: string | null) {
+ if (name) {
+ this.setAttribute("name", name);
+ this.nameContainer.text = name;
+ } else {
+ this.removeAttribute("open");
+ this.nameContainer.text = null;
+ }
+ }
+
+ get artist(): string | null {
+ return this.getAttribute("artist");
+ }
+
+ set artist(artist: string | null) {
+ if (artist) {
+ this.setAttribute("artist", artist);
+ this.artistContainer.text = artist;
+ } else {
+ this.removeAttribute("open");
+ this.artistContainer.text = null;
+ }
+ }
+
+ get album(): string | null {
+ return this.getAttribute("album");
+ }
+
+ set album(album: string | null) {
+ if (album) {
+ this.setAttribute("album", album);
+ this.albumContainer.text = album;
+ } else {
+ this.removeAttribute("open");
+ this.albumContainer.text = null;
+ }
+ }
+
+ connectedCallback() {
+ const container = document.createElement("data-card");
+ container.classList.add("card");
+ container.classList.add("card--recessed");
+ container.classList.add("now-playing");
+
+ container.appendChild(this.nameContainer);
+ container.appendChild(this.albumContainer);
+ container.appendChild(this.artistContainer);
+
+ this.appendChild(container);
+ }
+}
diff --git a/music-player/client/src/components/TrackCard.ts b/music-player/client/src/components/TrackCard.ts
index f060305..241a9ce 100644
--- a/music-player/client/src/components/TrackCard.ts
+++ b/music-player/client/src/components/TrackCard.ts
@@ -1,5 +1,4 @@
import { TextField } from "./TextField";
-import { DataCard } from "./DataCard";
export class TrackCard extends HTMLElement {
trackNumberContainer: TextField;
diff --git a/music-player/client/src/main.ts b/music-player/client/src/main.ts
index ec8a90d..2b6b2a3 100644
--- a/music-player/client/src/main.ts
+++ b/music-player/client/src/main.ts
@@ -1,16 +1,19 @@
import * as _ from "lodash";
import { TrackInfo, getTracks } from "./client";
import { DataCard } from "./components/DataCard";
+import { NowPlaying } from "./components/NowPlaying";
import { TextField } from "./components/TextField";
import { TrackCard } from "./components/TrackCard";
window.customElements.define("data-card", DataCard);
+window.customElements.define("now-playing", NowPlaying);
window.customElements.define("text-field", TextField);
window.customElements.define("track-card", TrackCard);
declare global {
interface HTMLElementTagNameMap {
"data-card": DataCard;
+ "now-playing": NowPlaying;
"text-field": TextField;
"track-card": TrackCard;
}
@@ -38,7 +41,24 @@ const updateTrackList = (tracks: TrackInfo[]) => {
}
};
+const updateNowPlaying = (track: TrackInfo) => {
+ const track_list = document.querySelector("#now-playing");
+ if (track_list) {
+ let card: NowPlaying = document.createElement("now-playing");
+ card.name = track.name || null;
+ card.album = track.album || null;
+ card.artist = track.artist || null;
+ track_list.appendChild(card);
+ }
+};
+
const run = () => {
+ updateNowPlaying({
+ id: "example id",
+ name: "Underground",
+ album: "Artemis",
+ artist: "Lindsey Stirling",
+ });
getTracks().then((tracks) => updateTrackList(tracks));
};
diff --git a/music-player/client/styles.scss b/music-player/client/styles.scss
index e71fd24..b1d4f15 100644
--- a/music-player/client/styles.scss
+++ b/music-player/client/styles.scss
@@ -92,11 +92,11 @@ $background-color-dark: $color-grey-300;
$primary-color-light: $color-blue-100;
$primary-color-medium: $color-blue-500;
$primary-color-dark: $color-blue-700;
-$accent-color-light: $color-blue-100;
-$accent-color-medium: $color-blue-500;
-$accent-color-dark: $color-blue-900;
-$accent-color: $color-purple-500;
+$accent-color-light: $color-purple-100;
+$accent-color-medium: $color-purple-500;
+$accent-color-dark: $color-purple-700;
+$elevation-recessed: inset 1px 2px 3px $shadow-500, inset 0 1px 2px $shadow-900;
$elevation-low: 1px 2px 3px $shadow-500, 0 1px 2px $shadow-900;
$elevation-medium: 2px 6px 5px $shadow-500, 0 1px 2px $shadow-900;
$elevation-high: 3px 8px 6px $shadow-900, 0 0px 3px $shadow-900;
@@ -124,10 +124,6 @@ body {
margin: 16px 0px 16px 0px;
}
-.currently-playing {
- padding: 8px;
-}
-
.controls {
padding: 8px;
}
@@ -152,12 +148,18 @@ body {
}
.card {
+ display: block;
border-radius: 5px;
padding: 8px;
width: 500px;
height: 100px;
}
+.card--recessed {
+ border: 1px solid $border-color;
+ box-shadow: $elevation-recessed;
+}
+
.card--low {
border: 1px solid $border-color;
box-shadow: $elevation-low;
@@ -173,6 +175,40 @@ body {
box-shadow: $elevation-high;
}
+.now-playing {
+ display: grid;
+ background-color: $background-color-light;
+}
+
+.now-playing__name {
+ display: block;
+ grid-column: 1 / span 1;
+ grid-row: 1 / span 1;
+ color: $accent-color-dark;
+}
+
+.now-playing__length {
+ display: block;
+ grid-column: 2 / span 1;
+ grid-row: 1 / span 1;
+ text-align: right;
+ color: $color-blue-300;
+}
+
+.now-playing__album {
+ display: block;
+ grid-column: 1 / span 1;
+ grid-row: 2 / span 1;
+ color: $color-grey-800;
+}
+
+.now-playing__artist {
+ display: block;
+ grid-column: 2 / span 1;
+ grid-row: 2 / span 1;
+ color: $color-grey-800;
+}
+
.track-card {
display: grid;
gap: 4px 4px;
@@ -193,7 +229,7 @@ body {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
text-align: right;
- color: $color-blue-300;
+ color: $primary-color-light;
}
.track-card__album {