Show QR code and creator in room info

src/components/RoomInfo.vue

@@ -2,9 +2,7 @@
   <div v-if="room" class="room-info">
     <div class="chat-header">
       <v-container fluid>
-        <div class="room-name">
-          Info
-        </div>
+        <div class="room-name">Info</div>
         <v-btn
           text
           class="back"
@@ -17,20 +15,22 @@
       </v-container>
     </div>
 
-    <v-card class="members ma-3" flat>
-        <div class="text-center">
+    <v-card class="members ma-3 pa-3" flat>
+      <div class="text-center">
         <v-avatar class="room-avatar">
           <v-img v-if="roomAvatar" :src="roomAvatar" />
           <span v-else class="white--text headline">{{
             roomName.substring(0, 1).toUpperCase()
           }}</span>
         </v-avatar>
-        </div>
-        <div class="room-title">{{ roomName }}</div>
+        <div class="h1">{{ roomName }}</div>
+        <div class="small">Created by {{ creator }}</div>
+        <canvas class="qr" id="room-qr"></canvas>
+      </div>
     </v-card>
 
     <v-card class="members ma-3" flat>
-      <v-card-title
+      <v-card-title class="h2"
         >Members<v-spacer></v-spacer>
         <div>{{ room.getJoinedMemberCount() }}</div></v-card-title
       >
@@ -41,7 +41,7 @@
           :key="member.userId"
           v-show="showAllMembers || index < 5"
         >
-          <v-avatar class="avatar" size="40" color="grey">
+          <v-avatar class="avatar" size="32" color="grey">
             <img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
             <span v-else class="white--text headline">{{
               member.name.substring(0, 1).toUpperCase()
@@ -57,7 +57,7 @@
     </v-card>
 
     <v-card class="account ma-3" flat>
-      <v-card-title>My Profile</v-card-title>
+      <v-card-title class="h2">My Profile</v-card-title>
       <v-card-text>
         <div v-if="$matrix.currentUser.is_guest">
           <div>
@@ -97,6 +97,7 @@
 
 <script>
 import LeaveRoomDialog from "../components/LeaveRoomDialog";
+import QRCode from "qrcode";
 
 export default {
   name: "RoomInfo",
@@ -117,6 +118,9 @@ export default {
     this.updateMemberCount();
     this.user = this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
     this.displayName = this.user.displayName;
+
+    // Set QR code
+    this.updateQRCode();
   },
 
   destroyed() {
@@ -128,6 +132,23 @@ export default {
       return this.$matrix.currentRoom;
     },
 
+    creator() {
+      if (this.room) {
+        const createEvent = this.room.currentState.getStateEvents("m.room.create", "");
+        if (!createEvent) {
+          console.warn("Room " + this.roomId + " does not have an m.room.create event");
+          return '';
+        }
+        const creatorId = createEvent.getContent().creator;
+        const member = this.room.getMember(creatorId);
+        if (!member) {
+          return creatorId;
+        }
+        return member.user ? member.user.displayName : member.name;
+      }
+      return "";
+    },
+
     roomName() {
       if (this.room) {
         return this.room.name;
@@ -165,6 +186,8 @@ export default {
       handler(newVal, ignoredOldVal) {
         console.log("RoomInfo: Current room changed");
         this.memberCount = newVal.getJoinedMemberCount();
+
+        this.updateQRCode();
       },
     },
   },
@@ -183,6 +206,24 @@ export default {
       this.memberCount = this.room.getJoinedMemberCount();
     },
 
+    updateQRCode() {
+      var fullUrl = this.$router.getRoomLink(this.room.getCanonicalAlias() || this.room.roomId);
+      var canvas = document.getElementById("room-qr");
+      QRCode.toCanvas(
+        canvas,
+        fullUrl,
+        {
+          type: "image/png",
+          margin: 1,
+          width: canvas.clientWidth,
+        },
+        function (error) {
+          if (error) console.error(error);
+          else console.log("success!");
+        }
+      );
+    },
+
     memberAvatar(member) {
       if (member) {
         return member.getAvatarUrl(