Merge pull request #2155 from thornbill/quickconnect-enhancements

Improve QuickConnect ux

src/controllers/user/menu/index.html

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

src/controllers/user/menu/index.js

@@ -35,6 +35,16 @@ export default function (view, params) {
         const supportsMultiServer = appHost.supports('multiserver');
         page.querySelector('.selectServer').classList.toggle('hide', !supportsMultiServer);
 
+        ApiClient.getQuickConnect('Status')
+            .then(status => {
+                if (status !== 'Unavailable') {
+                    page.querySelector('.lnkQuickConnectPreferences').classList.remove('hide');
+                }
+            })
+            .catch(() => {
+                console.debug('Failed to get QuickConnect status');
+            });
+
         ApiClient.getUser(userId).then(function (user) {
             page.querySelector('.headerUsername').innerHTML = user.Name;
             if (user.Policy.IsAdministrator && !layoutManager.tv) {

src/controllers/user/quickConnect/helper.js

@@ -0,0 +1,36 @@
+import globalize from '../../../scripts/globalize';
+import toast from '../../../components/toast/toast';
+import Dashboard from '../../../scripts/clientUtils';
+
+export const authorize = (code) => {
+    const url = ApiClient.getUrl('/QuickConnect/Authorize?Code=' + code);
+    ApiClient.ajax({
+        type: 'POST',
+        url: url
+    }, true).then(() => {
+        toast(globalize.translate('QuickConnectAuthorizeSuccess'));
+    }).catch(() => {
+        toast(globalize.translate('QuickConnectAuthorizeFail'));
+    });
+
+    // prevent bubbling
+    return false;
+};
+
+export const activate = () => {
+    const url = ApiClient.getUrl('/QuickConnect/Activate');
+    return ApiClient.ajax({
+        type: 'POST',
+        url: url
+    }).then(() => {
+        toast(globalize.translate('QuickConnectActivationSuccessful'));
+        return true;
+    }).catch((e) => {
+        console.error('Error activating quick connect. Error:', e);
+        Dashboard.alert({
+            title: globalize.translate('HeaderError'),
+            message: globalize.translate('DefaultErrorMessage')
+        });
+        throw e;
+    });
+};

src/controllers/user/quickConnect/index.js

@@ -1,17 +1,13 @@
-import QuickConnectSettings from '../../../components/quickConnectSettings/quickConnectSettings';
+import { activate, authorize } from './helper';
 import globalize from '../../../scripts/globalize';
 import toast from '../../../components/toast/toast';
 
 export default function (view) {
-    let quickConnectSettingsInstance = null;
-
     view.addEventListener('viewshow', function () {
         const codeElement = view.querySelector('#txtQuickConnectCode');
 
-        quickConnectSettingsInstance = new QuickConnectSettings();
-
         view.querySelector('#btnQuickConnectActivate').addEventListener('click', () => {
-            quickConnectSettingsInstance.activate(quickConnectSettingsInstance).then(() => {
+            activate().then(() => {
                 renderPage();
             });
         });
@@ -24,7 +20,7 @@ export default function (view) {
             }
 
             const code = codeElement.value;
-            quickConnectSettingsInstance.authorize(code);
+            authorize(code);
         });
 
         view.querySelector('.quickConnectSettingsContainer').addEventListener('submit', (e) => {