You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
3.6 KiB
Vue
135 lines
3.6 KiB
Vue
4 years ago
|
<template>
|
||
|
<div class="event">
|
||
3 years ago
|
<div v-if="event.type==='m.room.message'" :class="type==='send'?'messageSend':'messageReceive'" class="message">
|
||
3 years ago
|
<reply-event :event="replyEvent" v-if="replyEvent"/>
|
||
3 years ago
|
<event-content :content="event.content"/>
|
||
4 years ago
|
<div class="time">{{getTime(event.origin_server_ts)}}</div>
|
||
|
</div>
|
||
3 years ago
|
<div v-else :class="type==='send'?'info send':'info receive'">
|
||
3 years ago
|
<span v-if="event.type==='m.room.member'">{{membershipEvents[event.content.membership](event)}}</span>
|
||
3 years ago
|
<span v-else>unsupported event: {{event.type}}</span>
|
||
3 years ago
|
<span class="time"> {{getTime(event.origin_server_ts)}}</span>
|
||
4 years ago
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import {matrix} from '@/main';
|
||
|
import {calcUserName} from '@/lib/matrixUtils';
|
||
|
import {parseMessage} from '@/lib/eventUtils';
|
||
|
import {getTime} from '@/lib/getTimeStrings';
|
||
3 years ago
|
import {getMediaUrl} from '@/lib/getMxc';
|
||
3 years ago
|
import ReplyEvent from '@/components/chat/replyEvent';
|
||
|
import EventContent from '@/components/chat/eventContent';
|
||
4 years ago
|
|
||
|
export default {
|
||
|
name: 'message',
|
||
3 years ago
|
components: {EventContent, ReplyEvent},
|
||
4 years ago
|
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,
|
||
3 years ago
|
getTime,
|
||
|
getMediaUrl
|
||
4 years ago
|
},
|
||
|
data(){
|
||
|
return{
|
||
|
replyEvent: undefined,
|
||
|
membershipEvents:{
|
||
3 years ago
|
invite(event){ return `invited ${event.target?calcUserName(event.target.userId):event.content.displayname||event.state_key}` },
|
||
4 years ago
|
join(event){
|
||
3 years ago
|
if (!event.unsigned.prev_content) return 'joined the room';
|
||
|
if (event.unsigned.prev_content.displayName !== event.content.displayname)
|
||
|
return `changed displayname from ${event.unsigned.prev_content.displayname} to ${event.content.displayname}`;
|
||
|
return 'updated their account';
|
||
4 years ago
|
},
|
||
|
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;
|
||
|
}
|
||
|
}
|
||
3 years ago
|
.info.send{
|
||
|
text-align: right;
|
||
|
}
|
||
4 years ago
|
.message{
|
||
|
position: relative;
|
||
|
width: max-content;
|
||
|
min-width: 2rem;
|
||
|
max-width: calc(100% - 5rem);
|
||
3 years ago
|
padding: 0.8rem 1rem 0.45rem 1rem;
|
||
4 years ago
|
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;
|
||
|
}
|
||
3 years ago
|
.notice{
|
||
|
font-style: italic;
|
||
|
}
|
||
4 years ago
|
}
|
||
|
.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>
|