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