Create room

Work on issue #67

src/components/CreateRoom.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="profile">
+    <div class="chat-header">
+      <v-container fluid>
+        <div class="room-name">Create Group</div>
+        <v-btn
+          text
+          class="back"
+          v-show="$navigation && $navigation.canPop()"
+          @click.stop="$navigation.pop"
+        >
+          <v-icon>close</v-icon>
+        </v-btn>
+      </v-container>
+    </div>
+
+    <v-card class="members ma-3 pa-3" flat>
+      <div class="text-center">
+        <v-avatar
+          size="120"
+          color="#ededed"
+          style="margin-bottom: 40px"
+          @click.stop="showAvatarPicker"
+        >
+          <v-img v-if="roomAvatar" :src="roomAvatar" />
+          <span v-else style="font-size: 80px" class="white--text">{{
+            roomAvatarLetter
+          }}</span>
+        </v-avatar>
+        <v-text-field
+          v-model="roomName"
+          label="Name"
+          color="black"
+          background-color="white"
+          outlined
+          v-on:keyup.enter="$refs.topic.focus()"
+          :disabled="loading"
+        ></v-text-field>
+        <v-text-field
+          ref="topic"
+          v-model="roomTopic"
+          label="Topic (optional)"
+          color="black"
+          background-color="white"
+          outlined
+          v-on:keyup.enter="$refs.create.$el.focus()"
+          :disabled="loading"
+        ></v-text-field>
+        <v-btn
+          ref="create"
+          class="btn-dark"
+          large
+          block
+          @click.stop="create"
+          :loading="loading"
+          :disabled="loading"
+          >Create</v-btn
+        >
+        <div v-if="status">{{ status }}</div>
+        <input
+          ref="avatar"
+          type="file"
+          name="avatar"
+          @change="handlePickedAvatar($event)"
+          accept="image/*"
+          style="display: none"
+        />
+      </div>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import util from "../plugins/utils";
+
+export default {
+  name: "CreateRoom",
+  data() {
+    return {
+      roomName: "",
+      roomTopic: "",
+      roomAvatar: null,
+      roomAvatarFile: null,
+      loading: false,
+      status: "",
+    };
+  },
+
+  computed: {
+    roomAvatarLetter() {
+      if (!this.roomName) {
+        return null;
+      }
+      return this.roomName.substring(0, 1).toUpperCase();
+    },
+  },
+
+  methods: {
+    create() {
+      this.loading = true;
+      var roomId;
+      this.status = "Creating room";
+      this.$matrix.matrixClient
+        .createRoom({
+          visibility: "private", // Not listed!
+          room_alias_name: this.roomName.replace(/\s/g,'').toLowerCase(),
+          name: this.roomName,
+          topic: this.roomTopic,
+          preset: "public_chat",
+          initial_state: [{
+            type: 'm.room.encryption',
+            state_key: '',
+            content: {
+                algorithm: 'm.megolm.v1.aes-sha2',
+            }
+          }],
+        })
+        .then(({ room_id, room_alias }) => {
+          roomId = room_alias || room_id;
+          if (!this.roomAvatarFile) {
+            return true;
+          }
+          const self = this;
+          return util.setRoomAvatar(
+            this.$matrix.matrixClient,
+            room_id,
+            this.roomAvatarFile,
+            function (p) {
+              if (p.total) {
+                self.status =
+                  "Uploading avatar: " + (p.loaded || 0) + " of " + p.total;
+              } else {
+                self.status = "Uploading avatar: " + (p.loaded || 0);
+              }
+            }
+          );
+        })
+        .then(() => {
+          this.status = "";
+          this.$navigation.push(
+            { name: "Chat", params: { roomId: util.sanitizeRoomId(roomId) } },
+            -1
+          );
+        })
+        .catch((error) => {
+          this.status =
+            (error.data && error.data.error) ||
+            error.message ||
+            error.toString();
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+
+    /**
+     * Show picker to select room avatar file
+     */
+    showAvatarPicker() {
+      this.$refs.avatar.click();
+    },
+
+    /**
+     * Handle picked avatar
+     */
+    handlePickedAvatar(event) {
+      if (event.target.files && event.target.files[0]) {
+        var reader = new FileReader();
+        reader.onload = (e) => {
+          this.roomAvatar = e.target.result;
+          this.roomAvatarFile = event.target.files[0];
+        };
+        reader.readAsDataURL(event.target.files[0]);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/RoomInfoBottomSheet.vue

@@ -25,6 +25,13 @@
         >
       </div>
       <room-list :title="'Other groups'" v-on:close="close" />
+      <v-btn
+          height="20px"
+          color="black"
+          class="outlined-button"
+          @click.stop="createRoom"
+          >Create group</v-btn
+        >
     </div>
   </SwipeableBottomSheet>
 </template>
@@ -72,7 +79,13 @@ export default {
     showDetails() {
       this.close();
       this.$navigation.push({ name: "RoomInfo" });
+    },
+
+    createRoom() {
+      this.close();
+      this.$navigation.push({ name: "CreateRoom" });
     }
+
   },
 };
 </script>

src/plugins/utils.js

@@ -12,7 +12,7 @@ var duration = require('dayjs/plugin/duration')
 dayjs.extend(duration);
 
 // Store info about getUserMedia BEFORE we aply polyfill(s)!
-var _browserCanRecordAudioF = function() {
+var _browserCanRecordAudioF = function () {
     var legacyGetUserMedia = (navigator.getUserMedia ||
         navigator.webkitGetUserMedia ||
         navigator.mozGetUserMedia ||
@@ -41,13 +41,14 @@ class Util {
                 reject("No url found!");
             }
 
-            axios.get(url, { responseType: 'arraybuffer', onDownloadProgress: progressEvent => {
+            axios.get(url, {
-                let percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total);
+                responseType: 'arraybuffer', onDownloadProgress: progressEvent => {
-                        if (progressCallback) {
+                    let percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total);
-                            progressCallback(percentCompleted);
+                    if (progressCallback) {
-                        }
+                        progressCallback(percentCompleted);
                     }
-                 })
+                }
+            })
                 .then(response => {
                     return this.decryptIfNeeded(file, response);
                 })
@@ -62,7 +63,7 @@ class Util {
                     if (progressCallback) {
                         progressCallback(null);
                     }
-                });   
+                });
         });
     }
 
@@ -390,14 +391,14 @@ class Util {
         if (middle) {
             var nodes = [parentNode.children[middle]];
             var i = middle - 1;
-                while (i >= 0 && this.isChildVisible(parentNode, parentNode.children[i])) {
+            while (i >= 0 && this.isChildVisible(parentNode, parentNode.children[i])) {
-                    nodes.splice(0,0,parentNode.children[i]);
+                nodes.splice(0, 0, parentNode.children[i]);
-                    i-=1;
+                i -= 1;
-                }
+            }
             i = middle + 1;
             while (i < parentNode.children.length && this.isChildVisible(parentNode, parentNode.children[i])) {
                 nodes.push(parentNode.children[i]);
-                i+=1;
+                i += 1;
             }
             return nodes;
         }
@@ -407,9 +408,9 @@ class Util {
     isChildVisible(parentNode, childNode) {
         const rect1 = parentNode.getBoundingClientRect();
         const rect2 = childNode.getBoundingClientRect();
-        var overlap = !(rect1.right < rect2.left || 
+        var overlap = !(rect1.right < rect2.left ||
-            rect1.left > rect2.right || 
+            rect1.left > rect2.right ||
-            rect1.bottom < rect2.top || 
+            rect1.bottom < rect2.top ||
             rect1.top > rect2.bottom)
         return overlap;
     }
@@ -483,6 +484,49 @@ class Util {
         })
     }
 
+    setRoomAvatar(matrixClient, roomId, file, onUploadProgress) {
+        return new Promise((resolve, reject) => {
+            var reader = new FileReader();
+            reader.onload = (e) => {
+                const fileContents = e.target.result;
+                var data = new Uint8Array(fileContents);
+
+                const info = {
+                    mimetype: file.type,
+                    size: file.size
+                };
+
+                const opts = {
+                    type: file.type,
+                    name: "Room Avatar",
+                    progressHandler: onUploadProgress,
+                    onlyContentUri: false
+                };
+
+                var messageContent = {
+                    body: file.name,
+                    info: info
+                }
+
+                matrixClient.uploadContent(data, opts)
+                    .then((response) => {
+                        messageContent.url = response.content_uri;
+                        return matrixClient.sendStateEvent(roomId, "m.room.avatar", messageContent);
+                    })
+                    .then(result => {
+                        resolve(result);
+                    })
+                    .catch(err => {
+                        reject(err);
+                    });
+            }
+            reader.onerror = (err) => {
+                reject(err);
+            }
+            reader.readAsArrayBuffer(file);
+        });
+    }
+
     /**
      * Return number of whole days between the timestamps, at end of that day.
      * @param {*} ts1 

src/router/index.js

@@ -5,6 +5,8 @@ import Chat from '../components/Chat.vue'
 import Join from '../components/Join.vue'
 import Login from '../components/Login.vue'
 import Profile from '../components/Profile.vue'
+import CreateRoom from '../components/CreateRoom.vue'
+
 import util from '../plugins/utils'
 
 Vue.use(VueRouter)
@@ -41,6 +43,14 @@ const routes = [
       title: 'Profile'
     }
   },
+  {
+    path: '/createroom',
+    name: 'CreateRoom',
+    component: CreateRoom,
+    meta: {
+      title: 'Create'
+    }
+  },
   {
     path: '/login',
     name: 'Login',