milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #2155 from thornbill/quickconnect-enhancements

Browse source 
Improve QuickConnect ux
This commit is contained in:
Joshua M. Boniface 2020-12-04 20:27:24 -05:00 • committed by GitHub
commit c383c8075a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 92 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/dialog/dialog.js
View file

@ -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;

9
src/components/dialogHelper/dialogHelper.js
View file

@ -360,14 +360,17 @@ import '../../assets/css/scrollstyles.css';
});
}
export function createDialog(options) {
options = options || {};
export function createDialog(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');

42
src/components/quickConnectSettings/quickConnectSettings.js
View file

@ -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;

4
src/controllers/session/login/index.html
View file

@ -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>

34
src/controllers/session/login/index.js
View file

@ -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({
message: globalize.translate('QuickConnectAuthorizeCode', json.Code),
title: globalize.translate('QuickConnect')
baseAlert({
dialogOptions: {
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();

2
src/controllers/user/menu/index.html
View file

@ -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">

10
src/controllers/user/menu/index.js
View file

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

36
src/controllers/user/quickConnect/helper.js Normal file
View file

@ -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;
});
};

10
src/controllers/user/quickConnect/index.js
View file

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