From 09595b99c6625b828b9a1237470f98df41fbd121 Mon Sep 17 00:00:00 2001 From: Savanni D'Gerinel Date: Sat, 4 Mar 2023 17:06:11 -0500 Subject: [PATCH] Lay out a now-playing card --- music-player/client/design.html | 8 ++ music-player/client/index.html | 15 +--- .../client/src/components/NowPlaying.ts | 79 +++++++++++++++++++ .../client/src/components/TrackCard.ts | 1 - music-player/client/src/main.ts | 20 +++++ music-player/client/styles.scss | 54 ++++++++++--- 6 files changed, 155 insertions(+), 22 deletions(-) create mode 100644 music-player/client/src/components/NowPlaying.ts diff --git a/music-player/client/design.html b/music-player/client/design.html index fcc7b18..0732492 100644 --- a/music-player/client/design.html +++ b/music-player/client/design.html @@ -56,6 +56,9 @@
+
+
+
@@ -67,6 +70,11 @@
+
+
Underground
+
Artemis
+
Lindsey Stirling
+
Underground
5:15
diff --git a/music-player/client/index.html b/music-player/client/index.html index 5b00793..78a74af 100644 --- a/music-player/client/index.html +++ b/music-player/client/index.html @@ -6,21 +6,12 @@ Music Player -
Lindsey Sterling - Elements [paused]
+
+
+
- -
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 {