butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Fix audio player

Browse source 
Issue #645
This commit is contained in:
N-Pex 2025-06-19 15:20:43 +02:00
parent c082688bcb
commit 8ff0d6e6cb
3 changed files with 23 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/assets/css/chat.scss
View file

@ -764,6 +764,12 @@ body {
.v-icon { .v-icon {
color: white !important; color: white !important;
} }
.v-btn {
background-color: black !important;
}
.v-slider .v-slider-thumb {
color: currentColor !important;
}
} }
.play-time { .play-time {
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
@ -776,12 +782,22 @@ body {
flex: 1 1 100%; flex: 1 1 100%;
height: 30px; height: 30px;
.v-slider__thumb { .v-slider-thumb {
display: none; display: none;
} }
&:hover .v-slider__thumb { &:hover .v-slider-thumb {
display: block; 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;
}
} }
} }

6
src/components/messages/AudioPlayer.vue
View file

@ -7,11 +7,11 @@
{{ currentTime }} / {{ totalTime }} {{ currentTime }} / {{ totalTime }}
</div> </div>
<div style="position:relative;flex: 1 1 100%"> <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" <v-slider @update:modelValue="seeked" :disabled="!info.url" color="currentColor" track-color="#cccccc" class="play-progress" :modelValue="info.playPercent" min="0"
max="100" /> 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>
</div> </div>
</template> </template>

2
src/services/audio.service.js
View file

@ -1,5 +1,6 @@
import utils from "../plugins/utils"; import utils from "../plugins/utils";
import emitter from 'tiny-emitter/instance'; import emitter from 'tiny-emitter/instance';
import { reactive } from "vue";
/** /**
* This plugin (available in all vue components as $audioPlayer) handles * This plugin (available in all vue components as $audioPlayer) handles
@ -41,6 +42,7 @@ export default {
entry["currentTime"] = 0; entry["currentTime"] = 0;
entry["playPercent"] = 0; entry["playPercent"] = 0;
entry["playing"] = false; entry["playing"] = false;
entry = reactive(entry);
this.infoMap.set(eventId, entry); this.infoMap.set(eventId, entry);
// Get duration information // Get duration information