diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss index 5ea2af3..21593de 100644 --- a/src/assets/css/chat.scss +++ b/src/assets/css/chat.scss @@ -1130,8 +1130,9 @@ body { &.ptt { position: absolute; left: 10px; - bottom: 0px; + bottom: 10px; right: 10px; + overflow: visible; } border-radius: 10px; background-color: black; @@ -1148,6 +1149,7 @@ body { } .will-cancel { background-color: #ff3300; + border-radius: 10px; } .recording-time { color: white; @@ -1157,9 +1159,11 @@ body { } .locked { background-color: black; + border-radius: 10px; } .error { background-color: orange; + border-radius: 10px; } .voice-recorder-lock { position: relative; diff --git a/src/components/Chat.vue b/src/components/Chat.vue index bc7d028..4c1edbc 100644 --- a/src/components/Chat.vue +++ b/src/components/Chat.vue @@ -138,7 +138,7 @@ {{ typingMembersString }} - + - + {{ $t("menu.cancel") }} - + stop @@ -328,7 +328,9 @@ export default { this.$emit("close"); this.previewPlayer = null; this.recordedFile = null; - this.$refs.audio_import.value = null; + if (this.$refs.audio_import) { + this.$refs.audio_import.value = null; + } }, mouseUp(ignoredEvent) { document.removeEventListener("mouseup", this.mouseUp, false); @@ -459,8 +461,12 @@ export default { }, send() { this.$emit("file", { file: this.recordedFile }); - this.previewPlayer.pause(); - this.$refs.audio_import.value = null; + if (this.previewPlayer) { + this.previewPlayer.pause(); + } + if (this.$refs.audio_import) { + this.$refs.audio_import.value = null; + } }, getFile(send) { const duration = Date.now() - this.recordStartedAt; diff --git a/src/components/messages/AudioPlayer.vue b/src/components/messages/AudioPlayer.vue index 26b74d7..cf7472c 100644 --- a/src/components/messages/AudioPlayer.vue +++ b/src/components/messages/AudioPlayer.vue @@ -34,8 +34,12 @@ export default { info: this.install(), }; }, + mounted() { + this.event.on("Event.localEventIdReplaced", this.onLocalEventIdReplaced); + }, beforeDestroy() { this.$audioPlayer.removeListener(this._uid); + this.event.off("Event.localEventIdReplaced", this.onLocalEventIdReplaced); }, computed: { currentTime() { @@ -62,6 +66,12 @@ export default { }, seeked(percent) { this.$audioPlayer.seek(this.event, percent); + }, + onLocalEventIdReplaced() { + // This happens when we are the sending party and the message has been sent and the local echo has been updated with the new real id. + // Since we use the event id to register with the audio player, we need to update. + this.$audioPlayer.removeListener(this._uid); + this.info = this.$audioPlayer.addListener(this._uid, this.event); } }, };