From 0abdfc62a00edad7aa3ad1d7b60513b0e78d93ba Mon Sep 17 00:00:00 2001
From: Julien Schneider <julien.schneider.1991@gmail.com>
Date: Tue, 23 Jan 2024 16:05:49 +0100
Subject: [PATCH] fix: audio slider moves on time change (#1376)

---
 .../resource/representation/audio/audio.component.html |  2 +-
 .../resource/representation/audio/audio.component.ts   | 10 ++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.html b/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.html
index c59b36418a..d8e5af49b4 100644
--- a/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.html
+++ b/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.html
@@ -11,7 +11,7 @@
         </div>
         <div *ngIf="failedToLoad">Your browser does not support the audio element.</div>
         <div *ngIf="audio" class="audio-player">
-          <audio id="audio" preload="auto">
+          <audio id="audio" preload="auto" (timeupdate)="onTimeUpdate($event)">
             <source [src]="audio" type="audio/mpeg" />
           </audio>
         </div>
diff --git a/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.ts b/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.ts
index fdb02ab2a1..e1076991bb 100644
--- a/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.ts
+++ b/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.ts
@@ -66,12 +66,10 @@ export class AudioComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit() {
     this.loaded.emit(true);
-    const player = document.getElementById('audio') as HTMLAudioElement;
-    if (player) {
-      player.addEventListener('timeupdate', () => {
-        this.currentTime = player.currentTime;
-      });
-    }
+  }
+
+  onTimeUpdate(event: { target: HTMLAudioElement }) {
+    this.currentTime = event.target.currentTime;
   }
 
   togglePlay() {