savanni
/
monorepo
1
0
Fork 0
Code Issues 76 Pull Requests Projects 6 Releases Wiki Activity

Lay out a now-playing card

This commit is contained in:
Savanni D'Gerinel 2023-03-04 17:06:11 -05:00
parent 8300b84525
commit 09595b99c6
6 changed files with 155 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
music-player/client/design.html
View File

@ -56,6 +56,9 @@
</div> </div>
<div class="flex"> <div class="flex">
<div class="card card--recessed">
</div>
<div class="card card--low"> <div class="card card--low">
</div> </div>
@ -67,6 +70,11 @@
</div> </div>
<div class="flex"> <div class="flex">
<div class="card card--recessed now-playing">
<div class="now-playing__name">Underground</div>
<div class="now-playing__album">Artemis</div>
<div class="now-playing__artist">Lindsey Stirling</div>
</div>
<div class="card card--low track-card"> <div class="card card--low track-card">
<div class="track-card__name">Underground</div> <div class="track-card__name">Underground</div>
<div class="track-card__length">5:15</div> <div class="track-card__length">5:15</div>

15
music-player/client/index.html
View File

@ -6,21 +6,12 @@
<title>Music Player</title> <title>Music Player</title>
</head> </head>
<body> <body>
<div class="currently-playing"> <span class="track-title"> Lindsey Sterling - Elements </span> <span class="player-status">[paused]</span> </div> <div id="now-playing">
</div>
<div class="controls"><button class="play-pause">Pause</button></div> <div class="controls"><button class="play-pause">Pause</button></div>
<div class="track-list"> <div class="track-list">
<!--
<div class="track-list__grouping">
<ul class="bulletless-list">
<li> By Artist </li>
<li> By Album </li>
<li> Work Music </li>
<li> Dance Music </li>
</ul>
</div>
-->
<div> <div>
<ul class="track-list__tracks bulletless-list"> <ul class="track-list__tracks bulletless-list">
</ul> </ul>

79
music-player/client/src/components/NowPlaying.ts Normal file
View File

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

1
music-player/client/src/components/TrackCard.ts
View File

@ -1,5 +1,4 @@
import { TextField } from "./TextField"; import { TextField } from "./TextField";
import { DataCard } from "./DataCard";
export class TrackCard extends HTMLElement { export class TrackCard extends HTMLElement {
trackNumberContainer: TextField; trackNumberContainer: TextField;

20
music-player/client/src/main.ts
View File

@ -1,16 +1,19 @@
import * as _ from "lodash"; import * as _ from "lodash";
import { TrackInfo, getTracks } from "./client"; import { TrackInfo, getTracks } from "./client";
import { DataCard } from "./components/DataCard"; import { DataCard } from "./components/DataCard";
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";
window.customElements.define("data-card", DataCard); window.customElements.define("data-card", DataCard);
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);
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"data-card": DataCard; "data-card": DataCard;
"now-playing": NowPlaying;
"text-field": TextField; "text-field": TextField;
"track-card": TrackCard; "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 = () => { const run = () => {
updateNowPlaying({
id: "example id",
name: "Underground",
album: "Artemis",
artist: "Lindsey Stirling",
});
getTracks().then((tracks) => updateTrackList(tracks)); getTracks().then((tracks) => updateTrackList(tracks));
}; };

54
music-player/client/styles.scss
View File

@ -92,11 +92,11 @@ $background-color-dark: $color-grey-300;
$primary-color-light: $color-blue-100; $primary-color-light: $color-blue-100;
$primary-color-medium: $color-blue-500; $primary-color-medium: $color-blue-500;
$primary-color-dark: $color-blue-700; $primary-color-dark: $color-blue-700;
$accent-color-light: $color-blue-100; $accent-color-light: $color-purple-100;
$accent-color-medium: $color-blue-500; $accent-color-medium: $color-purple-500;
$accent-color-dark: $color-blue-900; $accent-color-dark: $color-purple-700;
$accent-color: $color-purple-500;
$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-low: 1px 2px 3px $shadow-500, 0 1px 2px $shadow-900;
$elevation-medium: 2px 6px 5px $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; $elevation-high: 3px 8px 6px $shadow-900, 0 0px 3px $shadow-900;
@ -124,10 +124,6 @@ body {
margin: 16px 0px 16px 0px; margin: 16px 0px 16px 0px;
} }
.currently-playing {
padding: 8px;
}
.controls { .controls {
padding: 8px; padding: 8px;
} }
@ -152,12 +148,18 @@ body {
} }
.card { .card {
display: block;
border-radius: 5px; border-radius: 5px;
padding: 8px; padding: 8px;
width: 500px; width: 500px;
height: 100px; height: 100px;
} }
.card--recessed {
border: 1px solid $border-color;
box-shadow: $elevation-recessed;
}
.card--low { .card--low {
border: 1px solid $border-color; border: 1px solid $border-color;
box-shadow: $elevation-low; box-shadow: $elevation-low;
@ -173,6 +175,40 @@ body {
box-shadow: $elevation-high; 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 { .track-card {
display: grid; display: grid;
gap: 4px 4px; gap: 4px 4px;
@ -193,7 +229,7 @@ body {
grid-column: 2 / span 1; grid-column: 2 / span 1;
grid-row: 1 / span 1; grid-row: 1 / span 1;
text-align: right; text-align: right;
color: $color-blue-300; color: $primary-color-light;
} }
.track-card__album { .track-card__album {