show reconnecting notify. #48

client/src/locale/en-us.ts

@@ -69,6 +69,7 @@ export const setting = {
 
 export const connection = {
   logged_out: 'You have been logged out.',
+  reconnecting: 'Reconnecting...',
   connected: 'Connected',
   disconnected: 'Disconnected',
   button_confirm: 'OK',

client/src/locale/es-sp.ts

@@ -69,6 +69,8 @@ export const setting = {
 
 export const connection = {
   logged_out: 'Has salido!',
+  // TODO
+  //reconnecting: 'Reconnecting',
   connected: 'Connectado correctamente',
   disconnected: 'Has sido desconectado',
   button_confirm: 'De acuerdo',

client/src/locale/fr-fr.ts

@@ -69,6 +69,8 @@ export const setting = {
 
 export const connection = {
   logged_out: 'Vous avez été déconnecté.',
+  // TODO
+  //reconnecting: 'Reconnecting',
   connected: 'Connecté',
   disconnected: 'Déconnecté',
   button_confirm: 'OK',

client/src/locale/nb-no.ts

@@ -69,6 +69,8 @@ export const setting = {
 
 export const connection = {
   logged_out: 'Du har blitt utlogget.',
+  // TODO
+  //reconnecting: 'Reconnecting',
   connected: 'Tilkoblet',
   disconnected: 'Frakoblet',
   button_confirm: 'OK',

client/src/locale/sk-sk.ts

@@ -69,6 +69,7 @@ export const setting = {
 
 export const connection = {
   logged_out: 'Boli ste odhlásený/á',
+  reconnecting: 'Obnova spojenia...',
   connected: 'Úspešne pripojený/á',
   disconnected: 'Boli ste odpojený/á',
   button_confirm: 'Ok',

client/src/locale/sv-se.ts

@@ -69,6 +69,8 @@ export const setting = {
 
 export const connection = {
   logged_out: 'Du har blivit utloggad!',
+  // TODO
+  //reconnecting: 'Reconnecting',
   connected: 'Du har loggats in',
   disconnected: 'Du har blivit frånkopplad',
   button_confirm: 'Ok',

client/src/neko/base.ts

@@ -230,6 +230,9 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
         case 'connected':
           this.onConnected()
           break
+        case 'disconnected':
+          this[EVENT.RECONNECTING]()
+          break
         // https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling#ice_connection_state
         // We don't watch the disconnected signaling state here as it can indicate temporary issues and may
         // go back to a connected state after some time. Watching it would close the video call on any temporary
@@ -358,6 +361,7 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
     this.emit('warn', `unhandled websocket event '${event}':`, payload)
   }
 
+  protected abstract [EVENT.RECONNECTING](): void
   protected abstract [EVENT.CONNECTING](): void
   protected abstract [EVENT.CONNECTED](): void
   protected abstract [EVENT.DISCONNECTED](reason?: Error): void

client/src/neko/events.ts

@@ -1,5 +1,6 @@
 export const EVENT = {
   // Internal Events
+  RECONNECTING: 'RECONNECTING',
   CONNECTING: 'CONNECTING',
   CONNECTED: 'CONNECTED',
   DISCONNECTED: 'DISCONNECTED',

client/src/neko/index.ts

@@ -70,6 +70,16 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   /////////////////////////////
   // Internal Events
   /////////////////////////////
+  protected [EVENT.RECONNECTING]() {
+    this.$vue.$notify({
+      group: 'neko',
+      type: 'warning',
+      title: this.$vue.$t('connection.reconnecting') as string,
+      duration: 5000,
+      speed: 1000,
+    })
+  }
+
   protected [EVENT.CONNECTING]() {
     this.$accessor.setConnnecting()
   }
@@ -77,7 +87,11 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   protected [EVENT.CONNECTED]() {
     this.$accessor.user.setMember(this.id)
     this.$accessor.setConnected(true)
-    this.$accessor.setConnected(true)
+
+    this.$vue.$notify({
+      group: 'neko',
+      clean: true,
+    })
 
     this.$vue.$notify({
       group: 'neko',