song playback in queue, item style

This commit is contained in:
Ondrej Zara 2020-03-10 22:11:36 +01:00
parent 571101a66f
commit d91a6ca858
No known key found for this signature in database
GPG key ID: B0A5751E616840C5
11 changed files with 32 additions and 878 deletions

View file

@ -13,7 +13,7 @@ $(ICONS): $(APP)/icons/*
$(APP)/svg2js.sh $(APP)/icons > $@
$(CSS): $(APP)/css/* $(APP)/css/elements/*
$(LESS) $(APP)/css/cyp.less > $@
$(LESS) -x $(APP)/css/cyp.less > $@
service: $(SERVICE)
systemctl --user enable $(PWD)/$(SERVICE)

View file

@ -20,7 +20,8 @@ header, footer {
}
footer {
position: relative;
position: relative; // kotva pro cyp-commands
overflow: hidden; // vyjizdenici cyp-commands
height: 56px;
@media (max-width: @breakpoint-menu) {
height: 40px;

View file

@ -1,4 +1,6 @@
cyp-settings {
--spacing: 8px;
font-size: var(--font-size-large);
dl {

View file

@ -34,6 +34,7 @@
.item {
.flex-row;
.selectable;
padding: 8px;
padding-left: calc(8px - var(--border-width));
@ -41,5 +42,13 @@
background-color: var(--bg-alt);
}
> .icon { margin-right: var(--icon-spacing); }
.title {
font-size: var(--font-size-large);
flex-grow: 1;
min-width: 0; // bez tohoto se odmita zmensit
}
button .icon { width: 32px; }
}

View file

@ -4,7 +4,6 @@ cyp-app {
--font-size-large: 112.5%;
--icon-spacing: 4px;
--primary: rgb(var(--primary-raw));
--spacing: 8px;
--box-shadow: 0 0 3px #000;
--border-width: 4px;
}
@ -45,9 +44,3 @@ cyp-app[color=darkorange] {
cyp-app[color=limegreen] {
--primary-raw: 50, 205, 50;
}
@media (max-width: @breakpoint-menu) {
:root {
--spacing: var(--icon-spacing);
}
}

File diff suppressed because one or more lines are too long

View file

@ -1,3 +1,4 @@
import * as html from "./html.js";
import Selection from "./selection.js";
export class HasApp extends HTMLElement {
@ -10,6 +11,10 @@ export class Item extends HasApp {
super();
this.addEventListener("click", _ => this.parentNode.selection.toggle(this));
}
_buildTitle(title) {
return html.node("span", {className:"title"}, title, this);
}
}
export default class Component extends HasApp {

View file

@ -8,8 +8,8 @@ export default class Playlist extends Item {
}
connectedCallback() {
html.icon("playlist-music", this)
html.node("h2", {}, this.name, this);
html.icon("playlist-music", this);
this._buildTitle(this.name);
}
}

View file

@ -65,7 +65,15 @@ class Queue extends Component {
html.clear(this);
this.selection.clear();
songs.forEach(song => this.appendChild(new Song(song)));
songs.forEach(song => {
const node = new Song(song);
this.appendChild(node);
html.button({icon:"play"}, "", node).addEventListener("click", async e => {
e.stopPropagation(); // do not select
await this._mpd.command(`playid ${song["Id"]}`);
});
});
this._updateCurrent();
}

View file

@ -15,11 +15,6 @@ export default class Song extends Item {
let lines = formatSongInfo(this.data);
html.node("h2", {}, lines.shift(), info);
lines.length && html.node("div", {}, lines.shift(), info);
html.button({icon:"play"}, "", this).addEventListener("click", async e => {
e.stopPropagation(); // do not select
await this._mpd.command(`playid ${this.data["Id"]}`);
});
}
}

View file

@ -3,7 +3,7 @@ import * as mpd from "./mpd.js";
export const escape = mpd.escape;
export function command(cmd) {
console.warn(`MOCK does not know "${cmd}"`);
console.warn(`mpd-mock does not know "${cmd}"`);
}
export function commandAndStatus(cmd) {