Button in menu bar

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() {
+    function checkAccess() {
-        if (document.getElementById('jellylms-remote-btn')) {
+        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');
+        var btn = document.createElement('button');
-        btn.id = 'jellylms-remote-btn';
+        btn.setAttribute('is', 'paper-icon-button-light');
-        btn.href = '/JellyLms/RemoteControl';
+        btn.setAttribute('type', 'button');
+        btn.className = 'headerLmsRemoteButton headerButton headerButtonRight paper-icon-button-light';
         btn.title = 'Multi-room Remote';
-        btn.textContent = '🔊';
+        btn.innerHTML = '<span class="material-icons speaker_group" aria-hidden="true"></span>';
-        btn.style.cssText = 'position:fixed;bottom:20px;right:20px;width:48px;height:48px;' +
+        btn.addEventListener('click', function () {
-            'border-radius:50%;background:#00a4dc;color:#fff;display:flex;' +
+            window.location.href = '/JellyLms/RemoteControl';
-            '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);
+        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();
+        checkAccess().then(function (ok) {
-        if (!token) {
+            hasAccess = ok;
+            if (!ok) {
                 return;
             }
 
-        fetch('/JellyLms/RemoteControl/Access', { headers: { 'X-Emby-Token': token } })
+            tryInject();
-            .then(function (resp) {
+
-                if (resp.ok) {
+            var observer = new MutationObserver(tryInject);
-                    addButton();
+            observer.observe(document.body, { childList: true, subtree: true });
-                }
+        });
-            })
-            .catch(function () {});
     }
 
     if (document.readyState === 'loading') {