Display all the status changes in UI
This commit is contained in:
parent
0c0df1efc9
commit
05fc00d9be
@ -1483,6 +1483,15 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
||||
}
|
||||
|
||||
#connection-error {
|
||||
font-size: 12px;
|
||||
line-height: 36px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
word-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
@ -63,7 +63,7 @@
|
||||
</div>
|
||||
<div id="chat-container" class="window">
|
||||
<div id="chat"></div>
|
||||
<button id="connection-error" class="btn btn-reconnect">Client connection lost — Click here to reconnect</button>
|
||||
<div id="connection-error"></div>
|
||||
<form id="form" method="post" action="">
|
||||
<div class="input">
|
||||
<span id="nick">
|
||||
|
@ -35,6 +35,10 @@ function buildChannelMessages(chanId, chanType, messages) {
|
||||
}
|
||||
|
||||
function appendMessage(container, chanId, chanType, msg) {
|
||||
if (utils.lastMessageId < msg.id) {
|
||||
utils.lastMessageId = msg.id;
|
||||
}
|
||||
|
||||
let lastChild = container.children(".msg, .date-marker-container").last();
|
||||
const renderedMessage = buildChatMessage(msg);
|
||||
|
||||
|
@ -10,6 +10,7 @@ socket.on("auth", function(data) {
|
||||
// And we will reload the page to grab the latest version
|
||||
if (utils.serverHash > -1 && data.serverHash > -1 && data.serverHash !== utils.serverHash) {
|
||||
socket.disconnect();
|
||||
$("#connection-error").text("Server restarted, reloading…");
|
||||
location.reload(true);
|
||||
return;
|
||||
}
|
||||
@ -40,7 +41,7 @@ socket.on("auth", function(data) {
|
||||
token = storage.get("token");
|
||||
|
||||
if (token) {
|
||||
$("#loading-page-message").text("Authorizing…");
|
||||
$("#loading-page-message, #connection-error").text("Authorizing…");
|
||||
|
||||
socket.emit("auth", {
|
||||
user: user,
|
||||
|
@ -6,11 +6,22 @@ const render = require("../render");
|
||||
const webpush = require("../webpush");
|
||||
const sidebar = $("#sidebar");
|
||||
const storage = require("../localStorage");
|
||||
const utils = require("../utils");
|
||||
|
||||
socket.on("init", function(data) {
|
||||
$("#loading-page-message").text("Rendering…");
|
||||
$("#loading-page-message, #connection-error").text("Rendering…");
|
||||
|
||||
const lastMessageId = utils.lastMessageId;
|
||||
|
||||
// TODO: this is hacky
|
||||
if (lastMessageId > -1) {
|
||||
sidebar.find(".networks").empty();
|
||||
$("#chat").empty();
|
||||
}
|
||||
|
||||
if (data.networks.length === 0) {
|
||||
sidebar.find(".empty").show();
|
||||
|
||||
$("#footer").find(".connect").trigger("click", {
|
||||
pushState: false,
|
||||
});
|
||||
@ -18,16 +29,22 @@ socket.on("init", function(data) {
|
||||
render.renderNetworks(data);
|
||||
}
|
||||
|
||||
if (data.token) {
|
||||
storage.set("token", data.token);
|
||||
if (lastMessageId > -1) {
|
||||
$("#connection-error").removeClass("shown");
|
||||
$(".show-more-button, #input").prop("disabled", false);
|
||||
$("#submit").show();
|
||||
} else {
|
||||
if (data.token) {
|
||||
storage.set("token", data.token);
|
||||
}
|
||||
|
||||
webpush.configurePushNotifications(data.pushSubscription, data.applicationServerKey);
|
||||
|
||||
$("body").removeClass("signed-out");
|
||||
$("#loading").remove();
|
||||
$("#sign-in").remove();
|
||||
}
|
||||
|
||||
webpush.configurePushNotifications(data.pushSubscription, data.applicationServerKey);
|
||||
|
||||
$("body").removeClass("signed-out");
|
||||
$("#loading").remove();
|
||||
$("#sign-in").remove();
|
||||
|
||||
const id = data.active;
|
||||
const target = sidebar.find("[data-id='" + id + "']").trigger("click", {
|
||||
replaceHistory: true
|
||||
|
@ -3,6 +3,7 @@
|
||||
const $ = require("jquery");
|
||||
const io = require("socket.io-client");
|
||||
const path = window.location.pathname + "socket.io/";
|
||||
const status = $("#loading-page-message, #connection-error");
|
||||
|
||||
const socket = io({
|
||||
transports: $(document.body).data("transports"),
|
||||
@ -11,37 +12,16 @@ const socket = io({
|
||||
reconnection: !$(document.body).hasClass("public")
|
||||
});
|
||||
|
||||
window.lounge_socket = socket; // TODO: Remove later, this is for debugging
|
||||
socket.on("disconnect", handleDisconnect);
|
||||
socket.on("connect_error", handleDisconnect);
|
||||
socket.on("error", handleDisconnect);
|
||||
|
||||
[
|
||||
"connect_error",
|
||||
"connect_failed",
|
||||
"disconnect",
|
||||
"error",
|
||||
].forEach(function(e) {
|
||||
socket.on(e, function(data) {
|
||||
$("#loading-page-message").text("Connection failed: " + data);
|
||||
$("#connection-error").addClass("shown").one("click", function() {
|
||||
window.onbeforeunload = null;
|
||||
window.location.reload();
|
||||
});
|
||||
|
||||
// Disables sending a message by pressing Enter. `off` is necessary to
|
||||
// cancel `inputhistory`, which overrides hitting Enter. `on` is then
|
||||
// necessary to avoid creating new lines when hitting Enter without Shift.
|
||||
// This is fairly hacky but this solution is not permanent.
|
||||
$("#input").off("keydown").on("keydown", function(event) {
|
||||
if (event.which === 13 && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
// Hides the "Send Message" button
|
||||
$("#submit").hide();
|
||||
});
|
||||
socket.on("reconnecting", function(attempt) {
|
||||
status.text(`Reconnecting… (attempt ${attempt})`);
|
||||
});
|
||||
|
||||
socket.on("connecting", function() {
|
||||
$("#loading-page-message").text("Connecting…");
|
||||
status.text("Connecting…");
|
||||
});
|
||||
|
||||
socket.on("connect", function() {
|
||||
@ -54,7 +34,15 @@ socket.on("connect", function() {
|
||||
});
|
||||
|
||||
socket.on("authorized", function() {
|
||||
$("#loading-page-message").text("Loading messages…");
|
||||
status.text("Loading messages…");
|
||||
});
|
||||
|
||||
function handleDisconnect(data) {
|
||||
const message = data.message || data;
|
||||
|
||||
status.text(`Waiting to reconnect… (${message})`).addClass("shown");
|
||||
$(".show-more-button, #input").prop("disabled", true);
|
||||
$("#submit").hide();
|
||||
}
|
||||
|
||||
module.exports = socket;
|
||||
|
@ -65,12 +65,8 @@ a:hover,
|
||||
background: #00ff0e;
|
||||
}
|
||||
|
||||
.btn-reconnect {
|
||||
#connection-error {
|
||||
background: #f00;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#settings .opt {
|
||||
|
@ -46,14 +46,6 @@ body {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.btn-reconnect {
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#sidebar {
|
||||
left: -220px;
|
||||
|
@ -205,14 +205,6 @@ body {
|
||||
color: #99a2b4;
|
||||
}
|
||||
|
||||
.btn-reconnect {
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Form elements */
|
||||
|
||||
#chat-container ::-moz-placeholder {
|
||||
|
@ -232,14 +232,6 @@ body {
|
||||
color: #d2d39b;
|
||||
}
|
||||
|
||||
.btn-reconnect {
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Form elements */
|
||||
|
||||
#chat-container ::-moz-placeholder {
|
||||
|
Loading…
Reference in New Issue
Block a user