connect to state in app component, add triggers fore foreground and background events

Author: Idrimi

package-lock.json

@@ -26,7 +26,7 @@
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
     "@capacitor/android": "^7.2.0",
-    "@capacitor/app": "7.0.1",
+    "@capacitor/app": "^7.0.1",
     "@capacitor/core": "^7.2.0",
     "@capacitor/haptics": "^7.0.1",
     "@capacitor/ios": "^7.2.0",

package.json

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, NgZone } from '@angular/core';
+import { App } from '@capacitor/app';
+import { SnapcastService } from './services/snapcast.service';
 
 @Component({
   selector: 'app-root',
@@ -8,7 +10,30 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   constructor(
+    private ngZone: NgZone,
+    private snapcastService: SnapcastService
   ) {
+    this.initializeApp();
+  }
+
+  initializeApp() {
+    App.addListener('appStateChange', (state) => {
+      // NOTE: This is my backup plan if state is still not refreshed
+      this.ngZone.run(() => {
+        if (state.isActive) {
+          // App has come to the foreground
+          console.log('App is in the foreground');
+          // TODO: Refresh or establish connections to snapcast server
+          this.snapcastService.connect();
 
+          // Add your logic here to refresh data, update UI, etc.
+        } else {
+          // App has gone to the background
+          console.log('App is in the background');
+          // TODO: Destroy connections to snapcast server. But will see if this is a good idea. Maybe good to safe some pi resources.
+          this.snapcastService.disconnect();
+        }
+      });
+    });
   }
 }

src/app/app.component.ts

@@ -17,10 +17,13 @@ export class TabsPage implements OnInit, AfterViewInit {
   constructor(private snapcastService: SnapcastService) {}
 
   ngOnInit(): void {
-    this.snapcastService.connect();
 
   }
 
+  ionViewDidEnter() {
+    // this.snapcastService.connect();
+  }
+
   ngAfterViewInit() {
   }