feat: add inactive status style

HuolalaTech · Dec 4, 2023 · b10d79f · b10d79f
1 parent 572bb06
commit b10d79f
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 26 deletions.
diff --git a/src/index.less b/src/index.less
@@ -20,6 +20,10 @@
     box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
     cursor: pointer;
     z-index: 13000;
+    &.inactive {
+      background-color: #a2a2a2;
+      filter: grayscale(1);
+    }
   }
   .page-spy-modal {
     position: fixed;

diff --git a/src/index.ts b/src/index.ts
@@ -223,6 +223,9 @@ export default class PageSpy {
     img.height = 50;
     logo.append(img);
     root.insertAdjacentElement('afterbegin', logo);
+    window.addEventListener('sdk-inactive', () => {
+      logo.classList.add('inactive');
+    });
 
     const modal = new Modal();
     const content = new Content({

diff --git a/src/utils/socket.ts b/src/utils/socket.ts
@@ -62,10 +62,6 @@ export class SocketStore {
 
   private reconnectTimes = 3;
 
-  // Don't try to reconnect and close immediately
-  // when user refresh the page.
-  private closeImmediately: boolean = false;
-
   // indicated connected  whether or not
   public connectionStatus: boolean = false;
 
@@ -121,7 +117,8 @@ export class SocketStore {
 
   public close() {
     this.clearPing();
-    this.closeImmediately = true;
+    this.reconnectTimes = 0;
+    this.reconnectable = false;
     this.socket?.close();
   }
 
@@ -136,27 +133,21 @@ export class SocketStore {
     this.connectionStatus = false;
     this.socketConnection = null;
     this.clearPing();
-
-    if (this.closeImmediately) return;
-    this.tryReconnect();
-  }
-
-  private tryReconnect() {
-    if (!this.reconnectable) {
+    if (!this.reconnectable || this.reconnectTimes <= 0) {
+      window.dispatchEvent(new CustomEvent('sdk-inactive'));
       sessionStorage.setItem(
         ROOM_SESSION_KEY,
         JSON.stringify({ usable: false }),
       );
       return;
     }
-    if (this.reconnectTimes > 0) {
-      this.reconnectTimes -= 1;
-      this.init(this.socketUrl);
-    } /* c8 ignore start */ else {
-      this.reconnectable = false;
-      psLog.error('Websocket reconnect failed');
-    }
-    /* c8 ignore stop */
+
+    this.tryReconnect();
+  }
+
+  tryReconnect() {
+    this.reconnectTimes -= 1;
+    this.init(this.socketUrl);
   }
 
   private pingConnect() {

diff --git a/tests/utils/socket.test.ts b/tests/utils/socket.test.ts
@@ -1,12 +1,7 @@
 import { WS } from 'jest-websocket-mock';
 import { DEBUG_MESSAGE_TYPE } from 'src/utils/message';
 import { SocketStore } from 'src/utils/socket';
-import {
-  ConnectEvent,
-  UnicastEvent,
-  ErrorEvent,
-  JoinEvent,
-} from 'types/lib/socket-event';
+import { ConnectEvent, ErrorEvent } from 'types/lib/socket-event';
 import * as SERVER_MESSAGE_TYPE from 'src/utils/message/server-type';
 
 // Mock micro task delay