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

queue movement

Browse source
This commit is contained in:
Ondrej Zara 2020-03-10 14:08:18 +01:00
parent 77ab2f2b18
commit 479cb3fd3c
No known key found for this signature in database
GPG key ID: B0A5751E616840C5
7 changed files with 45 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/css/elements/menu.less
View file

@ -47,7 +47,7 @@ cyp-commands {
}
button {
flex: 0 0 @breakpoint-menu/6;
flex: 0 1 @breakpoint-menu/6;
&.last {
order: 1;
margin-left: auto;

5
app/css/mixins.less
View file

@ -25,6 +25,7 @@
.selectable {
border-left: 4px solid transparent;
cursor: pointer;
&.selected {
border-left-color: var(--primary);
@ -34,9 +35,9 @@
.item {
.flex-row;
.selectable;
padding: 8px;
padding: 8px 4px;
&:nth-child(odd) {
&:nth-child(odd) { // FIXME nutno poresit lepe s ohledem na search
background-color: var(--bg-alt);
}
}

12
app/cyp.css
View file

@ -109,6 +109,7 @@ select {
*/
.selectable {
border-left: 4px solid transparent;
cursor: pointer;
}
.selectable.selected {
border-left-color: var(--primary);
@ -117,7 +118,8 @@ select {
flex-direction: row;
align-items: center;
border-left: 4px solid transparent;
padding: 8px;
cursor: pointer;
padding: 8px 4px;
}
.item:not([hidden]) {
display: flex;
@ -490,7 +492,7 @@ cyp-commands[hidden] {
top: 100%;
}
cyp-commands button {
flex: 0 0 80px;
flex: 0 1 80px;
}
cyp-commands button.last {
order: 1;
@ -500,7 +502,8 @@ cyp-song {
flex-direction: row;
align-items: center;
border-left: 4px solid transparent;
padding: 8px;
cursor: pointer;
padding: 8px 4px;
}
cyp-song:not([hidden]) {
display: flex;
@ -824,7 +827,8 @@ cyp-playlist {
flex-direction: row;
align-items: center;
border-left: 4px solid transparent;
padding: 8px;
cursor: pointer;
padding: 8px 4px;
}
cyp-playlist:not([hidden]) {
display: flex;

1
app/icons/arrow-down-bold.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z" /></svg>
Side by side

After

Width:  |  Height:  |  Size: 333 B

1
app/icons/arrow-up-bold.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z" /></svg>
Side by side

After

Width:  |  Height:  |  Size: 335 B

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

@ -3,6 +3,18 @@ import Component from "../component.js";
import Song from "./song.js";
function generateMoveCommands(items, diff, all) {
const COMPARE = (a, b) => all.indexOf(a) - all.indexOf(b);
return items.sort(COMPARE)
.map(item => {
let index = all.indexOf(item) + diff;
if (index < 0 || index >= all.length) { return null; } // this does not move
return `moveid ${item.data["Id"]} ${index}`;
})
.filter(command => command);
}
class Queue extends Component {
constructor() {
super({selection:"multi"});
@ -63,6 +75,18 @@ class Queue extends Component {
sel.addCommandAll();
sel.addCommand(async items => {
const commands = generateMoveCommands(items, -1, Array.from(this.children));
await this._mpd.command(commands);
this._sync();
}, {label:"Up", icon:"arrow-up-bold"});
sel.addCommand(async items => {
const commands = generateMoveCommands(items, +1, Array.from(this.children));
await this._mpd.command(commands.reverse()); // move last first
this._sync();
}, {label:"Down", icon:"arrow-down-bold"});
sel.addCommand(async items => {
let name = prompt("Save selected songs as a playlist?", "name");
if (name === null) { return; }
@ -72,8 +96,7 @@ class Queue extends Component {
return `playlistadd "${name}" "${this._mpd.escape(item.data["file"])}"`;
});
await this._mpd.command(commands);
// FIXME notify?
await this._mpd.command(commands); // FIXME notify?
}, {label:"Save", icon:"content-save"});
sel.addCommand(async items => {

6
app/js/icons.js
View file

@ -35,6 +35,9 @@ ICONS["settings"] = `<svg viewBox="0 0 24 24">
ICONS["pause"] = `<svg viewBox="0 0 24 24">
<path d="M14,19H18V5H14M6,19H10V5H6V19Z"/>
</svg>`;
ICONS["arrow-down-bold"] = `<svg viewBox="0 0 24 24">
<path d="M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z"/>
</svg>`;
ICONS["volume-off"] = `<svg viewBox="0 0 24 24">
<path d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"/>
</svg>`;
@ -50,6 +53,9 @@ ICONS["minus"] = `<svg viewBox="0 0 24 24">
ICONS["repeat"] = `<svg viewBox="0 0 24 24">
<path d="M17,17H7V14L3,18L7,22V19H19V13H17M7,7H17V10L21,6L17,2V5H5V11H7V7Z"/>
</svg>`;
ICONS["arrow-up-bold"] = `<svg viewBox="0 0 24 24">
<path d="M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z"/>
</svg>`;
ICONS["play"] = `<svg viewBox="0 0 24 24">
<path d="M8,5.14V19.14L19,12.14L8,5.14Z"/>
</svg>`;