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

refactor getAvatarUrl

Browse Source
This commit is contained in:
adb 2021-04-07 23:07:02 +02:00
parent 8dd34b58ee
commit bbad002cec
2 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/avatar.vue
View File

@ -1,36 +1,30 @@
<template> <template>
<img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail image"/> <img v-if="mxcURL" :src="getAvatarUrl(mxcURL)" class="userThumbnail image"/>
<div v-else v-html="getJdenticon()" class="userThumbnail identicon"/> <div v-else v-html="getJdenticon()" class="userThumbnail identicon"/>
</template> </template>
<script> <script>
import parseMXC from '@modular-matrix/parse-mxc';
import {matrix} from "@/main";
import {toSvg} from 'jdenticon'; import {toSvg} from 'jdenticon';
import {getAvatarUrl} from '@/lib/getMxc';
export default { export default {
name: "userThumbnail.vue", name: 'userThumbnail.vue',
components: { components: {
}, },
props: { props: {
mxcURL: String, mxcURL: String,
username: String, username: String,
fallback: String, fallback: String,
homeserver: String,
size: Number size: Number
}, },
methods: { methods: {
thumbnailUrl(){
let mxc = parseMXC.parse(this.mxcURL);
return `${this.homeserver||matrix.baseUrl}/_matrix/media/v1/thumbnail/${
mxc.homeserver}/${mxc.id}?width=${this.imageSize}&height=${this.imageSize}&method=${this.resizeMethod}`;
},
getFontSize(){ getFontSize(){
return window.getComputedStyle(document.body,null).fontSize.split("px", 1)||16; return window.getComputedStyle(document.body,null).fontSize.split('px', 1)||16;
}, },
getJdenticon(){ getJdenticon(){
return toSvg(this.fallback, this.getFontSize()*this.size); return toSvg(this.fallback, this.getFontSize()*this.size);
} },
getAvatarUrl
}, },
data(){ data(){
return { return {

11
src/lib/getMxc.js
View File

@ -1,5 +1,6 @@
import sdk from 'matrix-js-sdk' import sdk from 'matrix-js-sdk'
import {matrix} from "@/main"; import {matrix} from '@/main';
import parseMXC from '@modular-matrix/parse-mxc';
export function getMxcFromUser(user){ export function getMxcFromUser(user){
return user.avatarUrl; return user.avatarUrl;
@ -10,10 +11,16 @@ export function getMxcFromUserId(userId){
} }
export function getMxcFromRoom(room){ export function getMxcFromRoom(room){
let avatarState = room.getLiveTimeline().getState(sdk.EventTimeline.FORWARDS).getStateEvents("m.room.avatar"); let avatarState = room.getLiveTimeline().getState(sdk.EventTimeline.FORWARDS).getStateEvents('m.room.avatar');
return avatarState.length>0?avatarState[avatarState.length-1].getContent().url:undefined; return avatarState.length>0?avatarState[avatarState.length-1].getContent().url:undefined;
} }
export function getMxcFromRoomId(roomId){ export function getMxcFromRoomId(roomId){
return getMxcFromRoom(matrix.client.getRoom(roomId)); return getMxcFromRoom(matrix.client.getRoom(roomId));
}
export function getAvatarUrl(mxcUrl, size = 64, resizeMethod = 'crop'){
let mxc = parseMXC.parse(mxcUrl);
return `${matrix.baseUrl}/_matrix/media/v1/thumbnail/${
mxc.homeserver}/${mxc.id}?width=${size}&height=${size}&method=${resizeMethod}`;
} }