.dockerignore

@@ -1 +0,0 @@
-node_modules

.gitignore

@@ -1,5 +1,3 @@
 node_modules
-_youtube/*
+_youtube
-!_youtube/.empty
 cyp.service
-passwords.json

.npmrc

@@ -1 +0,0 @@
-engine-strict=true

Dockerfile

@@ -1,12 +0,0 @@
-FROM node:10
-RUN apt update
-RUN apt install -y jq
-RUN curl -L https://yt-dl.org/downloads/latest/youtube-dl -o /usr/local/bin/youtube-dl \
-	&& chmod a+rx /usr/local/bin/youtube-dl
-WORKDIR /cyp
-COPY package.json .
-RUN npm i
-COPY index.js .
-COPY app ./app
-EXPOSE 8080
-ENTRYPOINT ["node", "."]

Makefile

@@ -1,24 +1,19 @@
 LESS := $(shell npm bin)/lessc
-ROLLUP := $(shell npm bin)/rollup
 APP := app
-CSS := $(APP)/cyp.css
+CSS := $(APP)/app.css
-JS := $(APP)/cyp.js
+ICONS := $(APP)/js/lib/icons.js
-ICONS := $(APP)/js/icons.js
 SYSD_USER := ~/.config/systemd/user
 SERVICE := cyp.service
 
-all: $(CSS) $(JS)
+all: $(CSS)
 
 icons: $(ICONS)
 
 $(ICONS): $(APP)/icons/*
 	$(APP)/svg2js.sh $(APP)/icons > $@
 
-$(JS): $(APP)/js/* $(APP)/js/elements/*
+$(CSS): $(APP)/css/*
-	$(ROLLUP) -i $(APP)/js/cyp.js > $@
+	$(LESS) $(APP)/css/app.less > $@
-
-$(CSS): $(APP)/css/* $(APP)/css/elements/*
-	$(LESS) -x $(APP)/css/cyp.less > $@
 
 service: $(SERVICE)
 	systemctl --user enable $(PWD)/$(SERVICE)
@@ -30,12 +25,7 @@ watch: all
 	while inotifywait -e MODIFY -r $(APP)/css $(APP)/js ; do make $^ ; done
 
 clean:
-	rm -f $(SERVICE) $(CSS) $(JS)
+	systemctl --user disable $(SERVICE)
-
+	rm -f $(SERVICE) $(CSS)
-docker-image:
-	docker build -t cyp .
-
-docker-run:
-	docker run --network=host -v "$$(pwd)"/_youtube:/cyp/_youtube cyp
 
 .PHONY: all watch icons service clean

README.md

@@ -18,7 +18,7 @@ CYP is a web-based frontend for [MPD](https://www.musicpd.org/), the Music Playe
 
 ## Installation
 
-Make sure you have a working MPD setup first and Node version >= 10
+Make sure you have a working MPD setup first.
 
 ```sh
 git clone https://github.com/ondras/cyp.git && cd cyp
@@ -26,56 +26,22 @@ npm i
 node .
 ```
 
-Point your browser to http://localhost:8080 to open the interface. Specify a custom MPD address via a `server` querystring argument (`?server=localhost:6655`).
+Point your browser to http://localhost:8080 to open the interface.
 
-## Instalation - Docker
-
-Alternatively, you can use Docker to run CYP.
-
-```sh
-git clone https://github.com/ondras/cyp.git && cd cyp
-docker build -t cyp .
-docker run --network=host cyp
-```
-
-## Youtube-dl integration
-
-You will need a working [youtube-dl](https://ytdl-org.github.io/youtube-dl/index.html) installation. Audio files are downloaded into the `_youtube` directory, so make sure it is available to your MPD library (use a symlink).
-
-If you use Docker, you need to mount the `_youtube` directory into the image:
-
-```sh
-docker run --network=host -v "$(pwd)"/_youtube:/cyp/_youtube cyp
-```
-
-
-## Changing the port
-
-...is done via the `PORT` environment variable. If you use Docker, the `-e` switch does the trick:
-
-```sh
-docker run --network=host -e PORT=12345 cyp
-```
-
-## Password-protected MPD
-
-Create a `passwords.json` file in CYPs home directory. Specify passwords for available MPD servers:
-
-```json
-{
-  "localhost:6600": "my-pass-1",
-  "some.other.server.or.ip:12345": "my-pass-2
-}
-```
-
-Make sure that hostnames and ports match those specified via the `server` querystring argument (defaults to `localhost:6600`).
 
 ## Technology
   - Connected to MPD via WebSockets (using the [ws2mpd](https://github.com/ondras/ws2mpd/) bridge)
   - Token-based access to the WebSocket endpoint (better than an `Origin` check)
-  - Written using [*Custom Elements*](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
+  - Modern ES6+ (modules, async/await)
   - Responsive layout via Flexbox
   - CSS Custom Properties
   - SVG icons (Material Design)
-  - Can spawn Youtube-dl to search/download audio files
+  - Can spawn Youtube-dl to download audio files
   - Album art retrieved directly from MPD (and cached via localStorage)
+
+
+## TODO
+
+  - [ ] Bundling
+  - [ ] Range styling
+  - [ ] Browser testing

app/app.css

@@ -0,0 +1,844 @@
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+html {
+  background-color: var(--fg);
+}
+body {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  font-family: lato, sans-serif;
+  line-height: 1.25;
+  background-color: var(--bg);
+  color: var(--fg);
+  text-shadow: var(--text-shadow);
+  max-width: 800px;
+  margin: 0 auto;
+  overflow: hidden;
+  height: 100vh;
+}
+header,
+footer {
+  z-index: 1;
+  box-shadow: var(--box-shadow);
+}
+input,
+select,
+button {
+  color: inherit;
+  font: inherit;
+}
+button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  display: inline-flex;
+  white-space: nowrap;
+  background-color: transparent;
+  padding: 0;
+  border: none;
+  line-height: 1;
+  cursor: pointer;
+}
+select {
+  background-color: transparent;
+  border: 1px solid var(--fg);
+  border-radius: 4px;
+  padding: 2px 4px;
+}
+@font-face {
+  font-family: 'Lato';
+  src: url('font/LatoLatin-Regular.woff2') format('woff2');
+  font-style: normal;
+  font-weight: normal;
+}
+@font-face {
+  font-family: 'Lato';
+  src: url('font/LatoLatin-bold.woff2') format('woff2');
+  font-style: bold;
+  font-weight: normal;
+}
+.icon {
+  width: 24px;
+  flex-shrink: 0;
+}
+.icon path:not([fill]),
+.icon polygon:not([fill]),
+.icon circle:not([fill]) {
+  fill: currentColor;
+}
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+.long-line {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.multiline {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.multiline h2 {
+  font-weight: normal;
+}
+x-range {
+  --thumb-size: 8px;
+  --thumb-color: #fff;
+  --thumb-shadow: #000;
+  --track-size: 4px;
+  --track-color: gray;
+  --elapsed-color: lightgray;
+  --remaining-color: transparent;
+  --radius: calc(var(--track-size)/2);
+  width: 192px;
+  height: 16px;
+  position: relative;
+}
+x-range .-track,
+x-range .-elapsed,
+x-range .-remaining {
+  position: absolute;
+  top: calc(50% - var(--track-size)/2);
+  height: var(--track-size);
+  border-radius: var(--radius);
+}
+x-range .-track {
+  width: 100%;
+  left: 0;
+  background-color: gray;
+}
+x-range .-elapsed {
+  left: 0;
+  background-color: var(--elapsed-color);
+}
+x-range .-remaining {
+  right: 0;
+  background-color: var(--remaining-color);
+}
+x-range .-inner {
+  position: absolute;
+  left: var(--thumb-size);
+  right: var(--thumb-size);
+  top: 0;
+  bottom: 0;
+}
+x-range .-thumb {
+  all: unset;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  width: calc(2*var(--thumb-size));
+  height: calc(2*var(--thumb-size));
+  background-color: var(--thumb-color);
+  box-shadow: 0 0 2px var(--thumb-shadow);
+}
+x-range[disabled] {
+  opacity: 0.5;
+}
+main {
+  flex-grow: 1;
+  overflow: hidden;
+}
+nav ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+nav ul li {
+  flex: 1 0 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  padding: 4px 0 8px 0;
+  border-top: 4px solid transparent;
+}
+nav ul li .icon {
+  margin-right: var(--icon-spacing);
+}
+nav ul li.active {
+  border-top-color: var(--primary);
+  color: var(--primary);
+  background-color: rgb(var(--primary-raw), 0.1);
+}
+@media (max-width: 480px) {
+  nav ul li {
+    flex-direction: row;
+    justify-content: center;
+  }
+  nav ul li:not([data-for=queue]) .icon {
+    margin-right: 0;
+  }
+  nav ul li span:not([id]) {
+    display: none;
+  }
+}
+#player {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-items: stretch;
+}
+#player:not([data-state=play]) .pause {
+  display: none;
+}
+#player[data-state=play] .play {
+  display: none;
+}
+#player:not([data-flags~=random]) .random,
+#player:not([data-flags~=repeat]) .repeat {
+  opacity: 0.5;
+}
+#player x-range {
+  flex-grow: 1;
+  --elapsed-color: var(--primary);
+}
+#player .art {
+  margin-right: 0;
+  height: 96px;
+}
+#player .art img,
+#player .art .icon {
+  width: 96px;
+}
+#player .info {
+  flex-grow: 2;
+  flex-basis: 0;
+  padding: 0 var(--icon-spacing);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+#player .info h2 {
+  font-size: 125%;
+  margin: 0;
+}
+#player .info .title,
+#player .info .subtitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#player .timeline {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+#player .timeline .duration,
+#player .timeline .elapsed {
+  flex-basis: 5ch;
+  text-align: center;
+}
+#player .controls {
+  flex-grow: 1;
+  flex-basis: 0;
+  max-width: 220px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+#player .controls .playback {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+}
+#player .controls .playback .icon {
+  width: 40px;
+}
+#player .controls .playback .icon-play,
+#player .controls .playback .icon-pause {
+  width: 64px;
+}
+#player .controls .volume {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+#player .controls .volume .mute {
+  margin-right: 4px;
+}
+#player .misc {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  justify-content: space-around;
+}
+#player .misc .icon {
+  width: 32px;
+}
+@media (max-width: 519px) {
+  #player {
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  #player .info {
+    order: 1;
+    flex-basis: 100%;
+    height: 96px;
+  }
+}
+.component {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.component header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: var(--spacing);
+}
+.component header button {
+  font-size: var(--font-size-large);
+  font-weight: bold;
+  overflow: hidden;
+}
+.component header button .icon {
+  margin-right: var(--icon-spacing);
+}
+.component ul {
+  flex-grow: 1;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.component li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.component li .info {
+  flex-grow: 1;
+  overflow: hidden;
+}
+.component li .info .icon {
+  color: var(--primary);
+  margin-right: var(--icon-spacing);
+  filter: drop-shadow(var(--text-shadow));
+}
+.component li .info h2 {
+  font-size: var(--font-size-large);
+  margin: 0;
+}
+.component li .info h2,
+.component li .info div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.component li:not(.has-art) {
+  padding: 8px;
+}
+.component li button .icon {
+  width: 32px;
+}
+.component li:nth-child(odd) {
+  background-color: var(--bg-alt);
+}
+#queue {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+#queue header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: var(--spacing);
+}
+#queue header button {
+  font-size: var(--font-size-large);
+  font-weight: bold;
+  overflow: hidden;
+}
+#queue header button .icon {
+  margin-right: var(--icon-spacing);
+}
+#queue ul {
+  flex-grow: 1;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#queue li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+#queue li .info {
+  flex-grow: 1;
+  overflow: hidden;
+}
+#queue li .info .icon {
+  color: var(--primary);
+  margin-right: var(--icon-spacing);
+  filter: drop-shadow(var(--text-shadow));
+}
+#queue li .info h2 {
+  font-size: var(--font-size-large);
+  margin: 0;
+}
+#queue li .info h2,
+#queue li .info div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#queue li:not(.has-art) {
+  padding: 8px;
+}
+#queue li button .icon {
+  width: 32px;
+}
+#queue li:nth-child(odd) {
+  background-color: var(--bg-alt);
+}
+#queue .current {
+  color: var(--primary);
+}
+#library {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+#library header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: var(--spacing);
+}
+#library header button {
+  font-size: var(--font-size-large);
+  font-weight: bold;
+  overflow: hidden;
+}
+#library header button .icon {
+  margin-right: var(--icon-spacing);
+}
+#library ul {
+  flex-grow: 1;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#library li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+#library li .info {
+  flex-grow: 1;
+  overflow: hidden;
+}
+#library li .info .icon {
+  color: var(--primary);
+  margin-right: var(--icon-spacing);
+  filter: drop-shadow(var(--text-shadow));
+}
+#library li .info h2 {
+  font-size: var(--font-size-large);
+  margin: 0;
+}
+#library li .info h2,
+#library li .info div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#library li:not(.has-art) {
+  padding: 8px;
+}
+#library li button .icon {
+  width: 32px;
+}
+#library li:nth-child(odd) {
+  background-color: var(--bg-alt);
+}
+#library header {
+  white-space: pre;
+}
+#library .search {
+  order: 1;
+}
+#library .search.open ~ * {
+  display: none;
+}
+#library .art img,
+#library .art .icon {
+  width: 64px;
+}
+#library .art .icon {
+  filter: drop-shadow(var(--text-shadow));
+}
+#library .group {
+  cursor: pointer;
+}
+#library .group h2 {
+  font-weight: normal;
+}
+#library .tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-gap: 2px;
+}
+#library .tiles li {
+  text-align: center;
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, 0.08);
+  height: 200px;
+}
+#library .tiles li h2 {
+  font-size: 150%;
+  margin: 4px 0;
+}
+#fs {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+#fs header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: var(--spacing);
+}
+#fs header button {
+  font-size: var(--font-size-large);
+  font-weight: bold;
+  overflow: hidden;
+}
+#fs header button .icon {
+  margin-right: var(--icon-spacing);
+}
+#fs ul {
+  flex-grow: 1;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#fs li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+#fs li .info {
+  flex-grow: 1;
+  overflow: hidden;
+}
+#fs li .info .icon {
+  color: var(--primary);
+  margin-right: var(--icon-spacing);
+  filter: drop-shadow(var(--text-shadow));
+}
+#fs li .info h2 {
+  font-size: var(--font-size-large);
+  margin: 0;
+}
+#fs li .info h2,
+#fs li .info div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#fs li:not(.has-art) {
+  padding: 8px;
+}
+#fs li button .icon {
+  width: 32px;
+}
+#fs li:nth-child(odd) {
+  background-color: var(--bg-alt);
+}
+#fs header {
+  white-space: pre;
+}
+#fs .search {
+  order: 1;
+}
+#fs .search.open ~ * {
+  display: none;
+}
+#fs .group {
+  cursor: pointer;
+}
+#fs .info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+#fs .info h2 {
+  font-weight: normal;
+}
+#playlists {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+#playlists header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: var(--spacing);
+}
+#playlists header button {
+  font-size: var(--font-size-large);
+  font-weight: bold;
+  overflow: hidden;
+}
+#playlists header button .icon {
+  margin-right: var(--icon-spacing);
+}
+#playlists ul {
+  flex-grow: 1;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#playlists li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+#playlists li .info {
+  flex-grow: 1;
+  overflow: hidden;
+}
+#playlists li .info .icon {
+  color: var(--primary);
+  margin-right: var(--icon-spacing);
+  filter: drop-shadow(var(--text-shadow));
+}
+#playlists li .info h2 {
+  font-size: var(--font-size-large);
+  margin: 0;
+}
+#playlists li .info h2,
+#playlists li .info div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#playlists li:not(.has-art) {
+  padding: 8px;
+}
+#playlists li button .icon {
+  width: 32px;
+}
+#playlists li:nth-child(odd) {
+  background-color: var(--bg-alt);
+}
+#playlists .info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+#playlists .info h2 {
+  font-weight: normal;
+}
+#yt {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+#yt header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: var(--spacing);
+}
+#yt header button {
+  font-size: var(--font-size-large);
+  font-weight: bold;
+  overflow: hidden;
+}
+#yt header button .icon {
+  margin-right: var(--icon-spacing);
+}
+#yt ul {
+  flex-grow: 1;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#yt li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+#yt li .info {
+  flex-grow: 1;
+  overflow: hidden;
+}
+#yt li .info .icon {
+  color: var(--primary);
+  margin-right: var(--icon-spacing);
+  filter: drop-shadow(var(--text-shadow));
+}
+#yt li .info h2 {
+  font-size: var(--font-size-large);
+  margin: 0;
+}
+#yt li .info h2,
+#yt li .info div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#yt li:not(.has-art) {
+  padding: 8px;
+}
+#yt li button .icon {
+  width: 32px;
+}
+#yt li:nth-child(odd) {
+  background-color: var(--bg-alt);
+}
+#yt header {
+  border-bottom: 1px solid var(--fg);
+}
+#yt header button + button {
+  margin-left: 16px;
+}
+#yt .clear {
+  margin-left: auto;
+}
+#yt pre {
+  margin: 0.5em 0.5ch;
+  flex-grow: 1;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+#yt.pending header {
+  background-image: linear-gradient(var(--primary), var(--primary));
+  background-repeat: no-repeat;
+  background-size: 25% 4px;
+  animation: bar ease-in-out 3s alternate infinite;
+}
+@keyframes bar {
+  0% {
+    background-position: 0 100%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}
+#settings {
+  font-size: var(--font-size-large);
+}
+#settings dl {
+  margin: var(--spacing);
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  align-items: center;
+  grid-gap: var(--spacing);
+}
+#settings dt {
+  font-weight: bold;
+}
+#settings dd {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+#settings label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+#settings label [type=radio],
+#settings label [type=checkbox] {
+  margin: 0 4px 0 0;
+}
+.search {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: auto;
+  transition: all 300ms;
+  width: 32px;
+  max-width: 20ch;
+}
+.search .icon {
+  width: 32px;
+  cursor: pointer;
+}
+.search input {
+  border: none;
+  outline: none;
+  color: inherit;
+  background-color: inherit;
+  border-bottom: 1px solid var(--fg);
+  width: 0;
+  padding: 0;
+  flex-grow: 1;
+}
+.search.open {
+  flex: 1;
+}
+.art {
+  margin-right: var(--icon-spacing);
+}
+.art .icon,
+.art img {
+  vertical-align: top;
+}
+:root {
+  --font-size-large: 112.5%;
+  --icon-spacing: 4px;
+  --primary: rgb(var(--primary-raw));
+  --spacing: 8px;
+  --box-shadow: 0 0 3px #000;
+}
+:root[data-theme=light] {
+  --fg: #333;
+  --bg: #f0f0f0;
+  --bg-alt: #e0e0e0;
+  --text-shadow: none;
+}
+:root[data-theme=dark] {
+  --fg: #f0f0f0;
+  --bg: #333;
+  --bg-alt: #555;
+  --text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
+}
+:root[data-color=dodgerblue] {
+  --primary-raw: 30, 144, 255;
+}
+:root[data-color=darkorange] {
+  --primary-raw: 255, 140, 0;
+}
+:root[data-color=limegreen] {
+  --primary-raw: 50, 205, 50;
+}
+@media (max-width: 480px) {
+  :root {
+    --spacing: var(--icon-spacing);
+  }
+}

app/css/app.less

@@ -0,0 +1,71 @@
+*, *::before, *::after { box-sizing: inherit; }
+
+html {
+	background-color: var(--fg);
+}
+
+body {
+	.flex-column;
+
+	box-sizing: border-box;
+	font-family: lato, sans-serif;
+	line-height: 1.25;
+	background-color: var(--bg);
+	color: var(--fg);
+	text-shadow: var(--text-shadow);
+	max-width: 800px;
+	margin: 0 auto;
+	overflow: hidden;
+	height: 100vh;
+}
+
+header, footer {
+	z-index: 1;
+	box-shadow: var(--box-shadow);
+}
+
+input, select, button {
+	color: inherit;
+	font: inherit;
+}
+
+button {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+
+	.flex-row;
+	display: inline-flex;
+	white-space: nowrap;
+
+	background-color: transparent;
+	padding: 0;
+	border: none;
+	line-height: 1;
+	cursor: pointer;
+}
+
+select {
+	background-color: transparent;
+	border: 1px solid var(--fg);
+	border-radius: 4px;
+	padding: 2px 4px;
+}
+
+@import "font.less";
+@import "icons.less";
+@import "mixins.less";
+@import "range.less";
+@import "main.less";
+@import "nav.less";
+@import "player.less";
+@import "component.less";
+@import "queue.less";
+@import "library.less";
+@import "fs.less";
+@import "playlists.less";
+@import "yt.less";
+@import "settings.less";
+@import "search.less";
+@import "art.less";
+@import "variables.less";

app/css/art.less

@@ -1,7 +1,6 @@
 .art {
-	flex: none;
+	margin-right: var(--icon-spacing);
 	.icon, img {
-		display: block;
+		vertical-align: top;
-		width: 100%;
 	}
 }

app/css/component.less

@@ -0,0 +1,61 @@
+.component {
+	height: 100%;
+	.flex-column;
+
+	header {
+		.flex-row;
+		padding: var(--spacing);
+
+		button {
+			font-size: var(--font-size-large);
+			font-weight: bold;
+			.icon { margin-right: var(--icon-spacing); }
+			overflow: hidden;
+		}
+
+	}
+
+	ul {
+		flex-grow: 1;
+		overflow: auto;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	li {
+		.flex-row;
+
+		.info { 
+			flex-grow: 1;
+			overflow: hidden;
+
+			.icon {
+				color: var(--primary);
+				margin-right: var(--icon-spacing);
+				filter: drop-shadow(var(--text-shadow));
+			}
+
+			h2 {
+				font-size: var(--font-size-large);
+				margin: 0;
+			}
+
+			h2, div { .long-line; }
+		}
+
+		&.has-art {
+
+		}
+
+		&:not(.has-art) {
+			padding: 8px;
+		}
+
+		button .icon { width: 32px; }
+	}
+
+	li:nth-child(odd) {
+		background-color: var(--bg-alt);
+	}
+}

app/css/cyp.less

@@ -1,92 +0,0 @@
-*, *::before, *::after { box-sizing: inherit; }
-
-html {
-	background-color: var(--fg);
-}
-
-body {
-	margin: 0;
-}
-
-main {
-	flex: auto;
-	overflow: auto;
-}
-
-header, footer {
-	flex: none;
-	z-index: 1;
-	box-shadow: var(--box-shadow);
-}
-
-footer {
-	position: relative; // kotva pro cyp-commands
-	overflow: hidden; // vyjizdenici cyp-commands
-	height: 56px;
-	@media (max-width: @breakpoint-menu) {
-		height: 40px;
-	}
-}
-
-input, select {
-	font: inherit;
-}
-
-select {
-	color: inherit;
-}
-
-option {
-	color: initial;
-}
-
-button {
-	color: inherit;
-	font: inherit;
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-
-	&:not([hidden]) { display: flex; }
-	flex-direction: row;
-	align-items: center;
-
-	flex: none;
-
-	background-color: transparent;
-	padding: 0;
-	border: none;
-	line-height: 1;
-	cursor: pointer;
-}
-
-select {
-	background-color: transparent;
-	border: 1px solid var(--fg);
-	border-radius: 4px;
-	padding: 2px 4px;
-}
-
-@import "font.less";
-@import "icons.less";
-@import "mixins.less";
-@import "art.less";
-@import "variables.less";
-
-@import "elements/app.less";
-@import "elements/menu.less";
-@import "elements/song.less";
-@import "elements/player.less";
-@import "elements/playlists.less";
-@import "elements/queue.less";
-@import "elements/settings.less";
-@import "elements/yt.less";
-@import "elements/range.less";
-@import "elements/playlist.less";
-@import "elements/search.less";
-@import "elements/filter.less";
-@import "elements/library.less";
-@import "elements/tag.less";
-@import "elements/back.less";
-@import "elements/path.less";
-@import "elements/yt-result.less";

app/css/elements/app.less

@@ -1,16 +0,0 @@
-cyp-app {
-	.flex-column;
-
-	box-sizing: border-box;
-	margin: 0 auto;
-	max-width: 800px;
-	height: calc(100px * var(--vh));
-
-	font-family: lato, sans-serif;
-	font-size: 16px;
-	line-height: 1.25;
-	background-color: var(--bg);
-	color: var(--fg);
-
-	white-space: nowrap;
-}

app/css/elements/back.less

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

app/css/elements/filter.less

@@ -1,8 +0,0 @@
-cyp-filter {
-	.item;
-
-	.icon {
-		width: 32px;
-		margin-left: var(--icon-spacing);
-	}
-}

app/css/elements/library.less

@@ -1,18 +0,0 @@
-cyp-library {
-	nav {
-		.flex-column;
-		align-items: center;
-
-		button {
-			.font-large;
-			width: 200px;
-			margin-top: 2em;
-			text-decoration: underline;
-
-			.icon {
-				width: 32px;
-				margin-right: var(--icon-spacing);
-			}
-		}
-	}
-}

app/css/elements/menu.less

@@ -1,58 +0,0 @@
-cyp-menu, cyp-commands {
-	.flex-row;
-	height: 100%;
-
-	button {
-		height: 100%;
-
-		.flex-column;
-		align-items: center;
-		justify-content: center;
-
-		@media (max-width: @breakpoint-menu) {
-			flex-direction: row;
-			span:not([id]) { display: none; }
-		}
-
-		.icon + * { margin-top: 2px; }
-	}
-}
-
-cyp-menu button {
-	flex: 1 0 0;
-	border-top: var(--border-width) solid transparent;
-	border-bottom: var(--border-width) solid transparent;
-
-	.icon {
-		margin-right: var(--icon-spacing);
-	}
-
-	&.active {
-		border-top-color: var(--primary);
-		color: var(--primary);
-		background-color: var(--primary-tint);
-	}
-}
-
-cyp-commands {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	transition: top 300ms;
-
-	background-color: var(--bg);
-
-	&[hidden] {
-		display: flex;
-		top: 100%;
-	}
-
-	button {
-		flex: 0 1 @breakpoint-menu/6;
-		&.last {
-			order: 1;
-			margin-left: auto;
-		}
-	}
-}

app/css/elements/path.less

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

app/css/elements/playlist.less

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

app/css/elements/playlists.less

@@ -1,2 +0,0 @@
-cyp-playlists {
-}

app/css/elements/queue.less

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

app/css/elements/range.less

@@ -1 +0,0 @@
-../../../node_modules/custom-range/range.less

app/css/elements/search.less

@@ -1,23 +0,0 @@
-cyp-search {
-	form {
-		.item;
-		align-items: stretch;
-
-		button:first-of-type { // pseudo-class to override
-			margin-left: var(--icon-spacing);
-		}
-	}
-
-	&.pending form {
-		background-image: linear-gradient(var(--primary), var(--primary));
-		background-repeat: no-repeat;
-		background-size: 25% var(--border-width);
-		animation: bar ease-in-out 3s alternate infinite;
-	}
-}
-
-
-@keyframes bar {
-	0% { background-position: 0 100%; }
-	100% { background-position: 100% 100%; }
-}

app/css/elements/song.less

@@ -1,46 +0,0 @@
-cyp-song {
-	.item;
-
-	.multiline {
-		.flex-column;
-		min-width: 0; // bez tohoto se odmita zmensit
-
-		.subtitle { .ellipsis; }
-	}
-
-	cyp-queue & {
-		> .icon {
-			width: 32px;
-			margin-right: 8px;
-		}
-		.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;}
-		> .icon-play { display: none; }
-	}
-}
-

app/css/elements/tag.less

@@ -1,13 +0,0 @@
-cyp-tag {
-	.item;
-
-	padding-left: 0;
-	padding-top: 0;
-	padding-bottom: 0;
-
-	.art {
-		margin-right: var(--icon-spacing);
-		width: 64px;
-		height: 64px;
-	}
-}

app/css/elements/yt-result.less

@@ -1,8 +0,0 @@
-cyp-yt-result {
-	.item;
-	cursor: default;
-
-	button .icon {
-		width: var(--icon-size);
-	}
-}

app/css/elements/yt.less

@@ -1,8 +0,0 @@
-cyp-yt {
-	pre {
-		margin: 0.5em 0.5ch;
-		flex-grow: 1;
-		overflow: auto;
-		white-space: pre-wrap;
-	}
-}

app/css/font.less

@@ -1,13 +1,13 @@
 @font-face {
-    font-family: "Lato";
+    font-family: 'Lato';
-    src: url("font/LatoLatin-Regular.woff2") format("woff2");
+    src: url('font/LatoLatin-Regular.woff2') format('woff2');
     font-style: normal;
     font-weight: normal;
 }
 
 @font-face {
-    font-family: "Lato";
+    font-family: 'Lato';
-    src: url("font/LatoLatin-Bold.woff2") format("woff2");
+    src: url('font/LatoLatin-bold.woff2') format('woff2');
-    font-style: normal;
+    font-style: bold;
-    font-weight: bold;
+    font-weight: normal;
 }

app/css/fs.less

@@ -0,0 +1,20 @@
+#fs {
+	.component;
+
+	header {
+		white-space: pre; // separator
+	}
+
+	.search {
+		order: 1;
+		&.open ~ * { display: none; }
+	}
+
+	.group {
+		cursor: pointer;
+	}
+
+	.info {
+		.multiline;
+	}
+}

app/css/icons.less

@@ -1,6 +1,6 @@
 .icon {
-	width: var(--icon-size);
+	width: 24px;
-	flex: none;
+	flex-shrink: 0;
 
 	path, polygon, circle {
 		&:not([fill]) {

app/css/library.less

@@ -0,0 +1,43 @@
+#library {
+	.component;
+
+	header {
+		white-space: pre; // separator
+	}
+
+	.search {
+		order: 1;
+		&.open ~ * { display: none; }
+	}
+
+	.art img, .art .icon {
+		width: 64px;
+	}
+
+	.art .icon {
+		filter: drop-shadow(var(--text-shadow));
+	}
+
+	.group {
+		cursor: pointer;
+		h2 { font-weight: normal; }
+	}
+
+	.tiles {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		grid-gap: 2px;
+
+		li {
+			text-align: center;
+			cursor: pointer;
+			background-color: rgba(255, 255, 255, 0.08);
+			height: 200px;
+
+			h2 {
+				font-size: 150%;
+				margin: 4px 0;
+			}
+		}
+	}
+}

app/css/main.less

@@ -0,0 +1,4 @@
+main {
+	flex-grow: 1;
+	overflow: hidden;
+}

app/css/mixins.less

@@ -1,69 +1,22 @@
 .flex-row {
-	&:not([hidden]) { display: flex; }
+	display: flex;
 	flex-direction: row;
 	align-items: center;
 }
 
 .flex-column {
-	&:not([hidden]) { display: flex; }
+	display: flex;
 	flex-direction: column;
 }
 
-.ellipsis {
+.long-line {
+	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
-.font-large {
+.multiline {
-	font-size: 18px;
-	line-height: 24px;
-}
-
-.selectable {
-	cursor: pointer;
-	position: relative; // kotva pro selected::before
-
-	&.selected {
-		color: var(--primary);
-		background-color: var(--primary-tint);
-
-		&::before {
-			content: "";
-			position: absolute;
-			left: 0;
-			top: 0;
-			bottom: 0;
-			width: var(--border-width);
-			background-color: var(--primary);
-		}
-	}
-}
-
-.item {
 	.flex-row;
 
-	&:nth-child(odd) {
+	h2 { font-weight: normal; }
-		background-color: var(--bg-alt);
-	}
-
-	.selectable; // az po nth-child, aby byl vyber pozdeji
-
-	padding: 8px;
-
-	> .icon {
-		margin-right: var(--icon-spacing);
-	}
-
-	.title {
-		.font-large;
-		.ellipsis;
-
-		font-weight: bold;
-		min-width: 0;
-	}
-
-	button {
-		&:first-of-type { margin-left: auto; }
-		.icon { width: 32px; }
-	}
 }

app/css/nav.less

@@ -0,0 +1,36 @@
+nav ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	.flex-row;
+
+	li {
+		flex: 1 0 0;
+
+		.flex-column;
+		align-items: center;
+
+		cursor: pointer;
+		padding: 4px 0 8px 0;
+
+		border-top: 4px solid transparent;
+
+		.icon {
+			margin-right: var(--icon-spacing);
+		}
+
+		&.active {
+			border-top-color: var(--primary);
+			color: var(--primary);
+			background-color: rgb(var(--primary-raw), 0.1);
+		}
+
+		@media (max-width: 480px) {
+			flex-direction: row;
+			justify-content: center;
+
+			&:not([data-for=queue]) .icon { margin-right: 0; }
+			span:not([id]) { display: none; }
+		}
+	}
+}

app/css/player.less

@@ -1,86 +1,80 @@
-cyp-player {
+#player {
 	@art-size: 96px;
-
 	.flex-row;
 	align-items: stretch;
 
 	&:not([data-state=play]) .pause { display: none; }
 	&[data-state=play] .play { display: none; }
 	&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
-	&[data-flags~=mute] .mute .icon-volume-high { display: none; }
-	&:not([data-flags~=mute]) .mute .icon-volume-off { display: none; }
 
 	x-range {
-		flex: auto;
+		flex-grow: 1;
 		--elapsed-color: var(--primary);
 	}
 
 	.art {
-		width: @art-size;
+		margin-right: 0;
 		height: @art-size;
+		img, .icon {
+			width: @art-size;
+		}
 	}
 
 	.info {
-		flex: auto;
+		flex-grow: 2;
-		min-width: 0;
+		flex-basis: 0;
+		padding: 0 var(--icon-spacing);
+		overflow: hidden;
 
 		.flex-column;
-		justify-content: space-between;
+		justify-content: space-around;
 
-		padding: 0 var(--icon-spacing);
+		h2 {
-
+			font-size: 125%;
-		.title {
+			margin: 0;
-			margin-top: 8px;
-			.font-large;
-			font-weight: bold;
 		}
-		.title, .subtitle { .ellipsis; }
+
+		.title, .subtitle { .long-line; }
 	}
 	
 	.timeline {
-		flex: none;
-		height: var(--icon-size);
-		margin-bottom: 4px;
 		.flex-row;
 
 		.duration, .elapsed {
-			flex: none;
+			flex-basis: 5ch;
-			width: 5ch;
 			text-align: center;
 		}
 	}
 
 	.controls {
-		width: 220px;
+		flex-grow: 1;
-		min-width: 0;
+		flex-basis: 0;
-
+		max-width: 220px;
-		.flex-column;
-
-		.playback {
-			flex: auto;
-
-			.flex-row;
-			justify-content: space-around;
-
-			.icon { width: 40px; }
-			.icon-play, .icon-pause { width: 64px; }
-		}
-
-		.volume {
-			flex: none;
-			margin-bottom: 4px;
-
-			.flex-row;
-			.mute { margin-right: var(--icon-spacing); }
-		}
-	}
-
-	.misc {
-		flex: none;
 
 		.flex-column;
 		justify-content: space-around;
 
+		.playback {
+			.flex-row;
+			justify-content: space-around;
+
+			.icon { width: 40px; }
+
+			.icon-play, .icon-pause { width: 64px; }
+		}
+
+		.volume {
+			.flex-row;
+
+			.mute { margin-right: 4px; }
+		}
+	}
+
+	.misc {
+		display: flex;
+		flex-direction: column;
+		align-self: stretch;
+		justify-content: space-around;
 		.icon { width: 32px; }
 	}
 

app/css/playlists.less

@@ -0,0 +1,7 @@
+#playlists {
+	.component;
+
+	.info {
+		.multiline;
+	}
+}

app/css/queue.less

@@ -0,0 +1,5 @@
+#queue {
+	.component;
+
+	.current { color: var(--primary); }
+}

app/css/range.less

@@ -0,0 +1,63 @@
+x-range {
+	--thumb-size: 8px;
+	--thumb-color: #fff;
+	--thumb-shadow: #000;
+	--track-size: 4px;
+	--track-color: gray;
+	--elapsed-color: lightgray;
+	--remaining-color: transparent;
+
+	--radius: calc(var(--track-size)/2);
+
+	width: 192px;
+	height: 16px;
+	position: relative;
+
+	.-track, .-elapsed, .-remaining {
+		position: absolute;
+		top: calc(50% - var(--track-size)/2);
+		height: var(--track-size);
+		border-radius: var(--radius);
+	}
+
+	.-track {
+		width: 100%;
+		left: 0;
+		background-color: gray;
+	}
+
+	.-elapsed {
+		left: 0;
+		background-color: var(--elapsed-color);
+	}
+	
+	.-remaining {
+		right: 0;
+		background-color: var(--remaining-color);
+	}
+
+	.-inner {
+		position: absolute;
+		left: var(--thumb-size);
+		right: var(--thumb-size);
+		top: 0;
+		bottom: 0;
+	}
+
+	.-thumb {
+		all: unset;
+		position: absolute;
+		top: 50%;
+		transform: translate(-50%, -50%);
+
+		border-radius: 50%;
+		width: calc(2*var(--thumb-size));
+		height: calc(2*var(--thumb-size));
+		background-color: var(--thumb-color);
+		box-shadow: 0 0 2px var(--thumb-shadow);
+	}
+
+	&[disabled] {
+		opacity: 0.5;
+	}
+}

app/css/search.less

@@ -0,0 +1,27 @@
+.search {
+	.flex-row;
+	margin-left: auto;
+	transition: all 300ms;
+	width: 32px;
+	max-width: 20ch;
+
+	.icon {
+		width: 32px;
+		cursor: pointer;
+	}
+
+	input {
+		border: none;
+		outline: none;
+		color: inherit;
+		background-color: inherit;
+		border-bottom: 1px solid var(--fg);
+		width: 0;
+		padding: 0;
+		flex-grow: 1;
+	}
+
+	&.open {
+		flex: 1;
+	}
+}

app/css/settings.less

@@ -1,7 +1,5 @@
-cyp-settings {
+#settings {
-	--spacing: 8px;
+	font-size: var(--font-size-large);
-
-	.font-large;
 
 	dl {
 		margin: var(--spacing);

app/css/variables.less

@@ -1,53 +1,39 @@
-@breakpoint-menu: 480px;
+:root {
-
+	--font-size-large: 112.5%;
-cyp-app {
-	--icon-size: 24px;
 	--icon-spacing: 4px;
 	--primary: rgb(var(--primary-raw));
-	--primary-tint: rgba(var(--primary-raw), 0.1);
+	--spacing: 8px;
 	--box-shadow: 0 0 3px #000;
-	--border-width: 4px;
 }
 
-.light() {
+:root[data-theme=light] {
 	--fg: #333;
 	--bg: #f0f0f0;
 	--bg-alt: #e0e0e0;
 	--text-shadow: none;
 }
 
-.dark() {
+:root[data-theme=dark] {
 	--fg: #f0f0f0;
 	--bg: #333;
-	--bg-alt: #444;
+	--bg-alt: #555;
 	--text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
 }
 
-cyp-app[theme=light] { .light(); }
+:root[data-color=dodgerblue] {
-cyp-app[theme=dark] { .dark(); }
-
-@media (prefers-color-scheme: dark) {
-	cyp-app[theme=auto] { .dark(); }
-}
-
-@media (prefers-color-scheme: light) {
-	cyp-app[theme=auto] { .light(); }
-}
-
-@media (max-width: 640px), (max-height:640px) {
-	cyp-app[theme] {
-		--text-shadow: none;
-	}
-}
-
-cyp-app[color=dodgerblue] {
 	--primary-raw: 30, 144, 255;
 }
 
-cyp-app[color=darkorange] {
+:root[data-color=darkorange] {
 	--primary-raw: 255, 140, 0;
 }
 
-cyp-app[color=limegreen] {
+:root[data-color=limegreen] {
 	--primary-raw: 50, 205, 50;
 }
+
+@media (max-width: 480px) {
+	:root {
+		--spacing: var(--icon-spacing);
+	}
+}

app/css/yt.less

@@ -0,0 +1,34 @@
+#yt {
+	.component;
+
+	header {
+		border-bottom: 1px solid var(--fg);
+
+		button + button {
+			margin-left: 16px;
+		}
+	}
+
+	.clear {
+		margin-left: auto;
+	}
+
+	pre {
+		margin: 0.5em 0.5ch;
+		flex-grow: 1;
+		overflow: auto;
+		white-space: pre-wrap;
+	}
+
+	&.pending header {
+		background-image: linear-gradient(var(--primary), var(--primary));
+		background-repeat: no-repeat;
+		background-size: 25% 4px;
+		animation: bar ease-in-out 3s alternate infinite;
+	}
+}
+
+@keyframes bar {
+	0% { background-position: 0 100%; }
+	100% { background-position: 100% 100%; }
+}

app/icons/account-multiple.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="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>

app/icons/cancel.svg

@@ -1 +0,0 @@
-<?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="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>

app/icons/close-circle-outline.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="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z" /></svg>

app/icons/close-circle.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="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" /></svg>

app/icons/keyboard-backspace.svg

@@ -1 +0,0 @@
-<?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="M21,11H6.83L10.41,7.41L9,6L3,12L9,18L10.41,16.58L6.83,13H21V11Z" /></svg>

app/icons/minus-circle-outline.svg

@@ -1 +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>
+<?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="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,13H17V11H7" /></svg>

app/icons/minus-circle.svg

@@ -1 +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>
+<?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="M17,13H7V11H17M12,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>

app/icons/pause-circle-outline.svg

@@ -1 +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>
+<?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="M13,16V8H15V16H13M9,16V8H11V16H9M12,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,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>

app/icons/pause-circle.svg

@@ -1 +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="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z" /></svg>
+<?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,16H13V8H15M11,16H9V8H11M12,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>

app/icons/play-circle-outline.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="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" /></svg>

app/icons/play-circle.svg

@@ -1 +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>
+<?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="M10,16.5V7.5L16,12M12,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>

app/icons/plus-circle-outline.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="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" /></svg>

app/icons/plus-circle.svg

@@ -1 +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,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg>
+<?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="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,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>

app/index.html

@@ -4,111 +4,18 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
 		<title>Control Your Player</title>
-		<link rel="stylesheet" href="cyp.css" />
+		<link rel="stylesheet" href="app.css" />
-		<style>
-			/* Float cancel and delete buttons and add an equal width */
-			.popupbtn {
-				background-color: rgb(141, 0, 0);
-				color: rgb(255, 255, 255);
-				padding: 14px 20px;
-  			margin: 8px 0;
-				border: none;
-				cursor: pointer;
-				width: 100%;
-				opacity: 0.9;
-				display: block !important;
-				box-sizing: border-box;
-			}
-			.popupbtn:hover {
-				opacity:1;
-			}
-
-			/* Add padding and center-align text to the container */
-			.popupcontainer {
-				padding: 16px;
-				text-align: center;
-			}
-
-			/* The Modal (background) */
-			.popupmodal {
-				display: none; /* Hidden by default */
-				position: fixed; /* Stay in place */
-				z-index: 2; /* Sit on top */
-				left: 0;
-				top: 0;
-				width: 100%; /* Full width */
-				height: 100%; /* Full height */
-				overflow: auto; /* Enable scroll if needed */
-				background-color: #474e5d;
-				padding-top: 50px;
-			}
-
-			/* Modal Content/Box */
-			.popupmodal-content {
-				background-color: #fefefe;
-				margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
-				border: 1px solid #888;
-				width: 80%; /* Could be more or less, depending on screen size */
-			}
-
-			/* Style the horizontal ruler */
-			.popup-hr {
-				border: 1px solid #f1f1f1;
-				margin-bottom: 25px;
-			}
-
-			/* The Modal Close Button (x) */
-			.popup-close {
-				position: absolute;
-				right: 35px;
-				top: 15px;
-				font-size: 40px;
-				font-weight: bold;
-				color: #f1f1f1;
-			}
-
-			.popup-close:hover,
-			.popup-close:focus {
-				color: #f44336;
-				cursor: pointer;
-			}
-
-			/* Clear floats */
-			.popup-clearfix::after {
-				content: "";
-				clear: both;
-				display: table;
-			}
-		</style>
-		<link rel="icon" href="https://emojimage.toad.cz/🎵" />
-		<meta name="mobile-web-app-capable" content="yes" />
 	</head>
 	<body>
