Audio recording tweaks
This commit is contained in:
N-Pex
parent
8e50ec64d3
commit
2b3f99c421
3 changed files with 64 additions and 31 deletions
|
|
@ -625,11 +625,14 @@ $admin-fg: white;
|
|||
}
|
||||
|
||||
.voice-recorder {
|
||||
position: absolute;
|
||||
//top: 0;
|
||||
left: 10px;
|
||||
bottom: 0px;
|
||||
right: 10px;
|
||||
position: relative;
|
||||
margin-top: 14px !important;
|
||||
&.ptt {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 0px;
|
||||
right: 10px;
|
||||
}
|
||||
border-radius: 10px;
|
||||
background-color: black;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@
|
|||
background-color="white"
|
||||
v-on:keydown.enter.prevent="
|
||||
() => {
|
||||
sendMessage();
|
||||
sendCurrentTextMessage();
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
|
||||
<v-col
|
||||
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
|
||||
class="mic-button"
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
elevation="0"
|
||||
v-blur
|
||||
style="z-index: 10"
|
||||
v-longTap:500="[showRecordingUI,startRecording]"
|
||||
v-longTap:250="[showRecordingUI,startRecording]"
|
||||
>
|
||||
<v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
|
||||
</v-btn>
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
small
|
||||
elevation="0"
|
||||
color="black"
|
||||
@click.stop="sendMessage"
|
||||
@click.stop="sendCurrentTextMessage"
|
||||
:disabled="sendButtonDisabled"
|
||||
>
|
||||
<v-icon color="white">{{
|
||||
|
|
@ -187,6 +187,7 @@
|
|||
<v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
|
||||
<label icon flat ref="attachmentLabel">
|
||||
<v-btn
|
||||
v-if="!showRecorder"
|
||||
icon
|
||||
large
|
||||
color="black"
|
||||
|
|
@ -215,11 +216,12 @@
|
|||
/>
|
||||
</v-container>
|
||||
|
||||
<div v-if="currentImageInput">
|
||||
<v-dialog v-model="currentImageInput" class="ma-0 pa-0" width="50%">
|
||||
<div v-if="currentImageInputPath">
|
||||
<v-dialog v-model="currentImageInputPath" class="ma-0 pa-0" width="50%">
|
||||
<v-card class="ma-0 pa-0">
|
||||
<v-card-text class="ma-0 pa-0">
|
||||
<v-img
|
||||
v-if="currentImageInput"
|
||||
:aspect-ratio="1"
|
||||
:src="currentImageInput"
|
||||
contain
|
||||
|
|
@ -238,6 +240,7 @@
|
|||
color="primary"
|
||||
text
|
||||
@click="sendAttachment"
|
||||
v-if="currentSendShowSendButton"
|
||||
:disabled="currentSendOperation != null"
|
||||
>Send</v-btn
|
||||
>
|
||||
|
|
@ -374,6 +377,7 @@ export default {
|
|||
currentImageInputPath: null,
|
||||
currentSendOperation: null,
|
||||
currentSendProgress: null,
|
||||
currentSendShowSendButton: true,
|
||||
currentSendError: null,
|
||||
showEmojiPicker: false,
|
||||
selectedEvent: null,
|
||||
|
|
@ -808,13 +812,23 @@ export default {
|
|||
console.log("Typing: ", this.typingMembers);
|
||||
},
|
||||
|
||||
sendMessage() {
|
||||
if (this.currentInput.length > 0) {
|
||||
sendCurrentTextMessage() {
|
||||
// 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
|
||||
.sendTextMessage(
|
||||
this.$matrix.matrixClient,
|
||||
this.roomId,
|
||||
this.currentInput,
|
||||
text,
|
||||
this.editedEvent,
|
||||
this.replyToEvent
|
||||
)
|
||||
|
|
@ -824,9 +838,6 @@ export default {
|
|||
.catch((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]) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.currentSendShowSendButton = true;
|
||||
this.currentImageInput = e.target.result;
|
||||
this.currentImageInputPath = event.target.files[0];
|
||||
};
|
||||
|
|
@ -866,7 +878,7 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
sendAttachment() {
|
||||
sendAttachment(withText) {
|
||||
if (this.currentImageInputPath) {
|
||||
this.currentSendProgress = null;
|
||||
this.currentSendOperation = util.sendImage(
|
||||
|
|
@ -879,7 +891,11 @@ export default {
|
|||
.then(() => {
|
||||
this.currentSendOperation = null;
|
||||
this.currentImageInput = null;
|
||||
this.currentImageInputPath = null;
|
||||
this.currentSendProgress = null;
|
||||
if (withText) {
|
||||
this.sendMessage(withText);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.currentSendError = err.toLocaleString();
|
||||
|
|
@ -895,6 +911,7 @@ export default {
|
|||
}
|
||||
this.currentSendOperation = null;
|
||||
this.currentImageInput = null;
|
||||
this.currentImageInputPath = null;
|
||||
this.currentSendProgress = null;
|
||||
this.currentSendError = null;
|
||||
},
|
||||
|
|
@ -1175,12 +1192,15 @@ export default {
|
|||
},
|
||||
|
||||
onVoiceRecording(event) {
|
||||
util.sendImage(
|
||||
this.$matrix.matrixClient,
|
||||
this.roomId,
|
||||
event.file,
|
||||
undefined
|
||||
);
|
||||
this.currentSendShowSendButton = false;
|
||||
this.currentImageInputPath = event.file;
|
||||
var text = undefined;
|
||||
if (this.currentInput && this.currentInput.length > 0) {
|
||||
text = this.currentInput;
|
||||
this.currentInput = "";
|
||||
}
|
||||
this.sendAttachment(text);
|
||||
this.showRecorder = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
<template>
|
||||
<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%"/> -->
|
||||
<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-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 cols="4" align="center">
|
||||
<v-btn
|
||||
|
|
@ -18,12 +20,12 @@
|
|||
</v-btn>
|
||||
<v-btn
|
||||
v-else-if="state == states.RECORDED"
|
||||
style="background-color: green; padding: 30px"
|
||||
style="background-color: #3ae17d; padding: 30px"
|
||||
icon
|
||||
:disabled="!recordedFile"
|
||||
@click.stop="send"
|
||||
>
|
||||
<v-icon color="white">arrow_upward</v-icon>
|
||||
<v-icon color="black">arrow_upward</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-else
|
||||
|
|
@ -266,6 +268,7 @@ export default {
|
|||
methods: {
|
||||
close() {
|
||||
this.stopRecordTimer();
|
||||
this.recordingTime = String.fromCharCode(160); // nbsp;
|
||||
this.$emit("close");
|
||||
},
|
||||
mouseUp(ignoredEvent) {
|
||||
|
|
@ -331,6 +334,7 @@ export default {
|
|||
this.recorder.stop();
|
||||
}
|
||||
this.stopRecordTimer();
|
||||
this.recordingTime = String.fromCharCode(160); // nbsp;
|
||||
this.close();
|
||||
},
|
||||
pauseRecording() {
|
||||
|
|
@ -341,9 +345,15 @@ export default {
|
|||
stopRecording() {
|
||||
this.state = State.RECORDED;
|
||||
this.stopRecordTimer();
|
||||
this.recordingTime = String.fromCharCode(160); // nbsp;
|
||||
this.close();
|
||||
this.getFile(true);
|
||||
},
|
||||
redo() {
|
||||
this.state = State.INITIAL;
|
||||
this.recordedFile = null;
|
||||
this.recordingTime = String.fromCharCode(160); // nbsp;
|
||||
},
|
||||
send() {
|
||||
//console.log("Send:", this.recordedFile);
|
||||
this.$emit("file", {file: this.recordedFile});
|
||||
|
|
@ -376,6 +386,7 @@ export default {
|
|||
},
|
||||
startRecordTimer() {
|
||||
this.stopRecordTimer();
|
||||
this.recordingTime = String.fromCharCode(160); // nbsp;
|
||||
this.recordTimer = setInterval(() => {
|
||||
const now = Date.now();
|
||||
this.recordingTime = util.formatRecordDuration(
|
||||
|
|
@ -387,7 +398,6 @@ export default {
|
|||
if (this.recordTimer) {
|
||||
clearInterval(this.recordTimer);
|
||||
this.recordTimer = null;
|
||||
this.recordingTime = String.fromCharCode(160); // nbsp;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -401,7 +411,7 @@ export default {
|
|||
.grow-enter-active,
|
||||
.grow-leave-active {
|
||||
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-leave-to {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue