start timers

blablaspotify_frontend/src/app/blabla/blabla-epg.service.ts

@@ -1,18 +1,21 @@
+import {HttpClient} from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 import { Subscription, timer } from 'rxjs';
 import { isAfter, subSeconds } from 'date-fns'
 import { ControlsService } from '../controls/controls.service';
-import { Program } from '../types';
+import {Program, ProgramList} from '../types';
 
 @Injectable({ providedIn: 'root' })
 export class BlaBlaEpgService {
     private _controlsService = inject(ControlsService)
+    private _httpClient = inject(HttpClient)
     private _subscriptions: Subscription[] = []
 
-    scheduleBlaBla(lineup: Program[]) {
+    scheduleBlaBla(programList: ProgramList) {
+        console.log('scheduleBlaBla: ', programList);
         this.cancelExistingSchedule()
 
-        this._subscriptions = lineup.flatMap(program => this.createScheduleEntry(program))
+        this._subscriptions = programList.programs.flatMap(program => this.createScheduleEntry(program))
         .filter(scheduleEntry => isAfter(scheduleEntry.on, new Date()))
         .map(scheduleEntry => timer(scheduleEntry.on)
             .subscribe(() => this._controlsService.setPlayBackSource(scheduleEntry.type === 'start' ? 'blabla': 'music'))
@@ -30,4 +33,20 @@ export class BlaBlaEpgService {
         this._subscriptions.forEach(subscription => subscription.unsubscribe())
         this._subscriptions = []
     }
-}
+
+    stationChanged(stationId: string) {
+        console.log('Station changed to: ', stationId);
+        this.getProgramList(stationId);
+    }
+
+    getProgramList(stationId: string) {
+        this._httpClient.get('/api/blabla/programGuides/' + stationId).subscribe({
+            next: (response: any) => {
+                this.scheduleBlaBla(response as ProgramList);
+            },
+            error: (error: any) => {
+                console.error('Failed to get program list: ', error)
+            }
+        });
+    }
+}

blablaspotify_frontend/src/app/blabla/player/player.component.html

@@ -7,12 +7,12 @@
       <audio id="player" (canplay)="startPlayBack()" #player></audio>
       <mat-form-field appearance="outline" subscriptSizing="dynamic">
         <mat-label>Sender</mat-label>
-        <mat-select [(value)]="selectedStation">
+        <mat-select [(value)]="selectedStation" (selectionChange)="onStationValueChange()">
           @for(station of stationList(); track station.epgId) {
           <mat-option [value]="station.epgId">{{ station.name }}</mat-option>
           }
         </mat-select>
       </mat-form-field>
     </div>
   </mat-card-content>
-</mat-card>
+</mat-card>

blablaspotify_frontend/src/app/blabla/player/player.component.ts

@@ -1,6 +1,7 @@
 import { Component, computed, signal, viewChild, ElementRef, inject, model, effect, untracked, input } from '@angular/core';
 import { MatIconButton } from '@angular/material/button';
 import { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card';
+import {BlaBlaEpgService} from '../blabla-epg.service';
 import { RadioStationFacade } from '../data-access/radio-station.facade';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatOption, MatSelect } from '@angular/material/select';
@@ -28,6 +29,7 @@ export class PlayerComponent {
   readonly isActive = input.required<boolean>()
 
   private _radioStationFacade = inject(RadioStationFacade)
+  private _epgService = inject(BlaBlaEpgService)
 
   protected readonly playerElement = viewChild<ElementRef<HTMLAudioElement>>('player')
 
@@ -64,4 +66,8 @@ export class PlayerComponent {
     const station = this._radioStationFacade.stations().find(station => station.epgId === epgId)
     return station === undefined ? '' : station.streamUrl
   }
+
+  onStationValueChange() {
+    this._epgService.stationChanged(this.selectedStation());
+  }
 }