-		<div id="warningpopup" class="popupmodal">
-			<span onclick="document.getElementById('warningpopup').style.display='none'" class="popup-close" title="x">×</span>
-			<div class="popupmodal-content">
-				<div class="popupcontainer">
-					<h2>Warning</h2>
-					<p>Be aware there may be other users listening to the same stream.</p>
-					<p>Pausing or changing volume on the server will affect them as well.</p>
-					<p>Please avoid server-side pausing or volume change if possible.</p>
-					<p>You can find client-side volume and pause control in the Settings Panel.</p>
-					<div class="popup-clearfix">
-						<button type="button" onclick="document.getElementById('warningpopup').style.display='none'" class="popupbtn">OK</button>
-					</div>
-				</div>
-			</div>
-		</div>
-		<cyp-app theme="dark" color="dodgerblue">
 		<header>
-			<cyp-player>
+			<section id="player">
 				<span class="art"></span>
 				<div class="info">
-					<span class="title"></span>
+					<h2 class="title"></h2>
-					<span class="subtitle"></span>
+					<div class="subtitle"></div>
 					<div class="timeline">
 						<span class="elapsed"></span>
-						<x-range step="0.1"></x-range>
+						<x-range></x-range>
 						<span class="duration"></span>
 					</div>
 				</div>
