Initial commit
This commit is contained in:
N-Pex
parent
60df431f80
commit
fd332bda79
22 changed files with 13206 additions and 0 deletions
271
src/components/Chat.vue
Normal file
271
src/components/Chat.vue
Normal file
|
|
@ -0,0 +1,271 @@
|
|||
<template>
|
||||
<div class="chat-root fill-height d-flex flex-column" ma-0 pa-0>
|
||||
<div
|
||||
class="chat-content flex-grow-1 flex-shrink-1"
|
||||
ref="chatContainer"
|
||||
style="overflow-x: hidden; overflow-y: auto"
|
||||
>
|
||||
<div v-for="(event, index) in events" :key="index">
|
||||
<!-- Contact joined the chat -->
|
||||
<div
|
||||
class="messageJoin"
|
||||
v-if="
|
||||
event.event.state_key != myAddress &&
|
||||
event.getContent().membership == 'join' &&
|
||||
event.getType() == 'm.room.member'
|
||||
"
|
||||
>
|
||||
{{ stateEventDisplayName(event) }} joined the chat
|
||||
</div>
|
||||
|
||||
<!-- Contact left the chat -->
|
||||
<div
|
||||
class="messageJoin"
|
||||
v-if="
|
||||
event.event.state_key != myAddress &&
|
||||
event.getContent().membership == 'leave' &&
|
||||
event.getType() == 'm.room.member'
|
||||
"
|
||||
>
|
||||
{{ stateEventDisplayName(event) }} left the chat
|
||||
</div>
|
||||
|
||||
<!-- Contact invited to the chat -->
|
||||
<div
|
||||
class="messageJoin"
|
||||
v-if="
|
||||
event.event.state_key != myAddress &&
|
||||
event.getContent().membership == 'invite' &&
|
||||
event.getType() == 'm.room.member'
|
||||
"
|
||||
>
|
||||
{{ stateEventDisplayName(event) }} was invited to the chat...
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="
|
||||
event.getSender() != myAddress &&
|
||||
event.getType() == 'm.room.message'
|
||||
"
|
||||
>
|
||||
<div class="messageIn">
|
||||
<div class="sender">{{ event.getSender() }}</div>
|
||||
<div class="bubble">
|
||||
<div class="message">{{ event.getContent().body }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time">
|
||||
{{ formatTime(event.event.origin_server_ts) }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="event.getType() == 'm.room.message'">
|
||||
<div class="messageOut">
|
||||
<div class="sender">{{ "You" }}</div>
|
||||
<div class="bubble">
|
||||
<div class="message">{{ event.getContent().body }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time">
|
||||
{{ formatTime(event.event.origin_server_ts) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CONTACT IS TYPING -->
|
||||
<div v-show="contactIsTyping" class="typing">Someone is typing...</div>
|
||||
</div>
|
||||
|
||||
<!-- Input area -->
|
||||
<div class="input-area flex-grow-0 flex-shrink-0">
|
||||
<v-textarea
|
||||
ref="messageInput"
|
||||
full-width
|
||||
v-model="currentInput"
|
||||
no-resize
|
||||
class="input-message"
|
||||
placeholder="Send message"
|
||||
hide-details
|
||||
></v-textarea>
|
||||
<div align-self="end" class="text-right">
|
||||
<v-btn
|
||||
elevation="0"
|
||||
@click.stop="sendMessage"
|
||||
:disabled="sendButtonDisabled"
|
||||
>Send</v-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Chat",
|
||||
|
||||
data: () => ({
|
||||
events: [],
|
||||
currentInput: "",
|
||||
contactIsTyping: false,
|
||||
}),
|
||||
|
||||
computed: {
|
||||
room() {
|
||||
return this.$store.state.currentRoom;
|
||||
},
|
||||
roomId() {
|
||||
return this.room != null ? this.room.roomId : null;
|
||||
},
|
||||
sendButtonDisabled() {
|
||||
return this.currentInput.length == 0;
|
||||
},
|
||||
myAddress() {
|
||||
// TODO
|
||||
return "@npex2:neo.keanu.im";
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
room() {
|
||||
console.log("Chat: Current room changed");
|
||||
|
||||
// Clear old events
|
||||
this.events = [];
|
||||
|
||||
// Remove all old room listeners
|
||||
this.$matrixClient.removeAllListeners("Room.timeline");
|
||||
this.$matrixClient.removeAllListeners("RoomMember.typing");
|
||||
|
||||
this.contactIsTyping = false;
|
||||
|
||||
if (!this.room) {
|
||||
return; // no room
|
||||
}
|
||||
|
||||
this.room.timeline.forEach((event) => {
|
||||
this.handleMatrixEvent(event);
|
||||
});
|
||||
|
||||
// Add event listener for this room
|
||||
this.$matrixClient.on(
|
||||
"Room.timeline",
|
||||
function (event, ignoredroom, ignoredtoStartOfTimeline) {
|
||||
if (event.getRoomId() !== this.roomId) {
|
||||
return; // Not for this room
|
||||
}
|
||||
if (this.handleMatrixEvent(event)) {
|
||||
this.$nextTick(function () {
|
||||
const container = this.$refs.chatContainer;
|
||||
if (container.children.length > 0) {
|
||||
const lastChild =
|
||||
container.children[container.children.length - 1];
|
||||
console.log("Scroll into view", lastChild);
|
||||
window.requestAnimationFrame(() => {
|
||||
lastChild.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "end",
|
||||
inline: "nearest",
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
this.$matrixClient.on(
|
||||
"RoomMember.typing",
|
||||
function (event, member) {
|
||||
if (member.userId == this.contactAddress) {
|
||||
this.contactIsTyping = member.typing;
|
||||
}
|
||||
}.bind(this)
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Handle a matrix event. Add it to our array if valid type.
|
||||
* @returns True if the event was added, false otherwise.
|
||||
*/
|
||||
handleMatrixEvent(event) {
|
||||
console.log("Type is", event.getType());
|
||||
|
||||
if (event.getType() == "m.room.encryption") {
|
||||
this.$root.matrixClient.setRoomEncryption(
|
||||
event.event.room_id,
|
||||
event.getContent()
|
||||
);
|
||||
}
|
||||
|
||||
const allowedEvents = [
|
||||
"m.room.message",
|
||||
"m.room.member",
|
||||
"m.room.encrypted",
|
||||
];
|
||||
if (allowedEvents.includes(event.getType())) {
|
||||
console.log("Add event", event);
|
||||
this.events.push(event);
|
||||
return true;
|
||||
} else {
|
||||
console.log("Ignore event", event);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get a display name given an event.
|
||||
*/
|
||||
stateEventDisplayName(event) {
|
||||
return event.getContent().displayname || event.event.state_key;
|
||||
},
|
||||
|
||||
sendMessage() {
|
||||
if (this.currentInput.length > 0) {
|
||||
this.sendMatrixMessage(this.currentInput);
|
||||
this.currentInput = "";
|
||||
}
|
||||
},
|
||||
|
||||
sendMatrixMessage(body) {
|
||||
// Send chat message sent event
|
||||
window.logtag("event", "chat_message_sent", {
|
||||
event_category: "chat",
|
||||
});
|
||||
|
||||
var content = {
|
||||
body: body,
|
||||
msgtype: "m.notice",
|
||||
};
|
||||
this.$root.matrixClient.sendEvent(
|
||||
this.currentRoomId,
|
||||
"m.room.message",
|
||||
content,
|
||||
"",
|
||||
(err, ignoredres) => {
|
||||
console.log(err);
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
formatTime(time) {
|
||||
const date = new Date();
|
||||
date.setTime(time);
|
||||
|
||||
const today = new Date();
|
||||
if (
|
||||
date.getDate() == today.getDate() &&
|
||||
date.getMonth() == today.getMonth() &&
|
||||
date.getFullYear() == today.getFullYear()
|
||||
) {
|
||||
// For today, skip the date part
|
||||
return date.toLocaleTimeString();
|
||||
}
|
||||
return date.toLocaleString();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue