Repository navigation
Hacking with userscripts
cortsf edited this page Jun 15, 2026
·
28 revisions
Use socket.send() with any the following arguments to control MPD. The user interface will/should update accordingly.
-
statusCall this to manually trigger an update of the interface. It doesn't mirrors MPD'sstatuswhich is just for retrieving information. See #11. -
toggle(play/pause) stopnextpreviousclearrandomrepeatsingleconsumeupdateAllvolume,<int>playId,<int>deleteId,<int>playPath,<string>addPath,<string>seekCur,<int>update,<string>
See MPD command referece for more information
Note: In the future hympd should provide more id's and classes allowing to access all of its elements (and their data) more easily. See #17.
// ==UserScript==
// @run-at document-end
// @match http://localhost:3003/*
// @match http://hympd.local/*
// ==/UserScript==
if(window.location.pathname == "/" || window.location.pathname == "/queue"){
// Basic MPD command:
document.querySelector('#currentSong').addEventListener('click', () => { socket.send('toggle') });
// Basic Theming:
document.querySelectorAll('nav')[0].style.background="#260";
document.querySelector('body > div').style.background="#f80";
}
if(window.location.pathname == "/browse"){
// On each "folder" type row, include an update button sending `socket.send(update,<path>)`
document.querySelectorAll('tr').forEach(row => {
if (row.getElementsByTagName('td')[0].getElementsByTagName('svg')[0].classList.contains("feather-folder")) {
const node = document.createElement("button");
node.classList.add("cursor-pointer");
node.innerHTML = '<i class="size-4 stroke-3" data-feather="refresh-ccw"></i>'
row.lastChild.prepend(node);
const playBtn = row.querySelector("button[onclick^=\"socket.send('playPath,\"]");
const path = playBtn.getAttribute('onclick').match(/playPath,(.*)'\)/)[1];
node.addEventListener('click', () => { socket.send('update,' + path) });
}
});
}