debug chatInfo and show profile pictures

update_chat
adb 4 years ago
parent 75569e2aae
commit d192046f85

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

@ -1,5 +1,5 @@
<template> <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') <div v-html="solveTextLinks(msg.replace(/</g, '&lt')
.replace(/>/g, '&gt'))"></div> .replace(/>/g, '&gt'))"></div>
<div class="time">{{time}}</div> <div class="time">{{time}}</div>

@ -7,6 +7,7 @@
<script> <script>
import parseMXC from '@modular-matrix/parse-mxc'; import parseMXC from '@modular-matrix/parse-mxc';
import {matrix} from "@/main";
export default { export default {
name: "userThumbnail.vue", name: "userThumbnail.vue",
@ -16,12 +17,13 @@ export default {
userId: String, userId: String,
width: String, width: String,
height: String, height: String,
resizeMethod: String resizeMethod: String,
homeserver: String
}, },
methods: { methods: {
thumbnailUrl(){ thumbnailUrl(){
let mxc = parseMXC.parse(this.mxcURL); 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(){ data(){

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

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

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

Loading…
Cancel
Save