@@ -120,7 +27,7 @@
 						<button class="next" data-icon="fast-forward"></button>
 					</div>
 					<div class="volume">
-						<button class="mute" data-icon="volume-high volume-off"></button>
+						<button class="mute" data-icon="volume-high"></button>
 						<x-range></x-range>
 					</div>
 				</div>
@@ -128,19 +35,40 @@
 					<button class="repeat" data-icon="repeat"></button>
 					<button class="random" data-icon="shuffle"></button>
 				</div>
-			</cyp-player>
+			</section>
 		</header>
 		<main>
-			<cyp-queue></cyp-queue>
+			<section id="queue">
-			<cyp-playlists></cyp-playlists>
+				<header>
-			<cyp-library></cyp-library>
+					<button class="clear" data-icon="close" title="Clear the queue"></button>
-			<cyp-yt></cyp-yt>
+					<button class="save" data-icon="content-save" title="Save the queue"></button>
-			<cyp-settings>
+				</header>
+				<ul></ul>
+			</section>
+			<section id="playlists">
+				<ul></ul>
+			</section>
+			<section id="library">
+				<header></header>
+				<ul></ul>
+			</section>
+			<section id="fs">
+				<header></header>
+				<ul></ul>
+			</section>
+			<section id="yt">
+				<header>
+					<button class="download" data-icon="download">Download</button>
+					<button class="search-download" data-icon="magnify">Search &amp; Download</button>
+					<button class="clear" data-icon="close">Clear</button>
+				</header>
+				<pre></pre>
+			</section>
+			<section id="settings">
 				<dl>
 					<dt>Theme</dt>
 					<dd>
 						<select name="theme">
-							<option value="auto">Auto</option>
 							<option value="dark">Dark</option>
 							<option value="light">Light</option>
 						</select>
@@ -160,34 +88,26 @@
 							Green
 						</label>
 					</dd>
-					<dt>YouTube results</dt>
-					<dd>
-						<select name="yt-limit">
-							<option value="1">1</option>
-							<option value="3">3</option>
-							<option value="5">5</option>
-							<option value="10">10</option>
-						</select>
-					</dd>
 				</dl>
-			</cyp-settings>
+			</section>
 		</main>
 		<footer>
-			<cyp-menu>
+			<nav>
-				<button data-for="queue" data-icon="music">
+				<ul>
-					<div>
+					<li data-for="queue" data-icon="music">
-						<span>Queue</span>
+						<div>
-						<span class="queue-length"></span>
+							<span>Queue</span>
-					</div>
+							<span id="queue-length"></span>
-				</button>
+						</div>
-				<button data-for="playlists" data-icon="playlist-music"><span>Playlists</span></button>
+					</li>
-				<button data-for="library" data-icon="library-music"><span>Library</span></button>
+					<li data-for="playlists" data-icon="playlist-music"><span>Playlists</span></li>
-				<button data-for="yt" data-icon="download"><span>YouTube</span></button>
+					<li data-for="library" data-icon="library-music"><span>Library</span></li>
-				<button data-for="settings" data-icon="settings"><span>Settings</span></button>
+					<li data-for="fs" data-icon="folder"><span>Files</span></li>
-			</cyp-menu>
+					<li data-for="yt" data-icon="download"><span>YouTube</span></li>
+					<li data-for="settings" data-icon="settings"><span>Settings</span></li>
+				</ul>
+			</nav>
 		</footer>		
-		</cyp-app>
+		<script type="module" src="js/app.js"></script>
-
-		<script type="module" src="cyp.js?2"></script>
 	</body>
 </html>

app/js/app.js

