refactor getAvatarUrl

src/components/avatar.vue

@@ -1,36 +1,30 @@
 <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"/>
 </template>
 
 <script>
-import parseMXC from '@modular-matrix/parse-mxc';
-import {matrix} from "@/main";
 import {toSvg} from 'jdenticon';
+import {getAvatarUrl} from '@/lib/getMxc';
 
 export default {
-  name: "userThumbnail.vue",
+  name: 'userThumbnail.vue',
   components: {
   },
   props: {
     mxcURL: String,
     username: String,
     fallback: String,
-    homeserver: String,
     size: Number
   },
   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(){
-      return window.getComputedStyle(document.body,null).fontSize.split("px", 1)||16;
+      return window.getComputedStyle(document.body,null).fontSize.split('px', 1)||16;
     },
     getJdenticon(){
       return toSvg(this.fallback, this.getFontSize()*this.size);
-    }
+    },
+    getAvatarUrl
   },
   data(){
     return {

src/lib/getMxc.js

@@ -1,5 +1,6 @@
 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){
   return user.avatarUrl;
@@ -10,10 +11,16 @@ export function getMxcFromUserId(userId){
 }
 
 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;
 }
 
 export function getMxcFromRoomId(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}`;
+}