Compare commits
No commits in common. "2c22cae07fce320d458eb092c27bd0dc0849c3cd" and "4a28e22b823402aa335b5ce74daffd874efe54f9" have entirely different histories.
2c22cae07f
...
4a28e22b82
@ -4,7 +4,7 @@
|
||||
"bundledWebRuntime": false,
|
||||
"npmClient": "npm",
|
||||
"webDir": "./dist",
|
||||
"linuxAndroidStudioPath": "/home/alban/.local/share/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7199119/bin/studio.sh",
|
||||
"linuxAndroidStudioPath": "~/.local/share/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7199119/bin/studio.sh",
|
||||
"plugins": {
|
||||
"SplashScreen": {
|
||||
"launchShowDuration": 0
|
||||
|
||||
@ -28,7 +28,7 @@ input{
|
||||
color: #fff;
|
||||
background-color: #1d1d1d;
|
||||
border-radius: 1.25rem;
|
||||
border: 0.1rem solid #fff;
|
||||
border: 1px solid #fff;
|
||||
text-align: center;
|
||||
font-size: 1.1rem;
|
||||
margin: 0.5rem;
|
||||
|
||||
@ -1,30 +1,36 @@
|
||||
<template>
|
||||
<img v-if="mxcURL" :src="getAvatarUrl(mxcURL)" class="userThumbnail image"/>
|
||||
<img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail image"/>
|
||||
<div v-else v-html="getJdenticon()" class="userThumbnail identicon"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import parseMXC from '@modular-matrix/parse-mxc';
|
||||
import {matrix} from "@/main";
|
||||
import {toSvg} from 'jdenticon';
|
||||
import {getAvatarUrl} from '@/lib/getMxc';
|
||||
|
||||
export default {
|
||||
name: 'userThumbnail.vue',
|
||||
name: "userThumbnail.vue",
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
mxcURL: String,
|
||||
username: String,
|
||||
fallback: String,
|
||||
homeserver: String,
|
||||
size: Number
|
||||
},
|
||||
methods: {
|
||||
thumbnailUrl(){
|
||||
let mxc = parseMXC.parse(this.mxcURL);
|
||||
return `${this.homeserver||matrix.baseUrl}/_matrix/media/v1/thumbnail/${
|
||||
mxc.homeserver}/${mxc.id}?width=${this.imageSize}&height=${this.imageSize}&method=${this.resizeMethod}`;
|
||||
},
|
||||
getFontSize(){
|
||||
return window.getComputedStyle(document.body,null).fontSize.split('px', 1)||16;
|
||||
return window.getComputedStyle(document.body,null).fontSize.split("px", 1)||16;
|
||||
},
|
||||
getJdenticon(){
|
||||
return toSvg(this.fallback, this.getFontSize()*this.size);
|
||||
},
|
||||
getAvatarUrl
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
@ -18,15 +18,15 @@
|
||||
<p v-if="members.length>20">and {{members.length-20}} other members</p>
|
||||
</div>
|
||||
</div>
|
||||
<icon class="closeBtn" @click.native="closeChatInfo()" ic="./sym/ic_close_white.svg" />
|
||||
<icon class="closeBtn" @click.native="closeChatInfo()" ic="./sym/ic_close_white_24px.svg" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import icon from './icon.vue';
|
||||
import {matrix} from "@/main";
|
||||
import UserListElement from "@/components/userListElement";
|
||||
import avatar from "@/components/avatar";
|
||||
import {getMxcFromRoom} from "@/lib/getMxc";
|
||||
import {getUser} from "@/lib/matrixUtils";
|
||||
|
||||
export default {
|
||||
name: "chatInformation",
|
||||
@ -40,10 +40,12 @@ export default {
|
||||
closeChatInfo: Function
|
||||
},
|
||||
methods: {
|
||||
getUser(userId){
|
||||
return matrix.client.getUser(userId);
|
||||
},
|
||||
getMembers(){
|
||||
return Object.keys(this.room.currentState.members)
|
||||
},
|
||||
getUser,
|
||||
getMxcFromRoom
|
||||
},
|
||||
data(){
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div :class="type==='send'?'messageSend':'messageReceive'" class="message">
|
||||
<div v-if="replyEvent" class="reply">
|
||||
<span class="username">{{calcUserName(replyEvent.sender)}}</span><br>
|
||||
<span v-html="replyEvent.type==='m.room.message'?parseMessage(replyEvent.content.body):'unkown event'"></span>
|
||||
{{replyEvent.sender}}<br>
|
||||
{{replyEvent.type==='m.room.message'?replyEvent.content.body:'unkown event'}}
|
||||
</div>
|
||||
<div v-html="parseMessage(msg)"></div>
|
||||
<div class="time">{{time}}</div>
|
||||
@ -10,12 +10,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {matrix} from '@/main';
|
||||
import {calcUserName} from '@/lib/matrixUtils';
|
||||
import {parseMessage} from '@/lib/eventUtils';
|
||||
import {matrix} from "@/main";
|
||||
|
||||
export default {
|
||||
name: 'message',
|
||||
name: "message",
|
||||
props: {
|
||||
msg: String,
|
||||
time: String,
|
||||
@ -24,6 +22,18 @@ export default {
|
||||
roomId: String
|
||||
},
|
||||
methods:{
|
||||
solveTextLinks(text){
|
||||
return (text || "").replace(
|
||||
/([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi,
|
||||
(match, space, url)=>{
|
||||
let hyperlink = url;
|
||||
if (!hyperlink.match('^https?://')) {
|
||||
hyperlink = 'http://' + hyperlink;
|
||||
}
|
||||
return `${space}<a href="${hyperlink}" target="_blank">${url}</a>`;
|
||||
}
|
||||
)
|
||||
},
|
||||
async getReplyEvent(content) {
|
||||
let replyId = this.getReplyId(content);
|
||||
if (replyId === undefined) return undefined;
|
||||
@ -33,11 +43,15 @@ export default {
|
||||
},
|
||||
getReplyId(content){
|
||||
if(!content['m.relates_to']) return undefined;
|
||||
if(!content['m.relates_to']['m.in_reply_to']) return undefined;
|
||||
return content['m.relates_to']['m.in_reply_to'].event_id;
|
||||
return content['m.relates_to']['m.in_reply_to'].event_id || undefined;
|
||||
},
|
||||
calcUserName,
|
||||
parseMessage
|
||||
parseMessage(msg){
|
||||
return this.solveTextLinks(
|
||||
msg.replace(/>.*\n/gm, '').trim()
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
);
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
@ -65,13 +79,13 @@ export default {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.messageReceive{
|
||||
background-color: #424141;
|
||||
background-color: #42b983;
|
||||
border-radius: 1rem 1rem 1rem 0;
|
||||
}
|
||||
.messageSend{
|
||||
margin-left:auto;
|
||||
margin-right:0;
|
||||
background-color: #357882;
|
||||
background-color: #42a7b9;
|
||||
border-radius: 1rem 1rem 0 1rem;
|
||||
}
|
||||
.time{
|
||||
@ -85,7 +99,4 @@ export default {
|
||||
padding-left: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.username{
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="newMessageBanner" ref="newMessageBanner">
|
||||
<div class="reply" v-if="replyTo" @click="resetReplyTo">
|
||||
<span class="username">{{calcUserName(replyTo.sender)}}</span><br>
|
||||
{{parseMessage(replyTo.content.body)}}
|
||||
</div>
|
||||
<form v-on:submit.prevent="sendMessage()">
|
||||
<form class="newMessageBanner" ref="newMessageBanner" v-on:submit.prevent="sendMessage()">
|
||||
<label for="newMessageInput"></label>
|
||||
<textarea
|
||||
@keyup.enter.exact="sendMessage()"
|
||||
@input="resizeMessageBanner(); sendTyping(2000);"
|
||||
v-model="event.content.body"
|
||||
ref="newMessageInput" class="newMessageInput"
|
||||
rows="1" placeholder="type a message ..."
|
||||
@input="resizeMessageBanner()"
|
||||
v-model="msg.content.body"
|
||||
ref="newMessageInput"
|
||||
id="newMessageInput"
|
||||
class="newMessageInput"
|
||||
autocomplete="off"
|
||||
rows="1"
|
||||
placeholder="type a message ..."
|
||||
/>
|
||||
<icon
|
||||
type="submit"
|
||||
@ -19,76 +19,55 @@
|
||||
ic="./sym/ic_send_white.svg"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icon from '@/components/icon.vue';
|
||||
import {matrix} from '@/main.js';
|
||||
import {parseMessage} from '@/lib/eventUtils';
|
||||
import {calcUserName} from '@/lib/matrixUtils';
|
||||
|
||||
export default {
|
||||
name: 'newMessage',
|
||||
name: "newMessage",
|
||||
components: {
|
||||
icon
|
||||
},
|
||||
props: {
|
||||
onResize: Function,
|
||||
roomId: String,
|
||||
replyTo: Object,
|
||||
resetReplyTo: Function
|
||||
roomId: String
|
||||
},
|
||||
methods: {
|
||||
sendMessage(){
|
||||
let content = this.event.content;
|
||||
let content = this.msg.content;
|
||||
if (!content.body.trim()) return;
|
||||
matrix.sendEvent(this.event, this.roomId, this.replyTo);
|
||||
content.body = '';
|
||||
this.resetReplyTo();
|
||||
let msgSend = Object.assign({}, this.msg);
|
||||
matrix.sendEvent(msgSend, this.roomId);
|
||||
content.body = "";
|
||||
let id = this.$refs.newMessageInput;
|
||||
id.style.height = '1.25rem';
|
||||
id.style.height = "1.25rem";
|
||||
this.onResize(id.parentElement.clientHeight);
|
||||
},
|
||||
sendTyping(timeout){
|
||||
if (this.waitForSendTyping) return;
|
||||
matrix.client.sendTyping(this.roomId, true, timeout+100);
|
||||
setTimeout(()=>this.waitForSendTyping=false, timeout);
|
||||
},
|
||||
resizeMessageBanner(){
|
||||
let id = this.$refs.newMessageInput;
|
||||
id.style.height = '1.25rem';
|
||||
id.style.height = `${id.scrollHeight}px`;
|
||||
this.onResize(this.$refs.newMessageBanner.clientHeight);
|
||||
},
|
||||
focusInput(){
|
||||
this.$refs.newMessageInput.focus();
|
||||
this.onResize(id.parentElement.clientHeight);
|
||||
},
|
||||
toggleEmojiPicker() {
|
||||
this.showEmojiPicker = !this.showEmojiPicker;
|
||||
},
|
||||
onSelectEmoji(emoji) {
|
||||
this.event.content.body += emoji.data;
|
||||
},
|
||||
parseMessage,
|
||||
calcUserName
|
||||
this.msg.content.body += emoji.data;
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
event: {
|
||||
type: 'm.room.message',
|
||||
msg: {
|
||||
type: "m.room.message",
|
||||
content: {
|
||||
body: '',
|
||||
msgtype: 'm.text',
|
||||
'm.relates_to': {
|
||||
'm.in_reply_to': {
|
||||
event_id: undefined
|
||||
}
|
||||
}
|
||||
body: "",
|
||||
msgtype: "m.text"
|
||||
}
|
||||
},
|
||||
showEmojiPicker: false,
|
||||
waitForSendTyping: false
|
||||
showEmojiPicker: false
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -110,7 +89,7 @@ export default {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0;
|
||||
left: 1rem;
|
||||
left: 2rem;
|
||||
min-height: 1.5rem;
|
||||
max-height: 10rem;
|
||||
width: calc(100% - 7rem);
|
||||
@ -131,18 +110,4 @@ export default {
|
||||
bottom: 0.25rem;
|
||||
background-color: unset;
|
||||
}
|
||||
.reply{
|
||||
position: relative;
|
||||
width: calc(100% - 7rem);
|
||||
left: 1rem;
|
||||
border-left: 2px solid #fff;
|
||||
padding-left: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
margin-right: 0.5rem;
|
||||
word-break: break-word;
|
||||
white-space: pre-line;
|
||||
}
|
||||
.username{
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -17,7 +17,7 @@
|
||||
import avatar from "@/components/avatar";
|
||||
import {getMxcFromRoom} from "@/lib/getMxc";
|
||||
import {getTime} from "@/lib/getTimeStrings";
|
||||
import {calcUserName} from "@/lib/matrixUtils";
|
||||
import {matrix} from "@/main";
|
||||
|
||||
export default {
|
||||
name: "userListElement",
|
||||
@ -37,7 +37,10 @@ export default {
|
||||
if (!room.timeline[room.timeline.length-1]) return undefined;
|
||||
return room.timeline[room.timeline.length-1].event;
|
||||
},
|
||||
calcUserName,
|
||||
calcUserName(userId) {
|
||||
if (matrix.user === userId) return 'you';
|
||||
return matrix.client.getUser(userId).displayName || userId;
|
||||
},
|
||||
getMxcFromRoom
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,14 +22,13 @@
|
||||
:class="groupTimeline?'indent username':'username'"
|
||||
v-if="group[0].sender !== user && groupTimeline"
|
||||
>
|
||||
{{calcUserName(group[0].sender)}}
|
||||
{{getUser(group[0].sender).displayName || group[0].sender}}
|
||||
</div>
|
||||
<div
|
||||
:class="groupTimeline?'indent event':'event'"
|
||||
v-for="event in group"
|
||||
:key="event.origin_server_ts"
|
||||
:title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
|
||||
@contextmenu.prevent="setReplyTo(event)"
|
||||
>
|
||||
<message
|
||||
v-if="event.content.msgtype==='m.text'"
|
||||
@ -38,10 +37,6 @@
|
||||
:content="event.content"
|
||||
:roomId="roomId"
|
||||
/>
|
||||
<div v-else-if="event.content.msgtype==='m.notice'" class="notice">
|
||||
{{event.content.body}}
|
||||
<span class="time">{{getTime(event.origin_server_ts)}}</span>
|
||||
</div>
|
||||
<div v-else-if="event.type==='m.room.member'" class="info">
|
||||
{{membershipEvents[event.content.membership]}}
|
||||
<span class="time">{{getTime(event.origin_server_ts)}}</span>
|
||||
@ -55,12 +50,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import message from '@/components/message';
|
||||
import avatar from '@/components/avatar';
|
||||
import splitArray from '@/lib/splitArray';
|
||||
import {getDate, getTime} from '@/lib/getTimeStrings';
|
||||
import {getUser, calcUserName} from '@/lib/matrixUtils';
|
||||
|
||||
import message from "@/components/message";
|
||||
import avatar from "@/components/avatar";
|
||||
import {matrix} from "@/main";
|
||||
import splitArray from "@/lib/splitArray";
|
||||
import {getDate, getTime} from "@/lib/getTimeStrings";
|
||||
export default {
|
||||
name: 'eventGroup',
|
||||
components: {
|
||||
@ -71,12 +65,12 @@ export default {
|
||||
timeline: Array,
|
||||
user: String,
|
||||
groupTimeline: Boolean,
|
||||
roomId: String,
|
||||
setReplyTo: Function
|
||||
roomId: String
|
||||
},
|
||||
methods: {
|
||||
getUser,
|
||||
calcUserName,
|
||||
getUser(userId) {
|
||||
return matrix.client.getUser(userId);
|
||||
},
|
||||
splitArray,
|
||||
getDate,
|
||||
getTime
|
||||
@ -138,18 +132,11 @@ export default {
|
||||
font-weight: bold;
|
||||
}
|
||||
.event{
|
||||
.info {
|
||||
.info{
|
||||
font-style: italic;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
.time {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
.notice{
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
.time{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="topBanner">
|
||||
<div>
|
||||
<icon @click.native="closeChat()" class="topIcon" ic="./sym/ic_arrow_back_white.svg" />
|
||||
<icon @click.native="closeChat()" class="topIcon" ic="./sym/arrow_back-24px.svg" />
|
||||
<div @click="openChatInfo()" class="container">
|
||||
<avatar class="topIcon avatar" :mxcURL="getMxcFromRoom(room)" :fallback="room.roomId" :size="3"/>
|
||||
<div class="chatName">{{room.name}}</div>
|
||||
|
||||
@ -1,47 +0,0 @@
|
||||
import {getMxcFromUserId, getAvatarUrl} from '@/lib/getMxc';
|
||||
import {calcUserName} from '@/lib/matrixUtils';
|
||||
import {getRoom} from '@/lib/matrixUtils';
|
||||
import {router} from '@/router';
|
||||
import {Capacitor, Plugins} from '@capacitor/core';
|
||||
const {LocalNotifications} = Plugins;
|
||||
|
||||
export class NotificationHandler{
|
||||
constructor() {
|
||||
this.activateNotification();
|
||||
}
|
||||
async activateNotification(){
|
||||
if (!window.Notification){
|
||||
console.log('notifications are unsupported')
|
||||
return false;
|
||||
}
|
||||
if (Notification.permission === 'granted') return true;
|
||||
return await Notification.requestPermission()
|
||||
.then(permission => {return permission === 'granted'});
|
||||
}
|
||||
showNotification(event){
|
||||
if (Capacitor.isNative) return this.showNativeNotification(event);
|
||||
if (Notification.permission !== 'granted') return false;
|
||||
console.log(event);
|
||||
let mxc = getMxcFromUserId(event.sender);
|
||||
new Notification(`${calcUserName(event.sender)} in ${getRoom(event.room_id).name}`, {
|
||||
body: event.content.body,
|
||||
icon: mxc?getAvatarUrl(mxc):undefined
|
||||
}).onclick = ()=>router.push(`/rooms/${event.room_id}`);
|
||||
}
|
||||
showNativeNotification(event){
|
||||
LocalNotifications.schedule({
|
||||
notifications: [
|
||||
{
|
||||
title: `${calcUserName(event.sender)} in ${getRoom(event.room_id).name}`,
|
||||
body: event.content.body,
|
||||
id: 1,
|
||||
schedule: { at: new Date(Date.now() + 1000 * 5) },
|
||||
sound: null,
|
||||
attachments: null,
|
||||
actionTypeId: '',
|
||||
extra: null
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
export function solveTextLinks(text){
|
||||
return (text || '').replace(
|
||||
/([^\S]|^)(((https?:\/\/)|(www\.))(\S+))/gi,
|
||||
(match, space, url)=>{
|
||||
let hyperlink = url;
|
||||
if (!hyperlink.match('^https?://')) {
|
||||
hyperlink = 'http://' + hyperlink;
|
||||
}
|
||||
return `${space}<a href="${hyperlink}" target="_blank">${url}</a>`;
|
||||
}
|
||||
)
|
||||
}
|
||||
export function parseMessage(msg){
|
||||
return solveTextLinks(
|
||||
msg.replace(/>.*\n/gm, '').trim()
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,5 @@
|
||||
import sdk from 'matrix-js-sdk'
|
||||
import {matrix} from '@/main';
|
||||
import parseMXC from '@modular-matrix/parse-mxc';
|
||||
import {matrix} from "@/main";
|
||||
|
||||
export function getMxcFromUser(user){
|
||||
return user.avatarUrl;
|
||||
@ -11,16 +10,10 @@ export function getMxcFromUserId(userId){
|
||||
}
|
||||
|
||||
export function getMxcFromRoom(room){
|
||||
let avatarState = room.getLiveTimeline().getState(sdk.EventTimeline.FORWARDS).getStateEvents('m.room.avatar');
|
||||
let avatarState = room.getLiveTimeline().getState(sdk.EventTimeline.FORWARDS).getStateEvents("m.room.avatar");
|
||||
return avatarState.length>0?avatarState[avatarState.length-1].getContent().url:undefined;
|
||||
}
|
||||
|
||||
export function getMxcFromRoomId(roomId){
|
||||
return getMxcFromRoom(matrix.client.getRoom(roomId));
|
||||
}
|
||||
|
||||
export function getAvatarUrl(mxcUrl, size = 64, resizeMethod = 'crop'){
|
||||
let mxc = parseMXC.parse(mxcUrl);
|
||||
return `${matrix.baseUrl}/_matrix/media/v1/thumbnail/${
|
||||
mxc.homeserver}/${mxc.id}?width=${size}&height=${size}&method=${resizeMethod}`;
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
import matrix from 'matrix-js-sdk';
|
||||
import {NotificationHandler} from "@/lib/NotificationHandler";
|
||||
|
||||
export class MatrixHandler {
|
||||
constructor(clientDisplayName = 'matrix-chat') {
|
||||
@ -10,7 +9,6 @@ export class MatrixHandler {
|
||||
this.loading = undefined;
|
||||
this.user = undefined;
|
||||
this.baseUrl = undefined;
|
||||
this.notify = new NotificationHandler();
|
||||
}
|
||||
login(user, password, baseUrl, onError, callback = ()=>{}){
|
||||
if (this.client){ console.log('there is already an active session'); return; }
|
||||
@ -59,35 +57,29 @@ export class MatrixHandler {
|
||||
await this.client.stopClient();
|
||||
this.client = undefined;
|
||||
}
|
||||
async startSync(callback = ()=>{}){
|
||||
startSync(callback = ()=>{}){
|
||||
this.loading = true;
|
||||
await this.client.startClient();
|
||||
this.client.startClient();
|
||||
this.client.once('sync', (state) => {
|
||||
console.log(state);
|
||||
this.rooms = this.client.getRooms();
|
||||
console.log(this.rooms)
|
||||
this.loading = false;
|
||||
callback();
|
||||
this.listenToPushEvents()
|
||||
});
|
||||
}
|
||||
listenToPushEvents(){
|
||||
this.client.on('event', event => {
|
||||
if (this.client.getPushActionsForEvent(event).notify){
|
||||
this.notify.showNotification(event.event);
|
||||
}
|
||||
async sendEvent(msg, roomId){
|
||||
const msgSend = {
|
||||
type: msg.type,
|
||||
content: {
|
||||
body: msg.content.body.trim(),
|
||||
msgtype: msg.content.msgtype,
|
||||
},
|
||||
};
|
||||
await this.client.sendEvent(roomId, msgSend.type, msgSend.content, '').then(() => {
|
||||
console.log('message sent successfully');
|
||||
}).catch((err) => {
|
||||
console.log(`error while sending message => ${err}`);
|
||||
});
|
||||
}
|
||||
async sendEvent({content, type}, roomId, replyTo = undefined){
|
||||
await this.client.sendEvent(roomId, type, {
|
||||
body: content.body.trim(),
|
||||
msgtype: content.msgtype,
|
||||
'm.relates_to': {
|
||||
'm.in_reply_to': {
|
||||
event_id: replyTo?replyTo.event_id:undefined
|
||||
}
|
||||
}
|
||||
}).then(() => console.log('message sent successfully'))
|
||||
.catch((err) => console.log(`error while sending message => ${err}`)
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import {matrix} from '@/main';
|
||||
|
||||
export function getUser(userId) {
|
||||
return matrix.client.getUser(userId);
|
||||
}
|
||||
export function calcUserName(userId){
|
||||
if (matrix.user === userId) return 'you';
|
||||
return matrix.client.getUser(userId).displayName || userId;
|
||||
}
|
||||
export function getRoom(roomId){
|
||||
return matrix.client.getRoom(roomId);
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import App from './App.vue'
|
||||
import {router} from '@/router'
|
||||
import {router} from './router.js'
|
||||
import {MatrixHandler} from './lib/matrixHandler.js'
|
||||
import {cookieHandler} from './lib/cookieHandler.js';
|
||||
|
||||
|
||||
40
src/router.js
Normal file
40
src/router.js
Normal file
@ -0,0 +1,40 @@
|
||||
import VueRouter from 'vue-router';
|
||||
import login from '@/views/login';
|
||||
import chat from '@/views/chat';
|
||||
import rooms from '@/views/rooms';
|
||||
import admin from '@/views/admin';
|
||||
|
||||
export const router = new VueRouter({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: login
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: login
|
||||
},
|
||||
{
|
||||
path: '/chat/*',
|
||||
name: 'chat',
|
||||
component: chat
|
||||
},
|
||||
{
|
||||
path: '/rooms/*',
|
||||
name: 'room',
|
||||
component: rooms
|
||||
},
|
||||
{
|
||||
path: '/rooms',
|
||||
name: 'rooms',
|
||||
component: rooms
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
name: 'admin',
|
||||
component: admin
|
||||
}
|
||||
]
|
||||
})
|
||||
@ -1,40 +0,0 @@
|
||||
import VueRouter from 'vue-router';
|
||||
import login from '@/views/login';
|
||||
import chat from '@/views/chat';
|
||||
import rooms from '@/views/rooms';
|
||||
import admin from '@/views/admin';
|
||||
|
||||
export const router = new VueRouter({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: login
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: login
|
||||
},
|
||||
{
|
||||
path: '/chat/*',
|
||||
name: 'chat',
|
||||
component: chat
|
||||
},
|
||||
{
|
||||
path: '/rooms/*',
|
||||
name: 'room',
|
||||
component: rooms
|
||||
},
|
||||
{
|
||||
path: '/rooms',
|
||||
name: 'rooms',
|
||||
component: rooms
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
name: 'admin',
|
||||
component: admin
|
||||
}
|
||||
]
|
||||
})
|
||||
@ -1,21 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="chatContainer" class="chatContainer">
|
||||
<div @scroll="onScroll()" ref="timelineContainer" class="timelineContainer">
|
||||
<div @scroll="onScroll()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
|
||||
<div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div>
|
||||
<p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
|
||||
<timeline
|
||||
:timeline="room.timeline" :group-timeline="isGroup()"
|
||||
:user="user" :roomId="room.roomId"
|
||||
:setReplyTo="event=>{replyTo=event; resize();}"
|
||||
/>
|
||||
<timeline :timeline="room.timeline" :group-timeline="isGroup()" :user="user" :roomId="room.roomId" />
|
||||
</div>
|
||||
<icon v-if="showScrollBtn" @click.native="scroll.scrollToBottom()" id="scrollDown" ic="./sym/ic_expand_more_black.svg" />
|
||||
</div>
|
||||
<newMessage
|
||||
:onResize="height=>resize(height)" :roomId="room.roomId" ref="newMessage"
|
||||
:replyTo="replyTo" :resetReplyTo="()=>replyTo=undefined"
|
||||
/>
|
||||
<newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
|
||||
<topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
|
||||
</div>
|
||||
</template>
|
||||
@ -27,7 +20,7 @@ import Icon from '@/components/icon';
|
||||
import {matrix} from '@/main';
|
||||
import splitArray from '@/lib/splitArray.js'
|
||||
import timeline from '@/components/timeline';
|
||||
import scrollHandler from '@/lib/scrollHandler';
|
||||
import scrollHandler from "@/lib/scrollHandler";
|
||||
|
||||
export default {
|
||||
name: 'chat',
|
||||
@ -45,10 +38,10 @@ export default {
|
||||
},
|
||||
methods:{
|
||||
onScroll(){
|
||||
if (this.$refs.timelineContainer.scrollTop < 400 && this.loadingStatus !== 'loading') this.loadEvents();
|
||||
this.showScrollBtn = this.scroll.getScrollBottom() > 500;
|
||||
if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
|
||||
this.showScrollBtn = this.scroll.getScrollBottom() > 400;
|
||||
},
|
||||
resize(height = this.$refs.newMessage.clientHeight){
|
||||
resize(height){
|
||||
this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3.5rem)`;
|
||||
},
|
||||
isGroup(){
|
||||
@ -56,10 +49,10 @@ export default {
|
||||
},
|
||||
async loadEvents(){
|
||||
let scrollBottom = this.scroll.getScrollBottom();
|
||||
this.loadingStatus = 'loading';
|
||||
await matrix.client.scrollback(this.room, 30);
|
||||
this.loadingStatus = 'load more';
|
||||
this.scroll.setScrollBottom(scrollBottom)
|
||||
this.loadingStatus = 'loading ...';
|
||||
await matrix.client.paginateEventTimeline(this.room.getLiveTimeline(), {backwards: true})
|
||||
.then(state => this.loadingStatus = state?'load more':false);
|
||||
this.scroll.setScrollBottom(scrollBottom);
|
||||
},
|
||||
getUser(userId){
|
||||
return matrix.client.getUser(userId);
|
||||
@ -71,22 +64,15 @@ export default {
|
||||
showScrollBtn: false,
|
||||
scrollOnUpdate: true,
|
||||
loadingStatus: 'load more',
|
||||
scroll: ()=>{},
|
||||
replyTo: undefined
|
||||
scroll: ()=>{}
|
||||
}
|
||||
},
|
||||
updated(){
|
||||
if(this.scroll.getScrollBottom() < 400 && this.loadingStatus !== 'loading') this.scroll.scrollToBottom();
|
||||
if(this.scroll.getScrollBottom() < 350) this.scroll.scrollToBottom();
|
||||
},
|
||||
mounted(){
|
||||
this.scroll = new scrollHandler(this.$refs.timelineContainer);
|
||||
this.scroll = new scrollHandler(this.$refs.msgContainer);
|
||||
this.scroll.scrollToBottom();
|
||||
this.onScroll();
|
||||
},
|
||||
watch: {
|
||||
'$route'(){
|
||||
this.scroll.scrollToBottom();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -99,7 +85,7 @@ export default {
|
||||
top: 3.5rem;
|
||||
width: 100%;
|
||||
height: calc(100% - 7rem);
|
||||
.timelineContainer{
|
||||
.messagesContainer{
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@ -6,11 +6,7 @@
|
||||
<div id="roomList" class="roomList">
|
||||
<h1 class="wideElement">[chat]</h1><h1 class="smallElement">[c]</h1>
|
||||
<input v-model="search" class="input wideElement" type="text" maxlength="50" placeholder="search">
|
||||
<div
|
||||
v-for="room in Object.assign([], matrix.rooms)
|
||||
.sort(obj => obj.timeline[obj.timeline.length-1].event.origin_server_ts)"
|
||||
:key="room.roomId" @click="openChat(room)"
|
||||
>
|
||||
<div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" >
|
||||
<room-list-element
|
||||
v-if="!search || room.name.toLowerCase().includes(search.toLowerCase().trim())"
|
||||
:room="room"
|
||||
@ -20,14 +16,14 @@
|
||||
</div>
|
||||
<chat
|
||||
class="chat"
|
||||
v-if="showRoom && getCurrentRoom()"
|
||||
:room="getCurrentRoom()"
|
||||
v-if="currentRoom"
|
||||
:room="currentRoom"
|
||||
:user="matrix.user"
|
||||
:close-chat="closeChat"
|
||||
:close-chat="()=>currentRoom=undefined"
|
||||
:open-chat-info="()=>showChatInfo=true"
|
||||
/>
|
||||
<div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
|
||||
<chatInformation v-if="showRoom && showChatInfo" :room="getCurrentRoom()" :close-chat-info="()=>showChatInfo=false"/>
|
||||
<chatInformation v-if="currentRoom && showChatInfo" :room="currentRoom" :close-chat-info="()=>showChatInfo=false"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -38,7 +34,6 @@ import {matrix} from "@/main";
|
||||
import ThrobberOverlay from "@/components/throbberOverlay";
|
||||
import {getMxcFromRoom} from "@/lib/getMxc";
|
||||
import roomListElement from "@/components/roomListElement";
|
||||
import {getRoom} from "@/lib/matrixUtils";
|
||||
|
||||
export default {
|
||||
name: "rooms",
|
||||
@ -51,25 +46,18 @@ export default {
|
||||
methods:{
|
||||
openChat(room){
|
||||
this.showChatInfo = false;
|
||||
this.showRoom = false;
|
||||
this.currentRoom = undefined
|
||||
this.$nextTick(() => this.currentRoom = room);
|
||||
this.$router.push(`/rooms/${room.roomId}`);
|
||||
this.$nextTick(() => this.showRoom = true);
|
||||
this.search = '';
|
||||
},
|
||||
getMxcFromRoom,
|
||||
getRoom,
|
||||
getCurrentRoom(){
|
||||
return getRoom(this.$route.path.split('/')[2]);
|
||||
},
|
||||
closeChat(){
|
||||
this.$router.push('/rooms');
|
||||
}
|
||||
getMxcFromRoom
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
matrix,
|
||||
currentRoom: undefined,
|
||||
showChatInfo: false,
|
||||
showRoom: true,
|
||||
search: ''
|
||||
}
|
||||
},
|
||||
@ -114,7 +102,7 @@ export default {
|
||||
text-align: center;
|
||||
}
|
||||
input{
|
||||
width: calc(100% - 5.2rem);
|
||||
width: calc(100% - 5rem);
|
||||
}
|
||||
.wideElement{
|
||||
display: block;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user