@@ -0,0 +1,67 @@
+import * as nav from "./nav.js";
+import * as mpd from "./lib/mpd.js";
+import * as player from "./player.js";
+import * as html from "./lib/html.js";
+import * as range from "./lib/range.js";
+
+import * as queue from "./queue.js";
+import * as library from "./library.js";
+import * as fs from "./fs.js";
+import * as playlists from "./playlists.js";
+import * as yt from "./yt.js";
+import * as settings from "./settings.js";
+
+const components = { queue, library, fs, playlists, yt, settings };
+
+export function activate(what) {
+	location.hash = what;
+
+	for (let id in components) {
+		let node = document.querySelector(`#${id}`);
+		if (what == id) {
+			node.style.display = "";
+			components[id].activate();
+		} else {
+			node.style.display = "none";
+		}
+	}
+	nav.active(what);
+}
+
+function initIcons() {
+	Array.from(document.querySelectorAll("[data-icon]")).forEach(node => {
+		let icon = html.icon(node.dataset.icon);
+		node.insertBefore(icon, node.firstChild);
+	});
+}
+
+function fromHash() {
+	let hash = location.hash.substring(1);
+	activate(hash || "queue");
+}
+
+function onHashChange(e) {
+	fromHash();
+}
+
+async function init() {
+	initIcons();
+	try {
+		await mpd.init();
+	} catch (e) {
+		console.error(e);
+	}
+
+	nav.init(document.querySelector("nav"));
+	for (let id in components) {
+		let node = document.querySelector(`#${id}`);
+		components[id].init(node);
+	}
+
+	player.init(document.querySelector("#player"));
+	window.addEventListener("hashchange", onHashChange);
+	fromHash();
+}
+
+
+init();

app/js/art.js

@@ -1,65 +0,0 @@
-import * as html from "./html.js";
-import * as conf from "./conf.js";
-
-const cache = {};
-const MIME = "image/jpeg";
-const STORAGE_PREFIX = `art-${conf.artSize}` ;
-
-function store(key, data) {
-	localStorage.setItem(`${STORAGE_PREFIX}-${key}`, data);
-}
-
-function load(key) {
-	return localStorage.getItem(`${STORAGE_PREFIX}-${key}`);
-}
-
-async function bytesToImage(bytes) {
-	const blob = new Blob([bytes]);
-	const src = URL.createObjectURL(blob);
-	const image = html.node("img", {src});
-	return new Promise(resolve => {
-		image.onload = () => resolve(image);
-	});
-}
-
-function resize(image) {
-	while (Math.min(image.width, image.height) >= 2*conf.artSize) {
-		let tmp = html.node("canvas", {width:image.width/2, height:image.height/2});
-		tmp.getContext("2d").drawImage(image, 0, 0, tmp.width, tmp.height);
-		image = tmp;
-	}
-	const canvas = html.node("canvas", {width:conf.artSize, height:conf.artSize});
-	canvas.getContext("2d").drawImage(image, 0, 0, canvas.width, canvas.height);
-	return canvas;
-}
-
-export async function get(mpd, artist, album, songUrl = null) {
-	const key = `${artist}-${album}`;
-	if (key in cache) { return cache[key]; }
-
-	const loaded = await load(key);
-	if (loaded) {
-		cache[key] = loaded;
-		return loaded;
-	}
-
-	if (!songUrl) { return null; }
-
-	// promise to be returned in the meantime
-	let resolve;
-	const promise = new Promise(res => resolve = res);
-	cache[key] = promise;
-
-	const data = await mpd.albumArt(songUrl);
-	if (data) {
-		const bytes = new Uint8Array(data);
-		const image = await bytesToImage(bytes);
-		const url = resize(image).toDataURL(MIME);
-		store(key, url);
-		cache[key] = url;
-		resolve(url);
-	} else {
-		cache[key] = null;
-	}
-	return cache[key];
-}

app/js/component.js

@@ -1,28 +0,0 @@
-import Selection from "./selection.js";
-
-
-export default class Component extends HTMLElement {
-	constructor(options = {}) {
-		super();
-		if (options.selection) { this.selection = new Selection(this, options.selection); }
-	}
-
-	connectedCallback() {
-		if (this.selection) {
-			const parent = this._app.querySelector("footer");
-			this.selection.appendTo(parent);
-		}
-		this._app.addEventListener("load", _ => this._onAppLoad());
-		this._app.addEventListener("component-change", _ => {
-			const component = this._app.component;
-			const isThis = (this.nodeName.toLowerCase() == `cyp-${component}`);
-			this._onComponentChange(component, isThis);
-		});
-	}
-
-	get _app() { return this.closest("cyp-app"); }
-	get _mpd() { return this._app.mpd; }
-
-	_onAppLoad() {}
-	_onComponentChange(_component, _isThis) {}
-}

app/js/conf.js

@@ -1,5 +1,3 @@
-export const artSize = 96 * (window.devicePixelRatio || 1);
+export const artSize = 96;
 export const ytPath = "_youtube";
-export let ytLimit = 3;
+export const locale = "cs";
-
-export function setYtLimit(limit) { ytLimit = limit; }

app/js/cyp.js

@@ -1,20 +0,0 @@
-import "./elements/range.js";
-import "./elements/app.js";
-import "./elements/menu.js";
-import "./elements/player.js";
-import "./elements/queue.js";
-import "./elements/playlists.js";
-import "./elements/settings.js";
-import "./elements/yt.js";
-import "./elements/song.js";
-import "./elements/library.js";
-import "./elements/tag.js";
-import "./elements/back.js";
-import "./elements/path.js";
-
-function updateSize() {
-	document.body.style.setProperty("--vh", window.innerHeight/100);
-}
-
-window.addEventListener("resize", updateSize);
-updateSize();

app/js/elements/app.js

@@ -1,126 +0,0 @@
-import MPD from "../mpd.js";
-import * as html from "../html.js";
-
-function initIcons() {
-	Array.from(document.querySelectorAll("[data-icon]")).forEach(/** @param {HTMLElement} node */ node => {
-		node.dataset.icon.split(" ").forEach(name => {
-			let icon = html.icon(name);
-			node.insertBefore(icon, node.firstChild);
-		})
-	});
-}
-
-class App extends HTMLElement {
-	static get observedAttributes() { return ["component"]; }
-
-	constructor() {
-		super();
-		initIcons();
-	}
-
-	async connectedCallback() {
-		await waitForChildren(this);
-
-		window.addEventListener("hashchange", e => this._onHashChange());
-		this._onHashChange();
-
-		await this._connect();
-		this.dispatchEvent(new CustomEvent("load"));
-
-		this._initMediaHandler();
-	}
-
-	attributeChangedCallback(name, oldValue, newValue) {
-		switch (name) {
-			case "component":
-				location.hash = newValue;
-				const e = new CustomEvent("component-change");
-				this.dispatchEvent(e);
-			break;
-		}
-	}
-
-	get component() { return this.getAttribute("component"); }
-	set component(component) { this.setAttribute("component", component); }
-
-	_onHashChange() {
-		const component = location.hash.substring(1) || "queue";
-		if (component != this.component) { this.component = component; }
-	}
-
-	_onChange(changed) { this.dispatchEvent(new CustomEvent("idle-change", {detail:changed})); }
-
-	_onClose(e) {
-		setTimeout(() => this._connect(), 3000);
-	}
-
-	async _connect() {
-		const attempts = 3;
-		for (let i=0;i<attempts;i++) {
-			try {
-				let mpd = await MPD.connect();
-				mpd.onChange = changed => this._onChange(changed);
-				mpd.onClose = e => this._onClose(e);
-				this.mpd = mpd;
-				return;
-			} catch (e) {
-				await sleep(500);
-			}
-		}
-		alert(`Failed to connect to MPD after ${attempts} attempts. Please reload the page to try again.`);
-	}
-
-	_initMediaHandler() {
-		// check support mediaSession
-		if (!('mediaSession' in navigator)) {
-			console.log('mediaSession is not supported');
-			return;
-		}
-
-		// DOM (using media session controls are allowed only if there is audio/video tag)
-		const audio = html.node("audio", {loop: true}, "", this);
-		html.node("source", {src: 'https://raw.githubusercontent.com/anars/blank-audio/master/10-seconds-of-silence.mp3'}, '', audio);
-
-		// Init event session (play audio) on click (because restrictions by web browsers)
-		window.addEventListener('click', () => {
-				audio.play();
-		}, {once: true});
-
-		// mediaSession define metadata
-		navigator.mediaSession.metadata = new MediaMetadata({
-			title: 'Control Your Player'
-		});
-
-		// mediaSession define action handlers
-		navigator.mediaSession.setActionHandler('play', () => {
-			this.mpd.command("play")
-			audio.play()
-		});
-		navigator.mediaSession.setActionHandler('pause', () => {
-			this.mpd.command("pause 1")
-			audio.pause()
-		});
-		navigator.mediaSession.setActionHandler('previoustrack', () => {
-			this.mpd.command("previous")
-			audio.play()
-		});
-		navigator.mediaSession.setActionHandler('nexttrack', () => {
-			this.mpd.command("next")
-			audio.play()
-		});
-	}
-}
-
-customElements.define("cyp-app", App);
-
-function sleep(ms) { return new Promise(resolve =>setTimeout(resolve, ms)); }
-
-function waitForChildren(app) {
-	const children = Array.from(app.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));
-	return Promise.all(promises);
-}

app/js/elements/back.js

@@ -1,17 +0,0 @@
-import Item from "../item.js";
-import * as html from "../html.js";
-
-
-export default class Back extends Item {
-	constructor(title) {
-		super();
-		this._title = title;
-	}
-
-	connectedCallback() {
-		this.appendChild(html.icon("keyboard-backspace"));
-		this._buildTitle(this._title);
-	}
-}
-
-customElements.define("cyp-back", Back);

app/js/elements/filter.js

@@ -1,33 +0,0 @@
-import * as html from "../html.js";
-
-
-const SELECTOR = ["cyp-tag", "cyp-path", "cyp-song"].join(", ");
-
-export default class Filter extends HTMLElement {
-	constructor() {
-		super();
-		this._built = false;
-	}
-
-	get value() { return this._input.value.trim(); }
-	set value(value) { this._input.value = value; }
-	get _input() { return this.querySelector("input"); }
-
-	connectedCallback() {
-		if (this._built) { return; }
-
-		html.node("input", {type:"text"}, "", this);
-		html.icon("filter-variant", this);
-
-		this._input.addEventListener("input", e => this._apply());
-		this._built = true;
-	}
-
-	_apply() {
-		let value = this.value.toLowerCase();
-		let all = [...this.parentNode.querySelectorAll(SELECTOR)];
-		all.forEach(item => item.hidden = !item.matchPrefix(value));
-	}
-}
-
-customElements.define("cyp-filter", Filter);

app/js/elements/library.js

@@ -1,253 +0,0 @@
-import * as html from "../html.js";
-import Component from "../component.js";
-import Tag from "./tag.js";
-import Path from "./path.js";
-import Back from "./back.js";
-import Song from "./song.js";
-import Search from "./search.js";
-import Filter from "./filter.js";
-import { escape, serializeFilter } from "../mpd.js";
-
-
-const SORT = "-Track";
-const TAGS = {
-	"Album": "Albums",
-	"AlbumArtist": "Artists",
-	"Genre": "Genres"
-}
-
-function nonempty(str) { return (str.length > 0); }
-
-function createEnqueueCommand(node) {
-	if (node instanceof Song || node instanceof Path) {
-		return `add "${escape(node.file)}"`;
-	} else if (node instanceof Tag) {
-		return [
-			"findadd",
-			serializeFilter(node.createChildFilter()),
-			// `sort ${SORT}` // MPD >= 0.22, not yet released
-		].join(" ");
-	} else {
-		throw new Error(`Cannot create enqueue command for "${node.nodeName}"`);
-	}
-}
-
-class Library extends Component {
-	constructor() {
-		super({selection:"multi"});
-		this._stateStack = [];
-		this._initCommands();
-
-		this._search = new Search();
-		this._search.onSubmit = _ => {
-			let query = this._search.value;
-			if (query.length < 3) { return; }
-			this._doSearch(query);
-		}
-
-		this._filter = new Filter();
-	}
-
-	_popState() {
-		this.selection.clear();
-		this._stateStack.pop();
-
-		if (this._stateStack.length > 0) {
-			let state = this._stateStack[this._stateStack.length-1];
-			this._showState(state);
-		} else {
-			this._showRoot();
-		}
-	}
-
-	_onAppLoad() {
-		this._showRoot();
-	}
-
-	_onComponentChange(c, isThis) {
-		const wasHidden = this.hidden;
-		this.hidden = !isThis;
-
-		if (!wasHidden && isThis) { this._showRoot(); }
-	}
-
-	_showRoot() {
-		this._stateStack = [];
-		html.clear(this);
-
-		const nav = html.node("nav", {}, "", this);
-
-		html.button({icon:"artist"}, "Artists and albums", nav)
-			.addEventListener("click", _ => this._pushState({type:"tags", tag:"AlbumArtist"}));
-
-		html.button({icon:"music"}, "Genres", nav)
-			.addEventListener("click", _ => this._pushState({type:"tags", tag:"Genre"}));
-
-		html.button({icon:"folder"}, "Files and directories", nav)
-			.addEventListener("click", _ => this._pushState({type:"path", path:""}));
-
-		html.button({icon:"magnify"}, "Search", nav)
-			.addEventListener("click", _ => this._pushState({type:"search"}));
-	}
-
-	_pushState(state) {
-		this.selection.clear();
-		this._stateStack.push(state);
-
-		this._showState(state);
-	}
-
-	_showState(state) {
-		switch (state.type) {
-			case "tags": this._listTags(state.tag, state.filter); break;
-			case "songs": this._listSongs(state.filter); break;
-			case "path": this._listPath(state.path); break;
-			case "search": this._showSearch(state.query); break;
-		}
-	}
-
-	async _listTags(tag, filter = {}) {
-		const values = (await this._mpd.listTags(tag, filter)).filter(nonempty);
-		html.clear(this);
-
-		if ("AlbumArtist" in filter || "Genre" in filter) { this._buildBack(); }
-		(values.length > 0) && this._addFilter();
-		values.forEach(value => this._buildTag(tag, value, filter));
-	}
-
-	async _listPath(path) {
-		let paths = await this._mpd.listPath(path);
-		html.clear(this);
-
-		path && this._buildBack();
-		(paths["directory"].length + paths["file"].length > 0) && this._addFilter();
-		paths["directory"].forEach(path => this._buildPath(path));
-		paths["file"].forEach(path => this._buildPath(path));
-	}
-
-	async _listSongs(filter) {
-		const songs = await this._mpd.listSongs(filter);
-		html.clear(this);
-		this._buildBack();
-		(songs.length > 0 && this._addFilter());
-		songs.forEach(song => this.appendChild(new Song(song)));
-	}
-
-	_showSearch(query = "") {
-		html.clear(this);
-
-		this.appendChild(this._search);
-		this._search.value = query;
-		this._search.focus();
-
-		query && this._search.onSubmit();
-	}
-
-	async _doSearch(query) {
-		let state = this._stateStack[this._stateStack.length-1];
-		state.query = query;
-
-		html.clear(this);
-		this.appendChild(this._search);
-		this._search.pending(true);
-
-		const songs1 = await this._mpd.searchSongs({"AlbumArtist": query});
-		const songs2 = await this._mpd.searchSongs({"Album": query});
-		const songs3 = await this._mpd.searchSongs({"Title": query});
-
-		this._search.pending(false);
-
-		this._aggregateSearch(songs1, "AlbumArtist");
-		this._aggregateSearch(songs2, "Album");
-		songs3.forEach(song => this.appendChild(new Song(song)));
-	}
-
-	_aggregateSearch(songs, tag) {
-		let results = new Map();
-		songs.forEach(song => {
-			let filter = {}, value;
-			const artist = song["AlbumArtist"] || song["Artist"];
-
-			if (tag == "Album") {
-				value = song[tag];
-				if (artist) { filter["AlbumArtist"] = artist; }
-			}
-
-			if (tag == "AlbumArtist") { value = artist; }
-
-			results.set(value, filter);
-		});
-
-		results.forEach((filter, value) => this._buildTag(tag, value, filter));
-	}
-
-	_buildTag(tag, value, filter) {
-		let node;
-		switch (tag) {
-			case "AlbumArtist":
-			case "Genre":
-				node = new Tag(tag, value, filter);
-				this.appendChild(node);
-				node.onClick = () => this._pushState({type:"tags", tag:"Album", filter:node.createChildFilter()});
-			break;
-
-			case "Album":
-				node = new Tag(tag, value, filter);
-				this.appendChild(node);
-				node.addButton("chevron-double-right", _ => this._pushState({type:"songs", filter:node.createChildFilter()}));
-			break;
-		}
-		node.fillArt(this._mpd);
-	}
-
-	_buildBack() {
-		const backState = this._stateStack[this._stateStack.length-2];
-		let title;
-		switch (backState.type) {
-			case "path": title = ".."; break;
-			case "search": title = "Search"; break;
-			case "tags": title = TAGS[backState.tag]; break;
-		}
-
-		const node = new Back(title);
-		this.appendChild(node);
-		node.onClick = () => this._popState();
-	}
-
-	_buildPath(data) {
-		let node = new Path(data);
-		this.appendChild(node);
-
-		if ("directory" in data) {
-			const path = data["directory"];
-			node.addButton("chevron-double-right", _ => this._pushState({type:"path", path}));
-		}
-	}
-
-	_addFilter() {
-		this.appendChild(this._filter);
-		this._filter.value = "";
-	}
-
-	_initCommands() {
-		const sel = this.selection;
-
-		sel.addCommandAll();
-
-		sel.addCommand(async items => {
-			const commands = ["clear",...items.map(createEnqueueCommand), "play"];
-			await this._mpd.command(commands);
-			this.selection.clear(); // fixme notification?
-		}, {label:"Play", icon:"play"});
-
-		sel.addCommand(async items => {
-			const commands = items.map(createEnqueueCommand);
-			await this._mpd.command(commands);
-			this.selection.clear(); // fixme notification?
-		}, {label:"Enqueue", icon:"plus"});
-
-		sel.addCommandCancel();
-	}
-}
-
-customElements.define("cyp-library", Library);

