UI Fixes and DeviceList changes

src/components/AuthedImage.vue

@@ -1,5 +1,5 @@
 <template>
-  <img v-if="imageSrc" :src="imageSrc" />
+  <img v-if="imageSrc" :src="imageSrc" style="width:100%;height:100%" />
 </template>
 
 <script>

src/components/DeviceList.vue

@@ -16,9 +16,9 @@
             <v-btn icon>
               <v-icon
                 :color="
-                  device.isBlocked()
+                  device.isBlocked
                     ? 'red'
-                    : device.isVerified()
+                    : device.isVerified
                     ? 'green'
                     : 'grey-lighten-1'
                 "
@@ -32,6 +32,8 @@
 </template>
 
 <script>
+import { DeviceVerification } from 'matrix-js-sdk';
+
 export default {
   name: "DeviceList",
   props: {
@@ -53,7 +55,7 @@ export default {
       handler(member, ignoredOldVal) {
         this.updateDevices();
         if (member) {
-          this.$matrix.matrixClient.downloadKeys([member.userId]).then(() => {
+          this.$matrix.matrixClient.downloadKeysForUsers([member.userId]).then(() => {
             this.updateDevices();
           });
         }
@@ -66,23 +68,36 @@ export default {
         this.devices = [];
         return;
       }
-      this.devices = this.$matrix.matrixClient.getStoredDevicesForUser(
-        this.member.userId
-      );
+      this.$matrix.matrixClient.getCrypto().getUserDeviceInfo(
+        [this.member.userId], true
+      ).then(deviceMap => {
+        if (deviceMap && deviceMap.get(this.member.userId)) {
+          const userDevices = deviceMap.get(this.member.userId);
+          const devices = [...userDevices.keys()].map(k => {
+            return userDevices.get(k);
+          }).map(d => ({
+              deviceId: d.deviceId,
+              displayName: d.displayName,
+              isBlocked: d.verified == DeviceVerification.Blocked,
+              isVerified: d.verified == DeviceVerification.Verified
+            }));
+          this.devices = devices;
+        }
+      })
     },
 
     displayName(device) {
       var name = device.deviceId;
-      if (device.getDisplayName()) {
-        name += " - " + device.getDisplayName();
+      if (device.displayName) {
+        name += " - " + device.displayName;
       }
       return name;
     },
 
     verificationStatus(device) {
-      if (device.isBlocked()) {
+      if (device.isBlocked) {
         return this.$t('device_list.blocked');
-      } else if (device.isVerified()) {
+      } else if (device.isVerified) {
         return this.$t('device_list.verified');
       } else {
         return this.$t('device_list.not_verified');

src/components/UserProfileDialog.vue

@@ -3,7 +3,6 @@
     v-model="showDialog"
     class="ma-0 pa-0"
     :width="$vuetify.display.smAndUp ? '688px' : '95%'"
-    v-if="showDialog"
   >
     <div class="dialog-content text-center member-action-dialog">
       <div class="pt-4">
@@ -64,22 +63,16 @@ import roomInfoMixin from "./roomInfoMixin";
 import DeviceList from "../components/DeviceList";
 import AuthedImage from "./AuthedImage.vue";
 import util from "../plugins/utils";
+import RoomDialogBase from "./RoomDialogBase.vue";
 
 export default {
   name: "UserProfileDialog",
-  mixins: [roomInfoMixin],
+  extends: RoomDialogBase,
   components: {
     DeviceList,
     AuthedImage
   },
-  emits: ['update:modelValue'],
   props: {
-    modelValue: {
-      type: Boolean,
-      default: function () {
-        return false;
-      },
-    },
     activeMember: {
       type: Object,
       default: function () {
@@ -89,7 +82,6 @@ export default {
   },
   data() {
     return {
-      showDialog: false
     };
   },
   computed: {
@@ -140,26 +132,10 @@ export default {
       }, []);
     }
   },
-  watch: {
-    activeMember() {
-        this.showDialog = this.show && this.activeMember && this.room;
-    },
-    room() {
-        this.showDialog = this.show && this.activeMember && this.room;
-    },
-    show: {
-      handler(newVal, ignoredOldVal) {
-        this.showDialog = newVal && this.activeMember && this.room;
-      }
-    },
-    showDialog() {
-      if (!this.showDialog) {
-        this.$emit('update:modelValue', false);
-      }
-    },
-  },
-
   methods: {
+    shouldShow() {
+      return this.modelValue && this.room && this.activeMember ? true : false;
+    },
     startPrivateChat(userId) {
       this.$matrix
         .getOrCreatePrivateChat(userId)

src/components/messages/MessageIncoming.vue

@@ -8,7 +8,7 @@
       </div>
     </div>
     <v-avatar class="avatar" ref="avatar" size="32" color="#ededed" @click.stop="otherAvatarClicked($refs.avatar.$el)">
-      <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" onerror="this.style.display='none'" />
+      <AuthedImage v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" onerror="this.style.display='none'" />
       <span v-else class="text-white headline">{{
         eventSenderDisplayName(event).substring(0, 1).toUpperCase()
       }}</span>
@@ -35,10 +35,11 @@ import messageMixin from "./messageMixin";
 import util, { ROOM_TYPE_CHANNEL } from "../../plugins/utils";
 import QuickReactions from "./QuickReactions.vue";
 import QuickReactionsChannel from "./channel/QuickReactionsChannel.vue";
+import AuthedImage from "../AuthedImage.vue";
 
 export default {
     mixins: [messageMixin],
-    components: { QuickReactions, QuickReactionsChannel, SeenBy },
+    components: { AuthedImage, QuickReactions, QuickReactionsChannel, SeenBy },
     data() {
       return { ROOM_TYPE_CHANNEL: ROOM_TYPE_CHANNEL }
     },

src/components/messages/QuickReactions.vue

@@ -7,13 +7,12 @@
       v-show="showAllReaction || index < REACTION_LIMIT"
     >
       <v-tooltip top v-if="value.includes($matrix.currentUserId)">
-        <template v-slot:activator="{ on, attrs }">
+        <template v-slot:activator="{ props }">
           <v-chip
             class="pa-2 ma-1 ml-0"
             variant="outlined"
             size="small"
-            v-bind="attrs"
-            v-on="on"
+            v-bind="props"
             @click="onClickEmoji(name)"
           >
             {{ name }} {{ value.length }}
@@ -40,13 +39,12 @@
       {{ otherReactionText }}
     </v-chip>
     <v-tooltip top v-if="!!totalReaction">
-      <template v-slot:activator="{ on, attrs }">
+      <template v-slot:activator="{ props }">
         <v-chip
           variant="outlined"
           size="small"
           class="pa-2 ma-1 ml-0"
-          v-bind="attrs"
-          v-on="on"
+          v-bind="props"
           @click="more"
         >
           <v-icon size="small"> $vuetify.icons.addReaction </v-icon>