Start blablab stream when stream is loaded

baloise-incubator · Oct 30, 2024 · ed3b8c1 · ed3b8c1
1 parent 5e87f1f
commit ed3b8c1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git 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
@@ -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