butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

"Private chat" header for direct chats

Browse source 
Also, auto-create account and room when joining a DM chat link.
This commit is contained in:
N-Pex 2023-08-30 10:50:45 +02:00
parent 46bd105449
commit 68b241b6ce
9 changed files with 437 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/components/Chat.vue
View file

@ -1,10 +1,15 @@
<template>
<div class="chat-root fill-height d-flex flex-column">
<ChatHeader class="chat-header flex-grow-0 flex-shrink-0"
<ChatHeaderPrivate class="chat-header flex-grow-0 flex-shrink-0"
v-on:header-click="onHeaderClick"
v-on:view-room-details="viewRoomDetails"
v-on:notify="onNotificationDialog"
v-if="!useFileModeNonAdmin" />
v-if="!useFileModeNonAdmin && $matrix.isDirectRoom(room)" />
<ChatHeader class="chat-header flex-grow-0 flex-shrink-0"
v-on:header-click="onHeaderClick"
v-on:view-room-details="viewRoomDetails"
v-on:notify="onNotificationDialog"
v-else-if="!useFileModeNonAdmin" />
<AudioLayout ref="chatContainer" class="auto-audio-player-root" v-if="useVoiceMode" :room="room"
:events="events" :autoplay="!showRecorder"
:timelineSet="timelineSet"
@ -53,6 +58,7 @@
<resize-observer ref="chatContainerResizer" @notify="handleChatContainerResize" />
<CreatedRoomWelcomeHeader v-if="showCreatedRoomWelcomeHeader" v-on:close="closeCreateRoomWelcomeHeader" />
<DirectChatWelcomeHeader v-if="showDirectChatWelcomeHeader" v-on:close="closeDirectChatWelcomeHeader" />
<div v-for="(event, index) in filteredEvents" :key="event.getId()" :eventId="event.getId()">
<!-- DAY Marker, shown for every new day in the timeline -->
@ -358,9 +364,11 @@ import util, { ROOM_TYPE_VOICE_MODE, ROOM_TYPE_FILE_MODE } from "../plugins/util
import MessageOperations from "./messages/MessageOperations.vue";
import AvatarOperations from "./messages/AvatarOperations.vue";
import ChatHeader from "./ChatHeader";
import ChatHeaderPrivate from "./ChatHeaderPrivate.vue";
import VoiceRecorder from "./VoiceRecorder";
import RoomInfoBottomSheet from "./RoomInfoBottomSheet";
import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader";
import DirectChatWelcomeHeader from "./DirectChatWelcomeHeader";
import NoHistoryRoomWelcomeHeader from "./NoHistoryRoomWelcomeHeader.vue";
import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet";
import StickerPickerBottomSheet from "./StickerPickerBottomSheet";
@ -374,6 +382,7 @@ import FileDropLayout from "./file_mode/FileDropLayout";
import { requestNotificationAndServiceWorker, windowNotificationPermission, notificationCount } from "../plugins/notificationAndServiceWorker.js"
import logoMixin from "./logoMixin";
import roomTypeMixin from "./roomTypeMixin";
import roomMembersMixin from "./roomMembersMixin";
const sizeOf = require("image-size");
const dataUriToBuffer = require("data-uri-to-buffer");
@ -409,13 +418,15 @@ ScrollPosition.prototype.prepareFor = function (direction) {
export default {
name: "Chat",
mixins: [chatMixin, logoMixin, roomTypeMixin, sendAttachmentsMixin],
mixins: [chatMixin, logoMixin, roomTypeMixin, sendAttachmentsMixin, roomMembersMixin],
components: {
ChatHeader,
ChatHeaderPrivate,
MessageOperations,
VoiceRecorder,
RoomInfoBottomSheet,
CreatedRoomWelcomeHeader,
DirectChatWelcomeHeader,
NoHistoryRoomWelcomeHeader,
MessageOperationsBottomSheet,
StickerPickerBottomSheet,
@ -480,7 +491,10 @@ export default {
lastRR: null,
/** If we just created this room, show a small welcome header with info */
showCreatedRoomWelcomeHeader: false,
hideCreatedRoomWelcomeHeader: false,
/** For direct chats, show a small welcome header with info about the other party */
hideDirectChatWelcomeHeader: false,
/** An array of recent emojis. Used in the "message operations" popup. */
recentEmojis: [],
@ -703,6 +717,27 @@ export default {
}
}
return this.events;
},
roomCreatedByUsRecently() {
const createEvent = this.room && this.room.currentState.getStateEvents("m.room.create", "");
if (createEvent) {
const creatorId = createEvent.getContent().creator;
return (creatorId == this.$matrix.currentUserId && createEvent.getLocalAge() < 5 * 60000 /* 5 minutes */);
}
return false;
},
isDirectRoom() {
return this.room.getJoinRule() == "invite" && this.joinedAndInvitedMembers.length == 2;
},
showCreatedRoomWelcomeHeader() {
return !this.hideCreatedRoomWelcomeHeader && this.roomCreatedByUsRecently && !this.isDirectRoom;
},
showDirectChatWelcomeHeader() {
return !this.hideDirectChatWelcomeHeader && this.roomCreatedByUsRecently && this.isDirectRoom;
}
},
@ -739,7 +774,8 @@ export default {
this.timelineWindow = null;
this.typingMembers = [];
this.initialLoadDone = false;
this.showCreatedRoomWelcomeHeader = false;
this.hideDirectChatWelcomeHeader = false;
this.hideCreatedRoomWelcomeHeader = false;
// Stop RR timer
this.stopRRTimer();
@ -833,16 +869,6 @@ export default {
this.notificationDialog = false;
},
onRoomJoined(initialEventId) {
// Was this room just created (by you)? Show a small info header in
// that case!
const createEvent = this.room.currentState.getStateEvents("m.room.create", "");
if (createEvent) {
const creatorId = createEvent.getContent().creator;
if (creatorId == this.$matrix.currentUserId && createEvent.getLocalAge() < 5 * 60000 /* 5 minutes */) {
this.showCreatedRoomWelcomeHeader = true;
}
}
// Listen to events
this.$matrix.on("Room.timeline", this.onEvent);
this.$matrix.on("RoomMember.typing", this.onUserTyping);
@ -887,7 +913,7 @@ export default {
self.initialLoadDone = true;
if (initialEventId && !this.showCreatedRoomWelcomeHeader) {
self.scrollToEvent(initialEventId);
} else if (this.showCreatedRoomWelcomeHeader) {
} else if (this.showCreatedRoomWelcomeHeader || this.showDirectChatWelcomeHeader) {
self.onScroll();
}
self.restartRRTimer();
@ -1266,7 +1292,7 @@ export default {
this.timelineWindow
.paginate(EventTimeline.BACKWARDS, 10, true)
.then((success) => {
if (success) {
if (success && this.scrollPosition) {
this.scrollPosition.prepareFor("up");
this.events = this.timelineWindow.getEvents();
this.$nextTick(() => {
@ -1294,7 +1320,7 @@ export default {
.then((success) => {
if (success) {
this.events = this.timelineWindow.getEvents();
if (!this.useVoiceMode) {
if (!this.useVoiceMode && this.scrollPosition) {
this.scrollPosition.prepareFor("down");
this.$nextTick(() => {
// restore scroll position!
@ -1639,7 +1665,17 @@ export default {
},
closeCreateRoomWelcomeHeader() {
this.showCreatedRoomWelcomeHeader = false;
this.hideCreatedRoomWelcomeHeader = false;
this.$nextTick(() => {
// We change the layout when removing the welcome header, so call
// onScroll here to handle updates (e.g. remove the "scroll to last" if we now
// can see all messages).
this.onScroll();
});
},
closeDirectChatWelcomeHeader() {
this.hideDirectChatWelcomeHeader = true;
this.$nextTick(() => {
// We change the layout when removing the welcome header, so call
// onScroll here to handle updates (e.g. remove the "scroll to last" if we now

162
src/components/ChatHeaderPrivate.vue Normal file
View file

@ -0,0 +1,162 @@
<template>
<v-container fluid v-if="room">
<v-row class="chat-header-row flex-nowrap">
<v-col
cols="auto"
class="chat-header-members text-start ma-0 pa-0"
>
<v-avatar size="40" class="clickable me-2 chat-header-avatar" color="grey" @click.stop="onAvatarClicked">
<v-img v-if="privatePartyAvatar(40)" :src="privatePartyAvatar(40)" />
<span v-else class="white--text headline">{{
privateParty.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
</v-col>
<v-col class="chat-header-name ma-0 pa-0 flex-shrink-1 flex-grow-1 flex-nowrap" @click.stop="onHeaderClicked">
<div class="room-title-row">
<div class="room-name-inline text-truncate" :title="privateParty.name">
{{ privateParty.name }}
</div>
<v-icon v-if="$matrix.joinedRooms.length > 1" class="icon-dropdown" size="11">$vuetify.icons.ic_dropdown</v-icon>
<div v-if="$matrix.joinedRooms.length > 1 && notifications" :class="{ 'notification-alert': true, 'popup-open': showMissedItemsInfo }">
<v-icon class="icon-circle" size="11">circle</v-icon>
<!-- MISSED ITEMS POPUP -->
<!-- <div class="missed-items-popup-background" v-if="showMissedItemsInfo" @click.stop="setHasShownMissedItemsHint()"></div> -->
<div class="missed-items-popup" v-if="showMissedItemsInfo" @click.stop="setHasShownMissedItemsHint()">
<div class="text">{{ notificationsText }}</div>
<div class="button clickable" @click.stop="setHasShownMissedItemsHint()">{{$t('menu.ok')}}</div>
</div>
</div>
</div>
<div class="num-members">
<div v-if="roomIsEncrypted" class="private-chat"><v-icon color="#616161">$vuetify.icons.ic_lock</v-icon>{{ $t("room_welcome.direct_private_chat") }}</div>
</div>
</v-col>
<v-col v-if="$matrix.joinedRooms.length > 1" cols="auto" class="text-end ma-0 pa-0 ms-1">
<v-avatar :class="{ 'avatar-32': true, 'clickable': true, 'popup-open': showProfileInfo }" size="26"
color="#e0e0e0" @click.stop="showProfileInfo = true">
<img v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{ userAvatarLetter }}</span>
</v-avatar>
</v-col>
<v-col cols="auto" class="text-end ma-0 pa-0 ms-1">
<!-- <v-btn id="btn-purge-room" v-if="userCanPurgeRoom" class="mx-2 box-shadow-none" fab dark small color="red"
@click.stop="showPurgeConfirmation = true">
<v-icon light>$vuetify.icons.ic_moderator-delete</v-icon>
</v-btn> -->
<v-btn v-if="$matrix.joinedRooms.length == 1" id="btn-leave-room" class="box-shadow-none leave-button" color="red" @click.stop="leaveRoom">
<v-icon color="white">$vuetify.icons.ic_member-leave</v-icon>{{ $t('room.leave') }}
</v-btn>
<v-btn id="btn-leave-room" class="mx-2 box-shadow-none" fab dark small color="red" @click.stop="leaveRoom" v-else>
<v-icon color="white">$vuetify.icons.ic_member-leave</v-icon>
</v-btn>
</v-col>
<v-col v-if="$matrix.joinedRooms.length > 1" cols="auto" class="text-end ma-0 pa-0 ms-1 clickable close-button more-menu-button">
<div :class="{ 'popup-open': showMoreMenu }">
<v-btn class="mx-2 box-shadow-none" fab dark small color="transparent" @click.stop="onShowMoreMenu">
<v-icon size="15">$vuetify.icons.ic_more</v-icon>
</v-btn>
</div>
</v-col>
</v-row>
<!-- "REALLY LEAVE?" dialog -->
<LeaveRoomDialog :show="showLeaveConfirmation" :room="room" @close="showLeaveConfirmation = false" />
<!-- PROFILE INFO POPUP -->
<ProfileInfoPopup :show="showProfileInfo" @close="showProfileInfo = false" />
<!-- MORE MENU POPUP -->
<MoreMenuPopup :show="showMoreMenu" :menuItems="moreMenuItems" @close="showMoreMenu = false"
v-on:leave="showLeaveConfirmation = true" />
<!-- PURGE ROOM POPUP -->
<PurgeRoomDialog :show="showPurgeConfirmation" :room="room" @close="showPurgeConfirmation = false" />
<RoomExport :room="room" v-if="downloadingChat" v-on:close="downloadingChat = false" />
</v-container>
</template>
<script>
import LeaveRoomDialog from "../components/LeaveRoomDialog";
import ProfileInfoPopup from "../components/ProfileInfoPopup";
import MoreMenuPopup from "../components/MoreMenuPopup";
import PurgeRoomDialog from "../components/PurgeRoomDialog";
import RoomExport from "../components/RoomExport";
import ChatHeader from "./ChatHeader.vue";
export default {
name: "ChatHeaderPrivate",
extends: ChatHeader,
components: {
LeaveRoomDialog,
ProfileInfoPopup,
MoreMenuPopup,
PurgeRoomDialog,
RoomExport
},
};
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
.popup-open {
position: relative;
overflow: visible;
color: white;
}
.popup-open::after {
position: absolute;
left: 50%;
// Need to move the "more items" arrow to the left, since it's too close to the edge
// and would interfere with the dialog rounding...
.more-menu-button & {
left: calc(50% - 4px);
}
content: " ";
top: 42px;
margin-left: -10px;
width: 16px;
height: 16px;
transform: rotate(45deg);
border-radius: 2px;
background-color: currentColor;
z-index: 400;
pointer-events: none;
animation-duration: 0.3s;
animation-delay: 0.2s;
animation-fill-mode: both;
animation-name: fadein;
animation-iteration-count: 1;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.private-chat {
display: flex;
align-items: center;
}
.private-chat .v-icon {
width: 9px;
height: 11px;
margin-right: 6px;
}
</style>

72
src/components/DirectChatWelcomeHeader.vue Normal file
View file

@ -0,0 +1,72 @@
<template>
<div style="text-align: center;">
<div class="created-room-welcome-header">
<v-avatar class="typing-user" size="40" color="grey" v-if="isPrivate">
<img v-if="privatePartyAvatar(80)" :src="privatePartyAvatar(80)" />
<span v-else class="white--text headline">{{
privateParty.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
<h2>{{ $t("room_welcome.direct_hi") }}</h2>
<div class="mt-2" v-if="privateParty">{{ $t("room_welcome.direct_info", { user: privateParty.name }) }}</div>
</div>
</div>
</template>
<script>
import roomInfoMixin from "./roomInfoMixin";
export default {
name: "CreatedRoomWelcomeHeader",
mixins: [roomInfoMixin],
computed: {
roomHistoryDescription() {
const visibility = this.$matrix.getRoomHistoryVisibility(this.room);
switch (visibility) {
case "world_readable":
return this.$t("room_welcome.room_history_is", {
type: this.$t("message.room_history_world_readable"),
});
case "shared":
return this.$t("room_welcome.room_history_is", {
type: this.$t("message.room_history_shared"),
});
case "invited":
return this.$t("room_welcome.room_history_is", {
type: this.$t("message.room_history_invited"),
});
case "joined":
return this.$t("room_welcome.room_history_joined");
}
return null;
},
},
data() {
return {
publicRoomLinkCopied: false
}
},
methods: {
copyPublicLink() {
const self = this;
this.$copyText(this.publicRoomLink).then(
function (ignored) {
// Success!
self.publicRoomLinkCopied = true;
setInterval(() => {
// Hide again
self.publicRoomLinkCopied = false;
}, 3000);
},
function (e) {
console.log(e);
}
);
}
}
};
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
</style>

34
src/components/Join.vue
View file

@ -132,6 +132,23 @@
</div>
</div>
</div>
<!-- Loading indicator -->
<v-container
v-else
fluid
fill-height
class="loading-indicator"
>
<v-row align="center" justify="center">
<v-col class="text-center">
<v-progress-circular
indeterminate
color="primary"
></v-progress-circular>
</v-col>
</v-row>
</v-container>
</template>
<script>
@ -304,19 +321,10 @@ export default {
});
} else if (this.roomId.startsWith("@")) {
// Direct chat with user
this.$matrix
.getPublicUserInfo(this.roomId)
.then((info) => {
console.log("Got user info:", info);
this.roomName = info.displayname;
this.roomAvatar = info.avatar;
})
.catch((err) => {
console.log("Failed to get user info: ", err);
})
.finally(() => {
this.waitingForInfo = false;
});
this.waitingForInfo = false;
this.$nextTick(() => {
this.handleJoin();
});
} else {
// Private room, try to get name
const room = this.$matrix.getRoom(this.roomId);

31
src/components/roomInfoMixin.js
View file

@ -82,6 +82,23 @@ export default {
return isAdmin;
},
isPrivate() {
return this.$matrix.isDirectRoom(this.room);
},
/**
* If this is a direct chat with someone, return that member here.
* @returns MXMember of the one we are chatting with, or 'undefined'.
*/
privateParty() {
if (this.isPrivate) {
const membersButMe = this.room.getMembers().filter(m => m.userId != this.$matrix.currentUserId);
if (membersButMe.length == 1) {
return membersButMe[0];
}
}
return undefined;
},
},
watch: {
room: {
@ -165,5 +182,19 @@ export default {
this.updatePermissions();
}
},
privatePartyAvatar(size) {
const other = this.privateParty;
if (other) {
return other.getAvatarUrl(
this.$matrix.matrixClient.getHomeserverUrl(),
size,
size,
"scale",
true
);
}
return undefined;
},
},
}

69
src/components/roomMembersMixin.js Normal file
View file

@ -0,0 +1,69 @@
export default {
data() {
return {
joinedAndInvitedMembers: [],
};
},
mounted() {
this.$matrix.on("Room.timeline", this.roomMembersMixinOnEvent);
this.updateMembers();
},
destroyed() {
this.$matrix.off("Room.timeline", this.roomMembersMixinOnEvent);
},
computed: {
joinedMembers() {
return this.joinedAndInvitedMembers.filter(m => m.membership === "join");
}
},
watch: {
room: {
handler() {
this.updateMembers();
},
},
},
methods: {
roomMembersMixinOnEvent(event) {
if (this.room && this.room.roomId == event.getRoomId()) {
// For this room
if (event.getType() == "m.room.member") {
this.updateMembers();
}
}
},
sortMemberFunction(a, b) {
const myUserId = this.$matrix.currentUserId;
// Place ourselves at the top!
if (a.userId == myUserId) {
return -1;
} else if (b.userId == myUserId) {
return 1;
}
// Then sort by power level
if (a.powerLevel > b.powerLevel) {
return -1;
} else if (b.powerLevel > a.powerLevel) {
return 1;
}
// Then by name
const aName = a.user ? a.user.displayName : a.name;
const bName = b.user ? b.user.displayName : b.name;
return aName.localeCompare(bName);
},
updateMembers() {
if (this.room) {
this.joinedAndInvitedMembers = this.room.getMembers().sort(this.sortMemberFunction);
} else {
this.joinedAndInvitedMembers = [];
}
},
},
};