-
+
{{numberOfPlayingClients +"/"+ totalClients}} Client(s) playing
diff --git a/src/app/pages/streams/stream-details/stream-details.module.ts b/src/app/pages/streams/stream-details/stream-details.module.ts
index 0fced96..bbcba69 100644
--- a/src/app/pages/streams/stream-details/stream-details.module.ts
+++ b/src/app/pages/streams/stream-details/stream-details.module.ts
@@ -7,13 +7,15 @@ import { IonicModule } from '@ionic/angular';
import { StreamDetailsPageRoutingModule } from './stream-details-routing.module';
import { StreamDetailsPage } from './stream-details.page';
+import { CamillaDspModule } from 'src/app/components/camilla-dsp/camilla-dsp.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
- StreamDetailsPageRoutingModule
+ StreamDetailsPageRoutingModule,
+ CamillaDspModule
],
declarations: [StreamDetailsPage]
})
diff --git a/src/app/pages/streams/stream-details/stream-details.page.html b/src/app/pages/streams/stream-details/stream-details.page.html
index 5a1b9c8..f446323 100644
--- a/src/app/pages/streams/stream-details/stream-details.page.html
+++ b/src/app/pages/streams/stream-details/stream-details.page.html
@@ -30,6 +30,8 @@ {{ stream.id }}
+
+
diff --git a/src/app/pages/streams/stream-details/stream-details.page.ts b/src/app/pages/streams/stream-details/stream-details.page.ts
index f10422a..83692d3 100644
--- a/src/app/pages/streams/stream-details/stream-details.page.ts
+++ b/src/app/pages/streams/stream-details/stream-details.page.ts
@@ -1,6 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
+import { Preferences } from '@capacitor/preferences';
import { Observable } from 'rxjs';
+import { UserPreference } from 'src/app/enum/user-preference.enum';
import { SnapCastServerStatusResponse, Stream } from 'src/app/model/snapcast.model';
import { SnapcastService } from 'src/app/services/snapcast.service';
@@ -16,6 +18,11 @@ export class StreamDetailsPage implements OnInit {
serverState?: Observable
;
stream?: Stream;
+ streamCamillaDSPPort: number = 1235;
+ serverUrl: string = '';
+
+
+
constructor(
private activatedRoute: ActivatedRoute,
@@ -33,6 +40,7 @@ export class StreamDetailsPage implements OnInit {
console.log('StreamDetailsPage: ID from route parameters:', this.streamId);
this.serverState = this.snapcastService.state$;
this.subscribeToStream(this.streamId);
+ this.getCamillaDspUrl();
}
subscribeToStream(streamId: string): void {
@@ -51,4 +59,16 @@ export class StreamDetailsPage implements OnInit {
});
}
+ // get serverUrl from UserPreferences and append camillaDSP port
+ async getCamillaDspUrl(): Promise {
+ let url: string;
+ await Preferences.get({ key: UserPreference.SERVER_URL }).then((result) => {
+ url = result.value || '';
+ });
+ const camillaPort = this.streamCamillaDSPPort || 1235; // Default port if not set
+ const websocket = "ws://" + url?.replace(/(^\w+:|^)\/\//, '') + `:${camillaPort}`;
+ this.serverUrl = websocket;
+ return websocket;
+ }
+
}
diff --git a/src/app/pages/volume-preset-edit/volume-preset-edit-routing.module.ts b/src/app/pages/volume-preset-edit/volume-preset-edit-routing.module.ts
new file mode 100644
index 0000000..bda7e60
--- /dev/null
+++ b/src/app/pages/volume-preset-edit/volume-preset-edit-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { VolumePresetEditPage } from './volume-preset-edit.page';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: VolumePresetEditPage
+ }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule],
+})
+export class VolumePresetEditPageRoutingModule {}
diff --git a/src/app/pages/volume-preset-edit/volume-preset-edit.module.ts b/src/app/pages/volume-preset-edit/volume-preset-edit.module.ts
new file mode 100644
index 0000000..c76fbaa
--- /dev/null
+++ b/src/app/pages/volume-preset-edit/volume-preset-edit.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { VolumePresetEditPageRoutingModule } from './volume-preset-edit-routing.module';
+
+import { VolumePresetEditPage } from './volume-preset-edit.page';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ IonicModule,
+ VolumePresetEditPageRoutingModule
+ ],
+ declarations: [VolumePresetEditPage]
+})
+export class VolumePresetEditPageModule {}
diff --git a/src/app/pages/volume-preset-edit/volume-preset-edit.page.html b/src/app/pages/volume-preset-edit/volume-preset-edit.page.html
new file mode 100644
index 0000000..f55bec1
--- /dev/null
+++ b/src/app/pages/volume-preset-edit/volume-preset-edit.page.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+ {{ isEditMode ? 'Edit Preset' : 'Create Preset' }}
+
+
+
+
+
+
+ {{ isEditMode ? 'Edit Preset' : 'Create Preset' }}
+
+
+
+
+
+ {{caputredPreset.presetName}}
+ Unsaved Preset
+
+
+
+
+
+
+ {{ preset.groupName }}
+ {{preset.clientId}}
+
+
+
+
+
+ {{preset.volumePercent}}%
+
+
+
+
No Presets Yet
+
Create a volume preset to quickly recall your group levels.
+
+
+ Apply your saved volume levels across all groups with a single tap. Swipe left to edit or delete a preset.
+
+
+
+
+ Saved Presets
+
+
+
+
+
+
+
+
+ {{preset.presetName}}
+ {{preset.presetDescription}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Create / Capture Preset
+
+
+
\ No newline at end of file
diff --git a/src/app/pages/volume-presets/volume-presets.page.scss b/src/app/pages/volume-presets/volume-presets.page.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/volume-presets/volume-presets.page.spec.ts b/src/app/pages/volume-presets/volume-presets.page.spec.ts
new file mode 100644
index 0000000..0a03516
--- /dev/null
+++ b/src/app/pages/volume-presets/volume-presets.page.spec.ts
@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { VolumePresetsPage } from './volume-presets.page';
+
+describe('VolumePresetsPage', () => {
+ let component: VolumePresetsPage;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(VolumePresetsPage);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/volume-presets/volume-presets.page.ts b/src/app/pages/volume-presets/volume-presets.page.ts
new file mode 100644
index 0000000..c6bee04
--- /dev/null
+++ b/src/app/pages/volume-presets/volume-presets.page.ts
@@ -0,0 +1,77 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { ToastController } from '@ionic/angular';
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+import { VolumePresetsService } from '../../services/volume-presets.service';
+import { VolumePreset } from '../../model/volume-presets.model';
+
+@Component({
+ selector: 'app-volume-presets',
+ templateUrl: './volume-presets.page.html',
+ styleUrls: ['./volume-presets.page.scss'],
+ standalone: false
+})
+export class VolumePresetsPage implements OnInit {
+
+ existingPresets: VolumePreset[] = [];
+
+ constructor(
+ private volumePresetsService: VolumePresetsService,
+ private router: Router,
+ private toastController: ToastController,
+ ) { }
+
+ ngOnInit() {
+ }
+
+ async ionViewWillEnter() {
+ await this.loadPresetFromUserPreferences();
+ }
+
+ async loadPresetFromUserPreferences() {
+ this.existingPresets = await this.volumePresetsService.loadPresetsFromPreferences();
+ console.log('VolumePresetsPage: Retrieved volume presets:', this.existingPresets);
+ }
+
+ async applyPreset(preset: VolumePreset) {
+ try {
+ await this.volumePresetsService.applyPreset(preset);
+
+ await Haptics.impact({ style: ImpactStyle.Light });
+
+ const toast = await this.toastController.create({
+ message: `Preset "${preset.presetName}" applied`,
+ duration: 2000,
+ position: 'bottom',
+ color: 'success',
+ icon: 'checkmark-circle-outline'
+ });
+ await toast.present();
+ } catch (error) {
+ console.error('Failed to apply preset', error);
+
+ const errorToast = await this.toastController.create({
+ message: `Failed to apply preset "${preset.presetName}"`,
+ duration: 3000,
+ position: 'bottom',
+ color: 'danger',
+ icon: 'alert-circle-outline'
+ });
+ await errorToast.present();
+ }
+ }
+
+ editPreset(preset: VolumePreset) {
+ this.router.navigate(['/volume-preset-edit'], { state: { preset } });
+ }
+
+ async deletePreset(preset: VolumePreset) {
+ try {
+ this.existingPresets = await this.volumePresetsService.deletePreset(preset);
+ console.log(`Volume preset "${preset.presetName}" deleted`);
+ } catch (error) {
+ console.error(`VolumePresetsPage: Failed to delete preset "${preset.presetName}"`, error);
+ }
+ }
+
+}
diff --git a/src/app/pages/zeroconf/zeroconf.page.ts b/src/app/pages/zeroconf/zeroconf.page.ts
index bdf48cb..93f9041 100644
--- a/src/app/pages/zeroconf/zeroconf.page.ts
+++ b/src/app/pages/zeroconf/zeroconf.page.ts
@@ -33,11 +33,8 @@ export class ZeroconfPage implements OnDestroy {
async scanForServices(): Promise {
this.isScanning = true;
try {
-
- await this.zeroconf.watch(this.SERVICE_SNAPCAST);
- console.log(`Started scanning for services of type: ${this.SERVICE_SNAPCAST}`);
- await this.zeroconf.watch(this.SERVICE_BEATNIK);
- console.log(`Started scanning for services of type: ${this.SERVICE_BEATNIK}`);
+ await this.zeroconf.watchMultiple([this.SERVICE_SNAPCAST, this.SERVICE_BEATNIK]);
+ console.log(`Started scanning for services of types: ${this.SERVICE_SNAPCAST}, ${this.SERVICE_BEATNIK}`);
}
catch (error) {
console.error('Error starting service scan:', error);
diff --git a/src/app/services/beatnik-system.service.ts b/src/app/services/beatnik-system.service.ts
new file mode 100644
index 0000000..a05cddc
--- /dev/null
+++ b/src/app/services/beatnik-system.service.ts
@@ -0,0 +1,63 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+export interface SystemInfo {
+ hostname: string;
+ ipAddresses: string[];
+ totalRam: number;
+ freeRam: number;
+ temperature: number | null;
+}
+
+export type LedCommand =
+ | { command: 'set_color'; params: { r: number; g: number; b: number } }
+ | {
+ command: 'pulse';
+ params: {
+ on_color: [number, number, number];
+ off_color?: [number, number, number];
+ fade_in?: number;
+ fade_out?: number;
+ };
+ }
+ | { command: 'blink'; params: { color: [number, number, number]; on_time?: number; off_time?: number } }
+ | { command: 'off' };
+
+export interface GenericResponse {
+ message?: string;
+ error?: string;
+ success?: boolean;
+}
+
+@Injectable({
+ providedIn: 'root'
+})
+export class BeatnikSystemService {
+ constructor(private http: HttpClient) {}
+
+ private getApiUrl(host: string): string {
+ return `http://${host}:3000/api/system`;
+ }
+
+ /**
+ * Get current system information (hostname, IP, RAM, temp)
+ */
+ getInfo(host: string): Observable {
+ return this.http.get(`${this.getApiUrl(host)}/info`);
+ }
+
+ /**
+ * Send a command to the LED
+ */
+ setLedState(payload: LedCommand, host: string): Observable {
+ return this.http.post(`${this.getApiUrl(host)}/led`, payload);
+ }
+
+ /**
+ * Reboot the system via the system API
+ */
+ reboot(host: string): Observable {
+ return this.http.post(`${this.getApiUrl(host)}/reboot`, {});
+ }
+}
diff --git a/src/app/services/snapcast.service.ts b/src/app/services/snapcast.service.ts
index 18a3dc3..25614a6 100644
--- a/src/app/services/snapcast.service.ts
+++ b/src/app/services/snapcast.service.ts
@@ -423,6 +423,78 @@ export class SnapcastService implements OnDestroy {
return this.socket.request('Client.SetVolume', { id, volume });
}
+ /**
+ * Smoothly transitions the volume from the current level to a target percentage.
+ * This sends multiple requests incrementally spaced apart so the Server doesn't get flooded.
+ */
+ public smoothClientVolumeTransition(id: string, targetPercent: number, durationMs: number = 800): Observable {
+ return new Observable((subscriber) => {
+ if (targetPercent < 0 || targetPercent > 100) {
+ subscriber.error(new Error('Target volume must be 0-100'));
+ return () => {};
+ }
+
+ const client = this.findClientInState(id);
+ if (!client) {
+ subscriber.error(new Error(`Client ${id} not found locally`));
+ return () => {};
+ }
+
+ const startPercent = client.config.volume.percent;
+ const difference = targetPercent - startPercent;
+
+ // If we are already there, just complete.
+ if (difference === 0) {
+ subscriber.next();
+ subscriber.complete();
+ return () => {};
+ }
+
+ // Time per step to avoid flooding the websocket (e.g., 50ms)
+ const stepIntervalMs = 50;
+ const totalSteps = Math.max(1, Math.floor(durationMs / stepIntervalMs));
+ const stepPercent = difference / totalSteps;
+
+ let currentStep = 0;
+ let subscription: Subscription | null = null;
+ let timeoutId: any;
+
+ const performStep = () => {
+ currentStep++;
+
+ let nextPercent = startPercent + (stepPercent * currentStep);
+
+ // Snap to exactly the target level on the last step
+ if (currentStep >= totalSteps) {
+ nextPercent = targetPercent;
+ }
+
+ // Send the request
+ subscription = this.setClientVolumePercent(id, Math.round(nextPercent)).subscribe({
+ next: () => {
+ if (currentStep < totalSteps) {
+ // Schedule next step
+ timeoutId = setTimeout(performStep, stepIntervalMs);
+ } else {
+ subscriber.next();
+ subscriber.complete();
+ }
+ },
+ error: (err) => subscriber.error(err)
+ });
+ };
+
+ // Kick off the first step
+ performStep();
+
+ // Clean up if the user unsubscribes midway through
+ return () => {
+ if (timeoutId) clearTimeout(timeoutId);
+ if (subscription) subscription.unsubscribe();
+ };
+ });
+ }
+
public setClientName(id: string, name: string) {
return this.socket.request('Client.SetName', { id, name });
}
diff --git a/src/app/services/volume-presets.service.spec.ts b/src/app/services/volume-presets.service.spec.ts
new file mode 100644
index 0000000..23f9b43
--- /dev/null
+++ b/src/app/services/volume-presets.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { VolumePresetsService } from './volume-presets.service';
+
+describe('VolumePresetsService', () => {
+ let service: VolumePresetsService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(VolumePresetsService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/services/volume-presets.service.ts b/src/app/services/volume-presets.service.ts
new file mode 100644
index 0000000..e90dddc
--- /dev/null
+++ b/src/app/services/volume-presets.service.ts
@@ -0,0 +1,83 @@
+import { Injectable } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+import { SnapcastService } from './snapcast.service';
+import { Preferences } from '@capacitor/preferences';
+import { UserPreference } from '../enum/user-preference.enum';
+import { VolumePreset } from '../model/volume-presets.model';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class VolumePresetsService {
+
+ constructor(private snapcastService: SnapcastService) { }
+
+ async capturePreset(): Promise {
+ const currentState = await firstValueFrom(this.snapcastService.getServerStatus());
+ if (!currentState || !currentState.server) {
+ console.error('VolumePresetsService: Failed to capture preset - invalid server state', currentState);
+ return null;
+ }
+ const preset = currentState.server.groups.flatMap((group: any) => group.clients).map((client: any) => ({
+ clientId: client.id,
+ volumePercent: client.config.volume.percent,
+ groupId: currentState.server.groups.find((group: any) => group.clients?.some((c: any) => c.id === client.id))?.id || '',
+ groupName: currentState.server.groups.find((group: any) => group.clients?.some((c: any) => c.id === client.id))?.name || '',
+ }));
+ return { presetName: 'Preset_' + new Date().toISOString().replace(/[:.]/g, '-'), data: preset };
+ }
+
+ async loadPresetsFromPreferences(): Promise {
+ try {
+ const result = await Preferences.get({ key: UserPreference.VOLUME_PRESETS });
+ if (result.value) {
+ const preset = JSON.parse(result.value);
+ return Array.isArray(preset) ? preset : [preset];
+ }
+ } catch (error) {
+ console.error('VolumePresetsService: Failed to load preset from user preferences', error);
+ }
+ return [];
+ }
+
+ async savePreset(newPreset: VolumePreset): Promise {
+ const existingPresets = await this.loadPresetsFromPreferences();
+ existingPresets.push(newPreset);
+ try {
+ await Preferences.set({
+ key: UserPreference.VOLUME_PRESETS,
+ value: JSON.stringify(existingPresets)
+ });
+ return existingPresets;
+ } catch (error) {
+ console.error('VolumePresetsService: Failed to save preset to user preferences', error);
+ throw error;
+ }
+ }
+
+ async applyPreset(preset: VolumePreset): Promise {
+ for (const client of preset.data) {
+ try {
+ await this.snapcastService.smoothClientVolumeTransition(client.clientId, client.volumePercent).toPromise();
+ console.log(`Applied volume ${client.volumePercent}% to client ${client.clientId}`);
+ } catch (error) {
+ console.error(`VolumePresetsService: Failed to apply volume for client ${client.clientId}`, error);
+ }
+ }
+ }
+
+ async deletePreset(preset: VolumePreset): Promise {
+ let existingPresets = await this.loadPresetsFromPreferences();
+ existingPresets = existingPresets.filter((p: VolumePreset) => p.presetName !== preset.presetName);
+ try {
+ await Preferences.set({
+ key: UserPreference.VOLUME_PRESETS,
+ value: JSON.stringify(existingPresets)
+ });
+ return existingPresets;
+ } catch (error) {
+ console.error(`VolumePresetsService: Failed to delete preset "${preset.presetName}" from user preferences`, error);
+ throw error;
+ }
+ }
+}
diff --git a/src/app/services/zero-conf.service.spec.ts b/src/app/services/zero-conf.service.spec.ts
index 23c8255..a0dad6c 100644
--- a/src/app/services/zero-conf.service.spec.ts
+++ b/src/app/services/zero-conf.service.spec.ts
@@ -1,13 +1,13 @@
import { TestBed } from '@angular/core/testing';
-import { ZeroConfService } from './zero-conf.service';
+import { ZeroconfService } from './zero-conf.service';
-describe('ZeroConfService', () => {
- let service: ZeroConfService;
+describe('ZeroconfService', () => {
+ let service: ZeroconfService;
beforeEach(() => {
TestBed.configureTestingModule({});
- service = TestBed.inject(ZeroConfService);
+ service = TestBed.inject(ZeroconfService);
});
it('should be created', () => {
diff --git a/src/app/services/zero-conf.service.ts b/src/app/services/zero-conf.service.ts
index 93ac0c6..c859df0 100644
--- a/src/app/services/zero-conf.service.ts
+++ b/src/app/services/zero-conf.service.ts
@@ -11,7 +11,7 @@ import { distinctUntilChanged, scan } from 'rxjs/operators';
})
export class ZeroconfService implements OnDestroy {
private readonly servicesSubject = new BehaviorSubject([]);
-
+
// Expose the list of services as an observable
public readonly services$: Observable = this.servicesSubject.asObservable();
@@ -19,7 +19,8 @@ export class ZeroconfService implements OnDestroy {
// Listen for discovery events and update the services list
ZeroConf.addListener('discover', (result: any) => {
this.ngZone.run(() => {
- console.log('[ZeroConf] Discover event:', result);
+ // Force the object into a readable string for Capacitor's console
+ console.log('[ZeroConf] Discover event:', JSON.stringify(result, null, 2));
this.handleDiscoveryEvent(result);
});
});
@@ -28,7 +29,7 @@ export class ZeroconfService implements OnDestroy {
private handleDiscoveryEvent(result: ZeroConfWatchResult) {
const currentServices = this.servicesSubject.getValue();
const service = result.service;
-
+
switch (result.action) {
case 'added':
// The service has been discovered but not yet resolved.
@@ -62,6 +63,16 @@ export class ZeroconfService implements OnDestroy {
await ZeroConf.watch({ type, domain });
}
+ // Start watching for multiple service types
+ async watchMultiple(types: string[], domain = 'local.') {
+ this.servicesSubject.next([]);
+ const promises = types.map(type => {
+ console.log(`[ZeroConf] Watching for type: ${type}`);
+ return ZeroConf.watch({ type, domain });
+ });
+ await Promise.all(promises);
+ }
+
// Publish a new service
// async publish(service: { type: string; name: string; port: number; props?: { [key: string]: string; } }) {
// await ZeroConf.register(service);