Improve UI

src/components/quickconnectsettings/quickconnectsettings.js

@@ -11,25 +11,45 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 "Lookup": lookup
             }
         }, true);
+
+        require(["toast"], function (toast) {
+            toast("Request authorized");
+        });
+
+        // prevent bubbling
+        return false;
     }
 
     QuickConnectSettings.prototype.list = function(argPage) {
         ApiClient.getJSON("/QuickConnect/List").then(json => {
+            let found = false;
             var elem = $(argPage.querySelector("#quickConnectIncoming"));
-            elem.html("");
+            elem.text("No pending login requests");
-            for (var i = 0; i < json.length; i++) {
-                var current = json[i];
-                var html = "<li>" + current.Code + " - " + current.FriendlyName + " - ";
 
-                if (!current.Authenticated) {
+            for (var i = 0; i < json.length; i++) {
-                    html += "<a href=\"#\" id=\"qc" + current.Lookup + "\">authorize</a>";
+                if (!found) {
-                } else {
+                    elem.html("");
-                    html += " (already authorized)";
+                    found = true;
                 }
 
-                html += "</li>";
+                var current = json[i];
+
+                let html = '<div class="listItem listItem-border" id="div' + current.Lookup + '"><div class="listItemBody three-line">';
+                html += '<div class="listItemBodyText"><code style="font-size:large">' + current.Code + '</code></div>';
+                html += '<div class="listItemBodyText secondary">' + current.FriendlyName + '</div>';
+                html += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
+
+                if (!current.Authenticated) {
+                    html += '<a style="color:rgb(15,150,255)" href="#" id="qc' + current.Lookup + '">authorize</a>';
+                } else {
+                    html += " (authorized)";
+                }
+
+                html += '</div></div></div>';
                 elem.append(html);
+
                 $("#qc" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest);
+                $("#div" + current.Lookup).click({ lookup: current.Lookup }, authorizeRequest);
             }
 
             return true;
@@ -60,8 +80,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
                 return false;
             }
 
-            Dashboard.alert({
+            require(["toast"], function (toast) {
-                message: "Successfully activated"
+                toast("Successfully activated");
             });
 
             return true;

src/controllers/auth/login.js

@@ -152,7 +152,7 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
 
         function loginQuickConnect() {
             var apiClient = getApiClient();
-            var friendlyName = navigator.userAgent; // TODO: what should this be changed to?
+            var friendlyName = navigator.userAgent;
 
             var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName);
             apiClient.getJSON(url)
@@ -174,25 +174,37 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
                     loading.show();
 
                     var interval = setInterval(async function() {
-                        let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
+                        try {
-                        let data = await apiClient.getJSON(connectUrl);
+                            let connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
-                        if (data.Authenticated) {
+                            let data = await apiClient.getJSON(connectUrl);
-                            let result = await apiClient.quickConnect(data.Authentication);
+                            if (data.Authenticated) {
-                            var user = result.User;
+                                let result = await apiClient.quickConnect(data.Authentication);
-                            var serverId = getParameterByName("serverid");
+                                var user = result.User;
-                            var newUrl = "home.html";
+                                var serverId = getParameterByName("serverid");
+                                var newUrl = "home.html";
 
-                            if (user.Policy.IsAdministrator && !serverId) {
+                                if (user.Policy.IsAdministrator && !serverId) {
-                                newUrl = "dashboard.html";
+                                    newUrl = "dashboard.html";
+                                }
+
+                                loading.hide();
+                                Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
+                                Dashboard.navigate(newUrl);
+                                clearInterval(interval);
+
+                                return true;
                             }
+                        } catch (e) {
+                            Dashboard.alert({
+                                message: "Quick connect was deactivated before the login request could be approved",
+                                title: "Unexpected error"
+                            });
 
-                            loading.hide();
+                            console.error("Unable to login with quick connect", e);
-                            Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
-                            Dashboard.navigate(newUrl);
                             clearInterval(interval);
-
+                            loading.hide();
-                            return true;
                         }
+
                         return false;
                     }, 5000);
 

src/controllers/quickconnect.js

@@ -3,12 +3,10 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) {
 
     var page;
     function loadPage(status) {
-        var active = (status == "Active");
+        var available = status === "Available" || status === "Active";
-        var available = (status == "Available") || active;
 
         page.querySelector("#quickConnectStatus").textContent = status.toLocaleLowerCase();
         page.querySelector("#chkQuickConnectAvailable").checked = available;
-        page.querySelector("#chkQuickConnectActive").checked = active;
 
         loading.hide();
     }
@@ -17,9 +15,6 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) {
         loading.show();
 
         var newStatus = page.querySelector("#chkQuickConnectAvailable").checked ? "Available" : "Unavailable";
-        if (newStatus && page.querySelector("#chkQuickConnectActive").checked) {
-            newStatus = "Active";
-        }
 
         var url = ApiClient.getUrl("/QuickConnect/Available");
 
@@ -30,9 +25,8 @@ define(["jQuery", "loading", "fnchecked"], function ($, loading) {
             },
             url: url
         }, true).then(() => {
-            Dashboard.alert({
+            require(["toast"], function (toast) {
-                message: "Settings saved",
+                toast("Settings saved");
-                title: "Saved"
             });
 
             setTimeout(updatePage, 500);

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">
-                        <em class="material-icons listItemIcon listItemIcon-transparent"></em>
+                        <em class="material-icons listItemIcon listItemIcon-transparent">tap_and_play</em>
                         <div class="listItemBody">
                             <div class="listItemBodyText">Quick Connect</div>
                         </div>

src/mypreferencesquickconnect.html

@@ -3,10 +3,9 @@
         <span>Activate</span>
     </button>
 
-    Incoming login requests:
     <div class="quickConnectSettingsContainer padded-left padded-right padded-bottom-page">
-        <ul id="quickConnectIncoming">
+        <div id="quickConnectIncoming" class="paperList">
-            <li>Failed to load incoming requests</li>
+            <div>Failed to load incoming requests</div>
         </ul>
     </div>
 </div>

src/quickconnect.html

@@ -14,11 +14,6 @@
                     <input type="checkbox" is="emby-checkbox" id="chkQuickConnectAvailable" />
                     <span>Enable quick connect on this server</span>
                 </label>
-                <label>
-                    <input type="checkbox" is="emby-checkbox" id="chkQuickConnectActive" />
-                    <span>Make quick connect always active (always accept login requests)</span>
-                </label>
-                <div class="fieldDescription checkboxFieldDescription">If unchecked, users will have to click the Activate button in their profile before initiating a quick connect login.</div>
             </div>
 
             <button is="emby-button" id="btnQuickConnectSubmit" type="submit" class="raised button-submit block">

src/scripts/librarymenu.js

@@ -354,7 +354,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
             name: "Quick Connect",
             href: "quickconnect.html",
             pageIds: ["quickConnectPage", "quickConnectPage"],
-            icon: "devices"
+            icon: "tap_and_play"
         });
         links.push({
             name: globalize.translate("HeaderActivity"),