app/js/elements/menu.js

@@ -1,28 +0,0 @@
-import Component from "../component.js";
-
-class Menu extends Component {
-	connectedCallback() {
-		super.connectedCallback();
-
-		/** @type HTMLElement[] */
-		this._tabs = Array.from(this.querySelectorAll("[data-for]"));
-
-		this._tabs.forEach(tab => {
-			tab.addEventListener("click", _ => this._app.setAttribute("component", tab.dataset.for));
-		});
-	}
-
-	_onAppLoad() {
-		this._app.addEventListener("queue-length-change", e => {
-			this.querySelector(".queue-length").textContent = `(${e.detail})`;
-		});
-	}
-
-	_onComponentChange(component) {
-		this._tabs.forEach(tab => {
-			tab.classList.toggle("active", tab.dataset.for == component);
-		});
-	}
-}
-
-customElements.define("cyp-menu", Menu);

app/js/elements/path.js

@@ -1,21 +0,0 @@
-import Item from "../item.js";
-import * as html from "../html.js";
-import * as format from "../format.js";
-
-
-export default class Path extends Item {
-	constructor(data) {
-		super();
-		this._data = data;
-		this._isDirectory = ("directory" in this._data);
-	}
-
-	get file() { return (this._isDirectory ? this._data["directory"] : this._data["file"]); }
-
-	connectedCallback() {
-		this.appendChild(html.icon(this._isDirectory ? "folder" : "music"));
-		this._buildTitle(format.fileName(this.file));
-	}
-}
-
-customElements.define("cyp-path", Path);

app/js/elements/player.js

@@ -1,179 +0,0 @@
-import * as art from "../art.js";
-import * as html from "../html.js";
-import * as format from "../format.js";
-import Component from "../component.js";
-
-
-const ELAPSED_PERIOD = 500;
-
-class Player extends Component {
-	constructor() {
-		super();
-		this._current = {
-			song: {},
-			elapsed: 0,
-			at: 0,
-			volume: 0
-		};
-		this._toggleVolume = 0;
-
-		const DOM = {};
-		const all = this.querySelectorAll("[class]");
-		[...all].forEach(node => DOM[node.className] = node);
-		DOM.progress = DOM.timeline.querySelector("x-range");
-		DOM.volume = DOM.volume.querySelector("x-range");
-
-		this._dom = DOM;
-	}
-
-	handleEvent(e) {
-		switch (e.type) {
-			case "idle-change":
-				let hasOptions = e.detail.includes("options");
-				let hasPlayer = e.detail.includes("player");
-				let hasMixer = e.detail.includes("mixer");
-				(hasOptions || hasPlayer || hasMixer) && this._updateStatus();
-				hasPlayer && this._updateCurrent();
-			break;
-		}
-	}
-
-	_onAppLoad() {
-		this._addEvents();
-		this._updateStatus();
-		this._updateCurrent();
-		this._app.addEventListener("idle-change", this);
-
-		setInterval(() => this._updateElapsed(), ELAPSED_PERIOD);
-	}
-
-	async _updateStatus() {
-		const data = await this._mpd.status();
-
-		this._updateFlags(data);
-		this._updateVolume(data);
-
-		// rebase the time sync
-		this._current.elapsed = Number(data["elapsed"] || 0);
-		this._current.at = performance.now();
-	}
-
-	async _updateCurrent() {
-		const data = await this._mpd.currentSong();
-		const DOM = this._dom;
-
-		if (data["file"] != this._current.song["file"]) { // changed song
-			if (data["file"]) { // is there a song at all?
-				DOM.title.textContent = data["Title"] || format.fileName(data["file"]);
-				DOM.subtitle.textContent = format.subtitle(data, {duration:false});
-
-				let duration = Number(data["duration"]);
-				DOM.duration.textContent = format.time(duration);
-				DOM.progress.max = duration;
-				DOM.progress.disabled = false;
-			} else {
-				DOM.title.textContent = "";
-				DOM.subtitle.textContent = "";
-				DOM.progress.value = 0;
-				DOM.progress.disabled = true;
-			}
-
-			this._dispatchSongChange(data);
-		}
-
-		let artistNew = data["Artist"] || data["AlbumArtist"];
-		let artistOld = this._current.song["Artist"] || this._current.song["AlbumArtist"];
-		let albumNew = data["Album"];
-		let albumOld = this._current.song["Album"];
-
-		Object.assign(this._current.song, data);
-
-		if (artistNew != artistOld || albumNew != albumOld) { // changed album (art)
-			html.clear(DOM.art);
-			let src = await art.get(this._mpd, artistNew, data["Album"], data["file"]);
-			if (src) {
-				html.node("img", {src}, "", DOM.art);
-			} else {
-				html.icon("music", DOM.art);
-			}
-		}
-	}
-
-	_updateElapsed() {
-		const DOM = this._dom;
-
-		let elapsed = 0;
-		if (this._current.song["file"]) {
-			elapsed = this._current.elapsed;
-			if (this.dataset.state == "play") { elapsed += (performance.now() - this._current.at)/1000; }
-		}
-
-		DOM.progress.value = elapsed;
-		DOM.elapsed.textContent = format.time(elapsed);
-		this._app.style.setProperty("--progress", DOM.progress.value/DOM.progress.max);
-	}
-
-	_updateFlags(data) {
-		let flags = [];
-		if (data["random"] == "1") { flags.push("random"); }
-		if (data["repeat"] == "1") { flags.push("repeat"); }
-		if (data["volume"] === "0") { flags.push("mute"); } // strict, because volume might be missing
-		this.dataset.flags = flags.join(" ");
-		this.dataset.state = data["state"];
-	}
-
-	_updateVolume(data) {
-		const DOM = this._dom;
-
-		if ("volume" in data) {
-			let volume = Number(data["volume"]);
-
-			DOM.mute.disabled = false;
-			DOM.volume.disabled = false;
-			DOM.volume.value = volume;
-
-			if (volume == 0 && this._current.volume > 0) { this._toggleVolume = this._current.volume; } // muted
-			if (volume > 0 && this._current.volume == 0) { this._toggleVolume = 0; } // restored
-			this._current.volume = volume;
-		} else {
-			DOM.mute.disabled = true;
-			DOM.volume.disabled = true;
-			DOM.volume.value = 50;
-		}
-	}
-
-	_addEvents() {
-		const DOM = this._dom;
-
-		DOM.play.addEventListener("click", _ => this._app.mpd.command("play"));
-		DOM.pause.addEventListener("click", _ => this._app.mpd.command("pause 1"));
-		DOM.prev.addEventListener("click", _ => this._app.mpd.command("previous"));
-		DOM.next.addEventListener("click", _ => this._app.mpd.command("next"));
-
-		DOM.random.addEventListener("click", _ => {
-			let isRandom = this.dataset.flags.split(" ").includes("random");
-			this._app.mpd.command(`random ${isRandom ? "0" : "1"}`);
-		});
-		DOM.repeat.addEventListener("click", _ => {
-			let isRepeat = this.dataset.flags.split(" ").includes("repeat");
-			this._app.mpd.command(`repeat ${isRepeat ? "0" : "1"}`);
-		});
-
-		DOM.progress.addEventListener("input", e => {
-			let elapsed = e.target.valueAsNumber;
-			this._current.elapsed = elapsed;
-			this._current.at = performance.now();
-			this._app.mpd.command(`seekcur ${elapsed}`);
-		});
-
-		DOM.volume.addEventListener("input", e => this._app.mpd.command(`setvol ${e.target.valueAsNumber}`));
-		DOM.mute.addEventListener("click", _ => this._app.mpd.command(`setvol ${this._toggleVolume}`));
-	}
-
-	_dispatchSongChange(detail) {
-		const e = new CustomEvent("song-change", {detail});
-		this._app.dispatchEvent(e);
-	}
-}
-
-customElements.define("cyp-player", Player);

app/js/elements/playlist.js

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

app/js/elements/playlists.js

@@ -1,68 +0,0 @@
-import * as html from "../html.js";
-import Component from "../component.js";
-import Playlist from "./playlist.js";
-import { escape } from "../mpd.js";
-
-class Playlists extends Component {
-	constructor() {
-		super({selection:"single"});
-		this._initCommands();
-	}
-
-	handleEvent(e) {
-		switch (e.type) {
-			case "idle-change":
-				e.detail.includes("stored_playlist") && this._sync();
-			break;
-		}
-	}
-
-	_onAppLoad() {
-		this._app.addEventListener("idle-change", this);
-		this._sync();
-	}
-
-	_onComponentChange(c, isThis) {
-		this.hidden = !isThis;
-	}
-
-	async _sync() {
-		let lists = await this._mpd.listPlaylists();
-		this._buildLists(lists);
-	}
-
-	_buildLists(lists) {
-		html.clear(this);
-		this.selection.clear();
-
-		lists.forEach(name => this.appendChild(new Playlist(name)));
-	}
-
-	_initCommands() {
-		const sel = this.selection;
-
-		sel.addCommand(async item => {
-			const name = item.name;
-			const commands = ["clear", `load "${escape(name)}"`, "play"];
-			await this._mpd.command(commands);
-			this.selection.clear(); // fixme notification?
-		}, {label:"Play", icon:"play"});
-
-		sel.addCommand(async item => {
-			const name = item.name;
-			await this._mpd.command(`load "${escape(name)}"`);
-			this.selection.clear(); // fixme notification?
-		}, {label:"Enqueue", icon:"plus"});
-
-		sel.addCommand(async item => {
-			const name = item.name;
-			if (!confirm(`Really delete playlist '${name}'?`)) { return; }
-
-			await this._mpd.command(`rm "${escape(name)}"`);
-		}, {label:"Delete", icon:"delete"});
-
-		sel.addCommandCancel();
-	}
-}
-
-customElements.define("cyp-playlists", Playlists);

app/js/elements/queue.js

@@ -1,122 +0,0 @@
-import * as html from "../html.js";
-import Component from "../component.js";
-import Song from "./song.js";
-import { escape } from "../mpd.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.songId} ${index}`;
-		})
-		.filter(command => command);
-}
-
-class Queue extends Component {
-	constructor() {
-		super({selection:"multi"});
-		this._currentId = null;
-		this._initCommands();
-	}
-
-	handleEvent(e) {
-		switch (e.type) {
-			case "song-change":
-				this._currentId = e.detail["Id"];
-				this._updateCurrent();
-			break;
-
-			case "idle-change":
-				e.detail.includes("playlist") && this._sync();
-			break;
-		}
-	}
-
-	_onAppLoad() {
-		this._app.addEventListener("idle-change", this);
-		this._app.addEventListener("song-change", this);
-		this._sync();
-	}
-
-	_onComponentChange(c, isThis) {
-		this.hidden = !isThis;
-	}
-
-	async _sync() {
-		let songs = await this._mpd.listQueue();
-		this._buildSongs(songs);
-
-		let e = new CustomEvent("queue-length-change", {detail:songs.length});
-		this._app.dispatchEvent(e);
-	}
-
-	_updateCurrent() {
-		Array.from(this.children).forEach(/** @param {Song} node */ node => {
-			node.playing = (node.songId == this._currentId);
-		});
-	}
-
-	_buildSongs(songs) {
-		html.clear(this);
-		this.selection.clear();
-
-		songs.forEach(song => {
-			const node = new Song(song);
-			this.appendChild(node);
-
-			node.addButton("play", async _ => {
-				await this._mpd.command(`playid ${node.songId}`);
-			});
-		});
-
-		this._updateCurrent();
-	}
-
-	_initCommands() {
-		const sel = this.selection;
-
-		sel.addCommandAll();
-
-		sel.addCommand(items => {
-			const commands = generateMoveCommands(items, -1, Array.from(this.children));
-			this._mpd.command(commands);
-		}, {label:"Up", icon:"arrow-up-bold"});
-
-		sel.addCommand(items => {
-			const commands = generateMoveCommands(items, +1, Array.from(this.children));
-			this._mpd.command(commands.reverse()); // move last first
-		}, {label:"Down", icon:"arrow-down-bold"});
-
-		sel.addCommand(async items => {
-			let name = prompt("Save selected songs as a playlist?", "name");
-			if (name === null) { return; }
-
-			name = escape(name);
-			try { // might not exist
-				await this._mpd.command(`rm "${name}"`);
-			} catch (e) {}
-
-			const commands = items.map(item => {
-				return `playlistadd "${name}" "${escape(item.file)}"`;
-			});
-			await this._mpd.command(commands);
-
-			sel.clear();
-		}, {label:"Save", icon:"content-save"});
-
-		sel.addCommand(async items => {
-			if (!confirm(`Remove these ${items.length} songs from the queue?`)) { return; }
-
-			const commands = items.map(item => `deleteid ${item.songId}`);
-			this._mpd.command(commands);
-		}, {label:"Remove", icon:"delete"});
-
-		sel.addCommandCancel();
-	}
-}
-
-customElements.define("cyp-queue", Queue);

app/js/elements/range.js

@@ -1 +0,0 @@
-../../../node_modules/custom-range/range.js

app/js/elements/search.js

@@ -1,33 +0,0 @@
-import * as html from "../html.js";
-
-export default class Search extends HTMLElement {
-	constructor() {
-		super();
-		this._built = false;
-	}
-
-	get value() { return this._input.value.trim(); }
-	set value(value) { this._input.value = value; }
-	get _input() { return this.querySelector("input"); }
-
-	onSubmit() {}
-	focus() { this._input.focus(); }
-	pending(pending) { this.classList.toggle("pending", pending); }
-
-	connectedCallback() {
-		if (this._built) { return; }
-
-		const form = html.node("form", {}, "", this);
-		html.node("input", {type:"text"}, "", form);
-		html.button({icon:"magnify"}, "", form);
-
-		form.addEventListener("submit", e => {
-			e.preventDefault();
-			this.onSubmit();
-		});
-
-		this._built = true;
-	}
-}
-
-customElements.define("cyp-search", Search);

app/js/elements/settings.js

