Feature/poc mpc js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "beatnik",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "author": "byrds & bytes gmbh",
   "homepage": "https://beatnik.audio",
   "scripts": {
@@ -44,6 +44,9 @@
     "immer": "^10.1.1",
     "ionicons": "^7.0.0",
     "lodash-es": "^4.17.21",
+    "mopidy": "^1.3.0",
+    "mpc-js": "^2.1.1",
+    "mpc-js-web": "^1.3.2",
     "rxjs": "~7.8.0",
     "swiper": "7.2.0",
     "tslib": "^2.3.0",

src/app/app-routing.module.ts

@@ -98,6 +98,14 @@ const routes: Routes = [
     path: 'volume-preset-edit',
     loadChildren: () => import('./pages/volume-preset-edit/volume-preset-edit.module').then( m => m.VolumePresetEditPageModule)
   },
+  {
+    path: 'stream-presets',
+    loadChildren: () => import('./pages/streams/stream-presets/stream-presets.module').then( m => m.StreamPresetsPageModule)
+  },
+  {
+    path: 'stream-preset-edit',
+    loadChildren: () => import('./pages/streams/stream-preset-edit/stream-preset-edit.module').then( m => m.StreamPresetEditPageModule)
+  },
 
 
 ];

src/app/components/client-info/client-info.component.html

@@ -111,7 +111,7 @@ <h2>Device Settings</h2>
     </ion-label>
   </ion-item>
   <ion-item *ngIf="snapcastServerStatus">
-    <ion-label>
+    <ion-label class="ion-text-wrap">
       <!-- get snapcast server status -->
       <h3>Snapcast Server Status</h3>
       <ng-container *ngIf="snapcastServerStatus.active">
@@ -120,51 +120,81 @@ <h3>Status: Active</h3>
       </ng-container>
       <ng-container *ngIf="!snapcastServerStatus.active">
         <h3>Status: Inactive</h3>
-        <p>"Inactive" Means this device is configured to be a Beatnik / snapcast client. Clients will automatically try to connect to the server in your local Network.</p>
+        <p>"Inactive" Means this device is configured to be a Beatnik / snapcast client. Clients will automatically try
+          to connect to the server in your local Network.</p>
       </ng-container>
       <p>{{ snapcastServerStatus.message}}</p>
       <!-- <pre>{{ snapcastServerStatus | json }}</pre> -->
     </ion-label>
   </ion-item>
-  <ion-button expand="full" color="primary" (click)="refreshSnapcastStatus()">
-    Refresh Snapcast Server Status
-  </ion-button>
-
-  <ion-button expand="full" color="danger" (click)="disableSnapcastServer()">
-    Disable Snapcast Server
-  </ion-button>
-
-  <ion-button expand="full" color="secondary" (click)="enableSnapcastServer()">
-    Enable Snapcast Server
-  </ion-button>
-  <ion-button expand="full" color="tertiary" (click)="rebootDevice()">
-    Reboot
-  </ion-button>
-
-  <ion-button expand="full" color="primary" (click)="chooseSpeakers()">
-    Choose Speakers
-  </ion-button>
 
-  <!-- Test Buttons for new System API -->
   <ion-item-divider>
-    <ion-label>Hardware API Test</ion-label>
+    <ion-label>System Info</ion-label>
   </ion-item-divider>
-
-  <ion-button expand="full" color="medium" (click)="testGetSystemInfo()">
-    Get System Info (Console)
-  </ion-button>
-  <ion-button expand="full" color="danger" (click)="testLedSetColor()">
-    LED: Solid Red
-  </ion-button>
-  <ion-button expand="full" color="success" (click)="testLedPulse()">
-    LED: Pulse Green/Blue
-  </ion-button>
-  <ion-button expand="full" color="warning" (click)="testLedBlink()">
-    LED: Blink Yellow
-  </ion-button>
-  <ion-button expand="full" color="dark" (click)="testLedOff()">
-    LED: Turn Off
-  </ion-button>
+
+  <ion-list *ngIf="systemInfo$ | async as systemInfo">
+    <ion-item>
+      <ion-label>
+        <h3>Hostname</h3>
+        <p>{{ systemInfo.hostname }}</p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>
+        <h3>IP Addresses</h3>
+        <p *ngFor="let ip of systemInfo.ipAddresses">{{ ip }}</p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>
+        <h3>RAM Usage</h3>
+        <p>{{ systemInfo.freeRam | number:'1.0-0' }} MB ({{ (systemInfo.freeRam / 1024) | number:'1.1-2' }} GB) Free /
+          {{ systemInfo.totalRam | number:'1.0-0' }} MB ({{ (systemInfo.totalRam / 1024) | number:'1.1-2' }} GB) Total
+        </p>
+      </ion-label>
+    </ion-item>
+    <ion-item *ngIf="systemInfo.temperature !== null">
+      <ion-label>
+        <h3>Temperature</h3>
+        <p>{{ systemInfo.temperature }} °C</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+  <div class="ion-padding-horizontal ion-padding-bottom">
+    <ion-button expand="full" color="primary" (click)="refreshSnapcastStatus()"
+      [disabled]="isLoading['refreshSnapcast']">
+      <ion-spinner *ngIf="isLoading['refreshSnapcast']" name="crescent" class="ion-margin-end"></ion-spinner>
+      Refresh Snapcast Server Status
+    </ion-button>
+
+    <ion-button expand="full" color="danger" (click)="disableSnapcastServer()"
+      [disabled]="isLoading['disableSnapcast']">
+      <ion-spinner *ngIf="isLoading['disableSnapcast']" name="crescent" class="ion-margin-end"></ion-spinner>
+      Disable Snapcast Server
+    </ion-button>
+
+    <ion-button expand="full" color="secondary" (click)="enableSnapcastServer()"
+      [disabled]="isLoading['enableSnapcast']">
+      <ion-spinner *ngIf="isLoading['enableSnapcast']" name="crescent" class="ion-margin-end"></ion-spinner>
+      Enable Snapcast Server
+    </ion-button>
+
+    <ion-button expand="full" color="primary" (click)="chooseSpeakers()">
+      Choose Speakers
+    </ion-button>
+
+    <ion-button expand="full" color="tertiary" (click)="rebootDevice()" [disabled]="isLoading['reboot']">
+      <ion-spinner *ngIf="isLoading['reboot']" name="crescent" class="ion-margin-end"></ion-spinner>
+      Reboot Device
+    </ion-button>
+
+    <ion-button fill="clear" expand="full" color="primary" (click)="getSystemInfo()"
+      [disabled]="isLoading['systemInfo']">
+      <ion-spinner *ngIf="isLoading['systemInfo']" name="crescent" class="ion-margin-end"></ion-spinner>
+      <u>Refresh System Info</u>
+    </ion-button>
+  </div>
 
 </ng-container>
 <ng-container *ngIf="segment === 'camilla-dsp'">