Dev

docker-compose.yml

@@ -2,7 +2,7 @@ services:
   beatnik:
     image: ghcr.io/byrdsandbytes/beatnik-controller:latest
     container_name: beatnik-controller
-    restart: always
+    restart: unless-stopped
     ports:
       - "80:80"
       - "8443:443"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "beatnik",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "author": "byrds & bytes gmbh",
   "homepage": "https://beatnik.audio",
   "scripts": {

src/app/pages/dashboard/dashboard.page.html

@@ -1,15 +1,25 @@
 <ion-header class="ion-no-border">
-  <ion-toolbar >
+  <ion-toolbar>
     <ion-title>Dashboard</ion-title>
     <!-- <ion-title *ngIf="(userProfile) as user">{{user.displayName}}s Home </ion-title> -->
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true" >
+<ion-content [fullscreen]="true">
+  <ion-refresher [pullFactor]="0.5" [pullMin]="100" [pullMax]="300" slot="fixed" (ionRefresh)="handleRefresh($event)">
+
+    <ion-refresher-content class="refresher" pullingIcon="chevron-down-outline" pullingText="Pull to refresh"
+      [refreshingText]="refreshingText">
+    </ion-refresher-content>
+  </ion-refresher>
+
   <div class="container">
     <ion-header collapse="condense">
-      <span class="header-note">{{today | date:"EEEE, d.MMMM"}}</span>
-      <ion-toolbar  class="ion-margin-top">
+      <div class="header-note">
+        <span>{{today | date:"EEEE, d.MMMM"}}</span>
+
+      </div>
+      <ion-toolbar class="ion-margin-top">
         <ion-title size="large"><span *ngIf="userPreeferenceUsername as name">{{name ? name+"s": 'Your'}}</span>
           Home</ion-title>
 

src/app/pages/dashboard/dashboard.page.scss

@@ -13,12 +13,14 @@
     text-transform: uppercase;
     font-weight: 400;
     font-size: 12px;
-    position: absolute;
-    top: -10px;
+    // position: ;
+    // top: -10px;
+    // left:0;
     z-index: 1000;
     margin: 0;
     margin-left: 18px;
-    margin-bottom: 16px;
+    margin-bottom: -12px;
+    line-height: 0;
   }
 
 
@@ -65,4 +67,5 @@
     color: var(--ion-color-medium);
     z-index: 2000;
 
-  }
+  }
+

src/app/pages/dashboard/dashboard.page.ts

@@ -1,5 +1,5 @@
 import { Component, HostListener, OnInit } from '@angular/core';
-import { ModalController } from '@ionic/angular';
+import { ModalController, RefresherCustomEvent } from '@ionic/angular';
 import { first, firstValueFrom, interval, Observable } from 'rxjs';
 import { Client, Group, ServerDetail, SnapCastServerStatusResponse, Stream } from 'src/app/model/snapcast.model';
 import { SnapcastService } from 'src/app/services/snapcast.service';
@@ -71,6 +71,8 @@ export class DashboardPage implements OnInit {
 
   speakerData: Speaker[] = [];
 
+  refreshingText: string = 'Refreshing... ';
+
 
 
   constructor(
@@ -242,6 +244,36 @@ export class DashboardPage implements OnInit {
     });
   }
 
+  handleRefresh(event: RefresherCustomEvent) {
+    this.refreshSeverState(event);
+
+  }
+
+  refreshSeverState(event: RefresherCustomEvent): void {
+    console.log('Refreshing server state...');
+    this.snapcastService.refreshState().subscribe({
+      next: () => {
+        console.log('Server state refreshed successfully');
+        const now = new Date();
+        setTimeout(() => {          this.refreshingText = 'Server state refreshed successfully at ' + now.toLocaleTimeString();
+        }, 500);
+        // this.refreshingText = 'Server state refreshed successfully at ' + now.toLocaleTimeString();
+        // event.target.complete();
+        setTimeout(() => {
+          event.target.complete();
+          this.refreshingText = 'Refreshing... ';
+        }, 1500);
+      },
+      error: (error) => {
+        console.error('Error refreshing server state:', error);
+        this.refreshingText = 'Error refreshing server state';
+        setTimeout(() => {
+          event.target.complete();
+        }, 1500);
+      }
+    });
+  }
+
 
 
 

src/app/pages/setup/setup-server/setup-server.page.ts

@@ -134,12 +134,22 @@ export class SetupServerPage implements OnInit {
     try {
       const services = await firstValueFrom(this.services$);
       // check if there is only the service found with the current device's ip
-      if (services.length === 1) {
-        this.isFirstDevice = true;
-      } else if (services.length > 1) {
+      // if (services.length === 1) {
+      //   this.isFirstDevice = true;
+      // } else if (services.length > 1) {
+      //   this.isFirstDevice = false;
+      // } else {
+      //   this.isFirstDevice = true;
+      // }
+
+      //  check if there is more than one snapcasrt service found
+      const filteredServices = services.filter(service => service.type === this.SERVICE_SNAPCAST);
+      if (filteredServices.length > 1) {
+        console.log('Multiple Snapcast services found:', filteredServices);
         this.isFirstDevice = false;
       } else {
         this.isFirstDevice = true;
+        console.log('Single Snapcast service found, proceeding with setup');
       }
     } catch (error) {
       console.error('Error checking for existing Snapcast server:', error);