This commit is contained in:
Ondrej Zara 2020-03-17 11:02:38 +01:00
parent cf46a0ffb1
commit c266bad516
11 changed files with 75 additions and 27 deletions

View file

@ -54,10 +54,6 @@ button {
border: none; border: none;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
@media (hover: hover) {
&:not(:disabled):not(:hover):not(.-thumb) { opacity: 0.9; }
}
} }
select { select {

View file

@ -14,6 +14,7 @@ cyp-player {
} }
.art { .art {
flex: none;
width: @art-size; width: @art-size;
height: @art-size; height: @art-size;
} }

View file

@ -1,3 +1,5 @@
cyp-queue { cyp-queue {
.current { color: var(--primary); } .current {
> .icon { color: var(--primary); }
}
} }

View file

@ -8,6 +8,42 @@ cyp-song {
.subtitle { .ellipsis; } .subtitle { .ellipsis; }
} }
cyp-queue & .track { display: none; } cyp-queue & {
> .icon {
width: 32px;
margin-right: 8px; // fixme variable
}
.track { display: none; }
&:not(.playing) > .icon-play, &.playing > .icon-music {
display: none;
}
&.playing {
> .icon { color: var(--primary) }
&::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
background-color: var(--primary);
width: calc(100% * var(--progress, 0));
height: var(--border-width);
}
}
}
cyp-library & {
padding-left: 0;
padding-top: 0;
padding-bottom: 0;
> .icon {
width: 64px; // fixme variable
}
> .icon-play { display: none; }
}
} }

View file

@ -24,7 +24,8 @@
position: relative; // kotva pro selected::before position: relative; // kotva pro selected::before
&.selected { &.selected {
xbackground-color: var(--primary-tint); // FIXME jak zvyraznovat? color: var(--primary);
background-color: var(--primary-tint);
&::before { &::before {
content: ""; content: "";
@ -35,29 +36,21 @@
width: var(--border-width); width: var(--border-width);
background-color: var(--primary); background-color: var(--primary);
} }
&::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: var(--primary-tint);
}
} }
} }
.item { .item {
.flex-row; .flex-row;
.selectable;
padding: 8px;
&:nth-child(odd) { &:nth-child(odd) {
background-color: var(--bg-alt); background-color: var(--bg-alt);
} }
.selectable; // az po nth-child, aby byl vyber pozdeji
padding: 8px;
> .icon { > .icon {
margin-right: var(--icon-spacing); margin-right: var(--icon-spacing);
filter: drop-shadow(var(--text-shadow)); filter: drop-shadow(var(--text-shadow));

File diff suppressed because one or more lines are too long

View file

@ -674,7 +674,6 @@ class App extends HTMLElement {
const names = children.map(node => node.nodeName.toLowerCase()) const names = children.map(node => node.nodeName.toLowerCase())
.filter(name => name.startsWith("cyp-")); .filter(name => name.startsWith("cyp-"));
const unique = new Set(names); const unique = new Set(names);
console.log(unique);
const promises = [...unique].map(name => customElements.whenDefined(name)); const promises = [...unique].map(name => customElements.whenDefined(name));
await Promise.all(promises); await Promise.all(promises);
@ -1034,6 +1033,8 @@ class Player extends Component {
this._dispatchSongChange(data); this._dispatchSongChange(data);
} }
this._app.style.setProperty("--progress", DOM.progress.value/DOM.progress.max);
let artistNew = data["AlbumArtist"] || data["Artist"]; let artistNew = data["AlbumArtist"] || data["Artist"];
let artistOld = this._current["AlbumArtist"] || this._current["Artist"]; let artistOld = this._current["AlbumArtist"] || this._current["Artist"];
@ -1094,9 +1095,16 @@ class Song extends Item {
get file() { return this._data["file"]; } get file() { return this._data["file"]; }
get songId() { return this._data["Id"]; } get songId() { return this._data["Id"]; }
set playing(playing) {
this.classList.toggle("playing", playing);
}
connectedCallback() { connectedCallback() {
const data = this._data; const data = this._data;
icon("music", this);
icon("play", this);
const block = node("div", {className:"multiline"}, "", this); const block = node("div", {className:"multiline"}, "", this);
const title = this._buildTitle(data); const title = this._buildTitle(data);
@ -1111,6 +1119,8 @@ class Song extends Item {
const subtitle$1 = subtitle(data); const subtitle$1 = subtitle(data);
node("span", {className:"subtitle"}, subtitle$1, block); node("span", {className:"subtitle"}, subtitle$1, block);
} }
this.playing = false;
} }
_buildTitle(data) { _buildTitle(data) {
@ -1173,8 +1183,8 @@ class Queue extends Component {
} }
_updateCurrent() { _updateCurrent() {
Array.from(this.children).forEach(/** @param {HTMLElement} node */ node => { Array.from(this.children).forEach(/** @param {Song} node */ node => {
node.classList.toggle("current", node.songId == this._currentId); node.playing = (node.songId == this._currentId);
}); });
} }

View file

@ -34,7 +34,6 @@ class App extends HTMLElement {
const names = children.map(node => node.nodeName.toLowerCase()) const names = children.map(node => node.nodeName.toLowerCase())
.filter(name => name.startsWith("cyp-")); .filter(name => name.startsWith("cyp-"));
const unique = new Set(names); const unique = new Set(names);
console.log(unique);
const promises = [...unique].map(name => customElements.whenDefined(name)); const promises = [...unique].map(name => customElements.whenDefined(name));
await Promise.all(promises); await Promise.all(promises);

View file

@ -116,6 +116,8 @@ class Player extends Component {
this._dispatchSongChange(data); this._dispatchSongChange(data);
} }
this._app.style.setProperty("--progress", DOM.progress.value/DOM.progress.max);
let artistNew = data["AlbumArtist"] || data["Artist"]; let artistNew = data["AlbumArtist"] || data["Artist"];
let artistOld = this._current["AlbumArtist"] || this._current["Artist"]; let artistOld = this._current["AlbumArtist"] || this._current["Artist"];

View file

@ -57,8 +57,8 @@ class Queue extends Component {
} }
_updateCurrent() { _updateCurrent() {
Array.from(this.children).forEach(/** @param {HTMLElement} node */ node => { Array.from(this.children).forEach(/** @param {Song} node */ node => {
node.classList.toggle("current", node.songId == this._currentId); node.playing = (node.songId == this._currentId);
}); });
} }

View file

@ -11,9 +11,16 @@ export default class Song extends Item {
get file() { return this._data["file"]; } get file() { return this._data["file"]; }
get songId() { return this._data["Id"]; } get songId() { return this._data["Id"]; }
set playing(playing) {
this.classList.toggle("playing", playing);
}
connectedCallback() { connectedCallback() {
const data = this._data; const data = this._data;
html.icon("music", this);
html.icon("play", this);
const block = html.node("div", {className:"multiline"}, "", this); const block = html.node("div", {className:"multiline"}, "", this);
const title = this._buildTitle(data); const title = this._buildTitle(data);
@ -28,6 +35,8 @@ export default class Song extends Item {
const subtitle = format.subtitle(data); const subtitle = format.subtitle(data);
html.node("span", {className:"subtitle"}, subtitle, block); html.node("span", {className:"subtitle"}, subtitle, block);
} }
this.playing = false;
} }
_buildTitle(data) { _buildTitle(data) {