adb/matrix-chat
adb/matrix-chat
2
3
Fork 1
Code Issues Pull Requests Releases Wiki Activity

debug chatInfo and show profile pictures

Browse Source
This commit is contained in:
adb 2021-03-16 01:45:15 +01:00
parent 75569e2aae
commit d192046f85
6 changed files with 32 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/chatInformation.vue
View File

@ -6,27 +6,28 @@
<div class="picBoxBig"><div class="placeholderBig">{{room.name.substr(0,2)}}</div></div>
<div class="roomInformation">
<div class="roomName">{{room.name}}</div>
<div class="users">{{members.length}} members</div>
<div class="users">{{getMembers().length}} members</div>
</div>
</div>
<h2 v-if="members.length !== 0">members:</h2>
<div v-for="member in members.slice(0,20)" :key="member.sender" class="contentBox" :title="member.sender">
<userThumbnail :mxcURL="member.content.avatar_url" :userId="member.sender" :username="member.content.displayname"
<h2 v-if="getMembers().length !== 0">members:</h2>
<div v-for="member in getMembers().slice(0,20)" :key="member" class="contentBox" :title="member">
<userThumbnail :mxcURL="getUser(member).avatarUrl" :userId="member" :username="getUser(member).displayName"
width="64" height="64" resizeMethod="scale" class="userThumbnail" />
<div class="information">
<div class="userName">{{member.content.displayname || member.content.displayname ?member.content.displayname:member.sender}}</div>
<div class="userName">{{getUser(member).displayName || member}}</div>
<div class="status"></div>
</div>
</div>
<p v-if="members.length>20">and {{members.length-20}} other members</p>
<p v-if="getMembers().length>20">and {{getMembers().length-20}} other members</p>
</div>
</div>
<icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
<icon class="closeBtn" @click.native="closeChatInfo()" ic="./sym/ic_close_white_24px.svg" />
</div>
</template>
<script>
import icon from './icon.vue';
import userThumbnail from './userThumbnail';
import {matrix} from "@/main";
export default {
name: "chatInformation",
@ -35,11 +36,15 @@ export default {
userThumbnail
},
props:{
room: {}
room: {},
closeChatInfo: Function
},
data(){
return{
members: Object.keys(this.room.currentState.members)
methods: {
getUser(userId){
return matrix.client.getUser(userId);
},
getMembers(){
return Object.keys(this.room.currentState.members)
}
}
}

2
src/components/message.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="`${type==='send'?'messageSend':'messageReceive'} ${group?'groupMessage':''}`" class="message" :title="time">
<div :class="`${type==='send'?'messageSend':'messageReceive'} ${group?'groupMessage':''}`" class="message">
<div v-html="solveTextLinks(msg.replace(/</g, '&lt')
.replace(/>/g, '&gt'))"></div>
<div class="time">{{time}}</div>

6
src/components/userThumbnail.vue
View File

@ -7,6 +7,7 @@
<script>
import parseMXC from '@modular-matrix/parse-mxc';
import {matrix} from "@/main";
export default {
name: "userThumbnail.vue",
@ -16,12 +17,13 @@ export default {
userId: String,
width: String,
height: String,
resizeMethod: String
resizeMethod: String,
homeserver: String
},
methods: {
thumbnailUrl(){
let mxc = parseMXC.parse(this.mxcURL);
return `${this.homeserver}/_matrix/media/v1/thumbnail/${mxc.homeserver}/${mxc.id}?width=${this.width}&height=${this.height}&method=${this.resizeMethod}`;
return `${this.homeserver||matrix.baseUrl}/_matrix/media/v1/thumbnail/${mxc.homeserver}/${mxc.id}?width=${this.width}&height=${this.height}&method=${this.resizeMethod}`;
}
},
data(){

3
src/lib/matrixHandler.js
View File

@ -8,6 +8,7 @@ export class MatrixHandler {
this.rooms = [];
this.loading = undefined;
this.user = undefined;
this.baseUrl = undefined;
}
login(user, password, baseUrl, onError, callback = ()=>{}){
if (this.client){ console.log('there is already an active session'); return; }
@ -28,6 +29,7 @@ export class MatrixHandler {
console.log(`access token => ${response.access_token}`);
callback(response.access_token);
this.user = user;
this.baseUrl = baseUrl;
this.startSync()
}
}).catch(error => {
@ -40,6 +42,7 @@ export class MatrixHandler {
if (this.client){ console.log('there is already an active session'); return; }
this.client = new matrix.createClient({baseUrl, accessToken, userId});
this.user = userId;
this.baseUrl = baseUrl;
this.startSync();
}
logout(){

10
src/views/chat.vue
View File

@ -13,10 +13,11 @@
<div class="thumbnailContainer">
<div class="filler"></div>
<userThumbnail v-if="group[0].sender !== user && isGroup()" :userId="group[0].sender"
width="64" height="64" resizeMethod="scale" class="userThumbnail" />
width="64" height="64" resizeMethod="scale" class="userThumbnail"
:mxcURL="getUser(group[0].sender).avatarUrl" />
</div>
<div class="username" v-if="group[0].sender !== user && isGroup()">{{group[0].sender}}</div>
<div class="event" v-for="event in group" :key="event.origin_server_ts">
<div class="username" v-if="group[0].sender !== user && isGroup()">{{getUser(group[0].sender).displayName || group[0].sender}}</div>
<div class="event" v-for="event in group" :key="event.origin_server_ts" :title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`">
<message v-if="event.content.msgtype==='m.text'" :type="event.sender === user?'send':'receive'"
:group="false"
:msg=event.content.body :time=getTime(event.origin_server_ts) />
@ -96,6 +97,9 @@ export default {
this.loadingStatus = 'loading ...';
await matrix.client.paginateEventTimeline(this.room.getLiveTimeline(), {backwards: true})
.then(state => this.loadingStatus = state?'load more':false);
},
getUser(userId){
return matrix.client.getUser(userId);
}
},
data(){

2
src/views/rooms.vue
View File

@ -21,7 +21,7 @@
<div class="roomListName">{{room.name}}</div>
</div>
</div>
<chatInformation v-if="currentRoom && showChatInfo" :room="currentRoom"/>
<chatInformation v-if="currentRoom && showChatInfo" :room="currentRoom" :close-chat-info="()=>showChatInfo=false"/>
</div>
</template>