From ed3b8c19e466ab339b8a2c289e54cfdf73f4fcff Mon Sep 17 00:00:00 2001
From: Daniel Battaglia <daniel.battaglia@mailbox.org>
Date: Wed, 30 Oct 2024 21:34:04 +0100
Subject: [PATCH] Start blablab stream when stream is loaded

---
 .../app/blabla/player/player.component.html    |  2 +-
 .../src/app/blabla/player/player.component.ts  | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/blablaspotify_frontend/src/app/blabla/player/player.component.html b/blablaspotify_frontend/src/app/blabla/player/player.component.html
index 57d8302..ff9e453 100644
--- a/blablaspotify_frontend/src/app/blabla/player/player.component.html
+++ b/blablaspotify_frontend/src/app/blabla/player/player.component.html
@@ -6,7 +6,7 @@
   </mat-card-header>
   <mat-card-content>
     <div>
-      <audio id="player" #player></audio>
+      <audio id="player" (canplay)="startPlayBack()" #player></audio>
       <mat-form-field appearance="outline" subscriptSizing="dynamic">
         <mat-label>Sender</mat-label>
         <mat-select [(value)]="selectedStation">
diff --git a/blablaspotify_frontend/src/app/blabla/player/player.component.ts b/blablaspotify_frontend/src/app/blabla/player/player.component.ts
index 9e938da..65c477c 100644
--- a/blablaspotify_frontend/src/app/blabla/player/player.component.ts
+++ b/blablaspotify_frontend/src/app/blabla/player/player.component.ts
@@ -29,7 +29,7 @@ export class PlayerComponent {
 
   private _radioStationFacade = inject(RadioStationFacade)
 
-  protected readonly playerElement = viewChild<ElementRef>('player')
+  protected readonly playerElement = viewChild<ElementRef<HTMLAudioElement>>('player')
 
   protected readonly selectedStation = model<string>(this._radioStationFacade.stations()[0].epgId)
 
@@ -42,18 +42,24 @@ export class PlayerComponent {
     const stationUrl = this.stationUrl()
 
     untracked(() => {
-      const player = this.playerElement()?.nativeElement as HTMLAudioElement
-      player.src = stationUrl
+      const player = this.playerElement()?.nativeElement
+      player!.src = stationUrl
 
       if (isPlaying) {
-        player.load()
-        player.play()
+        player!.load()
+        //player.play()
       } else {
-        player.pause()
+        player!.pause()
       }
     })
   })
 
+  protected startPlayBack() {
+    if (this.isActive()) {
+      this.playerElement()!.nativeElement.play()
+    }
+  }
+
   private getStreamUrl(epgId?: string) {
     const station = this._radioStationFacade.stations().find(station => station.epgId === epgId)
     return station === undefined ? '' : station.streamUrl