Room avatar picker and progress loading

src/components/Profile.vue

@@ -23,6 +23,7 @@
             size="48"
             color="#e0e0e0"
             @click="showAvatarPicker"
+            v-if="isAvatarLoaded"
           >
             <img v-if="userAvatar" :src="userAvatar" />
             <span v-else class="white--text">{{ userAvatarLetter }}</span>
@@ -36,6 +37,15 @@
               class="d-none"
             />
           </v-avatar>
+          <v-progress-circular
+            :rotate="360"
+            v-else
+            :width="3"
+            :value="loadValue"
+            color="primary"
+          >
+            {{ loadValue }}
+          </v-progress-circular>
         </v-col>
         <v-col class="flex-shrink-1 flex-grow-1">
           <div class="h1">{{ displayName }}</div>
@@ -191,6 +201,8 @@ export default {
       newPassword2: null,
       settingPassword: false,
       passwordErrorMessage: null,
+      isAvatarLoaded: true,
+      loadValue: 0
     };
   },
 
@@ -326,9 +338,14 @@ export default {
         reader.readAsDataURL(event.target.files[0]);
       }
     },
-
     setAvatar(image) {
+      const self = this;
+      this.isAvatarLoaded = false;
       return util.setAvatar(this.$matrix, image, function (progress) {
+        self.loadValue = Math.round(progress.loaded/progress.total * 100);
+        if(progress.loaded === progress.total) {
+          self.isAvatarLoaded = true;
+        }
         console.log("Progress: " + JSON.stringify(progress));
       });
     },

src/components/RoomInfoBottomSheet.vue

@@ -5,12 +5,30 @@
   >
     <div class="room-info-sheet" ref="roomInfoSheetContent">
       <div class="text-center current-room">
-        <v-avatar class="room-avatar">
+        <v-avatar class="room-avatar cursor-pointer" @click="showRoomAvatarPicker" v-if="isRoomAvatarLoaded">
-          <v-img v-if="roomAvatar" :src="roomAvatar" />
+          <v-img v-if="roomAvatar" :src="roomAvatar"/>
           <span v-else class="white--text headline">{{
             roomName.substring(0, 1).toUpperCase()
           }}</span>
+           <input
+            id="room-avatar-picker"
+            ref="roomAvatar"
+            type="file"
+            name="roomAvatar"
+            @change="handleRoomPickedAvatar($event)"
+            accept="image/*"
+            class="d-none"
+          />
         </v-avatar>
+        <v-progress-circular
+          :rotate="360"
+          v-else
+          :width="3"
+          :value="loadValue"
+          color="primary"
+        >
+          {{ loadValue }}
+        </v-progress-circular>
         <div class="h4">{{$t('room_info_sheet.this_room')}}</div>
         <div class="h2">{{ roomName }}</div>
         <v-btn
@@ -28,6 +46,7 @@
 </template>
 
 <script>
+import util from "../plugins/utils";
 import BottomSheet from "./BottomSheet";
 import RoomList from "./RoomList.vue";
 import roomInfoMixin from "./roomInfoMixin";
@@ -35,6 +54,12 @@ import roomInfoMixin from "./roomInfoMixin";
 export default {
   name: "RoomInfoBottomSheet",
   mixins: [roomInfoMixin],
+  data() {
+    return {
+      isRoomAvatarLoaded: true,
+      loadValue: 0
+    }
+  },
   components: {
     BottomSheet,
     RoomList,
@@ -56,9 +81,36 @@ export default {
     createRoom() {
       this.close();
       this.$navigation.push({ name: "CreateRoom" });
-    }
+    },
 
-  },
+    showRoomAvatarPicker() {
+      this.$refs.roomAvatar.click();
+    },
+
+    setRoomAvatar(file) {
+      const self = this;
+      this.isRoomAvatarLoaded = false;
+      return util.setRoomAvatar(
+        this.$matrix.matrixClient,
+        this.room.roomId,
+        file,
+        function (progress) {
+          self.loadValue = Math.round(progress.loaded/progress.total * 100);
+          if(progress.loaded === progress.total) {
+            self.isRoomAvatarLoaded = true;
+          }
+        }
+      );
+    },
+    /**
+     * Handle room picked avatar
+     */
+    handleRoomPickedAvatar(event) {
+      if (event.target.files && event.target.files[0]) {
+        this.setRoomAvatar(event.target.files[0]);
+      }
+    },
+  }
 };
 </script>