Finish web UI

src/components/quickconnectsettings/quickconnectsettings.js

@@ -0,0 +1,65 @@
+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) {
+    "use strict";
+
+    function authorizeRequest(event) {
+        var lookup = event.data.lookup;
+        var apiClient = event.data.apiClient;
+        var url = ApiClient.getUrl("/QuickConnect/Authorize");
+        apiClient.ajax({
+            type: "POST",
+            url: url,
+            data: {
+                "Lookup": lookup
+            }
+        }, true);
+    }
+    
+    function list(apiClient) {
+        var elem = $("#quickConnectIncoming");
+        elem.html("");
+        apiClient.getJSON("/QuickConnect/List").then(json => {
+            console.debug("raw json", json);
+            for(var i = 0; i < json.length; i++) {
+                var current = json[i];
+                var html = "<li>" + current.Code + " - " + current.FriendlyName + " - ";
+                
+                if(!current.Authenticated) {
+                    html += "<a href=\"#\" id=\"qc" + current.Lookup + "\">authorize</a>";
+                }
+                else {
+                    html += " (already authorized)";
+                }
+                
+                html += "</li>";
+                elem.append(html);
+                $("#qc" + current.Lookup).click({ lookup: current.Lookup, apiClient: apiClient}, authorizeRequest);
+            }
+        });
+    }
+
+    function QuickConnectSettings(options) {
+        this.options = options;
+    }
+
+    QuickConnectSettings.prototype.loadData = function () {
+        loading.show();
+
+        var apiClient = connectionManager.getApiClient(this.options.serverId);
+        
+        list(apiClient);
+        
+        console.debug("request list finished");
+        
+        loading.hide();
+    };
+
+    QuickConnectSettings.prototype.submit = function () {
+        return false;
+    };
+
+    QuickConnectSettings.prototype.destroy = function () {
+        this.options = null;
+    };
+
+    return QuickConnectSettings;
+});

src/controllers/auth/login.js

