Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e69f57d7ee | ||
| f6fa526598 | |||
|
|
08f34bfc1e |
@ -36,12 +36,13 @@
|
|||||||
// ---------- panel ----------
|
// ---------- panel ----------
|
||||||
|
|
||||||
function createPanel(anchorBtn) {
|
function createPanel(anchorBtn) {
|
||||||
|
var rect = anchorBtn.getBoundingClientRect();
|
||||||
var p = document.createElement('div');
|
var p = document.createElement('div');
|
||||||
p.id = 'jellylms-panel';
|
p.id = 'jellylms-panel';
|
||||||
p.style.cssText = [
|
p.style.cssText = [
|
||||||
'position:fixed',
|
'position:fixed',
|
||||||
'top:' + (anchorBtn.getBoundingClientRect().bottom + 4) + 'px',
|
'top:' + (rect.bottom + 4) + 'px',
|
||||||
'right:' + (window.innerWidth - anchorBtn.getBoundingClientRect().right) + 'px',
|
'right:' + (window.innerWidth - rect.right) + 'px',
|
||||||
'width:300px',
|
'width:300px',
|
||||||
'max-height:70vh',
|
'max-height:70vh',
|
||||||
'overflow-y:auto',
|
'overflow-y:auto',
|
||||||
@ -69,29 +70,26 @@
|
|||||||
p.innerHTML = '<div style="color:#f44;padding:8px">' + msg + '</div>';
|
p.innerHTML = '<div style="color:#f44;padding:8px">' + msg + '</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderPlayers(p, players, groups) {
|
function renderPlayers(p, players) {
|
||||||
p.innerHTML = '';
|
p.innerHTML = '';
|
||||||
|
|
||||||
var masterMacs = {};
|
|
||||||
groups.forEach(function (g) {
|
|
||||||
masterMacs[g.masterMac] = g;
|
|
||||||
(g.slaveMacs || []).forEach(function (s) { masterMacs[s] = g; });
|
|
||||||
});
|
|
||||||
|
|
||||||
// ---- Players ----
|
// ---- Players ----
|
||||||
var hdr = el('div', 'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:6px', 'Players');
|
p.appendChild(el('div',
|
||||||
p.appendChild(hdr);
|
'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:8px',
|
||||||
|
'Players'));
|
||||||
|
|
||||||
players.forEach(function (player) {
|
players.forEach(function (player) {
|
||||||
var row = el('div', 'display:flex;align-items:center;gap:8px;margin-bottom:10px');
|
// name row: status dot + name + power button
|
||||||
|
var row = el('div', 'display:flex;align-items:center;gap:8px;margin-bottom:6px');
|
||||||
|
|
||||||
var dot = el('span',
|
row.appendChild(el('span',
|
||||||
'width:8px;height:8px;border-radius:50%;flex-shrink:0;background:' +
|
'width:8px;height:8px;border-radius:50%;flex-shrink:0;background:' +
|
||||||
(player.isConnected ? '#4caf50' : '#555'));
|
(player.isConnected ? '#4caf50' : '#555')));
|
||||||
row.appendChild(dot);
|
|
||||||
|
|
||||||
var name = el('span', 'flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap', player.name);
|
var label = player.name || player.macAddress;
|
||||||
row.appendChild(name);
|
row.appendChild(el('span',
|
||||||
|
'flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap',
|
||||||
|
label));
|
||||||
|
|
||||||
var pwrBtn = el('button',
|
var pwrBtn = el('button',
|
||||||
'background:none;border:1px solid #555;border-radius:3px;color:#ddd;' +
|
'background:none;border:1px solid #555;border-radius:3px;color:#ddd;' +
|
||||||
@ -99,30 +97,39 @@
|
|||||||
player.isPoweredOn ? 'Off' : 'On');
|
player.isPoweredOn ? 'Off' : 'On');
|
||||||
pwrBtn.title = player.isPoweredOn ? 'Power off' : 'Power on';
|
pwrBtn.title = player.isPoweredOn ? 'Power off' : 'Power on';
|
||||||
pwrBtn.addEventListener('click', function () {
|
pwrBtn.addEventListener('click', function () {
|
||||||
var endpoint = player.isPoweredOn ? '/Players/' + player.mac + '/PowerOff' : '/Players/' + player.mac + '/PowerOn';
|
var endpoint = player.isPoweredOn
|
||||||
|
? '/Players/' + player.macAddress + '/PowerOff'
|
||||||
|
: '/Players/' + player.macAddress + '/PowerOn';
|
||||||
api(endpoint, { method: 'POST' }).then(function () { refresh(p); });
|
api(endpoint, { method: 'POST' }).then(function () { refresh(p); });
|
||||||
});
|
});
|
||||||
row.appendChild(pwrBtn);
|
row.appendChild(pwrBtn);
|
||||||
|
|
||||||
p.appendChild(row);
|
p.appendChild(row);
|
||||||
|
|
||||||
if (player.isConnected) {
|
// volume row — show when powered on
|
||||||
var volRow = el('div', 'display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-left:16px');
|
if (player.isPoweredOn) {
|
||||||
var volIcon = el('span', 'color:#888;font-size:16px;font-family:\'Material Icons\';line-height:1', 'volume_up');
|
var volRow = el('div',
|
||||||
volRow.appendChild(volIcon);
|
'display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-left:16px');
|
||||||
|
|
||||||
var slider = el('input');
|
volRow.appendChild(el('span',
|
||||||
|
'color:#888;font-size:16px;font-family:"Material Icons";line-height:1',
|
||||||
|
'volume_up'));
|
||||||
|
|
||||||
|
var slider = document.createElement('input');
|
||||||
slider.type = 'range';
|
slider.type = 'range';
|
||||||
slider.min = 0;
|
slider.min = 0;
|
||||||
slider.max = 100;
|
slider.max = 100;
|
||||||
slider.value = player.volume || 0;
|
slider.value = player.volume;
|
||||||
slider.style.cssText = 'flex:1;accent-color:#00a4dc';
|
slider.style.cssText = 'flex:1;accent-color:#00a4dc';
|
||||||
slider.addEventListener('change', function () {
|
slider.addEventListener('change', function () {
|
||||||
api('/Players/' + player.mac + '/Volume', { method: 'POST', body: { volume: parseInt(slider.value, 10) } });
|
api('/Players/' + player.macAddress + '/Volume', {
|
||||||
|
method: 'POST',
|
||||||
|
body: { volume: parseInt(slider.value, 10) }
|
||||||
|
});
|
||||||
});
|
});
|
||||||
volRow.appendChild(slider);
|
volRow.appendChild(slider);
|
||||||
|
|
||||||
var volVal = el('span', 'color:#888;font-size:12px;width:28px;text-align:right', player.volume + '%');
|
var volVal = el('span', 'color:#888;font-size:12px;width:28px;text-align:right',
|
||||||
|
player.volume + '%');
|
||||||
slider.addEventListener('input', function () { volVal.textContent = slider.value + '%'; });
|
slider.addEventListener('input', function () { volVal.textContent = slider.value + '%'; });
|
||||||
volRow.appendChild(volVal);
|
volRow.appendChild(volVal);
|
||||||
|
|
||||||
@ -131,33 +138,44 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// ---- Sync Groups ----
|
// ---- Sync Groups ----
|
||||||
if (groups.length > 0) {
|
var synced = {};
|
||||||
var sep = el('div', 'border-top:1px solid #333;margin:8px 0');
|
players.forEach(function (pl) {
|
||||||
p.appendChild(sep);
|
if (pl.syncMaster) { synced[pl.macAddress] = true; }
|
||||||
|
if (pl.syncSlaves && pl.syncSlaves.length) {
|
||||||
|
synced[pl.macAddress] = true;
|
||||||
|
pl.syncSlaves.forEach(function (m) { synced[m] = true; });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
var ghdr = el('div', 'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:6px', 'Sync Groups');
|
var masters = players.filter(function (pl) {
|
||||||
p.appendChild(ghdr);
|
return pl.syncSlaves && pl.syncSlaves.length > 0;
|
||||||
|
});
|
||||||
|
|
||||||
groups.forEach(function (g) {
|
if (masters.length > 0) {
|
||||||
var master = players.find(function (pl) { return pl.mac === g.masterMac; });
|
p.appendChild(el('div', 'border-top:1px solid #333;margin:8px 0'));
|
||||||
var slaves = (g.slaveMacs || []).map(function (m) {
|
p.appendChild(el('div',
|
||||||
return players.find(function (pl) { return pl.mac === m; });
|
'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:8px',
|
||||||
}).filter(Boolean);
|
'Sync Groups'));
|
||||||
|
|
||||||
var names = [master ? master.name : g.masterMac]
|
masters.forEach(function (master) {
|
||||||
.concat(slaves.map(function (s) { return s.name; }))
|
var slaveNames = master.syncSlaves.map(function (mac) {
|
||||||
.join(' + ');
|
var found = players.find(function (pl) { return pl.macAddress === mac; });
|
||||||
|
return found ? (found.name || mac) : mac;
|
||||||
|
});
|
||||||
|
var label = (master.name || master.macAddress) + ' + ' + slaveNames.join(', ');
|
||||||
|
|
||||||
var grow = el('div', 'display:flex;align-items:center;gap:8px;margin-bottom:8px');
|
var grow = el('div', 'display:flex;align-items:center;gap:8px;margin-bottom:8px');
|
||||||
var glabel = el('span', 'flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px', names);
|
grow.appendChild(el('span',
|
||||||
grow.appendChild(glabel);
|
'flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px',
|
||||||
|
label));
|
||||||
|
|
||||||
var dissolveBtn = el('button',
|
var dissolveBtn = el('button',
|
||||||
'background:none;border:1px solid #555;border-radius:3px;color:#f88;' +
|
'background:none;border:1px solid #555;border-radius:3px;color:#f88;' +
|
||||||
'padding:2px 7px;cursor:pointer;font-size:12px;flex-shrink:0',
|
'padding:2px 7px;cursor:pointer;font-size:12px;flex-shrink:0',
|
||||||
'Unsync');
|
'Unsync');
|
||||||
dissolveBtn.addEventListener('click', function () {
|
dissolveBtn.addEventListener('click', function () {
|
||||||
api('/SyncGroups/' + g.masterMac, { method: 'DELETE' }).then(function () { refresh(p); });
|
api('/SyncGroups/' + master.macAddress, { method: 'DELETE' })
|
||||||
|
.then(function () { refresh(p); });
|
||||||
});
|
});
|
||||||
grow.appendChild(dissolveBtn);
|
grow.appendChild(dissolveBtn);
|
||||||
p.appendChild(grow);
|
p.appendChild(grow);
|
||||||
@ -165,16 +183,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ---- Create Sync Group ----
|
// ---- Create Sync Group ----
|
||||||
var unsynced = players.filter(function (pl) {
|
var unsynced = players.filter(function (pl) { return !synced[pl.macAddress]; });
|
||||||
return !masterMacs[pl.mac] && pl.isConnected;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (unsynced.length >= 2) {
|
if (unsynced.length >= 2) {
|
||||||
var sep2 = el('div', 'border-top:1px solid #333;margin:8px 0');
|
p.appendChild(el('div', 'border-top:1px solid #333;margin:8px 0'));
|
||||||
p.appendChild(sep2);
|
p.appendChild(el('div',
|
||||||
|
'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:8px',
|
||||||
var shdr = el('div', 'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:6px', 'Create Sync Group');
|
'Create Sync Group'));
|
||||||
p.appendChild(shdr);
|
|
||||||
|
|
||||||
var checkboxes = [];
|
var checkboxes = [];
|
||||||
unsynced.forEach(function (pl) {
|
unsynced.forEach(function (pl) {
|
||||||
@ -182,10 +197,10 @@
|
|||||||
var cb = document.createElement('input');
|
var cb = document.createElement('input');
|
||||||
cb.type = 'checkbox';
|
cb.type = 'checkbox';
|
||||||
cb.style.accentColor = '#00a4dc';
|
cb.style.accentColor = '#00a4dc';
|
||||||
cb.dataset.mac = pl.mac;
|
cb.dataset.mac = pl.macAddress;
|
||||||
checkboxes.push(cb);
|
checkboxes.push(cb);
|
||||||
crow.appendChild(cb);
|
crow.appendChild(cb);
|
||||||
crow.appendChild(el('span', 'flex:1', pl.name));
|
crow.appendChild(el('span', 'flex:1', pl.name || pl.macAddress));
|
||||||
p.appendChild(crow);
|
p.appendChild(crow);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -208,14 +223,10 @@
|
|||||||
|
|
||||||
function refresh(p) {
|
function refresh(p) {
|
||||||
p.innerHTML = '<div style="color:#888;padding:8px">Loading…</div>';
|
p.innerHTML = '<div style="color:#888;padding:8px">Loading…</div>';
|
||||||
Promise.all([
|
api('/Players')
|
||||||
api('/Players').then(function (r) { return r.json(); }),
|
.then(function (r) { return r.json(); })
|
||||||
api('/SyncGroups').then(function (r) { return r.json(); })
|
.then(function (players) { renderPlayers(p, players); })
|
||||||
]).then(function (results) {
|
.catch(function () { renderError(p, 'Failed to load players.'); });
|
||||||
renderPlayers(p, results[0], results[1]);
|
|
||||||
}).catch(function () {
|
|
||||||
renderError(p, 'Failed to load players.');
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function togglePanel(btn) {
|
function togglePanel(btn) {
|
||||||
@ -227,7 +238,7 @@
|
|||||||
|
|
||||||
panel = createPanel(btn);
|
panel = createPanel(btn);
|
||||||
document.body.appendChild(panel);
|
document.body.appendChild(panel);
|
||||||
refresh(panel, btn);
|
refresh(panel);
|
||||||
}
|
}
|
||||||
|
|
||||||
function closePanel() {
|
function closePanel() {
|
||||||
@ -279,18 +290,13 @@
|
|||||||
tryInject();
|
tryInject();
|
||||||
|
|
||||||
var observer = new MutationObserver(function () {
|
var observer = new MutationObserver(function () {
|
||||||
// If our panel was removed by SPA navigation, clean up the reference
|
if (panel && !document.body.contains(panel)) { panel = null; }
|
||||||
if (panel && !document.body.contains(panel)) {
|
|
||||||
panel = null;
|
|
||||||
}
|
|
||||||
tryInject();
|
tryInject();
|
||||||
});
|
});
|
||||||
observer.observe(document.body, { childList: true, subtree: true });
|
observer.observe(document.body, { childList: true, subtree: true });
|
||||||
|
|
||||||
document.addEventListener('click', function (e) {
|
document.addEventListener('click', function (e) {
|
||||||
if (panel && !panel.contains(e.target)) {
|
if (panel && !panel.contains(e.target)) { closePanel(); }
|
||||||
closePanel();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,6 +7,22 @@
|
|||||||
"owner": "dtourolle",
|
"owner": "dtourolle",
|
||||||
"category": "Music",
|
"category": "Music",
|
||||||
"versions": [
|
"versions": [
|
||||||
|
{
|
||||||
|
"version": "1.0.6",
|
||||||
|
"changelog": "Release 1.0.6",
|
||||||
|
"targetAbi": "10.10.0.0",
|
||||||
|
"sourceUrl": "https://gitea.tourolle.paris/dtourolle/jellyLMS/releases/download/v1.0.6/jellylms_1.0.6.0.zip",
|
||||||
|
"checksum": "026fae22c793a5e71fb322811d964dfd",
|
||||||
|
"timestamp": "2026-06-17T20:24:41Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"version": "1.0.5",
|
||||||
|
"changelog": "Release 1.0.5",
|
||||||
|
"targetAbi": "10.10.0.0",
|
||||||
|
"sourceUrl": "https://gitea.tourolle.paris/dtourolle/jellyLMS/releases/download/v1.0.5/jellylms_1.0.5.0.zip",
|
||||||
|
"checksum": "13ecfe05b1a0f4f137211d9b6660f66e",
|
||||||
|
"timestamp": "2026-06-17T19:20:00Z"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"version": "1.0.4",
|
"version": "1.0.4",
|
||||||
"changelog": "Release 1.0.4",
|
"changelog": "Release 1.0.4",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user