choose speaker POC

Author: Idrimi

src/app/components/choose-speakers/choose-speakers.component.html

@@ -0,0 +1,32 @@
+
+
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Choose Speakers</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="closeModal()">
+        <ion-icon name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="choose-speakers-container">
+    <p>Select the speakers you want to use:</p>
+    <!-- Add your speaker selection logic here -->
+     <div class="row">
+      <div class="col-6" *ngFor="let speaker of speakers">
+        <img [src]="speaker.image" alt="{{ speaker.manufacturer }} {{ speaker.model }}" class="speaker-image">
+        <ion-item lines="none" (click)="selectSpeaker(speaker.id)">
+          <ion-icon slot="end" [name]="'checkmark-circle'" *ngIf="selectedId === speaker.id"></ion-icon>
+          <ion-label> <h2>{{ speaker.manufacturer }} {{ speaker.model }}</h2></ion-label>
+        </ion-item>
+      </div>
+     </div>
+   
+    <ion-button expand="full" color="primary" (click)="saveSelection()">
+      Save Selection
+    </ion-button>
+  </div>
+</ion-content>

src/app/components/choose-speakers/choose-speakers.component.scss

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ChooseSpeakersComponent } from './choose-speakers.component';
+
+describe('ChooseSpeakersComponent', () => {
+  let component: ChooseSpeakersComponent;
+  let fixture: ComponentFixture<ChooseSpeakersComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChooseSpeakersComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChooseSpeakersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/choose-speakers/choose-speakers.component.spec.ts

@@ -0,0 +1,82 @@
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IonicModule, ModalController } from '@ionic/angular';
+import { first, firstValueFrom } from 'rxjs';
+import { Speaker } from 'src/app/model/speaker.model';
+import { SnapcastService } from 'src/app/services/snapcast.service';
+
+@Component({
+  selector: 'app-choose-speakers',
+  templateUrl: './choose-speakers.component.html',
+  styleUrls: ['./choose-speakers.component.scss'],
+  // import ionic module here if needed
+  imports: [
+    IonicModule,
+    FormsModule,
+    CommonModule
+  ],
+  standalone: true
+})
+export class ChooseSpeakersComponent implements OnInit {
+
+  @Input() clientId?: string;
+
+  selectedId: string | undefined;
+  speakers: Speaker[] = [];
+
+  constructor(
+    private modalController: ModalController,
+    private http: HttpClient,
+    private snapcastService: SnapcastService
+  ) { }
+
+  ngOnInit() {
+    this.loadSpeakerJson();
+  }
+
+  closeModal() {
+    this.modalController.dismiss(null, null, 'choose-speakers-modal');
+  }
+
+  saveSelection() {
+    if (this.selectedId) {
+      console.log('Selected speaker ID:', this.selectedId);
+      // Here you would typically save the selection to the server or state
+      this.modalController.dismiss({ selectedId: this.selectedId }, 'save', 'choose-speakers-modal');
+    } else {
+      console.error('No speaker selected');
+    }
+  }
+
+  async loadSpeakerJson() {
+    //  get speaker data as promise
+    try {
+      const response = await firstValueFrom(
+        this.http.get<{ speakers: Speaker[] }>('assets/speakers/speakers-data.json')
+      );
+      this.speakers = response.speakers;
+      console.log('Speakers loaded:', this.speakers);
+      return this.speakers;
+    } catch (error) {
+      console.error('Error loading speakers:', error);
+      return [];
+    }
+  }
+
+  async selectSpeaker(speakerId: string) {
+    // set speaker id as client name
+    this.selectedId = speakerId;
+    console.log('Selected speaker:', this.selectedId);
+    this.snapcastService.setClientName(this.clientId, speakerId).subscribe({
+      next: (response) => {
+        console.log(`Successfully set speaker for client ${this.clientId} to ${speakerId}`, response);
+      },
+      error: (error) => {
+        console.error(`Failed to set speaker for client ${this.clientId}`, error);
+      }
+    });
+  }
+
+}

src/app/components/choose-speakers/choose-speakers.component.ts

@@ -1,11 +1,17 @@
 <ion-card *ngIf="group" class="card ion-text-center" color="light" (click)="navToGroupDetails()">
   <div class="img-container">
-    <img [src]="'assets/mock/JSE_small.png'" class="img" alt="Placeholder Image">
+    <ng-container *ngIf="activeSpeaker else defaultImage">
+      <img [src]="activeSpeaker.image" class="img" alt="{{ activeSpeaker.manufacturer }} {{ activeSpeaker.model }}">
 
+    </ng-container>
+    <ng-template #defaultImage>
+      <img [src]="'assets/mock/JSE_small.png'" class="img" alt="Placeholder Image">
+    </ng-template>
   </div>
   <ng-container *ngIf="activeStream && activeStream.properties.metadata">
 
-    <img *ngIf="activeStream.properties.metadata.artData as artData" [src]="convertCoverDataBase64(artData.data, artData.extension)" class="cover">
+    <img *ngIf="activeStream.properties.metadata.artData as artData"
+      [src]="convertCoverDataBase64(artData.data, artData.extension)" class="cover">
     <ng-conainer [ngSwitch]="activeStream.status">
       <ng-container *ngSwitchCase="'playing'">
         <ion-icon class="status-icon" name="play-circle"></ion-icon>

src/app/components/snapcast-group-preview/snapcast-group-preview.component.html

@@ -1,6 +1,7 @@
 import { Component, Input, OnChanges, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Group, Stream } from 'src/app/model/snapcast.model';
+import { Speaker } from 'src/app/model/speaker.model';
 
 @Component({
   selector: 'app-snapcast-group-preview',
@@ -12,15 +13,18 @@ export class SnapcastGroupPreviewComponent  implements OnInit, OnChanges {
 
   @Input() group?: Group;
   @Input() streams?: Stream[] | null;
+  @Input() speakerData?: Speaker[] | null;
 
   activeStream?: Stream;
+  activeSpeaker?: Speaker;
 
   constructor(
     private router: Router
   ) { }
 
   ngOnInit() {
     this.getActiveStream();
+    this.getActiveSpeaker();
   }
 
   ngOnChanges() {
@@ -68,4 +72,19 @@ export class SnapcastGroupPreviewComponent  implements OnInit, OnChanges {
     return `data:image/${extension};base64,${coverData}`;
   }
 
+  getActiveSpeaker(): Speaker | undefined {
+    if (!this.group || !this.speakerData) {
+      return undefined;
+    }
+    // Hacky implementation of speaker selection
+    this.activeSpeaker = this.speakerData.find(speaker => speaker.id === this.group.clients[0].config.name);
+    if (!this.activeSpeaker) {
+      console.warn('No active speaker found for the group:', this.group.id);
+      return undefined;
+    }
+    console.log('Active speaker for group:', this.group.id, this.activeSpeaker);
+
+    return this.activeSpeaker;
+  }
+
 }

src/app/components/snapcast-group-preview/snapcast-group-preview.component.ts

@@ -0,0 +1,7 @@
+export interface Speaker {
+    id: string;
+    image: string;
+    manufacturer: string;
+    model: string;
+    year: number;
+}

src/app/model/speaker.model.ts

@@ -57,6 +57,10 @@ <h2>Connection Status</h2>
       </ion-range>
     </ion-item>
 
+    <ion-button expand="full" color="primary" (click)="chooseSpeakers()">
+      Choose Speakers
+    </ion-button>
+
     <!-- group selector -->
 
 

src/app/pages/clients/client-details/client-details.page.html

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { ModalController } from '@ionic/angular';
 import { Observable } from 'rxjs';
+import { ChooseSpeakersComponent } from 'src/app/components/choose-speakers/choose-speakers.component';
 import { Client, SnapCastServerStatusResponse } from 'src/app/model/snapcast.model';
 import { SnapcastService } from 'src/app/services/snapcast.service';
 
@@ -21,7 +23,8 @@ export class ClientDetailsPage implements OnInit {
 
   constructor(
     private avtivateRoute: ActivatedRoute,
-    private snapcastService: SnapcastService
+    private snapcastService: SnapcastService,
+    private modalController: ModalController
   ) { }
 
   async ngOnInit() {
@@ -112,6 +115,20 @@ export class ClientDetailsPage implements OnInit {
     });
   }
 
+  chooseSpeakers() {
+    console.log('Choose speakers for client:', this.client?.id);
+    // Here you would typically open a modal to select speakers
+    this.modalController.create({
+      component: ChooseSpeakersComponent,
+      id: 'choose-speakers-modal',
+      componentProps: { clientId: this.client?.id }
+    }).then(modal => {
+      modal.present();
+    }).catch(err => {
+      console.error('Error opening speaker selection modal:', err);
+    });
+  }
+
 
 
 }

src/app/pages/clients/client-details/client-details.page.ts

@@ -61,7 +61,7 @@
           <ng-container *ngFor="let group of state.server.groups; let i = index">
             <ng-template swiperSlide *ngIf="group.clients[0].connected">
 
-              <app-snapcast-group-preview [streams]="state.server.streams" [group]="group"></app-snapcast-group-preview>
+              <app-snapcast-group-preview [streams]="state.server.streams" [group]="group" [speakerData]="speakerData"></app-snapcast-group-preview>
             </ng-template>
 
           </ng-container>
@@ -90,8 +90,8 @@
     </ng-container>
 
     <!-- <app-snapcast-status></app-snapcast-status> -->
-    <div class="page-padding-bottom">
-    </div>
+    <!-- <div class="page-padding-bottom">
+    </div> -->
 
 </ion-content>