@@ -152,10 +152,11 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
 
         function loginQuickConnect() {
             var apiClient = getApiClient();
-            var identifier = ""
-            var interval = 0;
             var friendlyName = "test";
-            $.get('/QuickConnect/Initiate?FriendlyName=' + friendlyName).then(json => {
+			
+			var url = apiClient.getUrl("/QuickConnect/Initiate?FriendlyName=" + friendlyName);
+			apiClient.getJSON(url)
+			.then(json => {
                 if (!json.Secret || !json.Code) {
                     Dashboard.alert({
                         message: json.Error,
@@ -171,11 +172,12 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
 
                 loading.show();
 
-                identifier = json.Secret;
+                var interval = setInterval(() => {
-                interval = setInterval(() => {
+					var url = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
-                    $.get('/QuickConnect/Connect?Secret=' + identifier).then(x => {
+                    apiClient.getJSON(url)
-                        if(x.Authenticated) {
+					.then(data => {
-                            apiClient.quickConnect(x.Authentication).then((result) => {
+                        if(data.Authenticated) {
+                            apiClient.quickConnect(data.Authentication).then((result) => {
                                 var user = result.User;
                                 var serverId = getParameterByName("serverid");
                                 var newUrl;

src/controllers/quickconnect.js

@@ -0,0 +1,57 @@
+define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading, libraryMenu) {
+    "use strict";
+
+    function loadPage(page, status) {
+        var active = (status == "Active");
+        var available = (status == "Available") || active;
+        
+        $("#quickConnectStatus").text(status.toLocaleLowerCase());
+        $("#chkQuickConnectAvailable").checked(available);
+        $("#chkQuickConnectActive").checked(active);
+        
+        loading.hide();
+    }
+
+    function onSubmit() {
+        loading.show();
+        
+        var available = $("#chkQuickConnectAvailable").is(":checked") ? "Available" : "Unavailable";
+        var url = ApiClient.getUrl("/QuickConnect/Available");
+        
+        ApiClient.ajax({
+            type: "POST",
+            data: {
+                "Status": available
+            },
+            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"
+            });
+        });
+        
+        loading.hide();
+        return false;
+    }
+
+    $(document).on("pageinit", "#quickConnectPage", function () {
+        $("#quickConnectPage").off("submit", onSubmit).on("submit", onSubmit);
+        $("#btnQuickConnectSubmit").click(onSubmit);
+    }).on("pageshow", "#quickConnectPage", function () {
+        loading.show();
+        var page = this;
+        var promise1 = ApiClient.getQuickConnect("Status");
+        Promise.all([promise1]).then(function (responses) {
+            loadPage(page, responses[0]);
+        });
+    });
+});

src/controllers/user/menu.js

@@ -24,6 +24,7 @@ define(["apphost", "connectionManager", "layoutManager", "listViewStyle", "emby-
             page.querySelector(".lnkHomePreferences").setAttribute("href", "mypreferenceshome.html?userId=" + userId);
             page.querySelector(".lnkPlaybackPreferences").setAttribute("href", "mypreferencesplayback.html?userId=" + userId);
             page.querySelector(".lnkSubtitlePreferences").setAttribute("href", "mypreferencessubtitles.html?userId=" + userId);
+			page.querySelector(".lnkQuickConnectPreferences").setAttribute("href", "mypreferencesquickconnect.html?userId=" + userId);
 
             if (window.NativeShell && window.NativeShell.AppHost.supports("clientsettings")) {
                 page.querySelector(".clientSettings").classList.remove("hide");

src/controllers/user/quickconnect.js

@@ -0,0 +1,41 @@
+define(["quickConnectSettings", "dom", "globalize", "loading", "userSettings", "autoFocuser", "listViewStyle"], function (QuickConnectSettings, dom, globalize, loading, userSettings, autoFocuser) {
+    "use strict";
+
+    return function (view, params) {
+        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");
+            
+            quickConnectSettingsInstance = new QuickConnectSettings({
+                serverId: ApiClient.serverId(),
+                userId: userId,
+                element: view.querySelector(".quickConnectSettingsContainer"),
+                userSettings: currentSettings,
+                enableSaveButton: false,
+                enableSaveConfirmation: false,
+                autoFocus: autoFocuser.isEnabled()
+            });
+            
+            quickConnectSettingsInstance.loadData();
+        });
+        view.addEventListener("change", function () {
+            hasChanges = true;
+        });
+        view.addEventListener("viewbeforehide", function () {
+            hasChanges = false;
+
+            if (quickConnectSettingsInstance) {
+                quickConnectSettingsInstance.submit();
+            }
+        });
+        view.addEventListener("viewdestroy", function () {
+            if (quickConnectSettingsInstance) {
+                quickConnectSettingsInstance.destroy();
+                quickConnectSettingsInstance = null;
+            }
+        });
+    };
+});

src/libraries/apiclient/apiclientcore.js

@@ -377,7 +377,10 @@ define(["events", "appStorage"], function(events, appStorage) {
                 instance.onAuthenticated ? instance.onAuthenticated(instance, result).then(afterOnAuthenticated) : afterOnAuthenticated()
             }, reject)
         })
-	}, ApiClient.prototype.ensureWebSocket = function() {
+    }, ApiClient.prototype.getQuickConnect = function(verb) {
+        var url = this.getUrl("/QuickConnect/" + verb);
+        return this.getJSON(url);
+    }, ApiClient.prototype.ensureWebSocket = function() {
         if (!this.isWebSocketOpenOrConnecting() && this.isWebSocketSupported()) try {
             this.openWebSocket()
         } catch (err) {

src/mypreferencesmenu.html

@@ -48,6 +48,16 @@
                     </div>
                 </a>
 
+
+                <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>
+                        <div class="listItemBody">
+                            <div class="listItemBodyText">Quick Connect</div>
+                        </div>
+                    </div>
+                </a>
+                
                 <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="clientSettings listItem-border">
                     <div class="listItem">
                         <i class="material-icons listItemIcon listItemIcon-transparent devices_other"></i>

src/mypreferencesquickconnect.html

@@ -0,0 +1,12 @@
+<div id="quickConnectPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderHome}" data-backbutton="true">
+    <button is="emby-button" id="btnQuickConnectActivate" type="button" class="raised button-submit block" disabled>
+        <span>Activate</span>
+    </button>
+    
+    Incoming login requests:
+    <div class="quickConnectSettingsContainer padded-left padded-right padded-bottom-page">
+        <ul id="quickConnectIncoming">
+			<li>Failed to load incoming requests</li>
+		</ul>
+    </div>
+</div>

src/quickconnect.html

@@ -0,0 +1,29 @@
+<div id="quickConnectPage" data-role="page" class="page type-interior advancedConfigurationPage">
+    <div>
+        <div class="content-primary">
+            <div class="verticalSection">
+                <div class="sectionTitleContainer flex align-items-center">
+                    <h2 class="sectionTitle">Quick Connect</h2>
+                </div>
+            </div>
+            
+            Quick connect is: <span id="quickConnectStatus">Failed to load status</span>
+            
+            <div class="checkboxList paperList" style="padding:.5em 1em;">
+                <label>
+                    <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>Always accept quick connect 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">
+                <span>${ButtonSave}</span>
+            </button>
+        </div>
+    </div>
+</div>

src/scripts/librarymenu.js

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

src/scripts/routes.js

@@ -72,6 +72,12 @@ define([
         transition: "fade",
         controller: "user/subtitles"
     });
+    defineRoute({
+        path: "/mypreferencesquickconnect.html",
+        autoFocus: false,
+        transition: "fade",
+        controller: "user/quickconnect"
+    });
 
     defineRoute({
         path: "/dashboard.html",
@@ -103,6 +109,12 @@ define([
         roles: "admin",
         controller: "device"
     });
+    defineRoute({
+        path: "/quickconnect.html",
+        autoFocus: false,
+        roles: "admin",
+        controller: "quickconnect"
+    });
     defineRoute({
         path: "/dlnaprofile.html",
         autoFocus: false,

src/scripts/site.js

@@ -829,6 +829,7 @@ var AppInfo = {};
         define("displaySettings", [componentsPath + "/displaysettings/displaysettings"], returnFirstDependency);
         define("playbackSettings", [componentsPath + "/playbacksettings/playbacksettings"], returnFirstDependency);
         define("homescreenSettings", [componentsPath + "/homescreensettings/homescreensettings"], returnFirstDependency);
+		define("quickConnectSettings", [componentsPath + "/quickconnectsettings/quickconnectsettings"], returnFirstDependency);
         define("playbackManager", [componentsPath + "/playback/playbackmanager"], getPlaybackManager);
         define("layoutManager", [componentsPath + "/layoutManager", "apphost"], getLayoutManager);
         define("homeSections", [componentsPath + "/homesections/homesections"], returnFirstDependency);