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

add userThumbnail

Browse Source
This commit is contained in:
adb 2020-12-24 03:04:37 +01:00
parent b8ca871e09
commit b004f9a782
3 changed files with 55 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -8,6 +8,7 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@modular-matrix/parse-mxc": "^1.0.1",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"matrix-js-sdk": "^9.1.0", "matrix-js-sdk": "^9.1.0",
"sass": "^1.29.0", "sass": "^1.29.0",

21
src/components/chatInformation.vue
View File

@ -11,12 +11,11 @@
</div> </div>
<h2 v-if="room.members.length !== 0">members:</h2> <h2 v-if="room.members.length !== 0">members:</h2>
<div v-for="member in room.members.slice(0,20)" :key="member.sender" class="contentBox" :title="member.sender"> <div v-for="member in room.members.slice(0,20)" :key="member.sender" class="contentBox" :title="member.sender">
<!---<img v-if="member.content.avatar_url" class="picBox" <userThumbnail :mxcURL="member.content.avatar_url" :userId="member.sender" :username="member.content.displayname"
:src="`https://adb.sh/_matrix/media/r0/thumbnail/adb.sh/${member.content.avatar_url.split('/',4)[3]}?width=64&height=64&method=crop`"/>--> width="64" height="64" resizeMethod="scale" class="userThumbnail" />
<div class="picBox"><p>{{member.content.displayname?member.content.displayname.substr(0,2):member.sender.substr(1,2)}}</p></div>
<div class="information"> <div class="information">
<div class="userName">{{member.content.displayname?member.content.displayname:member.sender}}</div> <div class="userName">{{member.content.displayname || member.content.displayname ?member.content.displayname:member.sender}}</div>
<div v-if="member.content.displayname" class="status">{{member.sender}}</div> <div class="status"></div>
</div> </div>
</div> </div>
<p v-if="room.members.length>20">and {{room.members.length-20}} other members</p> <p v-if="room.members.length>20">and {{room.members.length-20}} other members</p>
@ -27,11 +26,13 @@
</template> </template>
<script> <script>
import icon from './icon.vue'; import icon from './icon.vue';
import userThumbnail from './userThumbnail';
export default { export default {
name: "chatInformation", name: "chatInformation",
components:{ components:{
icon icon,
userThumbnail
}, },
props:{ props:{
room: {} room: {}
@ -120,17 +121,11 @@ export default {
height: 3rem; height: 3rem;
width: 100%; width: 100%;
} }
.picBox{ .userThumbnail{
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
background-color: #42a7b9; background-color: #42a7b9;
width: 3rem;
height: 3rem;
border-radius: 1.5rem;
}
img.picBox{
background-color: unset;
} }
.information{ .information{
position: absolute; position: absolute;

46
src/components/userThumbnail.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail" />
<div v-else class="userThumbnail">
<p>{{username?username.substr(0,2):userId.substr(1,2)}}</p>
</div>
</template>
<script>
import parseMXC from '@modular-matrix/parse-mxc';
import matrix from '@/matrix.js';
export default {
name: "userThumbnail.vue",
props: {
mxcURL: String,
username: String,
userId: String,
width: Number,
height: Number,
resizeMethod: 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}`;
}
},
data(){
return {
homeserver: matrix.data().session.baseUrl
}
}
}
</script>
<style scoped>
.userThumbnail{
background-color: #42a7b9;
width: 3rem;
height: 3rem;
border-radius: 1.5rem;
}
img.userThumbnail{
background-color: unset;
}
</style>