@@ -1,83 +0,0 @@
-import Component from "../component.js";
-import * as conf from "../conf.js";
-
-
-const prefix = "cyp";
-
-function loadFromStorage(key) {
-	return localStorage.getItem(`${prefix}-${key}`);
-}
-
-function saveToStorage(key, value) {
-	return localStorage.setItem(`${prefix}-${key}`, value);
-}
-
-class Settings extends Component {
-	constructor() {
-		super();
-		this._inputs = {
-			theme: this.querySelector("[name=theme]"),
-			ytLimit: this.querySelector("[name=yt-limit]"),
-			color: Array.from(this.querySelectorAll("[name=color]"))
-		};
-	}
-
-	_onAppLoad() {
-		let mo = new MutationObserver(mrs => {
-			mrs.forEach(mr => this._onAppAttributeChange(mr));
-		});
-		mo.observe(this._app, {attributes:true});
-
-		this._inputs.theme.addEventListener("change", e => this._setTheme(e.target.value));
-		this._inputs.ytLimit.addEventListener("change", e => this._setYtLimit(e.target.value));
-		this._inputs.color.forEach(input => {
-			input.addEventListener("click", e => this._setColor(e.target.value));
-		});
-
-		const theme = loadFromStorage("theme");
-		(theme ? this._app.setAttribute("theme", theme) : this._syncTheme());
-
-		const color = loadFromStorage("color");
-		(color ? this._app.setAttribute("color", color) : this._syncColor());
-
-		const ytLimit = loadFromStorage("ytLimit") || conf.ytLimit;
-		this._setYtLimit(ytLimit);
-	}
-
-	_onAppAttributeChange(mr) {
-		if (mr.attributeName == "theme") { this._syncTheme(); }
-		if (mr.attributeName == "color") { this._syncColor(); }
-	}
-
-	_syncTheme() {
-		this._inputs.theme.value = this._app.getAttribute("theme");
-	}
-
-	_syncColor() {
-		this._inputs.color.forEach(input => {
-			input.checked = (input.value == this._app.getAttribute("color"));
-			input.parentNode.style.color = input.value;
-		});
-	}
-
-	_setTheme(theme) {
-		saveToStorage("theme", theme);
-		this._app.setAttribute("theme", theme);
-	}
-
-	_setColor(color) {
-		saveToStorage("color", color);
-		this._app.setAttribute("color", color);
-	}
-
-	_setYtLimit(ytLimit) {
-		saveToStorage("ytLimit", ytLimit);
-		conf.setYtLimit(ytLimit);
-	}
-
-	_onComponentChange(c, isThis) {
-		this.hidden = !isThis;
-	}
-}
-
-customElements.define("cyp-settings", Settings);

app/js/elements/song.js

@@ -1,47 +0,0 @@
-import * as format from "../format.js";
-import * as html from "../html.js";
-import Item from "../item.js";
-
-export default class Song extends Item {
-	constructor(data) {
-		super();
-		this._data = data;
-	}
-
-	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);
-		block.appendChild(title);
-		if (data["Track"]) {
-			const track = html.node("span", {className:"track"}, data["Track"].padStart(2, "0"));
-			title.insertBefore(html.text(" "), title.firstChild);
-			title.insertBefore(track, title.firstChild);
-		}
-
-		if (data["Title"]) {
-			const subtitle = format.subtitle(data);
-			html.node("span", {className:"subtitle"}, subtitle, block);
-		}
-
-		this.playing = false;
-	}
-
-	_buildTitle(data) {
-		return super._buildTitle(data["Title"] || format.fileName(this.file));
-	}
-}
-
-customElements.define("cyp-song", Song);

app/js/elements/tag.js

@@ -1,56 +0,0 @@
-import * as html from "../html.js";
-import * as art from "../art.js";
-import Item from "../item.js";
-
-
-const ICONS = {
-	"AlbumArtist": "artist",
-	"Album": "album",
-	"Genre": "music"
-}
-
-export default class Tag extends Item {
-	constructor(type, value, filter) {
-		super();
-		this._type = type;
-		this._value = value;
-		this._filter = filter;
-	}
-
-	connectedCallback() {
-		html.node("span", {className:"art"}, "", this);
-		this._buildTitle(this._value);
-	}
-
-	createChildFilter() {
-		return Object.assign({[this._type]:this._value}, this._filter);
-	}
-
-	async fillArt(mpd) {
-		const parent = this.firstChild;
-		const filter = this.createChildFilter();
-
-		let artist = filter["AlbumArtist"];
-		let album = filter["Album"];
-		let src = null;
-
-		if (artist && album) {
-			src = await art.get(mpd, artist, album);
-			if (!src) {
-				let songs = await mpd.listSongs(filter, [0,1]);
-				if (songs.length) {
-					src = await art.get(mpd, artist, album, songs[0]["file"]);
-				}
-			}
-		}
-
-		if (src) {
-			html.node("img", {src}, "", parent);
-		} else {
-			const icon = ICONS[this._type];
-			html.icon(icon, parent);
-		}
-	}
-}
-
-customElements.define("cyp-tag", Tag);

app/js/elements/yt-result.js

@@ -1,19 +0,0 @@
-import Item from "../item.js";
-import * as html from "../html.js";
-
-
-export default class YtResult extends Item {
-	constructor(title) {
-		super();
-		this._title = title;
-	}
-
-	connectedCallback() {
-		this.appendChild(html.icon("magnify"));
-		this._buildTitle(this._title);
-	}
-
-	onClick() {}
-}
-
-customElements.define("cyp-yt-result", YtResult);

app/js/elements/yt.js

@@ -1,94 +0,0 @@
-import * as html from "../html.js";
-import * as conf from "../conf.js";
-import { escape } from "../mpd.js";
-import Component from "../component.js";
-import Search from "./search.js";
-import Result from "./yt-result.js";
-
-
-const decoder = new TextDecoder("utf-8");
-
-function decodeChunk(byteArray) {
-	// \r => \n
-	return decoder.decode(byteArray).replace(/\u000d/g, "\n");
-}
-
-class YT extends Component {
-	constructor() {
-		super();
-		this._search = new Search();
-
-		this._search.onSubmit = _ => {
-			let query = this._search.value;
-			query && this._doSearch(query);
-		}
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-
-		this._clear();
-	}
-
-	_clear() {
-		html.clear(this);
-		this.appendChild(this._search);
-	}
-
-	async _doSearch(query) {
-		this._clear();
-		this._search.pending(true);
-
-		let url = `/youtube?q=${encodeURIComponent(query)}&limit=${encodeURIComponent(conf.ytLimit)}`;
-		let response = await fetch(url);
-		if (response.status == 200) {
-			let results = await response.json();
-			results.forEach(result => {
-				let node = new Result(result.title);
-				this.appendChild(node);
-				node.addButton("download", () => this._download(result.id));
-			});
-		} else {
-			let text = await response.text();
-			alert(text);
-		}
-
-		this._search.pending(false);
-	}
-
-
-	async _download(id) {
-		this._clear();
-
-		let pre = html.node("pre", {}, "", this);
-		this._search.pending(true);
-
-		let body = new URLSearchParams();
-		body.set("id", id);
-		let response = await fetch("/youtube", {method:"POST", body});
-
-		let reader = response.body.getReader();
-		while (true) {
-			let { done, value } = await reader.read();
-			if (done) { break; }
-			pre.textContent += decodeChunk(value);
-			pre.scrollTop = pre.scrollHeight;
-		}
-		reader.releaseLock();
-
-		this._search.pending(false);
-
-		if (response.status == 200) {
-			this._mpd.command(`update ${escape(conf.ytPath)}`);
-		}
-	}
-
-	_onComponentChange(c, isThis) {
-		const wasHidden = this.hidden;
-		this.hidden = !isThis;
-
-		if (!wasHidden && isThis) { this._clear(); }
-	}
-}
-
-customElements.define("cyp-yt", YT);

app/js/fs.js

@@ -0,0 +1,73 @@
+import * as app from "./app.js";
+import * as mpd from "./lib/mpd.js";
+import * as html from "./lib/html.js";
+import * as player from "./player.js";
+import * as format from "./lib/format.js";
+import * as ui from "./lib/ui.js";
+
+import Search from "./lib/search.js";
+
+let node, search;
+
+function buildHeader(path) {
+	let header = node.querySelector("header");
+	html.clear(header);
+
+	search.reset();
+	header.appendChild(search.getNode());
+
+	path.split("/").filter(x => x).forEach((name, index, all) => {
+		index && html.node("span", {}, " / ", header);
+		let button = html.button({icon:"folder"}, name, header);
+		let path = all.slice(0, index+1).join("/");
+		button.addEventListener("click", e => list(path));
+	});
+
+}
+
+function buildDirectory(data, parent) {
+	let path = data["directory"];
+	let name = path.split("/").pop();
+	let node = ui.group(ui.CTX_FS, name, path, parent);
+	node.addEventListener("click", e => list(path));
+	node.dataset.name = name;
+	return node;
+}
+
+function buildFile(data, parent) {
+	let node = ui.song(ui.CTX_FS, data, parent);
+	let name = data["file"].split("/").pop();
+	node.dataset.name = name;
+	return node;
+}
+
+function buildResults(results) {
+	let ul = node.querySelector("ul");
+	html.clear(ul);
+
+	results["directory"].forEach(directory => buildDirectory(directory, ul));
+	results["file"].forEach(file => buildFile(file, ul));
+}
+
+async function list(path) {
+	let results = await mpd.listPath(path);
+	buildResults(results);
+	buildHeader(path);
+}
+
+function onSearch(e) {
+	Array.from(node.querySelectorAll("[data-name]")).forEach(node => {
+		let name = node.dataset.name;
+		node.style.display = (search.match(name) ? "" : "none");
+	});
+}
+
+export async function activate() {
+	list("");
+}
+
+export function init(n) {
+	node = n;
+	search = new Search(node.querySelector(".search"));
+	search.addEventListener("input", onSearch);
+}

app/js/icons.js

