ui: better disconnect notification

packages/ui-default/.eslintrc.js

@@ -58,6 +58,8 @@ module.exports = {
     // Note: must disable the base rule as it can report incorrect errors
     'no-use-before-define': 'off',
     '@typescript-eslint/no-use-before-define': ['error'],
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'warn',
 
     'comma-dangle': [
       'error',
@@ -80,7 +82,6 @@ module.exports = {
     'import/no-extraneous-dependencies': 'off',
     'max-classes-per-file': 'off',
     'no-empty': ['warn', { allowEmptyCatch: true }],
-    'no-unused-vars': 'warn',
     'no-console': 'off',
     'no-continue': 'off',
     'no-mixed-operators': 'off',

packages/ui-default/components/socket/index.js

@@ -1,50 +1,48 @@
 import SockJS from 'sockjs-client';
+import $ from 'jquery';
 import Notification from 'vj/components/notification/index';
 import i18n from 'vj/utils/i18n';
+import tpl from 'vj/utils/tpl';
+
+const notification = tpl`<div style="position: fixed; left: 0px; bottom: -30px; width: 100%; \
+background: rgb(255, 241, 184); z-index: 2147483647; color: rgb(97, 52, 0); \
+text-align: center; font-size: 18px; font-family: Consolas, Menlo, Courier, monospace; \
+padding: 8px 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px;" id="disconnect_notification" \
+>${i18n('Disconnected from the server, trying to reconnect...')}</div>`;
+
+const $el = $(notification);
+$el.appendTo('body');
+function create() {
+  $el.animate({ bottom: 0 }, 500);
+}
+function remove() {
+  $el.animate({ bottom: -30 }, 300);
+}
 
 export default class Sock {
   constructor(url, showNotification = true) {
     this.url = url;
     this.isreconnect = false;
     this.init();
-    this.notification = null;
-    this.showNotification = false;
-    setTimeout(() => {
-      this.showNotification = showNotification;
-    }, 10000);
+    this.showNotification = showNotification;
   }
 
   onauth() {
-    // SockJS wouldn't send cookie. hack.
-    if (this.isreconnect) {
-      this.notification.hide();
-      if (this.showNotification) Notification.info(i18n('Reconnected to the server.'));
-    }
+    remove();
     if (this.onopen) this.onopen(this.sock);
   }
 
   init() {
     this.sock = new SockJS(this.url);
-    this.sock.onopen = () => {
-      this.send(document.cookie);
-    };
+    // SockJS wouldn't send cookie. hack.
+    this.sock.onopen = () => this.send(document.cookie);
     this.sock.onclose = ({ code, reason }) => {
       console.warn('Connection closed, ', code, reason);
       if (code >= 4000) this.closed = true;
       if (!this.closed) {
-        if (this.showNotification && !this.notification) {
-          this.notification = new Notification({
-            message: i18n('Disconnected from the server. Reconnecting...'),
-            type: 'warn',
-            duration: 0,
-            action: this.init.bind(this),
-          });
-        }
+        if (this.showNotification) create();
         this.isreconnect = setTimeout(this.init.bind(this), 3000);
-      } else {
-        if (this.notification) this.notification.hide();
-        if (this.showNotification) Notification.warn(i18n('Disconnected from the server.'));
-      }
+      } else if (this.showNotification) create();
       if (this.onclose) this.onclose(code, reason);
     };
     this.sock.onmessage = (message) => {

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.18.7",
+  "version": "4.18.8",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
@@ -15,8 +15,10 @@
     "@blueprintjs/icons": "^3.27.0",
     "@blueprintjs/select": "^3.16.6",
     "@hydrooj/utils": "workspace:*",
+    "@types/jquery": "^3.5.6",
     "@types/json-schema": "^7.0.9",
     "@types/katex": "^0.11.1",
+    "@types/sockjs-client": "^1.5.1",
     "@undefined-moe/monaco-yaml": "^2.5.0",
     "ansi_up": "^5.0.1",
     "autoprefixer": "^9.8.6",