310 lines
11 KiB
JavaScript
310 lines
11 KiB
JavaScript
(function () {
|
|
var hasAccess = false;
|
|
var panel = null;
|
|
|
|
function getAuthToken() {
|
|
try {
|
|
var creds = JSON.parse(localStorage.getItem('jellyfin_credentials'));
|
|
var server = creds && creds.Servers && creds.Servers[0];
|
|
return (server && server.AccessToken) || null;
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function api(path, options) {
|
|
var token = getAuthToken();
|
|
var opts = Object.assign({ headers: {} }, options);
|
|
if (token) {
|
|
opts.headers['X-Emby-Token'] = token;
|
|
}
|
|
|
|
if (opts.body && typeof opts.body === 'object') {
|
|
opts.body = JSON.stringify(opts.body);
|
|
opts.headers['Content-Type'] = 'application/json';
|
|
}
|
|
|
|
return fetch('/JellyLms' + path, opts);
|
|
}
|
|
|
|
function checkAccess() {
|
|
return api('/RemoteControl/Access')
|
|
.then(function (r) { return r.ok; })
|
|
.catch(function () { return false; });
|
|
}
|
|
|
|
// ---------- panel ----------
|
|
|
|
function createPanel(anchorBtn) {
|
|
var rect = anchorBtn.getBoundingClientRect();
|
|
var p = document.createElement('div');
|
|
p.id = 'jellylms-panel';
|
|
p.style.cssText = [
|
|
'position:fixed',
|
|
'top:' + (rect.bottom + 4) + 'px',
|
|
'right:' + (window.innerWidth - rect.right) + 'px',
|
|
'width:300px',
|
|
'max-height:70vh',
|
|
'overflow-y:auto',
|
|
'background:#1c1c1c',
|
|
'border:1px solid #333',
|
|
'border-radius:4px',
|
|
'box-shadow:0 4px 24px rgba(0,0,0,.7)',
|
|
'z-index:999999',
|
|
'font-family:inherit',
|
|
'font-size:14px',
|
|
'color:#ddd',
|
|
'padding:12px',
|
|
].join(';');
|
|
return p;
|
|
}
|
|
|
|
function el(tag, css, html) {
|
|
var e = document.createElement(tag);
|
|
if (css) { e.style.cssText = css; }
|
|
if (html != null) { e.innerHTML = html; }
|
|
return e;
|
|
}
|
|
|
|
function renderError(p, msg) {
|
|
p.innerHTML = '<div style="color:#f44;padding:8px">' + msg + '</div>';
|
|
}
|
|
|
|
function renderPlayers(p, players) {
|
|
p.innerHTML = '';
|
|
|
|
// ---- Players ----
|
|
p.appendChild(el('div',
|
|
'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:8px',
|
|
'Players'));
|
|
|
|
players.forEach(function (player) {
|
|
// name row: status dot + name + power button
|
|
var row = el('div', 'display:flex;align-items:center;gap:8px;margin-bottom:6px');
|
|
|
|
row.appendChild(el('span',
|
|
'width:8px;height:8px;border-radius:50%;flex-shrink:0;background:' +
|
|
(player.isConnected ? '#4caf50' : '#555')));
|
|
|
|
var label = player.name || player.macAddress;
|
|
row.appendChild(el('span',
|
|
'flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap',
|
|
label));
|
|
|
|
var pwrBtn = el('button',
|
|
'background:none;border:1px solid #555;border-radius:3px;color:#ddd;' +
|
|
'padding:2px 7px;cursor:pointer;font-size:12px;flex-shrink:0',
|
|
player.isPoweredOn ? 'Off' : 'On');
|
|
pwrBtn.title = player.isPoweredOn ? 'Power off' : 'Power on';
|
|
pwrBtn.addEventListener('click', function () {
|
|
var endpoint = player.isPoweredOn
|
|
? '/Players/' + player.macAddress + '/PowerOff'
|
|
: '/Players/' + player.macAddress + '/PowerOn';
|
|
api(endpoint, { method: 'POST' }).then(function () { refresh(p); });
|
|
});
|
|
row.appendChild(pwrBtn);
|
|
p.appendChild(row);
|
|
|
|
// volume row — show when powered on
|
|
if (player.isPoweredOn) {
|
|
var volRow = el('div',
|
|
'display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-left:16px');
|
|
|
|
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.min = 0;
|
|
slider.max = 100;
|
|
slider.value = player.volume;
|
|
slider.style.cssText = 'flex:1;accent-color:#00a4dc';
|
|
slider.addEventListener('change', function () {
|
|
api('/Players/' + player.macAddress + '/Volume', {
|
|
method: 'POST',
|
|
body: { volume: parseInt(slider.value, 10) }
|
|
});
|
|
});
|
|
volRow.appendChild(slider);
|
|
|
|
var volVal = el('span', 'color:#888;font-size:12px;width:28px;text-align:right',
|
|
player.volume + '%');
|
|
slider.addEventListener('input', function () { volVal.textContent = slider.value + '%'; });
|
|
volRow.appendChild(volVal);
|
|
|
|
p.appendChild(volRow);
|
|
}
|
|
});
|
|
|
|
// ---- Sync Groups ----
|
|
var synced = {};
|
|
players.forEach(function (pl) {
|
|
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 masters = players.filter(function (pl) {
|
|
return pl.syncSlaves && pl.syncSlaves.length > 0;
|
|
});
|
|
|
|
if (masters.length > 0) {
|
|
p.appendChild(el('div', 'border-top:1px solid #333;margin:8px 0'));
|
|
p.appendChild(el('div',
|
|
'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:8px',
|
|
'Sync Groups'));
|
|
|
|
masters.forEach(function (master) {
|
|
var slaveNames = master.syncSlaves.map(function (mac) {
|
|
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');
|
|
grow.appendChild(el('span',
|
|
'flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px',
|
|
label));
|
|
|
|
var dissolveBtn = el('button',
|
|
'background:none;border:1px solid #555;border-radius:3px;color:#f88;' +
|
|
'padding:2px 7px;cursor:pointer;font-size:12px;flex-shrink:0',
|
|
'Unsync');
|
|
dissolveBtn.addEventListener('click', function () {
|
|
api('/SyncGroups/' + master.macAddress, { method: 'DELETE' })
|
|
.then(function () { refresh(p); });
|
|
});
|
|
grow.appendChild(dissolveBtn);
|
|
p.appendChild(grow);
|
|
});
|
|
}
|
|
|
|
// ---- Create Sync Group ----
|
|
var unsynced = players.filter(function (pl) { return !synced[pl.macAddress]; });
|
|
|
|
if (unsynced.length >= 2) {
|
|
p.appendChild(el('div', 'border-top:1px solid #333;margin:8px 0'));
|
|
p.appendChild(el('div',
|
|
'font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-bottom:8px',
|
|
'Create Sync Group'));
|
|
|
|
var checkboxes = [];
|
|
unsynced.forEach(function (pl) {
|
|
var crow = el('div', 'display:flex;align-items:center;gap:8px;margin-bottom:6px');
|
|
var cb = document.createElement('input');
|
|
cb.type = 'checkbox';
|
|
cb.style.accentColor = '#00a4dc';
|
|
cb.dataset.mac = pl.macAddress;
|
|
checkboxes.push(cb);
|
|
crow.appendChild(cb);
|
|
crow.appendChild(el('span', 'flex:1', pl.name || pl.macAddress));
|
|
p.appendChild(crow);
|
|
});
|
|
|
|
var syncBtn = el('button',
|
|
'margin-top:6px;width:100%;background:#00a4dc;border:none;border-radius:3px;' +
|
|
'color:#fff;padding:5px 0;cursor:pointer;font-size:13px',
|
|
'Sync Selected');
|
|
syncBtn.addEventListener('click', function () {
|
|
var selected = checkboxes.filter(function (cb) { return cb.checked; });
|
|
if (selected.length < 2) { return; }
|
|
var macs = selected.map(function (cb) { return cb.dataset.mac; });
|
|
api('/SyncGroups', {
|
|
method: 'POST',
|
|
body: { masterMac: macs[0], slaveMacs: macs.slice(1) }
|
|
}).then(function () { refresh(p); });
|
|
});
|
|
p.appendChild(syncBtn);
|
|
}
|
|
}
|
|
|
|
function refresh(p) {
|
|
p.innerHTML = '<div style="color:#888;padding:8px">Loading…</div>';
|
|
api('/Players')
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (players) { renderPlayers(p, players); })
|
|
.catch(function () { renderError(p, 'Failed to load players.'); });
|
|
}
|
|
|
|
function togglePanel(btn) {
|
|
if (panel) {
|
|
panel.remove();
|
|
panel = null;
|
|
return;
|
|
}
|
|
|
|
panel = createPanel(btn);
|
|
document.body.appendChild(panel);
|
|
refresh(panel);
|
|
}
|
|
|
|
function closePanel() {
|
|
if (panel) {
|
|
panel.remove();
|
|
panel = null;
|
|
}
|
|
}
|
|
|
|
// ---------- header button ----------
|
|
|
|
function addButton(headerRight) {
|
|
if (headerRight.querySelector('.headerLmsRemoteButton')) {
|
|
return;
|
|
}
|
|
|
|
var btn = document.createElement('button');
|
|
btn.setAttribute('is', 'paper-icon-button-light');
|
|
btn.setAttribute('type', 'button');
|
|
btn.className = 'headerLmsRemoteButton headerButton headerButtonRight paper-icon-button-light';
|
|
btn.title = 'Multi-room Remote';
|
|
btn.innerHTML = '<span class="material-icons speaker_group" aria-hidden="true"></span>';
|
|
btn.addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
togglePanel(btn);
|
|
});
|
|
|
|
var castButton = headerRight.querySelector('.headerCastButton');
|
|
if (castButton) {
|
|
headerRight.insertBefore(btn, castButton);
|
|
} else {
|
|
headerRight.appendChild(btn);
|
|
}
|
|
}
|
|
|
|
function tryInject() {
|
|
if (!hasAccess) { return; }
|
|
var headerRight = document.querySelector('.headerRight');
|
|
if (headerRight) { addButton(headerRight); }
|
|
}
|
|
|
|
// ---------- bootstrap ----------
|
|
|
|
function init() {
|
|
checkAccess().then(function (ok) {
|
|
hasAccess = ok;
|
|
if (!ok) { return; }
|
|
|
|
tryInject();
|
|
|
|
var observer = new MutationObserver(function () {
|
|
if (panel && !document.body.contains(panel)) { panel = null; }
|
|
tryInject();
|
|
});
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
|
|
document.addEventListener('click', function (e) {
|
|
if (panel && !panel.contains(e.target)) { closePanel(); }
|
|
});
|
|
});
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|