Lay out a now-playing card
This commit is contained in:
parent
8300b84525
commit
09595b99c6
|
|
@ -56,6 +56,9 @@
|
|||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="card card--recessed">
|
||||
</div>
|
||||
|
||||
<div class="card card--low">
|
||||
</div>
|
||||
|
||||
|
|
@ -67,6 +70,11 @@
|
|||
</div>
|
||||
|
||||
<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="track-card__name">Underground</div>
|
||||
<div class="track-card__length">5:15</div>
|
||||
|
|
|
|||
|
|
@ -6,21 +6,12 @@
|
|||
<title>Music Player</title>
|
||||
</head>
|
||||
<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="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>
|
||||
<ul class="track-list__tracks bulletless-list">
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -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,5 +1,4 @@
|
|||
import { TextField } from "./TextField";
|
||||
import { DataCard } from "./DataCard";
|
||||
|
||||
export class TrackCard extends HTMLElement {
|
||||
trackNumberContainer: TextField;
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue