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

library wip

Browse source
This commit is contained in:
Ondrej Zara 2020-03-11 22:46:28 +01:00
parent f21027895c
commit f0d4f1c3b0
No known key found for this signature in database
GPG key ID: B0A5751E616840C5
17 changed files with 178 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/css/cyp.less
View file

@ -82,3 +82,5 @@ select {
@import "elements/yt.less"; @import "elements/yt.less";
@import "elements/range.less"; @import "elements/range.less";
@import "elements/playlist.less"; @import "elements/playlist.less";
@import "elements/library.less";
@import "elements/artist.less";

3
app/css/elements/artist.less Normal file
View file

@ -0,0 +1,3 @@
cyp-artist {
.item;
}

3
app/css/elements/library.less Normal file
View file

@ -0,0 +1,3 @@
cyp-library {
}

2
app/cyp.css
View file

File diff suppressed because one or more lines are too long

1
app/icons/checkbox-marked-outline.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="M19,19H5V5H15V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V11H19M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z" /></svg>
Side by side

After

Width:  |  Height:  |  Size: 436 B

1
app/icons/chevron-double-right.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="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z" /></svg>
Side by side

After

Width:  |  Height:  |  Size: 411 B

14
app/index.html
View file

@ -40,17 +40,8 @@
</header> </header>
<main> <main>
<cyp-queue></cyp-queue> <cyp-queue></cyp-queue>
<cyp-playlists> <cyp-playlists></cyp-playlists>
<ul></ul> <cyp-library></cyp-library>
</cyp-playlists>
<section id="library">
<header></header>
<ul></ul>
</section>
<section id="fs">
<header></header>
<ul></ul>
</section>
<cyp-yt> <cyp-yt>
<header> <header>
<button class="download" data-icon="download">Download</button> <button class="download" data-icon="download">Download</button>
@ -113,5 +104,6 @@
<script type="module" src="js/elements/settings.js"></script> <script type="module" src="js/elements/settings.js"></script>
<script type="module" src="js/elements/yt.js"></script> <script type="module" src="js/elements/yt.js"></script>
<script type="module" src="js/elements/song.js"></script> <script type="module" src="js/elements/song.js"></script>
<script type="module" src="js/elements/library.js"></script>
</body> </body>
</html> </html>

12
app/js/component.js
View file

@ -1,4 +1,3 @@
import * as html from "./html.js";
import Selection from "./selection.js"; import Selection from "./selection.js";
export class HasApp extends HTMLElement { export class HasApp extends HTMLElement {
@ -6,17 +5,6 @@ export class HasApp extends HTMLElement {
get _mpd() { return this._app.mpd; } get _mpd() { return this._app.mpd; }
} }
export class Item extends HasApp {
constructor() {
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 { export default class Component extends HasApp {
constructor(options = {}) { constructor(options = {}) {
super(); super();

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

@ -2,9 +2,6 @@ import * as mpd from "../mpd.js";
import * as mpdMock from "../mpd-mock.js"; import * as mpdMock from "../mpd-mock.js";
import * as html from "../html.js"; import * as html from "../html.js";
// import * as library from "./library.js";
// import * as fs from "./fs.js";
function initIcons() { function initIcons() {
Array.from(document.querySelectorAll("[data-icon]")).forEach(/** @param {HTMLElement} node */ node => { Array.from(document.querySelectorAll("[data-icon]")).forEach(/** @param {HTMLElement} node */ node => {
let icon = html.icon(node.dataset.icon); let icon = html.icon(node.dataset.icon);
@ -34,8 +31,12 @@ class App extends HTMLElement {
async connectedCallback() { async connectedCallback() {
this.mpd = await initMpd(); this.mpd = await initMpd();
const promises = ["cyp-player"].map(name => customElements.whenDefined(name)); const children = Array.from(this.querySelectorAll("*"));
const names = children.map(node => node.nodeName.toLowerCase())
.filter(name => name.startsWith("cyp-"));
const unique = new Set(names);
const promises = [...unique].map(name => customElements.whenDefined(name));
await Promise.all(promises); await Promise.all(promises);
this.dispatchEvent(new CustomEvent("load")); this.dispatchEvent(new CustomEvent("load"));

17
app/js/elements/artist.js Normal file
View file

@ -0,0 +1,17 @@
import * as html from "../html.js";
import Item from "../item.js";
export default class Artist extends Item {
constructor(name) {
super();
this.name = name;
}
connectedCallback() {
html.icon("artist", this);
this._buildTitle(this.name);
}
}
customElements.define("cyp-artist", Artist);

63
app/js/elements/library.js Normal file
View file

@ -0,0 +1,63 @@
import * as html from "../html.js";
import Component from "../component.js";
import Artist from "./artist.js";
class Library extends Component {
constructor() {
super({selection:"multi"});
}
_onAppLoad() {
this._showRoot();
}
_onComponentChange(c, isThis) {
const wasHidden = this.hidden;
this.hidden = !isThis;
if (!wasHidden) { this._showRoot(); }
}
_showRoot() {
html.clear(this);
html.button({icon:"artist"}, "Artists and albums", this)
.addEventListener("click", _ => this._listTags("AlbumArtist"));
html.button({icon:"folder"}, "Files and directories", this)
.addEventListener("click", _ => this._listFS(""));
html.button({icon:"magnify"}, "Search", this)
.addEventListener("click", _ => this._showSearch());
}
async _listTags(tag, filter = {}) {
const values = await this._mpd.listTags(tag, filter);
html.clear(this);
values.forEach(value => this._buildTagValue(tag, value));
}
async _listFS(path) {
}
_showSearch() {
}
_buildTagValue(tag, value) {
let node;
switch (tag) {
case "AlbumArtist":
node = new Artist(value);
node.onClick = () => this._listTags("Album", {[tag]:value});
break;
}
this.appendChild(node);
}
}
customElements.define("cyp-library", Library);

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

@ -1,5 +1,5 @@
import * as html from "../html.js"; import * as html from "../html.js";
import { Item } from "../component.js"; import Item from "../item.js";
export default class Playlist extends Item { export default class Playlist extends Item {
constructor(name) { constructor(name) {

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

@ -1,6 +1,6 @@
import * as format from "../format.js"; import * as format from "../format.js";
import * as html from "../html.js"; import * as html from "../html.js";
import { Item } from "../component.js"; import Item from "../item.js";
export default class Song extends Item { export default class Song extends Item {
constructor(data) { constructor(data) {

112
app/js/icons.js
View file

@ -1,33 +1,15 @@
let ICONS={}; let ICONS={};
ICONS["playlist-music"] = `<svg viewBox="0 0 24 24"> ICONS["library-music"] = `<svg viewBox="0 0 24 24">
<path d="M15,6H3V8H15V6M15,10H3V12H15V10M3,16H11V14H3V16M17,6V14.18C16.69,14.07 16.35,14 16,14A3,3 0 0,0 13,17A3,3 0 0,0 16,20A3,3 0 0,0 19,17V8H22V6H17Z"/> <path d="M4,6H2V20A2,2 0 0,0 4,22H18V20H4M18,7H15V12.5A2.5,2.5 0 0,1 12.5,15A2.5,2.5 0 0,1 10,12.5A2.5,2.5 0 0,1 12.5,10C13.07,10 13.58,10.19 14,10.5V5H18M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2Z"/>
</svg>`;
ICONS["plus"] = `<svg viewBox="0 0 24 24">
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
</svg>`; </svg>`;
ICONS["folder"] = `<svg viewBox="0 0 24 24"> ICONS["folder"] = `<svg viewBox="0 0 24 24">
<path d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"/> <path d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"/>
</svg>`; </svg>`;
ICONS["shuffle"] = `<svg viewBox="0 0 24 24"> ICONS["playlist-music"] = `<svg viewBox="0 0 24 24">
<path d="M14.83,13.41L13.42,14.82L16.55,17.95L14.5,20H20V14.5L17.96,16.54L14.83,13.41M14.5,4L16.54,6.04L4,18.59L5.41,20L17.96,7.46L20,9.5V4M10.59,9.17L5.41,4L4,5.41L9.17,10.58L10.59,9.17Z"/> <path d="M15,6H3V8H15V6M15,10H3V12H15V10M3,16H11V14H3V16M17,6V14.18C16.69,14.07 16.35,14 16,14A3,3 0 0,0 13,17A3,3 0 0,0 16,20A3,3 0 0,0 19,17V8H22V6H17Z"/>
</svg>`;
ICONS["artist"] = `<svg viewBox="0 0 24 24">
<path d="M11,14C12,14 13.05,14.16 14.2,14.44C13.39,15.31 13,16.33 13,17.5C13,18.39 13.25,19.23 13.78,20H3V18C3,16.81 3.91,15.85 5.74,15.12C7.57,14.38 9.33,14 11,14M11,12C9.92,12 9,11.61 8.18,10.83C7.38,10.05 7,9.11 7,8C7,6.92 7.38,6 8.18,5.18C9,4.38 9.92,4 11,4C12.11,4 13.05,4.38 13.83,5.18C14.61,6 15,6.92 15,8C15,9.11 14.61,10.05 13.83,10.83C13.05,11.61 12.11,12 11,12M18.5,10H20L22,10V12H20V17.5A2.5,2.5 0 0,1 17.5,20A2.5,2.5 0 0,1 15,17.5A2.5,2.5 0 0,1 17.5,15C17.86,15 18.19,15.07 18.5,15.21V10Z"/>
</svg>`;
ICONS["download"] = `<svg viewBox="0 0 24 24">
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/>
</svg>`;
ICONS["magnify"] = `<svg viewBox="0 0 24 24">
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
</svg>`;
ICONS["delete"] = `<svg viewBox="0 0 24 24">
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/>
</svg>`;
ICONS["rewind"] = `<svg viewBox="0 0 24 24">
<path d="M11.5,12L20,18V6M11,18V6L2.5,12L11,18Z"/>
</svg>`;
ICONS["account-multiple"] = `<svg viewBox="0 0 24 24">
<path d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z"/>
</svg>`;
ICONS["cancel"] = `<svg viewBox="0 0 24 24">
<path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.85 4.63,15.55 5.68,16.91L16.91,5.68C15.55,4.63 13.85,4 12,4M12,20A8,8 0 0,0 20,12C20,10.15 19.37,8.45 18.32,7.09L7.09,18.32C8.45,19.37 10.15,20 12,20Z"/>
</svg>`; </svg>`;
ICONS["settings"] = `<svg viewBox="0 0 24 24"> ICONS["settings"] = `<svg viewBox="0 0 24 24">
<path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"/> <path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"/>
@ -35,46 +17,70 @@ ICONS["settings"] = `<svg viewBox="0 0 24 24">
ICONS["pause"] = `<svg viewBox="0 0 24 24"> ICONS["pause"] = `<svg viewBox="0 0 24 24">
<path d="M14,19H18V5H14M6,19H10V5H6V19Z"/> <path d="M14,19H18V5H14M6,19H10V5H6V19Z"/>
</svg>`; </svg>`;
ICONS["arrow-down-bold"] = `<svg viewBox="0 0 24 24"> ICONS["artist"] = `<svg viewBox="0 0 24 24">
<path d="M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z"/> <path d="M11,14C12,14 13.05,14.16 14.2,14.44C13.39,15.31 13,16.33 13,17.5C13,18.39 13.25,19.23 13.78,20H3V18C3,16.81 3.91,15.85 5.74,15.12C7.57,14.38 9.33,14 11,14M11,12C9.92,12 9,11.61 8.18,10.83C7.38,10.05 7,9.11 7,8C7,6.92 7.38,6 8.18,5.18C9,4.38 9.92,4 11,4C12.11,4 13.05,4.38 13.83,5.18C14.61,6 15,6.92 15,8C15,9.11 14.61,10.05 13.83,10.83C13.05,11.61 12.11,12 11,12M18.5,10H20L22,10V12H20V17.5A2.5,2.5 0 0,1 17.5,20A2.5,2.5 0 0,1 15,17.5A2.5,2.5 0 0,1 17.5,15C17.86,15 18.19,15.07 18.5,15.21V10Z"/>
</svg>`; </svg>`;
ICONS["volume-off"] = `<svg viewBox="0 0 24 24"> 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"/> <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>`; </svg>`;
ICONS["close"] = `<svg viewBox="0 0 24 24"> ICONS["cancel"] = `<svg viewBox="0 0 24 24">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/> <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.85 4.63,15.55 5.68,16.91L16.91,5.68C15.55,4.63 13.85,4 12,4M12,20A8,8 0 0,0 20,12C20,10.15 19.37,8.45 18.32,7.09L7.09,18.32C8.45,19.37 10.15,20 12,20Z"/>
</svg>`;
ICONS["music"] = `<svg viewBox="0 0 24 24">
<path d="M21,3V15.5A3.5,3.5 0 0,1 17.5,19A3.5,3.5 0 0,1 14,15.5A3.5,3.5 0 0,1 17.5,12C18.04,12 18.55,12.12 19,12.34V6.47L9,8.6V17.5A3.5,3.5 0 0,1 5.5,21A3.5,3.5 0 0,1 2,17.5A3.5,3.5 0 0,1 5.5,14C6.04,14 6.55,14.12 7,14.34V6L21,3Z"/>
</svg>`;
ICONS["minus"] = `<svg viewBox="0 0 24 24">
<path d="M19,13H5V11H19V13Z"/>
</svg>`;
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>`;
ICONS["plus"] = `<svg viewBox="0 0 24 24">
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
</svg>`;
ICONS["content-save"] = `<svg viewBox="0 0 24 24">
<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"/>
</svg>`;
ICONS["library-music"] = `<svg viewBox="0 0 24 24">
<path d="M4,6H2V20A2,2 0 0,0 4,22H18V20H4M18,7H15V12.5A2.5,2.5 0 0,1 12.5,15A2.5,2.5 0 0,1 10,12.5A2.5,2.5 0 0,1 12.5,10C13.07,10 13.58,10.19 14,10.5V5H18M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2Z"/>
</svg>`; </svg>`;
ICONS["fast-forward"] = `<svg viewBox="0 0 24 24"> ICONS["fast-forward"] = `<svg viewBox="0 0 24 24">
<path d="M13,6V18L21.5,12M4,18L12.5,12L4,6V18Z"/> <path d="M13,6V18L21.5,12M4,18L12.5,12L4,6V18Z"/>
</svg>`; </svg>`;
ICONS["delete"] = `<svg viewBox="0 0 24 24">
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/>
</svg>`;
ICONS["volume-high"] = `<svg viewBox="0 0 24 24"> ICONS["volume-high"] = `<svg viewBox="0 0 24 24">
<path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"/> <path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"/>
</svg>`; </svg>`;
ICONS["minus"] = `<svg viewBox="0 0 24 24">
<path d="M19,13H5V11H19V13Z"/>
</svg>`;
ICONS["play"] = `<svg viewBox="0 0 24 24">
<path d="M8,5.14V19.14L19,12.14L8,5.14Z"/>
</svg>`;
ICONS["magnify"] = `<svg viewBox="0 0 24 24">
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
</svg>`;
ICONS["arrow-down-bold"] = `<svg viewBox="0 0 24 24">
<path d="M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z"/>
</svg>`;
ICONS["music"] = `<svg viewBox="0 0 24 24">
<path d="M21,3V15.5A3.5,3.5 0 0,1 17.5,19A3.5,3.5 0 0,1 14,15.5A3.5,3.5 0 0,1 17.5,12C18.04,12 18.55,12.12 19,12.34V6.47L9,8.6V17.5A3.5,3.5 0 0,1 5.5,21A3.5,3.5 0 0,1 2,17.5A3.5,3.5 0 0,1 5.5,14C6.04,14 6.55,14.12 7,14.34V6L21,3Z"/>
</svg>`;
ICONS["rewind"] = `<svg viewBox="0 0 24 24">
<path d="M11.5,12L20,18V6M11,18V6L2.5,12L11,18Z"/>
</svg>`;
ICONS["album"] = `<svg viewBox="0 0 24 24"> ICONS["album"] = `<svg viewBox="0 0 24 24">
<path d="M12,11A1,1 0 0,0 11,12A1,1 0 0,0 12,13A1,1 0 0,0 13,12A1,1 0 0,0 12,11M12,16.5C9.5,16.5 7.5,14.5 7.5,12C7.5,9.5 9.5,7.5 12,7.5C14.5,7.5 16.5,9.5 16.5,12C16.5,14.5 14.5,16.5 12,16.5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/> <path d="M12,11A1,1 0 0,0 11,12A1,1 0 0,0 12,13A1,1 0 0,0 13,12A1,1 0 0,0 12,11M12,16.5C9.5,16.5 7.5,14.5 7.5,12C7.5,9.5 9.5,7.5 12,7.5C14.5,7.5 16.5,9.5 16.5,12C16.5,14.5 14.5,16.5 12,16.5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>
</svg>`; </svg>`;
ICONS["download"] = `<svg viewBox="0 0 24 24">
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/>
</svg>`;
ICONS["account-multiple"] = `<svg viewBox="0 0 24 24">
<path d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z"/>
</svg>`;
ICONS["close"] = `<svg viewBox="0 0 24 24">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
</svg>`;
ICONS["content-save"] = `<svg viewBox="0 0 24 24">
<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"/>
</svg>`;
ICONS["arrow-up-bold"] = `<svg viewBox="0 0 24 24">
<path d="M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z"/>
</svg>`;
ICONS["chevron-double-right"] = `<svg viewBox="0 0 24 24">
<path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"/>
</svg>`;
ICONS["shuffle"] = `<svg viewBox="0 0 24 24">
<path d="M14.83,13.41L13.42,14.82L16.55,17.95L14.5,20H20V14.5L17.96,16.54L14.83,13.41M14.5,4L16.54,6.04L4,18.59L5.41,20L17.96,7.46L20,9.5V4M10.59,9.17L5.41,4L4,5.41L9.17,10.58L10.59,9.17Z"/>
</svg>`;
ICONS["checkbox-marked-outline"] = `<svg viewBox="0 0 24 24">
<path d="M19,19H5V5H15V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V11H19M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"/>
</svg>`;
ICONS["repeat"] = `<svg viewBox="0 0 24 24">
<path d="M17,17H7V14L3,18L7,22V19H19V13H17M7,7H17V10L21,6L17,2V5H5V11H7V7Z"/>
</svg>`;
export default ICONS; export default ICONS;

14
app/js/item.js Normal file
View file

@ -0,0 +1,14 @@
import * as html from "./html.js";
export default class Item extends HTMLElement {
constructor() {
super();
this.addEventListener("click", _ => this.onClick());
}
onClick() { this.parentNode.selection.toggle(this); }
_buildTitle(title) {
return html.node("span", {className:"title"}, title, this);
}
}

12
app/js/mpd-mock.js
View file

@ -55,16 +55,10 @@ export async function listPath(path) {
} }
export async function listTags(tag, filter = null) { export async function listTags(tag, filter = null) {
let tokens = ["list", tag]; switch (tag) {
if (filter) { case "AlbumArtist": return ["Artist 1", "Artist 2", "Artist 3"];
tokens.push(serializeFilter(filter)); case "Album": return ["Album 1", "Album 2", "Album 3"];
let fakeGroup = Object.keys(filter)[0]; // FIXME hack for MPD < 0.21.6
tokens.push("group", fakeGroup);
} }
let lines = await command(tokens.join(" "));
let parsed = parser.linesToStruct(lines);
return [].concat(tag in parsed ? parsed[tag] : []);
} }
export async function listSongs(filter, window = null) { export async function listSongs(filter, window = null) {

2
app/js/selection.js
View file

@ -26,7 +26,7 @@ export default class Selection {
addCommandAll() { addCommandAll() {
this.addCommand(_ => { this.addCommand(_ => {
Array.from(this._component.children).forEach(node => this.add(node)); Array.from(this._component.children).forEach(node => this.add(node));
}, {label:"Select all", icon:"plus"}); }, {label:"Select all", icon:"checkbox-marked-outline"});
} }
addCommandCancel() { addCommandCancel() {