Feature/sc 2037 handle mobile page lifcycles

package.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",

src/app/app.component.ts

@@ -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/services/snapcast.service.ts

@@ -295,7 +295,9 @@ export class SnapcastService implements OnDestroy {
     );
   }
 
-  // --- Simplified Action Methods ---
+  // --- "Simplified" Action Methods ---
+
+  // CLIENT ACTIONS
 
   public setClientVolumePercent(clientId: string, percent: number): Observable<void> {
     if (percent < 0 || percent > 100) return throwError(() => new Error('Volume percentage must be between 0 and 100.'));
@@ -321,27 +323,17 @@ export class SnapcastService implements OnDestroy {
     );
   }
 
-  public setClientMute(clientId: string, mute: boolean): Observable<void> {
-    return this.state$.pipe(
-      take(1),
-      switchMap(currentState => {
-        const client = currentState?.server.groups.flatMap(g => g.clients).find(c => c.id === clientId);
-        if (!client) return throwError(() => new Error(`Client ${clientId} not found.`));
-
-        const volumePayload: Volume = {
-          percent: client.config.volume.percent, // Use current volume percent
-          muted: mute,
-        };
-        return this.rpc('Client.SetVolume', { id: clientId, volume: volumePayload });
-      }),
+  setClientName(clientId: string, name: string): Observable<void> {
+    return this.rpc('Client.SetName', { id: clientId, name }).pipe(
       map((): void => void 0),
       catchError(err => {
-        console.error(`SnapcastService: Failed to set mute for client ${clientId}`, err);
+        console.error(`SnapcastService: Failed to set name for client ${clientId}`, err);
         return throwError(() => err);
       })
     );
   }
 
+
   setGroupName(groupId: string, name: string): Observable<void> {
     return this.rpc('Group.SetName', { id: groupId, name }).pipe(
       map((): void => void 0),
@@ -370,18 +362,10 @@ export class SnapcastService implements OnDestroy {
 
   }
 
-  setClientName(clientId: string, name: string): Observable<void> {
-    return this.rpc('Client.SetName', { id: clientId, name }).pipe(
-      map((): void => void 0),
-      catchError(err => {
-        console.error(`SnapcastService: Failed to set name for client ${clientId}`, err);
-        return throwError(() => err);
-      })
-    );
-  }
+
+
+
 
-  // TODO  ... Implement other action methods like.
-  // They just need to call `this.rpc` with the correct parameters.
 
   // --- Data Access Helpers ---
   public getClient(clientId: string): Observable<Client | undefined> {

src/app/tabs/tabs.page.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() {
   }