Merge remote-tracking branch 'origin/master' into matrix-chat-native
commit
520a5ca6d9
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/></svg>
|
||||||
|
After Width: | Height: | Size: 409 B |
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg>
|
||||||
|
After Width: | Height: | Size: 510 B |
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/></svg>
|
||||||
|
After Width: | Height: | Size: 348 B |
@ -0,0 +1,130 @@
|
|||||||
|
<template>
|
||||||
|
<div class="event">
|
||||||
|
<div v-if="event.type==='m.room.message'" :class="type==='send'?'messageSend':'messageReceive'" class="message">
|
||||||
|
<reply-event :event="replyEvent" v-if="replyEvent"/>
|
||||||
|
<event-content :content="event.content"/>
|
||||||
|
<div class="time">{{getTime(event.origin_server_ts)}}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="info">
|
||||||
|
<span v-if="event.type==='m.room.member'">{{membershipEvents[event.content.membership](event)}}</span>
|
||||||
|
<span v-else>unsupported event</span>
|
||||||
|
<span class="time"> {{getTime(event.origin_server_ts)}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {matrix} from '@/main';
|
||||||
|
import {calcUserName} from '@/lib/matrixUtils';
|
||||||
|
import {parseMessage} from '@/lib/eventUtils';
|
||||||
|
import {getTime} from '@/lib/getTimeStrings';
|
||||||
|
import {getMediaUrl} from '@/lib/getMxc';
|
||||||
|
import ReplyEvent from '@/components/replyEvent';
|
||||||
|
import EventContent from '@/components/eventContent';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'message',
|
||||||
|
components: {EventContent, ReplyEvent},
|
||||||
|
props: {
|
||||||
|
type: String,
|
||||||
|
event: Object,
|
||||||
|
onUpdate: Function
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
async getReplyEvent(event){
|
||||||
|
let replyId = this.getReplyId(event.content);
|
||||||
|
return replyId && await matrix.client.fetchRoomEvent(this.event.room_id, replyId);
|
||||||
|
},
|
||||||
|
getReplyId(content){
|
||||||
|
return content['m.relates_to']
|
||||||
|
&& content['m.relates_to']['m.in_reply_to']
|
||||||
|
&& content['m.relates_to']['m.in_reply_to'].event_id
|
||||||
|
},
|
||||||
|
calcUserName,
|
||||||
|
parseMessage,
|
||||||
|
getTime,
|
||||||
|
getMediaUrl
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
replyEvent: undefined,
|
||||||
|
membershipEvents:{
|
||||||
|
invite(event){ return `invited ${calcUserName(event.target.userId)}` },
|
||||||
|
join(event){
|
||||||
|
if (event.content.displayname !== null) return `changed username to ${event.content.displayname}`
|
||||||
|
return 'joined the room'
|
||||||
|
},
|
||||||
|
leave(){ return 'left the room' },
|
||||||
|
ban(event){return `banned ${calcUserName(event.target.userId)}` }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
this.getReplyEvent(this.event).then((res) => this.replyEvent = res);
|
||||||
|
},
|
||||||
|
updated(){
|
||||||
|
this.onUpdate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.event{
|
||||||
|
.info {
|
||||||
|
font-style: italic;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
.time {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.message{
|
||||||
|
position: relative;
|
||||||
|
width: max-content;
|
||||||
|
min-width: 2rem;
|
||||||
|
max-width: calc(100% - 5rem);
|
||||||
|
padding: 0.8rem 1rem 0.45rem 1rem;
|
||||||
|
background-color: #42a7b9;
|
||||||
|
border-radius: 1rem 1rem 0 1rem;
|
||||||
|
text-align: left;
|
||||||
|
word-break: break-word;
|
||||||
|
white-space: pre-line;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
.reply{
|
||||||
|
border-left: 2px solid #fff;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
.username{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.time{
|
||||||
|
position: relative;
|
||||||
|
bottom: -0.2rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.notice{
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.messageReceive{
|
||||||
|
background-color: #424141;
|
||||||
|
border-radius: 1rem 1rem 1rem 0;
|
||||||
|
}
|
||||||
|
.messageSend{
|
||||||
|
margin-left:auto;
|
||||||
|
margin-right:0;
|
||||||
|
background-color: #357882;
|
||||||
|
border-radius: 1rem 1rem 0 1rem;
|
||||||
|
}
|
||||||
|
.notice{
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
.time{
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,128 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="content.msgtype==='m.text'" v-html="parseMessage(content.body)"/>
|
||||||
|
<div v-else-if="content.msgtype==='m.notice'" class="notice" v-html="parseMessage(content.body)"/>
|
||||||
|
<div v-else-if="content.msgtype==='m.image'" class="image">
|
||||||
|
<img :src="getSource(content.url)" :alt="content.body" :class="`${compact?'compact':''}`"/><br>
|
||||||
|
{{content.body}}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="content.msgtype==='m.file'" :class="`file ${compact?'compact':''}`">
|
||||||
|
<a :href="getSource(content.url)" target="_blank">
|
||||||
|
<div class="fileContent">
|
||||||
|
<icon
|
||||||
|
title="file"
|
||||||
|
ic="./sym/ic_attach_file_white.svg"
|
||||||
|
class="download"
|
||||||
|
/>
|
||||||
|
<div class="filename">
|
||||||
|
{{content.filename || getSource(content.url)}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<div class="text">
|
||||||
|
{{content.body}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="content.msgtype==='m.audio'" :class="`audio ${compact?'compact':''}`">
|
||||||
|
<audio controls :class="`${compact?'compact':''}`">
|
||||||
|
<source :src="getSource(content.url)" :type="content.mimetype">
|
||||||
|
your browser doesn't support audio
|
||||||
|
</audio><br>
|
||||||
|
{{content.body}}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="content.msgtype==='m.video'" :class="`video ${compact?'compact':''}`">
|
||||||
|
<video controls :class="`${compact?'compact':''}`">
|
||||||
|
<source :src="getSource(content.url)" :type="content.mimetype">
|
||||||
|
your browser doesn't support video
|
||||||
|
</video><br>
|
||||||
|
{{content.body}}
|
||||||
|
</div>
|
||||||
|
<div v-else class="italic">unsupported message type {{content.msgtype}}</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getMediaUrl} from '@/lib/getMxc';
|
||||||
|
import {parseMessage} from '@/lib/eventUtils';
|
||||||
|
import Icon from '@/components/icon';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'eventContent',
|
||||||
|
components: {Icon},
|
||||||
|
props: {
|
||||||
|
content: Object,
|
||||||
|
compact: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getSource(url){
|
||||||
|
return url.includes('mxc')?getMediaUrl(url):url;
|
||||||
|
},
|
||||||
|
parseMessage
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.file{
|
||||||
|
max-width: 30rem;
|
||||||
|
.fileContent{
|
||||||
|
position: relative;
|
||||||
|
background-color: #1d1d1d;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
min-height: 3rem;
|
||||||
|
.filename{
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
margin-left: 4rem;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.download{
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.compact{
|
||||||
|
max-width: 20rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.image{
|
||||||
|
width: 100%;
|
||||||
|
img{
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 35rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
.compact{
|
||||||
|
max-width: 8rem;
|
||||||
|
max-height: 8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.video{
|
||||||
|
width: 100%;
|
||||||
|
video{
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 35rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
.compact{
|
||||||
|
max-width: 8rem;
|
||||||
|
max-height: 8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.audio{
|
||||||
|
audio{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.compact{
|
||||||
|
max-width: 16rem;
|
||||||
|
max-height: 8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.italic{
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<div class="fileUpload">
|
||||||
|
<icon
|
||||||
|
title="upload media"
|
||||||
|
class="leftBtn attachFile"
|
||||||
|
ic="./sym/ic_attach_file_white.svg"
|
||||||
|
@click.native="$refs.fileInput.click()"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="file" id="fileInput" ref="fileInput"
|
||||||
|
@change="setFile({file: $refs.fileInput.files[0]})"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import icon from '@/components/icon';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'soundRecorder',
|
||||||
|
components: {
|
||||||
|
icon
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
onChange: Function
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setFile({file}){
|
||||||
|
this.readFile(file).then(blob => {
|
||||||
|
blob.name = file.name;
|
||||||
|
this.onChange({blob})
|
||||||
|
});
|
||||||
|
},
|
||||||
|
readFile(file){
|
||||||
|
return new Promise(resolve => {
|
||||||
|
let reader = new FileReader();
|
||||||
|
reader.onerror = console.error;
|
||||||
|
reader.onload = async event => {
|
||||||
|
resolve(await (await fetch(event.target.result)).blob());
|
||||||
|
}
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.fileUpload{
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.leftBtn{
|
||||||
|
background-color: unset;
|
||||||
|
height: 2.5rem;
|
||||||
|
width: 2.5rem;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
#fileInput{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,91 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div :class="type==='send'?'messageSend':'messageReceive'" class="message">
|
|
||||||
<div v-if="replyEvent" class="reply">
|
|
||||||
<span class="username">{{calcUserName(replyEvent.sender)}}</span><br>
|
|
||||||
<span v-html="replyEvent.type==='m.room.message'?parseMessage(replyEvent.content.body):'unkown event'"></span>
|
|
||||||
</div>
|
|
||||||
<div v-html="parseMessage(msg)"></div>
|
|
||||||
<div class="time">{{time}}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {matrix} from '@/main';
|
|
||||||
import {calcUserName} from '@/lib/matrixUtils';
|
|
||||||
import {parseMessage} from '@/lib/eventUtils';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'message',
|
|
||||||
props: {
|
|
||||||
msg: String,
|
|
||||||
time: String,
|
|
||||||
type: String,
|
|
||||||
content: Object,
|
|
||||||
roomId: String
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
async getReplyEvent(content) {
|
|
||||||
let replyId = this.getReplyId(content);
|
|
||||||
if (replyId === undefined) return undefined;
|
|
||||||
await matrix.client.fetchRoomEvent(this.roomId, replyId).then((res) => {
|
|
||||||
this.replyEvent = res;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getReplyId(content){
|
|
||||||
if(!content['m.relates_to']) return undefined;
|
|
||||||
if(!content['m.relates_to']['m.in_reply_to']) return undefined;
|
|
||||||
return content['m.relates_to']['m.in_reply_to'].event_id;
|
|
||||||
},
|
|
||||||
calcUserName,
|
|
||||||
parseMessage
|
|
||||||
},
|
|
||||||
data(){
|
|
||||||
return{
|
|
||||||
replyEvent: undefined
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.getReplyEvent(this.content);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.message{
|
|
||||||
position: relative;
|
|
||||||
width: max-content;
|
|
||||||
min-width: 2rem;
|
|
||||||
max-width: calc(100% - 5rem);
|
|
||||||
padding: 0.7rem 1rem 0.45rem 1rem;
|
|
||||||
background-color: #42a7b9;
|
|
||||||
border-radius: 1rem 1rem 0 1rem;
|
|
||||||
text-align: left;
|
|
||||||
word-break: break-word;
|
|
||||||
white-space: pre-line;
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
}
|
|
||||||
.messageReceive{
|
|
||||||
background-color: #424141;
|
|
||||||
border-radius: 1rem 1rem 1rem 0;
|
|
||||||
}
|
|
||||||
.messageSend{
|
|
||||||
margin-left:auto;
|
|
||||||
margin-right:0;
|
|
||||||
background-color: #357882;
|
|
||||||
border-radius: 1rem 1rem 0 1rem;
|
|
||||||
}
|
|
||||||
.time{
|
|
||||||
position: relative;
|
|
||||||
bottom: -0.2rem;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.reply{
|
|
||||||
border-left: 2px solid #fff;
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
.username{
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<div class="questionBox">
|
||||||
|
<p class="text">{{question}}</p>
|
||||||
|
<textbtn text="yes" @click.native="callback(true)"/>
|
||||||
|
<textbtn text="no" @click.native="callback(false)"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import textbtn from '@/components/textbtn';
|
||||||
|
export default {
|
||||||
|
name: 'popupQuestion',
|
||||||
|
components: {textbtn},
|
||||||
|
props:{
|
||||||
|
question: String,
|
||||||
|
callback: Function
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.questionBox{
|
||||||
|
position: absolute;
|
||||||
|
width: auto;
|
||||||
|
background-color: #1d1d1d;
|
||||||
|
box-shadow: 6px 6px 10px #111;
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
.text{
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
<template>
|
||||||
|
<div class="reply">
|
||||||
|
<span class="username">{{calcUserName(event.sender)}}</span><br>
|
||||||
|
<span v-if="event.type==='m.room.message'">
|
||||||
|
<span v-if="event.content.msgtype==='m.text'" v-html="parseMessage(event.content.body)"/>
|
||||||
|
<span v-else-if="event.content.msgtype==='m.notice'" class="italic" v-html="parseMessage(event.content.body)"/>
|
||||||
|
<span v-else>
|
||||||
|
<span class="italic">{{event.content.msgtype}}</span><br>
|
||||||
|
<span>{{event.content.body}}</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span v-else>unsupported event</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {calcUserName} from '@/lib/matrixUtils';
|
||||||
|
import {parseMessage} from '@/lib/eventUtils';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'replyEvent',
|
||||||
|
props:{
|
||||||
|
event: Object
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
calcUserName,
|
||||||
|
parseMessage
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.reply{
|
||||||
|
border-left: 2px solid #fff;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 6;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
.username{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.italic{
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
<template>
|
||||||
|
<div class="recorder">
|
||||||
|
<icon
|
||||||
|
v-if="!isRecording"
|
||||||
|
title="record voice"
|
||||||
|
class="recordBtn start"
|
||||||
|
ic="./sym/ic_mic_white.svg"
|
||||||
|
@click.native="startRecording()"
|
||||||
|
ref="startRecord"
|
||||||
|
/>
|
||||||
|
<div v-else class="voiceMeterContainer">
|
||||||
|
<div class="voiceMeter" ref="voiceMeter"></div>
|
||||||
|
<icon
|
||||||
|
title="record voice"
|
||||||
|
class="recordBtn stop"
|
||||||
|
ic="./sym/ic_mic_white.svg"
|
||||||
|
@click.native="stopRecording()"
|
||||||
|
ref="stopRecord"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import icon from '@/components/icon';
|
||||||
|
import Recorder from 'recorder-js';
|
||||||
|
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'soundRecorder',
|
||||||
|
components: {
|
||||||
|
icon
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
onStart: {
|
||||||
|
type: Function,
|
||||||
|
default: ()=>{}
|
||||||
|
},
|
||||||
|
onStop: {
|
||||||
|
type: Function,
|
||||||
|
default: ()=>{}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
startRecording(){
|
||||||
|
this.onStart();
|
||||||
|
navigator.mediaDevices.getUserMedia({audio: true})
|
||||||
|
.then(stream => {
|
||||||
|
this.recorder.init(stream);
|
||||||
|
this.recorder.start().then(()=>this.isRecording=true);
|
||||||
|
})
|
||||||
|
.catch(err => console.log('unable to get stream', err));
|
||||||
|
},
|
||||||
|
stopRecording(){
|
||||||
|
this.recorder.stop()
|
||||||
|
.then(({blob}) => {
|
||||||
|
blob.name = `Recording-${new Date().toISOString()}.${blob.type.split('/')[1]}`;
|
||||||
|
this.onStop({blob});
|
||||||
|
this.isRecording=false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setVoiceMeter(value){
|
||||||
|
if (!this.$refs.stopRecord) return;
|
||||||
|
this.$refs.voiceMeter.style.height = `calc(3rem + ${value/4}px`;
|
||||||
|
this.$refs.voiceMeter.style.width = `calc(3rem + ${value/4}px`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
recorder: new Recorder(audioContext, {
|
||||||
|
onAnalysed: data => this.setVoiceMeter(data.lineTo)
|
||||||
|
}),
|
||||||
|
isRecording: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.recordBtn{
|
||||||
|
position: absolute;
|
||||||
|
right: 1rem;
|
||||||
|
bottom: 0.25rem;
|
||||||
|
background-color: #1d1d1d;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.recordBtn.stop{
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #c63e3e;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.voiceMeter{
|
||||||
|
position: absolute;
|
||||||
|
background-color: #fff;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 3px 3px 10px #111;
|
||||||
|
}
|
||||||
|
.voiceMeterContainer{
|
||||||
|
position: absolute;
|
||||||
|
height: 3rem;
|
||||||
|
width: 3rem;
|
||||||
|
bottom: 0.25rem;
|
||||||
|
right: 1rem;
|
||||||
|
}
|
||||||
|
.recorder{
|
||||||
|
height: 100%;
|
||||||
|
width: 8rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue