diff --git a/Jellyfin.Plugin.JellyLMS/Web/remote-button.js b/Jellyfin.Plugin.JellyLMS/Web/remote-button.js index b48fe45..20b8350 100644 --- a/Jellyfin.Plugin.JellyLMS/Web/remote-button.js +++ b/Jellyfin.Plugin.JellyLMS/Web/remote-button.js @@ -1,4 +1,6 @@ (function () { + var hasAccess = false; + function getAuthToken() { try { var creds = JSON.parse(localStorage.getItem('jellyfin_credentials')); @@ -9,36 +11,63 @@ } } - function addButton() { - if (document.getElementById('jellylms-remote-btn')) { + function checkAccess() { + var token = getAuthToken(); + if (!token) { + return Promise.resolve(false); + } + + return fetch('/JellyLms/RemoteControl/Access', { headers: { 'X-Emby-Token': token } }) + .then(function (resp) { return resp.ok; }) + .catch(function () { return false; }); + } + + function addButton(headerRight) { + if (headerRight.querySelector('.headerLmsRemoteButton')) { return; } - var btn = document.createElement('a'); - btn.id = 'jellylms-remote-btn'; - btn.href = '/JellyLms/RemoteControl'; + 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.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); + btn.innerHTML = ''; + btn.addEventListener('click', function () { + window.location.href = '/JellyLms/RemoteControl'; + }); + + 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); + } } 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(tryInject); + observer.observe(document.body, { childList: true, subtree: true }); + }); } if (document.readyState === 'loading') {