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

Audio recording tweaks

Browse source
This commit is contained in:
N-Pex 2021-03-10 17:24:48 +01:00
parent 8e50ec64d3
commit 2b3f99c421
3 changed files with 64 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -625,11 +625,14 @@ $admin-fg: white;
} }
.voice-recorder { .voice-recorder {
position: absolute; position: relative;
//top: 0; margin-top: 14px !important;
left: 10px; &.ptt {
bottom: 0px; position: absolute;
right: 10px; left: 10px;
bottom: 0px;
right: 10px;
}
border-radius: 10px; border-radius: 10px;
background-color: black; background-color: black;
overflow: hidden; overflow: hidden;

58
src/components/Chat.vue
View file

@ -127,7 +127,7 @@
background-color="white" background-color="white"
v-on:keydown.enter.prevent=" v-on:keydown.enter.prevent="
() => { () => {
sendMessage(); sendCurrentTextMessage();
} }
" "
/> />
@ -150,7 +150,7 @@
<v-col <v-col
class="input-area-button text-center flex-grow-0 flex-shrink-1" class="input-area-button text-center flex-grow-0 flex-shrink-1"
v-if="!currentInput || currentInput.length == 0" v-if="!currentInput || currentInput.length == 0 || showRecorder"
> >
<v-btn <v-btn
class="mic-button" class="mic-button"
@ -160,7 +160,7 @@
elevation="0" elevation="0"
v-blur v-blur
style="z-index: 10" style="z-index: 10"
v-longTap:500="[showRecordingUI,startRecording]" v-longTap:250="[showRecordingUI,startRecording]"
> >
<v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon> <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
</v-btn> </v-btn>
@ -175,7 +175,7 @@
small small
elevation="0" elevation="0"
color="black" color="black"
@click.stop="sendMessage" @click.stop="sendCurrentTextMessage"
:disabled="sendButtonDisabled" :disabled="sendButtonDisabled"
> >
<v-icon color="white">{{ <v-icon color="white">{{
@ -187,6 +187,7 @@
<v-col class="input-area-button text-center flex-grow-0 flex-shrink-1"> <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
<label icon flat ref="attachmentLabel"> <label icon flat ref="attachmentLabel">
<v-btn <v-btn
v-if="!showRecorder"
icon icon
large large
color="black" color="black"
@ -215,11 +216,12 @@
/> />
</v-container> </v-container>
<div v-if="currentImageInput"> <div v-if="currentImageInputPath">
<v-dialog v-model="currentImageInput" class="ma-0 pa-0" width="50%"> <v-dialog v-model="currentImageInputPath" class="ma-0 pa-0" width="50%">
<v-card class="ma-0 pa-0"> <v-card class="ma-0 pa-0">
<v-card-text class="ma-0 pa-0"> <v-card-text class="ma-0 pa-0">
<v-img <v-img
v-if="currentImageInput"
:aspect-ratio="1" :aspect-ratio="1"
:src="currentImageInput" :src="currentImageInput"
contain contain
@ -238,6 +240,7 @@
color="primary" color="primary"
text text
@click="sendAttachment" @click="sendAttachment"
v-if="currentSendShowSendButton"
:disabled="currentSendOperation != null" :disabled="currentSendOperation != null"
>Send</v-btn >Send</v-btn
> >
@ -374,6 +377,7 @@ export default {
currentImageInputPath: null, currentImageInputPath: null,
currentSendOperation: null, currentSendOperation: null,
currentSendProgress: null, currentSendProgress: null,
currentSendShowSendButton: true,
currentSendError: null, currentSendError: null,
showEmojiPicker: false, showEmojiPicker: false,
selectedEvent: null, selectedEvent: null,
@ -808,13 +812,23 @@ export default {
console.log("Typing: ", this.typingMembers); console.log("Typing: ", this.typingMembers);
}, },
sendMessage() { sendCurrentTextMessage() {
if (this.currentInput.length > 0) { // DOn't have "enter" send messages while in recorder.
if (this.currentInput.length > 0 && !this.showRecorder) {
this.sendMessage(this.currentInput);
this.currentInput = "";
this.editedEvent = null; //TODO - Is this a good place to reset this?
this.replyToEvent = null;
}
},
sendMessage(text) {
if (text && text.length > 0) {
util util
.sendTextMessage( .sendTextMessage(
this.$matrix.matrixClient, this.$matrix.matrixClient,
this.roomId, this.roomId,
this.currentInput, text,
this.editedEvent, this.editedEvent,
this.replyToEvent this.replyToEvent
) )
@ -824,9 +838,6 @@ export default {
.catch((err) => { .catch((err) => {
console.log("Failed to send:", err); console.log("Failed to send:", err);
}); });
this.currentInput = "";
this.editedEvent = null; //TODO - Is this a good place to reset this?
this.replyToEvent = null;
} }
}, },
@ -850,6 +861,7 @@ export default {
if (event.target.files && event.target.files[0]) { if (event.target.files && event.target.files[0]) {
var reader = new FileReader(); var reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
this.currentSendShowSendButton = true;
this.currentImageInput = e.target.result; this.currentImageInput = e.target.result;
this.currentImageInputPath = event.target.files[0]; this.currentImageInputPath = event.target.files[0];
}; };
@ -866,7 +878,7 @@ export default {
} }
}, },
sendAttachment() { sendAttachment(withText) {
if (this.currentImageInputPath) { if (this.currentImageInputPath) {
this.currentSendProgress = null; this.currentSendProgress = null;
this.currentSendOperation = util.sendImage( this.currentSendOperation = util.sendImage(
@ -879,7 +891,11 @@ export default {
.then(() => { .then(() => {
this.currentSendOperation = null; this.currentSendOperation = null;
this.currentImageInput = null; this.currentImageInput = null;
this.currentImageInputPath = null;
this.currentSendProgress = null; this.currentSendProgress = null;
if (withText) {
this.sendMessage(withText);
}
}) })
.catch((err) => { .catch((err) => {
this.currentSendError = err.toLocaleString(); this.currentSendError = err.toLocaleString();
@ -895,6 +911,7 @@ export default {
} }
this.currentSendOperation = null; this.currentSendOperation = null;
this.currentImageInput = null; this.currentImageInput = null;
this.currentImageInputPath = null;
this.currentSendProgress = null; this.currentSendProgress = null;
this.currentSendError = null; this.currentSendError = null;
}, },
@ -1175,12 +1192,15 @@ export default {
}, },
onVoiceRecording(event) { onVoiceRecording(event) {
util.sendImage( this.currentSendShowSendButton = false;
this.$matrix.matrixClient, this.currentImageInputPath = event.file;
this.roomId, var text = undefined;
event.file, if (this.currentInput && this.currentInput.length > 0) {
undefined text = this.currentInput;
); this.currentInput = "";
}
this.sendAttachment(text);
this.showRecorder = false;
}, },
}, },
}; };

24
src/components/VoiceRecorder.vue
View file

@ -1,11 +1,13 @@
<template> <template>
<transition name="grow" mode="out-in"> <transition name="grow" mode="out-in">
<div v-show="show" class="voice-recorder" ref="vrroot"> <div v-show="show" :class="{'voice-recorder':true,'ptt':ptt,'row':!ptt}" ref="vrroot">
<!-- <div style="background-color:red;height:60px;width:100%"/> --> <!-- <div style="background-color:red;height:60px;width:100%"/> -->
<v-container v-if="!ptt" fluid fill-height> <v-container v-if="!ptt" fluid fill-height>
<v-row align="center"> <v-row align="center" class="mt-3">
<v-col cols="4" align="center"> <v-col cols="4" align="center">
<v-icon v-show="false" color="white">delete_outline</v-icon> <v-btn v-show="state == states.RECORDED" icon @click.stop="redo">
<v-icon color="white">undo</v-icon>
</v-btn>
</v-col> </v-col>
<v-col cols="4" align="center"> <v-col cols="4" align="center">
<v-btn <v-btn
@ -18,12 +20,12 @@
</v-btn> </v-btn>
<v-btn <v-btn
v-else-if="state == states.RECORDED" v-else-if="state == states.RECORDED"
style="background-color: green; padding: 30px" style="background-color: #3ae17d; padding: 30px"
icon icon
:disabled="!recordedFile" :disabled="!recordedFile"
@click.stop="send" @click.stop="send"
> >
<v-icon color="white">arrow_upward</v-icon> <v-icon color="black">arrow_upward</v-icon>
</v-btn> </v-btn>
<v-btn <v-btn
v-else v-else
@ -266,6 +268,7 @@ export default {
methods: { methods: {
close() { close() {
this.stopRecordTimer(); this.stopRecordTimer();
this.recordingTime = String.fromCharCode(160); // nbsp;
this.$emit("close"); this.$emit("close");
}, },
mouseUp(ignoredEvent) { mouseUp(ignoredEvent) {
@ -331,6 +334,7 @@ export default {
this.recorder.stop(); this.recorder.stop();
} }
this.stopRecordTimer(); this.stopRecordTimer();
this.recordingTime = String.fromCharCode(160); // nbsp;
this.close(); this.close();
}, },
pauseRecording() { pauseRecording() {
@ -341,9 +345,15 @@ export default {
stopRecording() { stopRecording() {
this.state = State.RECORDED; this.state = State.RECORDED;
this.stopRecordTimer(); this.stopRecordTimer();
this.recordingTime = String.fromCharCode(160); // nbsp;
this.close(); this.close();
this.getFile(true); this.getFile(true);
}, },
redo() {
this.state = State.INITIAL;
this.recordedFile = null;
this.recordingTime = String.fromCharCode(160); // nbsp;
},
send() { send() {
//console.log("Send:", this.recordedFile); //console.log("Send:", this.recordedFile);
this.$emit("file", {file: this.recordedFile}); this.$emit("file", {file: this.recordedFile});
@ -376,6 +386,7 @@ export default {
}, },
startRecordTimer() { startRecordTimer() {
this.stopRecordTimer(); this.stopRecordTimer();
this.recordingTime = String.fromCharCode(160); // nbsp;
this.recordTimer = setInterval(() => { this.recordTimer = setInterval(() => {
const now = Date.now(); const now = Date.now();
this.recordingTime = util.formatRecordDuration( this.recordingTime = util.formatRecordDuration(
@ -387,7 +398,6 @@ export default {
if (this.recordTimer) { if (this.recordTimer) {
clearInterval(this.recordTimer); clearInterval(this.recordTimer);
this.recordTimer = null; this.recordTimer = null;
this.recordingTime = String.fromCharCode(160); // nbsp;
} }
}, },
}, },
@ -401,7 +411,7 @@ export default {
.grow-enter-active, .grow-enter-active,
.grow-leave-active { .grow-leave-active {
transition-timing-function: ease-out; transition-timing-function: ease-out;
transition: opacity 0.5s, border-radius 0.7s, transform 0.7s; transition: opacity 0.3s, border-radius 0.5s, transform 0.5s;
} }
.grow-enter, .grow-enter,
.grow-leave-to { .grow-leave-to {