Implement auto refresh and activate button

src/components/quickconnectsettings/quickconnectsettings.js

@@ -1,11 +1,10 @@
-define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'homeSections', 'dom', 'events', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager, homeSections, dom, events) {
+define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager) {
     "use strict";
 
     function authorizeRequest(event) {
         var lookup = event.data.lookup;
-        var apiClient = event.data.apiClient;
         var url = ApiClient.getUrl("/QuickConnect/Authorize");
-        apiClient.ajax({
+        ApiClient.ajax({
             type: "POST",
             url: url,
             data: {
@@ -14,45 +13,71 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
         }, true);
     }
 
-    function list(apiClient) {
+    QuickConnectSettings.prototype.list = function(argPage) {
-        console.debug("getting json");
+        ApiClient.getJSON("/QuickConnect/List").then(json => {
-        apiClient.getJSON("/QuickConnect/List").then(json => {
+            var elem = $(argPage.querySelector("#quickConnectIncoming"));
-            var elem = $("#quickConnectIncoming");
             elem.html("");
-            console.debug("raw json", json, "length is", json.length);
+            for (var i = 0; i < json.length; i++) {
-            for(var i = 0; i < json.length; i++) {
                 var current = json[i];
-                console.debug("current is", current);
                 var html = "<li>" + current.Code + " - " + current.FriendlyName + " - ";
 
-                if(!current.Authenticated) {
+                if (!current.Authenticated) {
                     html += "<a href=\"#\" id=\"qc" + current.Lookup + "\">authorize</a>";
-                }
+                } else {
-                else {
                     html += " (already authorized)";
                 }
 
                 html += "</li>";
                 elem.append(html);
-                $("#qc" + current.Lookup).click({ lookup: current.Lookup, apiClient: apiClient}, authorizeRequest);
+                $("#qc" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest);
             }
+
+            return true;
+        }).catch((e) => {
+            console.error("Unable to get quick connect login requests. error:", e);
         });
+    };
+
+    QuickConnectSettings.prototype.activate = function() {
+        var url = ApiClient.getUrl("/QuickConnect/Activate");
+        ApiClient.ajax({
+            type: "POST",
+            url: url,
+            contentType: "application/json",
+            dataType: "json"
+        }).then((json) => {
+            let message = json.Error;
+
+            console.log("message is \"" + message + "\"");
+            if (message && message !== "") {
+                console.error("Error activating quick connect. Error: ", json.Error);
+
+                Dashboard.alert({
+                    title: "Unable to activate quick connect",
+                    message: message
+                });
+
+                return false;
             }
 
+            Dashboard.alert({
+                message: "Already active"
+            });
+
+            return true;
+        }).catch((e) => {
+            console.error("Error activating quick connect. Error:", e);
+            throw e;
+        });
+    };
+
     function QuickConnectSettings(options) {
         this.options = options;
     }
 
     QuickConnectSettings.prototype.loadData = function () {
-        loading.show();
+        this.options.interval = setInterval(this.list, 5000, this.options.page);
-
+        this.list(this.options.page);
-        var apiClient = connectionManager.getApiClient(this.options.serverId);
-        
-        list(apiClient);
-        
-        console.debug("request list finished");
-        
-        loading.hide();
     };
 
     QuickConnectSettings.prototype.submit = function () {
@@ -60,8 +85,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
     };
 
     QuickConnectSettings.prototype.destroy = function () {
+        console.debug("clearing refresh interval", this.options.interval);
+        clearInterval(this.options.interval);
         this.options = null;
     };
 
+    QuickConnectSettings.prototype.interval = function (interval) {
+        this.options.interval = interval;
+    };
+
     return QuickConnectSettings;
 });

src/controllers/auth/login.js

@@ -152,7 +152,7 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
 
         function loginQuickConnect() {
             var apiClient = getApiClient();
-            var friendlyName = "test";
+            var friendlyName = navigator.userAgent; // TODO: what should this be changed to?
 
             var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName);
             apiClient.getJSON(url)
@@ -162,7 +162,8 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
                             message: json.Error,
                             title: "Error"
                         });
-                    return;
+
+                        return false;
                     }
 
                     Dashboard.alert({
@@ -172,30 +173,32 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
 
                     loading.show();
 
-                var interval = setInterval(() => {
+                    var interval = setInterval(async function() {
-                    var url = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
+                        let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
-                    apiClient.getJSON(url)
+                        let data = await apiClient.getJSON(connectUrl);
-                    .then(data => {
+                        if (data.Authenticated) {
-                        if(data.Authenticated) {
+                            let result = await apiClient.quickConnect(data.Authentication);
-                            apiClient.quickConnect(data.Authentication).then((result) => {
                             var user = result.User;
                             var serverId = getParameterByName("serverid");
-                                var newUrl;
+                            var newUrl = "home.html";
 
                             if (user.Policy.IsAdministrator && !serverId) {
                                 newUrl = "dashboard.html";
-                                } else {
-                                    newUrl = "home.html";
                             }
 
                             loading.hide();
                             Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
                             Dashboard.navigate(newUrl);
                             clearInterval(interval);
-                            });
+
+                            return true;
                         }
-                    });
+                        return false;
                     }, 5000);
+
+                    return true;
+                }).catch((e) => {
+                    console.error("Unable to initiate quick connect login request. Error:", e);
                 });
         }
 
@@ -240,7 +243,7 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
         view.querySelector(".btnSelectServer").addEventListener("click", function () {
             Dashboard.selectServer();
         });
-        view.addEventListener("viewshow", function (e) {
+        view.addEventListener("viewshow", function () {
             loading.show();
 
             if (!appHost.supports('multiserver')) {

src/controllers/quickconnect.js

@@ -1,9 +1,8 @@
-define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading, libraryMenu) {
+define(["jQuery", "loading", "fnchecked"], function ($, loading) {
     "use strict";
 
+    var page;
     function loadPage(page, status) {
-        console.debug("status is \"" + status + "\"");
-
         var active = (status == "Active");
         var available = (status == "Available") || active;
 
@@ -17,43 +16,52 @@ define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading,
     function onSubmit() {
         loading.show();
 
-        var available = $("#chkQuickConnectAvailable").is(":checked") ? "Available" : "Unavailable";
+        var newStatus = page.querySelector("#chkQuickConnectAvailable").checked ? "Available" : "Unavailable";
+        if (newStatus && page.querySelector("#chkQuickConnectActive").checked) {
+            newStatus = "Active";
+        }
+
         var url = ApiClient.getUrl("/QuickConnect/Available");
 
         ApiClient.ajax({
             type: "POST",
             data: {
-                "Status": available
+                "Status": newStatus
             },
             url: url
         }, true).then(() => {
-            if($("#chkQuickConnectActive").is(":checked")) {
-                url = ApiClient.getUrl("/QuickConnect/Activate");
-                ApiClient.ajax({
-                    type: "POST",
-                    url: url
-                }, true);
-            }
-            
             Dashboard.alert({
                 message: "Settings saved",
                 title: "Saved"
             });
+
+            setTimeout(updatePage, 500);
+
+            return true;
+        }).catch((e) => {
+            console.error("Unable to set quick connect status. error:", e);
         });
 
         loading.hide();
         return false;
     }
 
-    $(document).on("pageinit", "#quickConnectPage", function () {
+    function updatePage() {
-        document.querySelector("#quickConnectPage").onsubmit = onSubmit;
-        document.querySelector("#btnQuickConnectSubmit").onclick = onSubmit;
-    }).on("pageshow", "#quickConnectPage", function () {
-        loading.show();
-        var page = this;
         var promise1 = ApiClient.getQuickConnect("Status");
-        Promise.all([promise1]).then(function (responses) {
+        Promise.all([promise1]).then((responses) => {
             loadPage(page, responses[0]);
+            return true;
+        }).catch((e) => {
+            console.error("Unable to get quick connect status. error:", e);
         });
+    }
+
+    $(document).on("pageshow", "#quickConnectPage", function () {
+        loading.show();
+        page = this;
+
+        page.querySelector("#btnQuickConnectSubmit").onclick = onSubmit;
+
+        updatePage();
     });
 });

src/controllers/user/quickconnect.js

@@ -1,50 +1,55 @@
 define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (QuickConnectSettings, dom, globalize, loading, userSettings, autoFocuser) {
     "use strict";
 
-    return function (view, params) {
+    return function (view) {
-        function notImplemented() {
-            Dashboard.alert({
-                message: "This button is not implemented yet, you must check the checkbox labeled \"Always accept quick connect login requests\" in the dashboard",
-                title: "Not implemented"
-            });
-        }
-        
         var quickConnectSettingsInstance = null;
-        var hasChanges;
+
-        var userId = params.userId || ApiClient.getCurrentUserId();
-        var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new userSettings();
         view.addEventListener("viewshow", function () {
-            console.debug("defining instance");
-            
-            $("#btnQuickConnectActivate").click(notImplemented);
-            
             quickConnectSettingsInstance = new QuickConnectSettings({
-                serverId: ApiClient.serverId(),
+                page: view,
-                userId: userId,
+                interval: 0
-                element: view.querySelector(".quickConnectSettingsContainer"),
+            });
-                userSettings: currentSettings,
+
-                enableSaveButton: false,
+            view.querySelector("#btnQuickConnectActivate").addEventListener("click", () => {
-                enableSaveConfirmation: false,
+                quickConnectSettingsInstance.activate(quickConnectSettingsInstance);
-                autoFocus: autoFocuser.isEnabled()
             });
 
             quickConnectSettingsInstance.loadData();
+
+            ApiClient.getQuickConnect("Status").then((status) => {
+                let btn = view.querySelector("#btnQuickConnectActivate");
+
+                if (status === "Unavailable") {
+                    btn.textContent = "Quick connect is not available on this server";
+                    btn.disabled = true;
+                    return false;
+                }
+
+                else if (status === "Available") {
+                    return false;
+                }
+
+                btn.style.display = "none";
+                return true;
+            }).catch((e) => {
+                throw e;
             });
-        view.addEventListener("change", function () {
-            hasChanges = true;
         });
         view.addEventListener("viewbeforehide", function () {
-            hasChanges = false;
-
             if (quickConnectSettingsInstance) {
                 quickConnectSettingsInstance.submit();
             }
+            onDestroy();
         });
         view.addEventListener("viewdestroy", function () {
+            onDestroy();
+        });
+
+        function onDestroy() {
             if (quickConnectSettingsInstance) {
                 quickConnectSettingsInstance.destroy();
                 quickConnectSettingsInstance = null;
             }
-        });
+        }
     };
 });

src/mypreferencesmenu.html

@@ -51,7 +51,7 @@
 
                 <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkQuickConnectPreferences listItem-border">
                     <div class="listItem">
-                        <i class="material-icons listItemIcon listItemIcon-transparent"></i>
+                        <em class="material-icons listItemIcon listItemIcon-transparent"></em>
                         <div class="listItemBody">
                             <div class="listItemBodyText">Quick Connect</div>
                         </div>