queue movement

app/css/elements/menu.less

@@ -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;

app/css/mixins.less

@@ -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);
 	}
 }

app/cyp.css

@@ -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;

app/icons/arrow-down-bold.svg

@@ -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>

app/icons/arrow-up-bold.svg

@@ -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>

app/js/elements/queue.js

@@ -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);
+			await this._mpd.command(commands); // FIXME notify?
-			// FIXME notify?
 		}, {label:"Save", icon:"content-save"});
 
 		sel.addCommand(async items => {

app/js/icons.js

@@ -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>`;