This commit is contained in:
Ondrej Zara 2019-04-09 16:08:09 +02:00
parent ba4b7fdc3c
commit 82d1d1a78a
7 changed files with 62 additions and 16 deletions

View file

@ -135,7 +135,11 @@ nav ul li.active {
opacity: 0.5; opacity: 0.5;
} }
#player .art { #player .art {
margin-right: var(--icon-spacing); height: 96px;
}
#player .art img,
#player .art .icon {
width: 96px;
} }
#player h2 { #player h2 {
font-size: 125%; font-size: 125%;
@ -159,6 +163,10 @@ nav ul li.active {
width: 32px; width: 32px;
margin: 8px; margin: 8px;
} }
#player .controls [type=range] {
width: 144px;
margin: 0;
}
#player .misc { #player .misc {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -617,6 +625,9 @@ nav ul li.active {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
#settings {
font-size: var(--font-size-large);
}
#settings dl { #settings dl {
margin: 8px; margin: 8px;
display: grid; display: grid;

View file

@ -3,5 +3,4 @@
.icon, img { .icon, img {
vertical-align: top; vertical-align: top;
} }
} }

View file

@ -6,7 +6,11 @@
&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; } &:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
.art { .art {
margin-right: var(--icon-spacing); @size: 96px;
height: @size;
img, .icon {
width: @size;
}
} }
h2 { h2 {
@ -22,11 +26,18 @@
.title, .subtitle { .long-line; } .title, .subtitle { .long-line; }
.controls { .controls {
@icon-margin: 8px;
@icon-size: 32px;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
.icon { .icon {
width: 32px; width: @icon-size;
margin: 8px; margin: @icon-margin;
}
[type=range] {
width: 3 * (@icon-size + 2*@icon-margin);
margin: 0;
} }
} }
@ -37,5 +48,4 @@
justify-content: space-around; justify-content: space-around;
.icon { width: 32px; } .icon { width: 32px; }
} }
} }

View file

@ -1,4 +1,6 @@
#settings { #settings {
font-size: var(--font-size-large);
dl { dl {
margin: 8px; margin: 8px;
display: grid; display: grid;

View file

@ -20,7 +20,7 @@
<button class="pause" data-icon="pause"></button> <button class="pause" data-icon="pause"></button>
<button class="next" data-icon="fast-forward"></button> <button class="next" data-icon="fast-forward"></button>
<div> <div>
<span class="elapsed"></span>/<span class="duration"></span> <input type="range" step="any" min="0" class="elapsed" />
</div> </div>
</div> </div>
<div class="misc"> <div class="misc">
@ -54,6 +54,10 @@
</section> </section>
<section id="settings"> <section id="settings">
<dl> <dl>
<dt>Volume</dt>
<dd>
<input type="range" name="volume" min="0" max="100" step="1" />
</dd>
<dt>Theme</dt> <dt>Theme</dt>
<dd> <dd>
<select name="theme"> <select name="theme">

View file

@ -3,6 +3,7 @@ import * as art from "./lib/art.js";
import * as html from "./lib/html.js"; import * as html from "./lib/html.js";
import * as format from "./lib/format.js"; import * as format from "./lib/format.js";
import * as pubsub from "./lib/pubsub.js"; import * as pubsub from "./lib/pubsub.js";
import * as settings from "./settings.js";
const DELAY = 2000; const DELAY = 2000;
const DOM = {}; const DOM = {};
@ -12,15 +13,18 @@ let node;
let idleTimeout = null; let idleTimeout = null;
function sync(data) { function sync(data) {
DOM.elapsed.textContent = format.time(Number(data["elapsed"] || 0)); // changed time settings.notifyVolume(data["volume"]);
DOM.elapsed.value = Number(data["elapsed"] || 0); // changed time
if (data["file"] != current["file"]) { // changed song if (data["file"] != current["file"]) { // changed song
if (data["file"]) { // playing at all? if (data["file"]) { // playing at all?
DOM.duration.textContent = format.time(Number(data["duration"] || 0)); DOM.elapsed.disabled = false;
DOM.elapsed.max = Number(data["duration"]);
DOM.title.textContent = data["Title"] || data["file"].split("/").pop(); DOM.title.textContent = data["Title"] || data["file"].split("/").pop();
DOM.subtitle.textContent = format.subtitle(data); DOM.subtitle.textContent = format.subtitle(data);
} else { } else {
DOM.duration.textContent = ""; DOM.elapsed.disabled = true;
DOM.title.textContent = ""; DOM.title.textContent = "";
DOM.subtitle.textContent = ""; DOM.subtitle.textContent = "";
} }
@ -29,11 +33,13 @@ function sync(data) {
} }
if (data["Artist"] != current["Artist"] || data["Album"] != current["Album"]) { // changed album (art) if (data["Artist"] != current["Artist"] || data["Album"] != current["Album"]) { // changed album (art)
DOM.art.innerHTML = ""; html.clear(DOM.art);
art.get(data["Artist"], data["Album"], data["file"]).then(src => { art.get(data["Artist"], data["Album"], data["file"]).then(src => {
if (!src) { return; } if (src) {
let image = html.node("img", {src}); html.node("img", {src}, "", DOM.art);
DOM.art.appendChild(image); } else {
html.icon("music", DOM.art);
}
}); });
} }
@ -82,6 +88,7 @@ export function init(n) {
DOM.random.addEventListener("click", e => command(`random ${current["random"] == "1" ? "0" : "1"}`)); 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.repeat.addEventListener("click", e => command(`repeat ${current["repeat"] == "1" ? "0" : "1"}`));
DOM.elapsed.addEventListener("input", e => command(`seekcur ${e.target.value}`));
update(); update();
} }

View file

@ -1,3 +1,5 @@
import * as mpd from "./lib/mpd.js";
let node; let node;
let inputs = {}; let inputs = {};
const prefix = "cyp"; const prefix = "cyp";
@ -33,6 +35,14 @@ function setColor(color) {
document.documentElement.dataset.color = color; document.documentElement.dataset.color = color;
} }
async function setVolume(volume) {
mpd.command(`setvol ${volume}`);
}
export async function notifyVolume(volume) {
inputs.volume.value = volume;
}
export async function activate() {} export async function activate() {}
export function init(n) { export function init(n) {
@ -40,6 +50,7 @@ export function init(n) {
inputs.theme = n.querySelector("[name=theme]"); inputs.theme = n.querySelector("[name=theme]");
inputs.color = Array.from(n.querySelectorAll("[name=color]")); inputs.color = Array.from(n.querySelectorAll("[name=color]"));
inputs.volume = n.querySelector("[name=volume]");
load(); load();
@ -47,4 +58,6 @@ export function init(n) {
inputs.color.forEach(input => { inputs.color.forEach(input => {
input.addEventListener("click", e => setColor(e.target.value)); input.addEventListener("click", e => setColor(e.target.value));
}); });
inputs.volume.addEventListener("input", e => setVolume(e.target.valueAsNumber));
} }