Jerry/cyp
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

tuning

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/css/cyp.less
View file

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

1
app/css/elements/player.less
View file

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

4
app/css/elements/queue.less
View file

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

38
app/css/elements/song.less
View file

@ -8,6 +8,42 @@ cyp-song {
.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; }
}
}

21
app/css/mixins.less
View file

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

2
app/cyp.css
View file

File diff suppressed because one or more lines are too long

16
app/cyp.js
View file

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

1
app/js/elements/app.js
View file

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

2
app/js/elements/player.js
View file

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

4
app/js/elements/queue.js
View file

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

9
app/js/elements/song.js
View file

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