Fix audio player

Issue #645

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;
+    }
   }
 }
 

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>

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