fix reconnection spamming

backend/ui/fancy/showcase.js

@@ -155,12 +155,20 @@ createApp( {
                 setTimeout( () => {
                     if ( !self.isReconnecting ) {
                         self.isReconnecting = true;
-                        self.connect();
+                        self.tryReconnect();
-                        self.isReconnecting = false;
                     }
                 }, 1000 );
             }, false );
         },
+        tryReconnect() {
+            const int = setInterval( () => {
+                if ( !this.isReconnecting ) {
+                    clearInterval( int );
+                } else {
+                    connectToSSESource();
+                }
+            }, 1000 );
+        },
         handleBackground() {
             let colourDetails = [];
             let colours = [];

backend/ui/showcase.js

@@ -128,12 +128,20 @@ createApp( {
                 setTimeout( () => {
                     if ( !self.isReconnecting ) {
                         self.isReconnecting = true;
-                        self.connect();
+                        self.tryReconnect();
-                        self.isReconnecting = false;
                     }
                 }, 1000 );
             }, false );
         },
+        tryReconnect() {
+            const int = setInterval( () => {
+                if ( !this.isReconnecting ) {
+                    clearInterval( int );
+                } else {
+                    connectToSSESource();
+                }
+            }, 1000 );
+        },
     },
     mounted() {
         this.connect();

frontend/src/app.js

@@ -78,6 +78,7 @@ const connectToSSESource = () => {
         };
 
         source.onopen = () => {
+            isReconnecting = false;
             console.log( '[ BACKEND INTEGRATION ] Connection to notifier successful' );
         };
             
@@ -86,13 +87,9 @@ const connectToSSESource = () => {
 
             setTimeout( () => {
                 if ( !isReconnecting ) {
-                    if ( errorCount > 5 ) {
-                        isSSEAuth = false;
-                    }
                     isReconnecting = true;
                     console.log( '[ BACKEND INTEGRATION ] Disconnected from notifier, reconnecting...' );
-                    connectToSSESource();
+                    tryReconnect();
-                    isReconnecting = false;
                 }
             }, 1000 );
         }, false );
@@ -109,6 +106,22 @@ const connectToSSESource = () => {
     }
 }
 
+const tryReconnect = () => {
+    const int = setInterval( () => {
+        if ( !isReconnecting ) {
+            clearInterval( int );
+        } else {
+            if ( errorCount > 5 ) {
+                isSSEAuth = false;
+                errorCount = 0;
+            } else {
+                errorCount += 1;
+            }
+            connectToSSESource();
+        }
+    }, 1000 );
+}
+
 let authKey = conf.authKey ?? '';
 
 connect();

frontend/src/client/appleMusic/index.js

@@ -656,12 +656,20 @@ const app = Vue.createApp( {
                 setTimeout( () => {
                     if ( !self.isReconnecting ) {
                         self.isReconnecting = true;
-                        self.connect();
+                        self.tryReconnect();
-                        self.isReconnecting = false;
                     }
                 }, 1000 );
             }, false );
         },
+        tryReconnect() {
+            const int = setInterval( () => {
+                if ( !this.isReconnecting ) {
+                    clearInterval( int );
+                } else {
+                    connectToSSESource();
+                }
+            }, 1000 );
+        },
         dismissNotification() {
             this.isShowingWarning = false;
         }

frontend/src/client/showcase.js

@@ -154,12 +154,20 @@ createApp( {
                 setTimeout( () => {
                     if ( !self.isReconnecting ) {
                         self.isReconnecting = true;
-                        self.connect();
+                        self.tryReconnect();
-                        self.isReconnecting = false;
                     }
                 }, 1000 );
             }, false );
         },
+        tryReconnect() {
+            const int = setInterval( () => {
+                if ( !this.isReconnecting ) {
+                    clearInterval( int );
+                } else {
+                    connectToSSESource();
+                }
+            }, 1000 );
+        },
         handleBackground() {
             let colourDetails = [];
             let colours = [];