show reconnecting notify. #48

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',