From 8ff0d6e6cb5409beff1376c2e54b5c5a13b485f7 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Thu, 19 Jun 2025 15:20:43 +0200
Subject: [PATCH] Fix audio player

Issue #645
---
 src/assets/css/chat.scss                | 20 ++++++++++++++++++--
 src/components/messages/AudioPlayer.vue |  6 +++---
 src/services/audio.service.js           |  2 ++
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index e4537b0..fbb47f7 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -764,6 +764,12 @@ body {
     .v-icon {
       color: white !important;
     }
+    .v-btn {
+      background-color: black !important;
+    }
+    .v-slider .v-slider-thumb {
+      color: currentColor !important;
+    }
   }
   .play-time {
     font-family: "Inter", sans-serif;
@@ -776,12 +782,22 @@ body {
     flex: 1 1 100%;
     height: 30px;
 
-    .v-slider__thumb {
+    .v-slider-thumb {
       display: none;
     }
-    &:hover .v-slider__thumb {
+    &:hover .v-slider-thumb {
       display: block;
     }
+    .v-slider-track__background {
+      height: 1px;
+      color: currentColor;
+    }
+    .v-slider-track__fill {
+      filter: brightness(2.5);
+      height: 100%;
+      border-radius: 0;
+      opacity: 0.3;
+    }
   }
 }
 
diff --git a/src/components/messages/AudioPlayer.vue b/src/components/messages/AudioPlayer.vue
index 58972e8..a3e2db2 100644
--- a/src/components/messages/AudioPlayer.vue
+++ b/src/components/messages/AudioPlayer.vue
@@ -7,11 +7,11 @@
       {{ currentTime }} / {{ totalTime }}
     </div>
     <div style="position:relative;flex: 1 1 100%">
+      <div style="position:absolute;left:18px;right:18px;top:0;bottom:0;height:100%;pointer-events:none">
+        <AudioWaveformView :event="event" style="width:100%;height:100%" />
+      </div>
     <v-slider @update:modelValue="seeked" :disabled="!info.url" color="currentColor" track-color="#cccccc" class="play-progress" :modelValue="info.playPercent" min="0"
       max="100" />
-      <div style="position:absolute;left:18px;right:18px;top:0;bottom:0;height:100%">
-      <AudioWaveformView :event="event" style="width:100%;height:100%" />
-      </div>
     </div>
   </div>
 </template>
diff --git a/src/services/audio.service.js b/src/services/audio.service.js
index e9cc3ed..2c291f1 100644
--- a/src/services/audio.service.js
+++ b/src/services/audio.service.js
@@ -1,5 +1,6 @@
 import utils from "../plugins/utils";
 import emitter from 'tiny-emitter/instance';
+import { reactive } from "vue";
 
 /**
  * This plugin (available in all vue components as $audioPlayer) handles
@@ -41,6 +42,7 @@ export default {
           entry["currentTime"] = 0;
           entry["playPercent"] = 0;
           entry["playing"] = false;
+          entry = reactive(entry);
           this.infoMap.set(eventId, entry);
 
           // Get duration information