N-Pex
parent
f5587ce0c9
commit
6e6bae4caa
4 changed files with 265 additions and 16 deletions
182
src/components/CreateRoom.vue
Normal file
182
src/components/CreateRoom.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
let percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total);
|
||||
if (progressCallback) {
|
||||
progressCallback(percentCompleted);
|
||||
}
|
||||
axios.get(url, {
|
||||
responseType: 'arraybuffer', onDownloadProgress: progressEvent => {
|
||||
let percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total);
|
||||
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])) {
|
||||
nodes.splice(0,0,parentNode.children[i]);
|
||||
i-=1;
|
||||
}
|
||||
while (i >= 0 && this.isChildVisible(parentNode, parentNode.children[i])) {
|
||||
nodes.splice(0, 0, parentNode.children[i]);
|
||||
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 ||
|
||||
rect1.left > rect2.right ||
|
||||
rect1.bottom < rect2.top ||
|
||||
var overlap = !(rect1.right < rect2.left ||
|
||||
rect1.left > rect2.right ||
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue