Show spinner in controlbox when reconnecting
This commit is contained in:
parent
35b2c247f3
commit
f93b30f7b3
@ -120,7 +120,7 @@ export const api = _converse.api = {
|
|||||||
/**
|
/**
|
||||||
* Terminates the connection.
|
* Terminates the connection.
|
||||||
*
|
*
|
||||||
* @method _converse.api.connection.disconnectkjjjkk
|
* @method _converse.api.connection.disconnect
|
||||||
* @memberOf _converse.api.connection
|
* @memberOf _converse.api.connection
|
||||||
*/
|
*/
|
||||||
disconnect () {
|
disconnect () {
|
||||||
@ -139,10 +139,15 @@ export const api = _converse.api = {
|
|||||||
* @memberOf _converse.api.connection
|
* @memberOf _converse.api.connection
|
||||||
*/
|
*/
|
||||||
reconnect () {
|
reconnect () {
|
||||||
if (_converse.connection?.reconnecting) {
|
const { __, connection } = _converse;
|
||||||
return _converse.connection.debouncedReconnect();
|
connection.setConnectionStatus(
|
||||||
|
Strophe.Status.RECONNECTING,
|
||||||
|
__('The connection has dropped, attempting to reconnect.')
|
||||||
|
);
|
||||||
|
if (connection?.reconnecting) {
|
||||||
|
return connection.debouncedReconnect();
|
||||||
} else {
|
} else {
|
||||||
return _converse.connection.reconnect();
|
return connection.reconnect();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -9,6 +9,9 @@ import { getOpenPromise } from '@converse/openpromise';
|
|||||||
import { setUserJID, } from '@converse/headless/utils/init.js';
|
import { setUserJID, } from '@converse/headless/utils/init.js';
|
||||||
import { tearDown } from '@converse/headless/utils/core.js';
|
import { tearDown } from '@converse/headless/utils/core.js';
|
||||||
|
|
||||||
|
const i = Object.keys(Strophe.Status).reduce((max, k) => Math.max(max, Strophe.Status[k]), 0);
|
||||||
|
Strophe.Status.RECONNECTING = i + 1;
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The Connection class manages the connection to the XMPP server. It's
|
* The Connection class manages the connection to the XMPP server. It's
|
||||||
@ -154,11 +157,6 @@ export class Connection extends Strophe.Connection {
|
|||||||
await setUserJID(api.settings.get("jid"));
|
await setUserJID(api.settings.get("jid"));
|
||||||
}
|
}
|
||||||
|
|
||||||
const { __ } = _converse;
|
|
||||||
this.setConnectionStatus(
|
|
||||||
Strophe.Status.RECONNECTING,
|
|
||||||
__('The connection has dropped, attempting to reconnect.')
|
|
||||||
);
|
|
||||||
/**
|
/**
|
||||||
* Triggered when the connection has dropped, but Converse will attempt
|
* Triggered when the connection has dropped, but Converse will attempt
|
||||||
* to reconnect again.
|
* to reconnect again.
|
||||||
|
@ -1,37 +1,42 @@
|
|||||||
|
import { converse } from '@converse/headless/core.js';
|
||||||
|
|
||||||
|
const { Strophe } = converse.env;
|
||||||
|
|
||||||
export const REPORTABLE_STATUSES = [
|
export const REPORTABLE_STATUSES = [
|
||||||
0, // ERROR'
|
Strophe.Status.ERROR,
|
||||||
1, // CONNECTING
|
Strophe.Status.CONNECTING,
|
||||||
2, // CONNFAIL
|
Strophe.Status.CONNFAIL,
|
||||||
3, // AUTHENTICATING
|
Strophe.Status.AUTHENTICATING,
|
||||||
4, // AUTHFAIL
|
Strophe.Status.AUTHFAIL,
|
||||||
7, // DISCONNECTING
|
Strophe.Status.DISCONNECTING,
|
||||||
10 // RECONNECTING
|
Strophe.Status.RECONNECTING,
|
||||||
];
|
];
|
||||||
|
|
||||||
export const PRETTY_CONNECTION_STATUS = {
|
export const PRETTY_CONNECTION_STATUS = Object.fromEntries([
|
||||||
0: 'Error',
|
[Strophe.Status.ERROR, 'Error'],
|
||||||
1: 'Connecting',
|
[Strophe.Status.CONNECTING, 'Connecting'],
|
||||||
2: 'Connection failure',
|
[Strophe.Status.CONNFAIL, 'Connection failure'],
|
||||||
3: 'Authenticating',
|
[Strophe.Status.AUTHENTICATING, 'Authenticating'],
|
||||||
4: 'Authentication failure',
|
[Strophe.Status.AUTHFAIL, 'Authentication failure'],
|
||||||
5: 'Connected',
|
[Strophe.Status.CONNECTED, 'Connected'],
|
||||||
6: 'Disconnected',
|
[Strophe.Status.DISCONNECTED, 'Disconnected'],
|
||||||
7: 'Disconnecting',
|
[Strophe.Status.DISCONNECTING, 'Disconnecting'],
|
||||||
8: 'Attached',
|
[Strophe.Status.ATTACHED, 'Attached'],
|
||||||
9: 'Redirect',
|
[Strophe.Status.REDIRECT, 'Redirect'],
|
||||||
10: 'Reconnecting'
|
[Strophe.Status.CONNTIMEOUT, 'Connection timeout'],
|
||||||
};
|
[Strophe.Status.RECONNECTING, 'Reconnecting'],
|
||||||
|
]);
|
||||||
|
|
||||||
export const CONNECTION_STATUS_CSS_CLASS = {
|
export const CONNECTION_STATUS_CSS_CLASS = Object.fromEntries([
|
||||||
'Error': 'error',
|
[Strophe.Status.ERROR, 'error'],
|
||||||
'Connecting': 'info',
|
[Strophe.Status.CONNECTING, 'info'],
|
||||||
'Connection failure': 'error',
|
[Strophe.Status.CONNFAIL, 'error'],
|
||||||
'Authenticating': 'info',
|
[Strophe.Status.AUTHENTICATING, 'info'],
|
||||||
'Authentication failure': 'error',
|
[Strophe.Status.AUTHFAIL, 'error'],
|
||||||
'Connected': 'info',
|
[Strophe.Status.CONNECTED, 'info'],
|
||||||
'Disconnected': 'error',
|
[Strophe.Status.DISCONNECTED, 'error'],
|
||||||
'Disconnecting': 'warn',
|
[Strophe.Status.DISCONNECTING, 'warn'],
|
||||||
'Attached': 'info',
|
[Strophe.Status.ATTACHED, 'info'],
|
||||||
'Redirect': 'info',
|
[Strophe.Status.REDIRECT, 'info'],
|
||||||
'Reconnecting': 'warn'
|
[Strophe.Status.RECONNECTING, 'warn'],
|
||||||
};
|
]);
|
||||||
|
@ -34,6 +34,7 @@ class ControlBox extends CustomElement {
|
|||||||
|
|
||||||
setModel () {
|
setModel () {
|
||||||
this.model = _converse.chatboxes.get('controlbox');
|
this.model = _converse.chatboxes.get('controlbox');
|
||||||
|
this.listenTo(_converse.connfeedback, 'change:connection_status', () => this.requestUpdate());
|
||||||
this.listenTo(this.model, 'change:active-form', () => this.requestUpdate());
|
this.listenTo(this.model, 'change:active-form', () => this.requestUpdate());
|
||||||
this.listenTo(this.model, 'change:connected', () => this.requestUpdate());
|
this.listenTo(this.model, 'change:connected', () => this.requestUpdate());
|
||||||
this.listenTo(this.model, 'change:closed', () => !this.model.get('closed') && this.afterShown());
|
this.listenTo(this.model, 'change:closed', () => !this.model.get('closed') && this.afterShown());
|
||||||
@ -41,11 +42,7 @@ class ControlBox extends CustomElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
return this.model ? tpl_controlbox({
|
return this.model ? tpl_controlbox(this) : '';
|
||||||
'sticky_controlbox': api.settings.get('sticky_controlbox'),
|
|
||||||
...this.model.toJSON(),
|
|
||||||
'close': ev => this.close(ev)
|
|
||||||
}) : '';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
close (ev) {
|
close (ev) {
|
||||||
|
@ -1,14 +1,36 @@
|
|||||||
|
import tpl_spinner from "templates/spinner.js";
|
||||||
|
import { _converse, api, converse } from "@converse/headless/core.js";
|
||||||
import { html } from 'lit';
|
import { html } from 'lit';
|
||||||
import { _converse, api } from "@converse/headless/core";
|
|
||||||
|
|
||||||
export default o => html`
|
const { Strophe } = converse.env;
|
||||||
|
|
||||||
|
|
||||||
|
function whenNotConnected (o) {
|
||||||
|
const connection_status = _converse.connfeedback.get('connection_status');
|
||||||
|
console.log("connection_status");
|
||||||
|
console.log(connection_status);
|
||||||
|
if ([Strophe.Status.RECONNECTING, Strophe.Status.CONNECTING].includes(connection_status)) {
|
||||||
|
return tpl_spinner();
|
||||||
|
}
|
||||||
|
if (o['active-form'] === 'register') {
|
||||||
|
return html`<converse-register-panel></converse-register-panel>`;
|
||||||
|
}
|
||||||
|
return html`<converse-login-form id="converse-login-panel" class="controlbox-pane fade-in row no-gutters"></converse-login-form>}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default (el) => {
|
||||||
|
const o = el.model.toJSON();
|
||||||
|
const sticky_controlbox = api.settings.get('sticky_controlbox');
|
||||||
|
|
||||||
|
return html`
|
||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<converse-dragresize></converse-dragresize>
|
<converse-dragresize></converse-dragresize>
|
||||||
<div class="chat-head controlbox-head">
|
<div class="chat-head controlbox-head">
|
||||||
${o.sticky_controlbox
|
${sticky_controlbox
|
||||||
? ''
|
? ''
|
||||||
: html`
|
: html`
|
||||||
<a class="chatbox-btn close-chatbox-button fa fa-times" @click=${o.close}></a>
|
<a class="chatbox-btn close-chatbox-button fa fa-times" @click=${(ev) => el.close(ev)}></a>
|
||||||
`}
|
`}
|
||||||
</div>
|
</div>
|
||||||
<div class="controlbox-panes">
|
<div class="controlbox-panes">
|
||||||
@ -24,11 +46,9 @@ export default o => html`
|
|||||||
${ api.settings.get("authentication") === _converse.ANONYMOUS ? '' :
|
${ api.settings.get("authentication") === _converse.ANONYMOUS ? '' :
|
||||||
html`<div id="converse-roster" class="controlbox-section"><converse-roster></converse-roster></div>`
|
html`<div id="converse-roster" class="controlbox-section"><converse-roster></converse-roster></div>`
|
||||||
}`
|
}`
|
||||||
: o['active-form'] === 'register'
|
: whenNotConnected(o)
|
||||||
? html`<converse-register-panel></converse-register-panel>`
|
|
||||||
: html`<converse-login-form id="converse-login-panel" class="controlbox-pane fade-in row no-gutters"></converse-login-form>`
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>`
|
||||||
`;
|
};
|
||||||
|
@ -126,7 +126,7 @@ export default (el) => {
|
|||||||
let feedback_class, pretty_status;
|
let feedback_class, pretty_status;
|
||||||
if (REPORTABLE_STATUSES.includes(connection_status)) {
|
if (REPORTABLE_STATUSES.includes(connection_status)) {
|
||||||
pretty_status = PRETTY_CONNECTION_STATUS[connection_status];
|
pretty_status = PRETTY_CONNECTION_STATUS[connection_status];
|
||||||
feedback_class = CONNECTION_STATUS_CSS_CLASS[pretty_status];
|
feedback_class = CONNECTION_STATUS_CSS_CLASS[connection_status];
|
||||||
}
|
}
|
||||||
const conn_feedback_message = _converse.connfeedback.get('message');
|
const conn_feedback_message = _converse.connfeedback.get('message');
|
||||||
return html`
|
return html`
|
||||||
|
Loading…
Reference in New Issue
Block a user