Merge pull request #2155 from thornbill/quickconnect-enhancements

Improve QuickConnect ux

src/components/dialog/dialog.js

@@ -13,10 +13,11 @@ import template from './dialog.template.html';
 
 /* eslint-disable indent */
 
-    function showDialog(options) {
+    function showDialog(options = { dialogOptions: {}, buttons: [] }) {
         const dialogOptions = {
             removeOnClose: true,
-            scrollY: false
+            scrollY: false,
+            ...options.dialogOptions
         };
 
         const enableTvLayout = layoutManager.tv;

src/components/dialogHelper/dialogHelper.js

@@ -360,14 +360,17 @@ import '../../assets/css/scrollstyles.css';
         });
     }
 
-    export function createDialog(options) {
+    export function createDialog(options = {}) {
-        options = options || {};
-
         // If there's no native dialog support, use a plain div
         // Also not working well in samsung tizen browser, content inside not clickable
         // Just go ahead and always use a plain div because we're seeing issues overlaying absoltutely positioned content over a modal dialog
         const dlg = document.createElement('div');
 
+        // Add an id so we can access the dialog element
+        if (options.id) {
+            dlg.id = options.id;
+        }
+
         dlg.classList.add('focuscontainer');
         dlg.classList.add('hide');
 

src/components/quickConnectSettings/quickConnectSettings.js

@@ -1,42 +0,0 @@
-import globalize from '../../scripts/globalize';
-import toast from '../toast/toast';
-import Dashboard from '../../scripts/clientUtils';
-
-export class QuickConnectSettings {
-    constructor() { }
-
-    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;
-    }
-
-    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;
-        });
-    }
-}
-
-export default QuickConnectSettings;

src/controllers/session/login/index.html

@@ -37,8 +37,8 @@
             <button is="emby-button" type="button" class="raised cancel block btnManual">
                 <span>${ButtonManualLogin}</span>
             </button>
-			
+
-            <button is="emby-button" type="button" class="raised cancel block btnQuick">
+            <button is="emby-button" type="button" class="raised cancel block btnQuick hide">
                 <span>${ButtonUseQuickConnect}</span>
             </button>
 

src/controllers/session/login/index.js

@@ -11,6 +11,8 @@ import '../../../elements/emby-checkbox/emby-checkbox';
 import Dashboard from '../../../scripts/clientUtils';
 import ServerConnections from '../../../components/ServerConnections';
 import toast from '../../../components/toast/toast';
+import dialogHelper from '../../../components/dialogHelper/dialogHelper';
+import baseAlert from '../../../components/alert';
 
 /* eslint-disable indent */
 
@@ -49,9 +51,12 @@ import toast from '../../../components/toast/toast';
                 return false;
             }
 
-            Dashboard.alert({
+            baseAlert({
-                message: globalize.translate('QuickConnectAuthorizeCode', json.Code),
+                dialogOptions: {
-                title: globalize.translate('QuickConnect')
+                    id: 'quickConnectAlert'
+                },
+                title: globalize.translate('QuickConnect'),
+                text: globalize.translate('QuickConnectAuthorizeCode', json.Code)
             });
 
             const connectUrl = apiClient.getUrl('/QuickConnect/Connect?Secret=' + json.Secret);
@@ -64,11 +69,23 @@ import toast from '../../../components/toast/toast';
 
                     clearInterval(interval);
 
+                    // Close the QuickConnect dialog
+                    const dlg = document.getElementById('quickConnectAlert');
+                    if (dlg) {
+                        dialogHelper.close(dlg);
+                    }
+
                     const result = await apiClient.quickConnect(data.Authentication);
                     onLoginSuccessful(result.User.Id, result.AccessToken, apiClient);
                 }, function (e) {
                     clearInterval(interval);
 
+                    // Close the QuickConnect dialog
+                    const dlg = document.getElementById('quickConnectAlert');
+                    if (dlg) {
+                        dialogHelper.close(dlg);
+                    }
+
                     Dashboard.alert({
                         message: globalize.translate('QuickConnectDeactivated'),
                         title: globalize.translate('HeaderError')
@@ -263,6 +280,17 @@ import toast from '../../../components/toast/toast';
             }
 
             const apiClient = getApiClient();
+
+            apiClient.getQuickConnect('Status')
+                .then(status => {
+                    if (status !== 'Unavailable') {
+                        view.querySelector('.btnQuick').classList.remove('hide');
+                    }
+                })
+                .catch(() => {
+                    console.debug('Failed to get QuickConnect status');
+                });
+
             apiClient.getPublicUsers().then(function (users) {
                 if (users.length) {
                     showVisualForm();

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) => {