Update manifest.json for v1.0.6

Jellyfin.Plugin.JellyLMS/Web/remote-button.js

@@ -1,4 +1,7 @@
 (function () {
+    var hasAccess = false;
+    var panel = null;
+
     function getAuthToken() {
         try {
             var creds = JSON.parse(localStorage.getItem('jellyfin_credentials'));
@@ -9,36 +12,293 @@
         }
     }
 
-    function addButton() {
-        if (document.getElementById('jellylms-remote-btn')) {
+    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;
         }
 
-        var btn = document.createElement('a');
-        btn.id = 'jellylms-remote-btn';
-        btn.href = '/JellyLms/RemoteControl';
-        btn.title = 'Multi-room Remote';
-        btn.textContent = '🔊';
-        btn.style.cssText = 'position:fixed;bottom:20px;right:20px;width:48px;height:48px;' +
-            'border-radius:50%;background:#00a4dc;color:#fff;display:flex;' +
-            'align-items:center;justify-content:center;font-size:22px;' +
-            'text-decoration:none;z-index:99999;box-shadow:0 2px 8px rgba(0,0,0,0.5);';
-        document.body.appendChild(btn);
+        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() {
-        var token = getAuthToken();
-        if (!token) {
-            return;
-        }
+        checkAccess().then(function (ok) {
+            hasAccess = ok;
+            if (!ok) { return; }
 
-        fetch('/JellyLms/RemoteControl/Access', { headers: { 'X-Emby-Token': token } })
-            .then(function (resp) {
-                if (resp.ok) {
-                    addButton();
-                }
-            })
-            .catch(function () {});
+            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') {

manifest.json

@@ -7,6 +7,38 @@
     "owner": "dtourolle",
     "category": "Music",
     "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",
+        "changelog": "Release 1.0.4",
+        "targetAbi": "10.10.0.0",
+        "sourceUrl": "https://gitea.tourolle.paris/dtourolle/jellyLMS/releases/download/v1.0.4/jellylms_1.0.4.0.zip",
+        "checksum": "6db64bf2ad625c735aff5178e0b53894",
+        "timestamp": "2026-06-17T18:44:44Z"
+      },
+      {
+        "version": "1.0.3",
+        "changelog": "Release 1.0.3",
+        "targetAbi": "10.10.0.0",
+        "sourceUrl": "https://gitea.tourolle.paris/dtourolle/jellyLMS/releases/download/v1.0.3/jellylms_1.0.3.0.zip",
+        "checksum": "c6fa1b9f303babb9664e35cca1180985",
+        "timestamp": "2026-06-14T15:48:18Z"
+      },
       {
         "version": "1.0.2",
         "changelog": "Release 1.0.2",