Compare commits
No commits in common. "master" and "v1.0.5" have entirely different histories.
@ -36,13 +36,12 @@
|
|||||||
// ---------- 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:' + (rect.bottom + 4) + 'px',
|
'top:' + (anchorBtn.getBoundingClientRect().bottom + 4) + 'px',
|
||||||
'right:' + (window.innerWidth - rect.right) + 'px',
|
'right:' + (window.innerWidth - anchorBtn.getBoundingClientRect().right) + 'px',
|
||||||
'width:300px',
|
'width:300px',
|
||||||
'max-height:70vh',
|
'max-height:70vh',
|
||||||
'overflow-y:auto',
|
'overflow-y:auto',
|
||||||
@ -70,26 +69,29 @@
|
|||||||
p.innerHTML = '<div style="color:#f44;padding:8px">' + msg + '</div>';
|
p.innerHTML = '<div style="color:#f44;padding:8px">' + msg + '</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderPlayers(p, players) {
|
function renderPlayers(p, players, groups) {
|
||||||
p.innerHTML = '';
|
p.innerHTML = '';
|
||||||
|
|
||||||
|
var masterMacs = {};
|
||||||
|
groups.forEach(function (g) {
|
||||||
|
masterMacs[g.masterMac] = g;
|
||||||
|
(g.slaveMacs || []).forEach(function (s) { masterMacs[s] = g; });
|
||||||
|
});
|
||||||
|
|
||||||
// ---- Players ----
|
// ---- Players ----
|
||||||
p.appendChild(el('div',
|
var hdr = el('div', 'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:6px', 'Players');
|
||||||
'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:8px',
|
p.appendChild(hdr);
|
||||||
'Players'));
|
|
||||||
|
|
||||||
players.forEach(function (player) {
|
players.forEach(function (player) {
|
||||||
// name row: status dot + name + power button
|
var row = el('div', 'display:flex;align-items:center;gap:8px;margin-bottom:10px');
|
||||||
var row = el('div', 'display:flex;align-items:center;gap:8px;margin-bottom:6px');
|
|
||||||
|
|
||||||
row.appendChild(el('span',
|
var dot = 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 label = player.name || player.macAddress;
|
var name = el('span', 'flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap', player.name);
|
||||||
row.appendChild(el('span',
|
row.appendChild(name);
|
||||||
'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;' +
|
||||||
@ -97,39 +99,30 @@
|
|||||||
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
|
var endpoint = player.isPoweredOn ? '/Players/' + player.mac + '/PowerOff' : '/Players/' + player.mac + '/PowerOn';
|
||||||
? '/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);
|
||||||
|
|
||||||
// volume row — show when powered on
|
if (player.isConnected) {
|
||||||
if (player.isPoweredOn) {
|
var volRow = el('div', 'display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-left:16px');
|
||||||
var volRow = el('div',
|
var volIcon = el('span', 'color:#888;font-size:16px;font-family:\'Material Icons\';line-height:1', 'volume_up');
|
||||||
'display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-left:16px');
|
volRow.appendChild(volIcon);
|
||||||
|
|
||||||
volRow.appendChild(el('span',
|
var slider = el('input');
|
||||||
'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;
|
slider.value = player.volume || 0;
|
||||||
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.macAddress + '/Volume', {
|
api('/Players/' + player.mac + '/Volume', { method: 'POST', body: { volume: parseInt(slider.value, 10) } });
|
||||||
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',
|
var volVal = el('span', 'color:#888;font-size:12px;width:28px;text-align:right', player.volume + '%');
|
||||||
player.volume + '%');
|
|
||||||
slider.addEventListener('input', function () { volVal.textContent = slider.value + '%'; });
|
slider.addEventListener('input', function () { volVal.textContent = slider.value + '%'; });
|
||||||
volRow.appendChild(volVal);
|
volRow.appendChild(volVal);
|
||||||
|
|
||||||
@ -138,44 +131,33 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// ---- Sync Groups ----
|
// ---- Sync Groups ----
|
||||||
var synced = {};
|
if (groups.length > 0) {
|
||||||
players.forEach(function (pl) {
|
var sep = el('div', 'border-top:1px solid #333;margin:8px 0');
|
||||||
if (pl.syncMaster) { synced[pl.macAddress] = true; }
|
p.appendChild(sep);
|
||||||
if (pl.syncSlaves && pl.syncSlaves.length) {
|
|
||||||
synced[pl.macAddress] = true;
|
|
||||||
pl.syncSlaves.forEach(function (m) { synced[m] = true; });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var masters = players.filter(function (pl) {
|
var ghdr = el('div', 'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:6px', 'Sync Groups');
|
||||||
return pl.syncSlaves && pl.syncSlaves.length > 0;
|
p.appendChild(ghdr);
|
||||||
});
|
|
||||||
|
|
||||||
if (masters.length > 0) {
|
groups.forEach(function (g) {
|
||||||
p.appendChild(el('div', 'border-top:1px solid #333;margin:8px 0'));
|
var master = players.find(function (pl) { return pl.mac === g.masterMac; });
|
||||||
p.appendChild(el('div',
|
var slaves = (g.slaveMacs || []).map(function (m) {
|
||||||
'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:8px',
|
return players.find(function (pl) { return pl.mac === m; });
|
||||||
'Sync Groups'));
|
}).filter(Boolean);
|
||||||
|
|
||||||
masters.forEach(function (master) {
|
var names = [master ? master.name : g.masterMac]
|
||||||
var slaveNames = master.syncSlaves.map(function (mac) {
|
.concat(slaves.map(function (s) { return s.name; }))
|
||||||
var found = players.find(function (pl) { return pl.macAddress === mac; });
|
.join(' + ');
|
||||||
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');
|
||||||
grow.appendChild(el('span',
|
var glabel = el('span', 'flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px', names);
|
||||||
'flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px',
|
grow.appendChild(glabel);
|
||||||
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/' + master.macAddress, { method: 'DELETE' })
|
api('/SyncGroups/' + g.masterMac, { method: 'DELETE' }).then(function () { refresh(p); });
|
||||||
.then(function () { refresh(p); });
|
|
||||||
});
|
});
|
||||||
grow.appendChild(dissolveBtn);
|
grow.appendChild(dissolveBtn);
|
||||||
p.appendChild(grow);
|
p.appendChild(grow);
|
||||||
@ -183,13 +165,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ---- Create Sync Group ----
|
// ---- Create Sync Group ----
|
||||||
var unsynced = players.filter(function (pl) { return !synced[pl.macAddress]; });
|
var unsynced = players.filter(function (pl) {
|
||||||
|
return !masterMacs[pl.mac] && pl.isConnected;
|
||||||
|
});
|
||||||
|
|
||||||
if (unsynced.length >= 2) {
|
if (unsynced.length >= 2) {
|
||||||
p.appendChild(el('div', 'border-top:1px solid #333;margin:8px 0'));
|
var sep2 = el('div', 'border-top:1px solid #333;margin:8px 0');
|
||||||
p.appendChild(el('div',
|
p.appendChild(sep2);
|
||||||
'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:8px',
|
|
||||||
'Create Sync Group'));
|
var shdr = el('div', 'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:6px', 'Create Sync Group');
|
||||||
|
p.appendChild(shdr);
|
||||||
|
|
||||||
var checkboxes = [];
|
var checkboxes = [];
|
||||||
unsynced.forEach(function (pl) {
|
unsynced.forEach(function (pl) {
|
||||||
@ -197,10 +182,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.macAddress;
|
cb.dataset.mac = pl.mac;
|
||||||
checkboxes.push(cb);
|
checkboxes.push(cb);
|
||||||
crow.appendChild(cb);
|
crow.appendChild(cb);
|
||||||
crow.appendChild(el('span', 'flex:1', pl.name || pl.macAddress));
|
crow.appendChild(el('span', 'flex:1', pl.name));
|
||||||
p.appendChild(crow);
|
p.appendChild(crow);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -223,10 +208,14 @@
|
|||||||
|
|
||||||
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>';
|
||||||
api('/Players')
|
Promise.all([
|
||||||
.then(function (r) { return r.json(); })
|
api('/Players').then(function (r) { return r.json(); }),
|
||||||
.then(function (players) { renderPlayers(p, players); })
|
api('/SyncGroups').then(function (r) { return r.json(); })
|
||||||
.catch(function () { renderError(p, 'Failed to load players.'); });
|
]).then(function (results) {
|
||||||
|
renderPlayers(p, results[0], results[1]);
|
||||||
|
}).catch(function () {
|
||||||
|
renderError(p, 'Failed to load players.');
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function togglePanel(btn) {
|
function togglePanel(btn) {
|
||||||
@ -238,7 +227,7 @@
|
|||||||
|
|
||||||
panel = createPanel(btn);
|
panel = createPanel(btn);
|
||||||
document.body.appendChild(panel);
|
document.body.appendChild(panel);
|
||||||
refresh(panel);
|
refresh(panel, btn);
|
||||||
}
|
}
|
||||||
|
|
||||||
function closePanel() {
|
function closePanel() {
|
||||||
@ -290,13 +279,18 @@
|
|||||||
tryInject();
|
tryInject();
|
||||||
|
|
||||||
var observer = new MutationObserver(function () {
|
var observer = new MutationObserver(function () {
|
||||||
if (panel && !document.body.contains(panel)) { panel = null; }
|
// If our panel was removed by SPA navigation, clean up the reference
|
||||||
|
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)) { closePanel(); }
|
if (panel && !panel.contains(e.target)) {
|
||||||
|
closePanel();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,22 +7,6 @@
|
|||||||
"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