@@ -1,89 +0,0 @@
-let ICONS={};
-ICONS["playlist-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"/>
-</svg>`;
-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"/>
-</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["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["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["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["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>`;
-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"/>
-</svg>`;
-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["filter-variant"] = `<svg viewBox="0 0 24 24">
-  <path d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"/>
-</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>`;
-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["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["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["keyboard-backspace"] = `<svg viewBox="0 0 24 24">
-  <path d="M21,11H6.83L10.41,7.41L9,6L3,12L9,18L10.41,16.58L6.83,13H21V11Z"/>
-</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>`;
-ICONS["fast-forward"] = `<svg viewBox="0 0 24 24">
-  <path d="M13,6V18L21.5,12M4,18L12.5,12L4,6V18Z"/>
-</svg>`;
-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"/>
-</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["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"/>
-</svg>`;
-ICONS["minus_unused"] = `<svg viewBox="0 0 24 24">
-  <path d="M19,13H5V11H19V13Z"/>
-</svg>`;
-export default ICONS;

app/js/item.js

@@ -1,26 +0,0 @@
-import * as html from "./html.js";
-
-
-export default class Item extends HTMLElement {
-	constructor() {
-		super();
-		this.addEventListener("click", _ => this.onClick());
-	}
-
-	addButton(icon, cb) {
-		html.button({icon}, "", this).addEventListener("click", e => {
-			e.stopPropagation(); // do not select
-			cb();
-		});
-	}
-
-	onClick() { this.parentNode.selection.toggle(this); }
-
-	_buildTitle(title) {
-		return html.node("span", {className:"title"}, title, this);
-	}
-
-	matchPrefix(prefix) {
-		return this.textContent.match(/\w+/g).some(word => word.toLowerCase().startsWith(prefix));
-	}
-}

app/js/lib/art.js

@@ -0,0 +1,63 @@
+import * as mpd from "./mpd.js";
+import * as parser from "./parser.js";
+import * as html from "./html.js";
+import * as conf from "../conf.js";
+
+let cache = {};
+const MIME = "image/jpeg";
+const STORAGE_PREFIX = `art-${conf.artSize}` ;
+
+function store(key, data) {
+	localStorage.setItem(`${STORAGE_PREFIX}-${key}`, data);
+}
+
+function load(key) {
+	return localStorage.getItem(`${STORAGE_PREFIX}-${key}`);
+}
+
+async function bytesToImage(bytes) {
+	let blob = new Blob([bytes]);
+	let src = URL.createObjectURL(blob);
+	let image = html.node("img", {src});
+	return new Promise(resolve => {
+		image.onload = () => resolve(image);
+	});
+}
+
+function resize(image) {
+	let canvas = html.node("canvas", {width:conf.artSize, height:conf.artSize});
+	let ctx = canvas.getContext("2d");
+	ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+	return canvas;
+}
+
+export async function get(artist, album, songUrl = null) {
+	let key = `${artist}-${album}`;
+	if (key in cache) { return cache[key]; }
+
+	let loaded = await load(key);
+	if (loaded) {
+		cache[key] = loaded;
+		return loaded;
+	}
+
+	if (!songUrl) { return null; }
+
+	// promise to be returned in the meantime
+	let resolve;
+	let promise = new Promise(res => resolve = res);
+	cache[key] = promise;
+
+	try {
+		let data = await mpd.albumArt(songUrl);
+		let bytes = new Uint8Array(data);
+		let image = await bytesToImage(bytes);
+		let url = resize(image).toDataURL(MIME);
+		store(key, url);
+		cache[key] = url;
+		resolve(url);
+	} catch (e) {
+		cache[key] = null;
+	}
+	return cache[key];
+}

app/js/lib/format.js

@@ -9,19 +9,8 @@ export function time(sec) {
 
 export function subtitle(data, options = {duration:true}) {
 	let tokens = [];
-
+	data["Artist"] && tokens.push(data["Artist"]);
-	if (data["Artist"]) {
-		tokens.push(data["Artist"]);
-	} else if (data["AlbumArtist"]) {
-		tokens.push(data["AlbumArtist"]);
-	}
-
 	data["Album"] && tokens.push(data["Album"]);
 	options.duration && data["duration"] && tokens.push(time(Number(data["duration"])));
-
 	return tokens.join(SEPARATOR);
 }
-
-export function fileName(file) {
-	return file.split("/").pop();
-}

app/js/lib/icons.js

@@ -0,0 +1,98 @@
+let ICONS={};
+ICONS["playlist-music"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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"/>
+</svg>`;
+ICONS["play-circle-outline"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z"/>
+</svg>`;
+ICONS["folder"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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"/>
+</svg>`;
+ICONS["shuffle"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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["artist"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/>
+</svg>`;
+ICONS["minus-circle"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M17,13H7V11H17M12,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>`;
+ICONS["magnify"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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["rewind"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M11.5,12L20,18V6M11,18V6L2.5,12L11,18Z"/>
+</svg>`;
+ICONS["account-multiple"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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["settings"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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"/>
+</svg>`;
+ICONS["pause"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M14,19H18V5H14M6,19H10V5H6V19Z"/>
+</svg>`;
+ICONS["pause-circle"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M15,16H13V8H15M11,16H9V8H11M12,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>`;
+ICONS["close-circle-outline"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"/>
+</svg>`;
+ICONS["volume-off"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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>`;
+ICONS["close"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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["music"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M19,13H5V11H19V13Z"/>
+</svg>`;
+ICONS["close-circle"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"/>
+</svg>`;
+ICONS["repeat"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M17,17H7V14L3,18L7,22V19H19V13H17M7,7H17V10L21,6L17,2V5H5V11H7V7Z"/>
+</svg>`;
+ICONS["play"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M8,5.14V19.14L19,12.14L8,5.14Z"/>
+</svg>`;
+ICONS["pause-circle-outline"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M13,16V8H15V16H13M9,16V8H11V16H9M12,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,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z"/>
+</svg>`;
+ICONS["plus"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
+</svg>`;
+ICONS["content-save"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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>`;
+ICONS["fast-forward"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M13,6V18L21.5,12M4,18L12.5,12L4,6V18Z"/>
+</svg>`;
+ICONS["minus-circle-outline"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,13H17V11H7"/>
+</svg>`;
+ICONS["volume-high"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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"/>
+</svg>`;
+ICONS["album"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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"/>
+</svg>`;
+ICONS["plus-circle-outline"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z"/>
+</svg>`;
+ICONS["plus-circle"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,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>`;
+ICONS["play-circle"] = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24">
+  <path d="M10,16.5V7.5L16,12M12,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>`;
+export default ICONS;

app/js/lib/mpd.js

@@ -0,0 +1,154 @@
+import * as parser from "./parser.js";
+
+let ws;
+let commandQueue = [];
+let current;
+
+function onMessage(e) {
+	if (current) {
+		let lines = JSON.parse(e.data);
+		let last = lines.pop();
+		if (last.startsWith("OK")) {
+			current.resolve(lines);
+		} else {
+			console.warn(last);
+			current.reject(last);
+		}
+		current = null;
+	}
+	processQueue();
+}
+
+function onError(e) {
+	console.error(e);
+	current && current.reject(e);
+	ws = null; // fixme
+}
+
+function onClose(e) {
+	console.warn(e);
+	current && current.reject(e);
+	ws = null; // fixme
+}
+
+function processQueue() {
+	if (current || commandQueue.length == 0) { return; }
+	current = commandQueue.shift();
+	ws.send(current.cmd);
+}
+
+function serializeFilter(filter) {
+	let tokens = ["("];
+	Object.entries(filter).forEach(([key, value], index) => {
+		index && tokens.push(" AND ");
+		tokens.push(`(${key} == "${escape(value)}")`);
+	});
+	tokens.push(")");
+
+	let filterStr = tokens.join("");
+	return `"${escape(filterStr)}"`;
+}
+
+export function escape(str) {
+	return str.replace(/(['"\\])/g, "\\$1");
+}
+
+export async function command(cmd) {
+	if (cmd instanceof Array) { cmd = ["command_list_begin", ...cmd, "command_list_end"].join("\n"); }
+
+	return new Promise((resolve, reject) => {
+		commandQueue.push({cmd, resolve, reject});
+		processQueue();
+	});
+}
+
+export async function commandAndStatus(cmd) {
+	let lines = await command([cmd, "status", "currentsong"]);
+	let status = parser.linesToStruct(lines);
+	if (status["duration"] instanceof Array) { status["duration"] = status["duration"][0]; }
+	return status;
+}
+
+export async function status() {
+	let lines = await command(["status", "currentsong"]);
+	let status = parser.linesToStruct(lines);
+	if (status["duration"] instanceof Array) { status["duration"] = status["duration"][0]; }
+	return status;
+}
+
+export async function listQueue() {
+	let lines = await command("playlistinfo");
+	return parser.songList(lines);
+}
+
+export async function listPlaylists() {
+	let lines = await command("listplaylists");
+	let parsed = parser.linesToStruct(lines);
+
+	let list = parsed["playlist"];
+	if (!list) { return []; }
+	return (list instanceof Array ? list : [list]);
+}
+
+export async function enqueueByFilter(filter, sort = null) {
+	let tokens = ["findadd"];
+	tokens.push(serializeFilter(filter));
+//	sort && tokens.push("sort", sort);  FIXME not implemented in MPD
+	return command(tokens.join(" "));
+}
+
+export async function listPath(path) {
+	let lines = await command(`lsinfo "${escape(path)}"`);
+	return parser.pathContents(lines);
+}
+
+export async function listTags(tag, filter = null) {
+	let tokens = ["list", tag];
+	if (filter) {
+		tokens.push(serializeFilter(filter));
+
+		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) {
+	let tokens = ["find"];
+	tokens.push(serializeFilter(filter));
+	if (window) { tokens.push("window", window.join(":")); }
+	let lines = await command(tokens.join(" "));
+	return parser.songList(lines);
+}
+
+export async function albumArt(songUrl) {
+	let data = [];
+	let offset = 0;
+	while (1) {
+		let params = ["albumart", `"${escape(songUrl)}"`, offset];
+		let lines = await command(params.join(" "));
+		data = data.concat(lines[2]);
+		let metadata = parser.linesToStruct(lines.slice(0, 2));
+		if (data.length >= Number(metadata["size"])) { return data; }
+		offset += Number(metadata["binary"]);
+	}
+	return null;
+}
+
+export async function init() {
+	let response = await fetch("/ticket", {method:"POST"});
+	let ticket = (await response.json()).ticket;
+
+	return new Promise((resolve, reject) => {
+		try {
+			ws = new WebSocket(`ws://${location.host}/?ticket=${encodeURIComponent(ticket)}`);
+		} catch (e) { reject(e); }
+		current = {resolve, reject};
+
+		ws.addEventListener("error", onError);
+		ws.addEventListener("message", onMessage);
+		ws.addEventListener("close", onClose);
+	});
+}

app/js/lib/pubsub.js

@@ -0,0 +1,17 @@
+let storage = new Map();
+
+export function publish(message, publisher, data) {
+	console.log(message, publisher, data);
+	if (!storage.has(message)) { return; }
+	storage.get(message).forEach(listener => listener(message, publisher, data));
+}
+
+export function subscribe(message, listener) {
+	if (!storage.has(message)) { storage.set(message, new Set()); }
+	storage.get(message).add(listener);
+}
+
+export function unsubscribe(message, listener) {
+	if (!storage.has(message)) { storage.set(message, new Set()); }
+	storage.get(message).remove(listener);
+}

app/js/lib/range.js

@@ -0,0 +1,168 @@
+import * as html from "./html.js";
+
+class Range extends HTMLElement {
+	static get observedAttributes() { return ["min", "max", "value", "step", "disabled"]; }
+
+	constructor() {
+		super();
+
+		this._dom = {};
+
+		this.innerHTML = `
+			<span class="-track"></span>
+			<span class="-elapsed"></span>
+			<span class="-remaining"></span>
+			<div class="-inner">
+				<button class="-thumb"></button>
+			</div>
+		`;
+
+		Array.from(this.querySelectorAll("[class^='-']")).forEach(node => {
+			let name = node.className.substring(1);
+			this._dom[name] = node;
+		});
+
+		this._update();
+
+		this.addEventListener("mousedown", this);
+		this.addEventListener("keydown", this);
+	}
+
+	get _valueAsNumber() {
+		let raw = (this.hasAttribute("value") ? Number(this.getAttribute("value")) : 50);
+		return this._constrain(raw);
+	}
+	get _minAsNumber() {
+		return (this.hasAttribute("min") ? Number(this.getAttribute("min")) : 0);
+	}
+	get _maxAsNumber() {
+		return (this.hasAttribute("max") ? Number(this.getAttribute("max")) : 100);
+	}
+	get _stepAsNumber() {
+		return (this.hasAttribute("step") ? Number(this.getAttribute("step")) : 1);
+	}
+
+	get value() { return String(this._valueAsNumber); }
+	get valueAsNumber() { return this._valueAsNumber; }
+	get min() { return this.hasAttribute("min") ? this.getAttribute("min") : ""; }
+	get max() { return this.hasAttribute("max") ? this.getAttribute("max") : ""; }
+	get step() { return this.hasAttribute("step") ? this.getAttribute("step") : ""; }
+	get disabled() { return this.hasAttribute("disabled"); }
+
+	set _valueAsNumber(value) { this.value = String(value); }
+	set min(min) { this.setAttribute("min", min); }
+	set max(max) { this.setAttribute("max", max); }
+	set value(value) { this.setAttribute("value", value); }
+	set step(step) { this.setAttribute("step", step); }
+	set disabled(disabled) {
+		disabled ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+	}
+
+	attributeChangedCallback(name, oldValue, newValue) {
+		switch (name) {
+			case "min":
+			case "max":
+			case "value":
+			case "step":
+				this._update();
+			break;
+		}
+	}
+
+	handleEvent(e) {
+		switch (e.type) {
+			case "mousedown":
+				if (this.disabled) { return; }
+				document.addEventListener("mousemove", this);
+				document.addEventListener("mouseup", this);
+				this._setToMouse(e);
+			break;
+
+			case "mousemove":
+				this._setToMouse(e);
+			break;
+
+			case "mouseup":
+				document.removeEventListener("mousemove", this);
+				document.removeEventListener("mouseup", this);
+				this.dispatchEvent(new CustomEvent("change"));
+			break;
+
+			case "keydown":
+				if (this.disabled) { return; }
+				this._handleKey(e.code);
+				this.dispatchEvent(new CustomEvent("input"));
+				this.dispatchEvent(new CustomEvent("change"));
+			break;
+		}
+	}
+
+	_handleKey(code) {
+		let min = this._minAsNumber;
+		let max = this._maxAsNumber;
+		let range = max - min;
+		let step = this._stepAsNumber;
+
+		switch (code) {
+			case "ArrowLeft":
+			case "ArrowDown":
+				this._valueAsNumber = this._constrain(this._valueAsNumber - step);
+			break;
+
+			case "ArrowRight":
+			case "ArrowUp":
+				this._valueAsNumber = this._constrain(this._valueAsNumber + step);
+			break;
+
+			case "Home": this._valueAsNumber = this._constrain(min); break;
+			case "End": this._valueAsNumber = this._constrain(max); break;
+
+			case "PageUp": this._valueAsNumber = this._constrain(this._valueAsNumber + range/10); break;
+			case "PageDown": this._valueAsNumber = this._constrain(this._valueAsNumber - range/10); break;
+		}
+	}
+
+	_constrain(value) {
+		const min = this._minAsNumber;
+		const max = this._maxAsNumber;
+		const step = this._stepAsNumber;
+
+		value = Math.max(value, min);
+		value = Math.min(value, max);
+
+		value -= min;
+		value = Math.round(value / step) * step;
+		value += min;
+		if (value > max) { value -= step; }
+
+		return value;
+	}
+
+	_update() {
+		let min = this._minAsNumber;
+		let max = this._maxAsNumber;
+		let frac = (this._valueAsNumber-min) / (max-min);
+		this._dom.thumb.style.left = `${frac * 100}%`;
+		this._dom.remaining.style.left = `${frac * 100}%`;
+		this._dom.elapsed.style.width = `${frac * 100}%`;
+	}
+
+	_setToMouse(e) {
+		let rect = this._dom.inner.getBoundingClientRect();
+		let x = e.clientX;
+		x = Math.max(x, rect.left);
+		x = Math.min(x, rect.right);
+
+		let min = this._minAsNumber;
+		let max = this._maxAsNumber;
+
+		let frac = (x-rect.left) / (rect.right-rect.left);
+		let value = this._constrain(min + frac * (max-min));
+		if (value == this._valueAsNumber) { return; }
+
+		this._valueAsNumber = value;
+		this.dispatchEvent(new CustomEvent("input"));
+	}
+}
+
+customElements.define('x-range', Range);

app/js/lib/search.js

@@ -0,0 +1,43 @@
+import * as html from "./html.js";
+import * as conf from "../conf.js";
+
+const OPEN = "open";
+const collator = new Intl.Collator(conf.locale, {usage:"search", sensitivity:"base"});
+
+export default class Search extends EventTarget {
+	constructor(parent) {
+		super();
+		this._node = html.node("label", {className:"search"});
+
+		this._input = html.node("input", {type:"text"}, "", this._node);
+		html.icon("magnify", this._node);
+
+		this._node.addEventListener("click", e => {
+			if (e.target == this._input) { return; }
+			if (this._node.classList.contains(OPEN)) {
+				this.reset();
+				this.dispatchEvent(new Event("input"));	
+			} else {
+				this._node.classList.add(OPEN);
+			}
+		});
+
+		this._input.addEventListener("input", e => {
+			this.dispatchEvent(new Event("input"));
+		});
+	}
+
+	getNode() { return this._node; }
+
+	match(str) {
+		let q = this._input.value.trim();
+		if (!q) { return true; }
+		let len = q.length;
+		return str.split(" ").some(str => collator.compare(q, str.substring(0, len)) == 0);
+	}
+
+	reset() {
+		this._input.value = "";
+		this._node.classList.remove(OPEN);
+	}
+}

app/js/lib/ui.js

@@ -0,0 +1,196 @@
+import * as mpd from "./mpd.js";
+import * as html from "./html.js";
+import * as pubsub from "./pubsub.js";
+import * as format from "./format.js";
+import * as art from "./art.js";
+import * as player from "../player.js";
+
+export const CTX_FS = 1;
+export const CTX_QUEUE = 2;
+export const CTX_LIBRARY = 3;
+
+const TYPE_ID = 1;
+const TYPE_URL = 2;
+const TYPE_FILTER = 3;
+const TYPE_PLAYLIST = 4;
+
+const SORT = "-Track";
+
+async function enqueue(type, what) {
+	switch (type) {
+		case TYPE_URL: return mpd.command(`add "${mpd.escape(what)}"`); break;
+		case TYPE_FILTER: return mpd.enqueueByFilter(what, SORT); break;
+		case TYPE_PLAYLIST: return mpd.command(`load "${mpd.escape(what)}"`); break;
+	}
+}
+
+async function fillArt(parent, filter) {
+	let artist = filter["AlbumArtist"];
+	let album = filter["Album"];
+	let src = null;
+
+	if (artist && album) {
+		src = await art.get(artist, album);
+		if (!src) {
+			let songs = await mpd.listSongs(filter, [0,1]);
+			if (songs.length) {
+				src = await art.get(artist, album, songs[0]["file"]);
+			}
+		}
+	}
+
+	if (src) {
+		html.node("img", {src}, "", parent);
+	} else {
+		html.icon(album ? "album" : "artist", parent);
+	}
+}
+
+function fileName(data) {
+	return data["file"].split("/").pop();
+}
+
+function formatSongInfo(ctx, data) {
+	let lines = [];
+	let tokens = [];
+	switch (ctx) {
+		case CTX_FS: lines.push(fileName(data)); break;
+
+		case CTX_LIBRARY:
+		case CTX_QUEUE:
+			if (data["Title"]) {
+				if (ctx == CTX_LIBRARY && data["Track"]) {
+					tokens.push(data["Track"].padStart(2, "0"));
+				}
+				tokens.push(data["Title"]);
+				lines.push(tokens.join(" "));
+				lines.push(format.subtitle(data));
+			} else {
+				lines.push(fileName(data));
+				lines.push("\u00A0");
+			}
+		break;
+	}
+
+	return lines;
+}
+
+function playButton(type, what, parent) {
+	let button = html.button({icon:"play", title:"Play"}, "", parent);
+	button.addEventListener("click", async e => {
+		if (type == TYPE_ID) {
+			await mpd.command(`playid ${what}`);
+		} else {
+			await mpd.command("clear");
+			await enqueue(type, what);
+			await mpd.command("play");
+			pubsub.publish("queue-change");
+		}
+		player.update();
+	});
+
+	return button;
+
+}
+
+function deleteButton(type, id, parent) {
+	let title;
+
+	switch (type) {
+		case TYPE_ID: title = "Delete from queue"; break;
+		case TYPE_PLAYLIST: title = "Delete playlist"; break;
+	}
+
+	let button = html.button({icon:"close", title}, "", parent);
+	button.addEventListener("click", async e => {
+		switch (type) {
+			case TYPE_ID:
+				await mpd.command(`deleteid ${id}`);
+				pubsub.publish("queue-change");
+			return;
+			case TYPE_PLAYLIST: 
+				let ok = confirm(`Really delete playlist '${id}'?`);
+				if (!ok) { return; }
+				await mpd.command(`rm "${mpd.escape(id)}"`);
+				pubsub.publish("playlists-change");
+			return;
+		}
+	});
+	return button;
+}
+
+function addButton(type, what, parent) {
+	let button = html.button({icon:"plus", title:"Add to queue"}, "", parent);
+	button.addEventListener("click", async e => {
+		e.stopPropagation();
+		await enqueue(type, what);
+		pubsub.publish("queue-change");
+		// fixme notification?
+	});
+	return button;
+}
+
+export function song(ctx, data, parent) {
+	let node = html.node("li", {className:"song"}, "", parent);
+	let info = html.node("div", {className:"info"}, "", node);
+
+	if (ctx == CTX_FS) { html.icon("music", info); }
+
+	let lines = formatSongInfo(ctx, data);
+	html.node("h2", {}, lines.shift(), info);
+	lines.length && html.node("div", {}, lines.shift(), info);
+
+
+	switch (ctx) {
+		case CTX_QUEUE:
+			let id = data["Id"];
+			node.dataset.songId = id;
+			playButton(TYPE_ID, id, node);
+			deleteButton(TYPE_ID, id, node);
+		break;
+
+		case CTX_LIBRARY:
+		case CTX_FS:
+			let url = data["file"];
+			playButton(TYPE_URL, url, node);
+			addButton(TYPE_URL, url, node);
+		break;
+	}
+
+	return node;
+}
+
+export function group(ctx, label, urlOrFilter, parent) {
+	let node = html.node("li", {className:"group"}, "", parent);
+
+	if (ctx == CTX_LIBRARY) {
+		node.classList.add("has-art");
+		let art = html.node("span", {className:"art"}, "", node);
+		fillArt(art, urlOrFilter);
+	}
+
+	let info = html.node("span", {className:"info"}, "", node);
+	if (ctx == CTX_FS) { html.icon("folder", info); }
+	html.node("h2", {}, label, info);
+
+	let type = (ctx == CTX_FS ? TYPE_URL : TYPE_FILTER);
+
+	playButton(type, urlOrFilter, node);
+	addButton(type, urlOrFilter, node);
+
+	return node;
+}
+
+export function playlist(name, parent) {
+	let node = html.node("li", {}, "", parent);
+
+	let info = html.node("span", {className:"info"}, "", node);
+	html.icon("playlist-music", info)
+	html.node("h2", {}, name, info);
+
+	playButton(TYPE_PLAYLIST, name, node);
+	addButton(TYPE_PLAYLIST, name, node);
+	deleteButton(TYPE_PLAYLIST, name, node);
+
+	return node;
+}

app/js/library.js

@@ -0,0 +1,111 @@
+import * as mpd from "./lib/mpd.js";
+import * as html from "./lib/html.js";
+import * as ui from "./lib/ui.js";
+import * as format from "./lib/format.js";
+
+import Search from "./lib/search.js";
+
+let node, search;
+
+function nonempty(x) { return x.length > 0; }
+
+function buildHeader(filter) {
+	filter = filter || {};
+	let header = node.querySelector("header");
+	html.clear(header);
+
+	search.reset();
+	header.appendChild(search.getNode());
+
+	let artist = filter["AlbumArtist"];
+	if (artist) {
+		let artistFilter = {"AlbumArtist":artist};
+		let button = html.button({icon:"artist"}, artist, header);
+		button.addEventListener("click", e => listAlbums(artistFilter));
+
+		let album = filter["Album"];
+		if (album) {
+			html.node("span", {}, format.SEPARATOR, header);
+			let albumFilter = Object.assign({}, artistFilter, {"Album":album});
+			let button = html.button({icon:"album"}, album, header);
+			button.addEventListener("click", e => listSongs(albumFilter));
+		}
+	}
+
+}
+
+function buildAlbum(album, filter, parent) {
+	let childFilter = Object.assign({}, filter, {"Album": album});
+	let node = ui.group(ui.CTX_LIBRARY, album, childFilter, parent);
+	node.addEventListener("click", e => listSongs(childFilter));
+	node.dataset.name = album;
+	return node;
+}
+
+function buildArtist(artist, filter, parent) {
+	let childFilter = Object.assign({}, filter, {"AlbumArtist": artist});
+	let node = ui.group(ui.CTX_LIBRARY, artist, childFilter, parent);
+	node.addEventListener("click", e => listAlbums(childFilter));
+	node.dataset.name = artist;
+	return node;
+}
+
+function buildSongs(songs, filter) {
+	let ul = node.querySelector("ul");
+	html.clear(ul);
+
+	songs.map(song => {
+		let node = ui.song(ui.CTX_LIBRARY, song, ul);
+		node.dataset.name = song["Title"];
+	});
+}
+
+function buildAlbums(albums, filter) {
+	let ul = node.querySelector("ul");
+	html.clear(ul);
+
+	albums.filter(nonempty).map(album => buildAlbum(album, filter, ul));
+}
+
+function buildArtists(artists, filter) {
+	let ul = node.querySelector("ul");
+	html.clear(ul);
+
+	artists.filter(nonempty).map(artist => buildArtist(artist, filter, ul));
+}
+
+async function listSongs(filter) {
+	let songs = await mpd.listSongs(filter);
+	buildSongs(songs, filter);
+	buildHeader(filter);
+}
+
+async function listAlbums(filter) {
+	let albums = await mpd.listTags("Album", filter);
+	buildAlbums(albums, filter);
+	buildHeader(filter);
+}
+
+async function listArtists(filter) {
+	let artists = await mpd.listTags("AlbumArtist", filter);
+	buildArtists(artists, filter);
+	buildHeader(filter);
+}
+
+function onSearch(e) {
+	Array.from(node.querySelectorAll("[data-name]")).forEach(node => {
+		let name = node.dataset.name;
+		node.style.display = (search.match(name) ? "" : "none");
+	});
+}
+
+export async function activate() {
+	listArtists();
+}
+
+export function init(n) {
+	node = n;
+
+	search = new Search(node.querySelector(".search"));
+	search.addEventListener("input", onSearch);
+}

app/js/mpd-mock.js

@@ -1,77 +0,0 @@
-export function command(cmd) {
-	console.warn(`mpd-mock does not know "${cmd}"`);
-}
-
-export function status() {
-	return {
-		volume: 50,
-		elapsed: 10,
-		duration: 70,
-		state: "play"
-	}
-}
-
-export function currentSong() {
-	return {
-		duration: 70,
-		file: "name.mp3",
-		Title: "Title of song",
-		Artist: "Artist of song",
-		Album: "Album of song",
-		Track: "6",
-		Id: 2
-	}
-}
-
-export function listQueue() {
-	return [
-		{Id:1, Track:"5", Title:"Title 1", Artist:"AAA", Album:"BBB", duration:30, file:"a.mp3"},
-		currentSong(),
-		{Id:3, Track:"7", Title:"Title 3", Artist:"CCC", Album:"DDD", duration:230, file:"c.mp3"},
-	];
-}
-
-export function listPlaylists() {
-	return [
-		"Playlist 1",
-		"Playlist 2",
-		"Playlist 3"
-	];
-}
-
-export function listPath(path) {
-	return {
-		"directory": [
-			{"directory": "Dir 1"},
-			{"directory": "Dir 2"},
-			{"directory": "Dir 3"}
-		],
-		"file": [
-			{"file": "File 1"},
-			{"file": "File 2"},
-			{"file": "File 3"}
-		]
-	}
-}
-
-export function listTags(tag, filter = null) {
-	switch (tag) {
-		case "AlbumArtist": return ["Artist 1", "Artist 2", "Artist 3"];
-		case "Album": return ["Album 1", "Album 2", "Album 3"];
-	}
-}
-
-export function listSongs(filter, window = null) {
-	return listQueue();
-}
-
-export function searchSongs(filter) {
-	return listQueue();
-}
-
-export function albumArt(songUrl) {
-	return new Promise(resolve => setTimeout(resolve, 1000));
-	return null;
-}
-
-export function init() {}

app/js/mpd.js

@@ -1,188 +0,0 @@
-import * as parser from "./parser.js";
-
-
-export default class MPD {
-	static async connect() {
-		let response = await fetch("/ticket", {method:"POST"});
-		let ticket = (await response.json()).ticket;
-
-		let ws = new WebSocket(createURL(ticket).href);
-
-		return new Promise((resolve, reject) => {
-			let mpd;
-			let initialCommand = {resolve: () => resolve(mpd), reject};
-			mpd = new this(ws, initialCommand);
-		});
-	}
-
-	constructor(/** @type WebSocket */ ws, initialCommand) {
-		this._ws = ws;
-		this._queue = [];
-		this._current = initialCommand;
-		this._canTerminateIdle = false;
-
-		ws.addEventListener("message", e => this._onMessage(e));
-		ws.addEventListener("close", e => this._onClose(e));
-	}
-
-	onClose(_e) {}
-	onChange(_changed) {}
-
-	command(cmd) {
-		if (cmd instanceof Array) { cmd = ["command_list_begin", ...cmd, "command_list_end"].join("\n"); }
-
-		return new Promise((resolve, reject) => {
-			this._queue.push({cmd, resolve, reject});
-
-			if (!this._current) {
-				this._advanceQueue();
-			} else if (this._canTerminateIdle) {
-				this._ws.send("noidle");
-				this._canTerminateIdle = false;
-			}
-		});
-	}
-
-	async status() {
-		let lines = await this.command("status");
-		return parser.linesToStruct(lines);
-	}
-
-	async currentSong() {
-		let lines = await this.command("currentsong");
-		return parser.linesToStruct(lines);
-	}
-
-	async listQueue() {
-		let lines = await this.command("playlistinfo");
-		return parser.songList(lines);
-	}
-
-	async listPlaylists() {
-		let lines = await this.command("listplaylists");
-		let parsed = parser.linesToStruct(lines);
-
-		let list = parsed["playlist"];
-		if (!list) { return []; }
-		return (list instanceof Array ? list : [list]);
-	}
-
-	async listPath(path) {
-		let lines = await this.command(`lsinfo "${escape(path)}"`);
-		return parser.pathContents(lines);
-	}
-
-	async listTags(tag, filter = {}) {
-		let tokens = ["list", tag];
-		if (Object.keys(filter).length) {
-			tokens.push(serializeFilter(filter));
-
-			let fakeGroup = Object.keys(filter)[0]; // FIXME hack for MPD < 0.21.6
-			tokens.push("group", fakeGroup);
-		}
-		let lines = await this.command(tokens.join(" "));
-		let parsed = parser.linesToStruct(lines);
-		return [].concat(tag in parsed ? parsed[tag] : []);
-	}
-
-	async listSongs(filter, window = null) {
-		let tokens = ["find", serializeFilter(filter)];
-		window && tokens.push("window", window.join(":"));
-		let lines = await this.command(tokens.join(" "));
-		return parser.songList(lines);
-	}
-
-	async searchSongs(filter) {
-		let tokens = ["search", serializeFilter(filter, "contains")];
-		let lines = await this.command(tokens.join(" "));
-		return parser.songList(lines);
-	}
-
-	async albumArt(songUrl) {
-		let data = [];
-		let offset = 0;
-		let params = ["albumart", `"${escape(songUrl)}"`, offset];
-
-		while (1) {
-			params[2] = offset;
-			try {
-				let lines = await this.command(params.join(" "));
-				data = data.concat(lines[2]);
-				let metadata = parser.linesToStruct(lines.slice(0, 2));
-				if (data.length >= Number(metadata["size"])) { return data; }
-				offset += Number(metadata["binary"]);
-			} catch (e) { return null; }
-		}
-		return null;
-	}
-
-	escape(...args) { return escape(...args); }
-
-	_onMessage(e) {
-		if (!this._current) { return; }
-
-		let lines = JSON.parse(e.data);
-		let last = lines.pop();
-		if (last.startsWith("OK")) {
-			this._current.resolve(lines);
-		} else {
-			console.warn(last);
-			this._current.reject(last);
-		}
-		this._current = null;
-
-		if (this._queue.length > 0) {
-			this._advanceQueue();
-		} else {
-			setTimeout(() => this._idle(), 0); // only after resolution callbacks
-		}
-	}
-
-	_onClose(e) {
-		console.warn(e);
-		this._current && this._current.reject(e);
-		this._ws = null;
-		this.onClose(e);
-	}
-
-	_advanceQueue() {
-		this._current = this._queue.shift();
-		this._ws.send(this._current.cmd);
-	}
-
-	async _idle() {
-		if (this._current) { return; }
-
-		this._canTerminateIdle = true;
-		let lines = await this.command("idle stored_playlist playlist player options mixer");
-		this._canTerminateIdle = false;
-		let changed = parser.linesToStruct(lines).changed || [];
-		changed = [].concat(changed);
-		(changed.length > 0) && this.onChange(changed);
-	}
-}
-
-
-export function escape(str) {
-	return str.replace(/(['"\\])/g, "\\$1");
-}
-
-export function serializeFilter(filter, operator = "==") {
-	let tokens = ["("];
-	Object.entries(filter).forEach(([key, value], index) => {
-		index && tokens.push(" AND ");
-		tokens.push(`(${key} ${operator} "${escape(value)}")`);
-	});
-	tokens.push(")");
-
-	let filterStr = tokens.join("");
-	return `"${escape(filterStr)}"`;
-}
-
-function createURL(ticket) {
-	let url = new URL(location.href);
-	url.protocol = "ws";
-	url.hash = "";
-	url.searchParams.set("ticket", ticket);
-	return url;
-}

app/js/nav.js

@@ -0,0 +1,16 @@
+import * as app from "./app.js";
+
+let tabs = [];
+
+export function init(node) {
+	tabs = Array.from(node.querySelectorAll("[data-for]"));
+	tabs.forEach(tab => {
+		tab.addEventListener("click", e => app.activate(tab.dataset.for));
+	});
+}
+
+export function active(id) {
+	tabs.forEach(tab => {
+		tab.classList.toggle("active", tab.dataset.for == id);
+	});
+}

app/js/player.js

@@ -0,0 +1,132 @@
+import * as mpd from "./lib/mpd.js";
+import * as art from "./lib/art.js";
+import * as html from "./lib/html.js";
+import * as format from "./lib/format.js";
+import * as pubsub from "./lib/pubsub.js";
+
+const DELAY = 1000;
+const DOM = {};
+
+let current = {};
+let node;
+let idleTimeout = null;
+let toggledVolume = 0;
+
+function sync(data) {
+	if ("volume" in data) {
+		data["volume"] = Number(data["volume"]);
+
+		DOM.mute.disabled = false;
+		DOM.volume.disabled = false;
+		DOM.volume.value = data["volume"];
+
+		if (data["volume"] == 0 && current["volume"] > 0) { // muted
+			toggledVolume = current["volume"];
+			html.clear(DOM.mute);
+			DOM.mute.appendChild(html.icon("volume-off"));
+		}
+
+		if (data["volume"] > 0 && current["volume"] == 0) { // restored
+			toggledVolume = 0;
+			html.clear(DOM.mute);
+			DOM.mute.appendChild(html.icon("volume-high"));
+		}
+
+	} else {
+		DOM.mute.disabled = true;
+		DOM.volume.disabled = true;
+		DOM.volume.value = 50;
+	}
+
+	// changed time
+	let elapsed = Number(data["elapsed"] || 0);
+	DOM.progress.value = elapsed;
+	DOM.elapsed.textContent = format.time(elapsed);
+
+	if (data["file"] != current["file"]) { // changed song
+		if (data["file"]) { // playing at all?
+			let duration = Number(data["duration"]);
+			DOM.duration.textContent = format.time(duration);
+			DOM.progress.max = duration;
+			DOM.progress.disabled = false;
+			DOM.title.textContent = data["Title"] || data["file"].split("/").pop();
+			DOM.subtitle.textContent = format.subtitle(data, {duration:false});
+		} else {
+			DOM.title.textContent = "";
+			DOM.subtitle.textContent = "";
+			DOM.progress.value = 0;
+			DOM.progress.disabled = true;
+		}
+
+		pubsub.publish("song-change", null, data);
+	}
+
+	let artistNew = data["AlbumArtist"] || data["Artist"];
+	let artistOld = current["AlbumArtist"] || current["Artist"];
+	if (artistNew != artistOld || data["Album"] != current["Album"]) { // changed album (art)
+		html.clear(DOM.art);
+		art.get(artistNew, data["Album"], data["file"]).then(src => {
+			if (src) {
+				html.node("img", {src}, "", DOM.art);
+			} else {
+				html.icon("music", DOM.art);
+			}
+		});
+	}
+
+	let flags = [];
+	if (data["random"] == "1") { flags.push("random"); }
+	if (data["repeat"] == "1") { flags.push("repeat"); }
+	node.dataset.flags = flags.join(" ");
+
+	node.dataset.state = data["state"];
+
+	current = data;
+}
+
+function idle() {
+	idleTimeout = setTimeout(update, DELAY);
+}
+
+function clearIdle() {
+	idleTimeout && clearTimeout(idleTimeout);
+	idleTimeout = null;
+}
+
+async function command(cmd) {
+	clearIdle();
+	let data = await mpd.commandAndStatus(cmd);
+	sync(data);
+	idle();
+}
+
+export async function update() {
+	clearIdle();
+	let data = await mpd.status();
+	sync(data);
+	idle();
+}
+
+export function init(n) {
+	node = n;
+	let all = node.querySelectorAll("[class]");
+	Array.from(all).forEach(node => DOM[node.className] = node);
+
+	DOM.progress = DOM.timeline.querySelector("x-range");
+	DOM.volume = DOM.volume.querySelector("x-range");
+
+	DOM.play.addEventListener("click", e => command("play"));
+	DOM.pause.addEventListener("click", e => command("pause 1"));
+	DOM.prev.addEventListener("click", e => command("previous"));
+	DOM.next.addEventListener("click", e => command("next"));
+
+	DOM.random.addEventListener("click", e => command(`random ${current["random"] == "1" ? "0" : "1"}`));
+	DOM.repeat.addEventListener("click", e => command(`repeat ${current["repeat"] == "1" ? "0" : "1"}`));
+
+	DOM.volume.addEventListener("input", e => command(`setvol ${e.target.valueAsNumber}`));
+	DOM.progress.addEventListener("input", e => command(`seekcur ${e.target.valueAsNumber}`));
+
+	DOM.mute.addEventListener("click", e => command(`setvol ${toggledVolume}`));
+
+	update();
+}

app/js/playlists.js

@@ -0,0 +1,31 @@
+import * as mpd from "./lib/mpd.js";
+import * as html from "./lib/html.js";
+import * as pubsub from "./lib/pubsub.js";
+import * as ui from "./lib/ui.js";
+
+let node;
+
+function buildLists(lists) {
+	let ul = node.querySelector("ul");
+	html.clear(ul);
+
+	lists.map(list => ui.playlist(list, ul));
+}
+
+async function syncLists() {
+	let lists = await mpd.listPlaylists();
+	buildLists(lists);
+}
+
+function onPlaylistsChange(message, publisher, data) {
+	syncLists();
+}
+
+export async function activate() {
+	syncLists();
+}
+
+export function init(n) {
+	node = n;
+	pubsub.subscribe("playlists-change", onPlaylistsChange);
+}