64 lines
1.4 KiB
JavaScript
64 lines
1.4 KiB
JavaScript
import * as mpd from "./lib/mpd.js";
|
|
|
|
let node;
|
|
let inputs = {};
|
|
const prefix = "cyp";
|
|
|
|
function loadFromStorage(key, def) {
|
|
return localStorage.getItem(`${prefix}-${key}`) || def;
|
|
}
|
|
|
|
function saveToStorage(key, value) {
|
|
return localStorage.setItem(`${prefix}-${key}`, value);
|
|
}
|
|
|
|
function load() {
|
|
let theme = loadFromStorage("theme", "dark");
|
|
inputs.theme.value = theme;
|
|
setTheme(theme);
|
|
|
|
let color = loadFromStorage("color", "dodgerblue");
|
|
inputs.color.forEach(input => {
|
|
input.checked = (input.value == color);
|
|
input.parentNode.style.color = input.value;
|
|
});
|
|
setColor(color);
|
|
}
|
|
|
|
function setTheme(theme) {
|
|
saveToStorage("theme", theme);
|
|
document.documentElement.dataset.theme = theme;
|
|
}
|
|
|
|
function setColor(color) {
|
|
saveToStorage("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 function init(n) {
|
|
node = n;
|
|
|
|
inputs.theme = n.querySelector("[name=theme]");
|
|
inputs.color = Array.from(n.querySelectorAll("[name=color]"));
|
|
inputs.volume = n.querySelector("[name=volume]");
|
|
|
|
load();
|
|
|
|
inputs.theme.addEventListener("change", e => setTheme(e.target.value));
|
|
inputs.color.forEach(input => {
|
|
input.addEventListener("click", e => setColor(e.target.value));
|
|
});
|
|
|
|
inputs.volume.addEventListener("input", e => setVolume(e.target.valueAsNumber));
|
|
}
|