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

Resolve "Allow creation of new direct chat using matrix id"

Browse source
This commit is contained in:
N Pex 2022-12-12 16:10:53 +00:00 • committed by n8fr8
parent 3bd119416c
commit 8d3ad1c27f
16 changed files with 245 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

190
src/components/Join.vue
View file

@ -6,25 +6,28 @@
<v-avatar class="join-avatar">
<v-img v-if="roomAvatar" :src="roomAvatar" />
<span v-else class="white--text headline">
{{roomName.substring(0, 1).toUpperCase() }}
{{ roomName.substring(0, 1).toUpperCase() }}
</span>
</v-avatar>
<div class="join-welcome font-weight-bold">
{{ $t("join.title") }}
{{ roomId && roomId.startsWith("@") ? $t("join.title_user") : $t("join.title") }}
</div>
<div class="join-title">
{{ roomName | removeHomeServer }}
{{ roomName }}
</div>
</div>
<hr class="my-10 join-line">
<div class="font-weight-black mb-2" v-if="!currentUser"> Choose a name to use.</div>
<hr class="my-10 join-line" />
<div class="font-weight-black mb-2" v-if="!currentUser">Choose a name to use.</div>
<v-row v-if="canEditProfile">
<v-col cols="10" sm="7">
<v-text-field
solo
@click.native.stop="{}"
@click.native.stop="
{
}
"
v-model="selectedProfile.name"
></v-text-field>
<v-checkbox
@ -47,34 +50,19 @@
<div class="d-inline-block">
<v-avatar color="#e0e0e0">
<v-img v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text headline">{{
userAvatarLetter
}}</span>
<span v-else class="white--text headline">{{ userAvatarLetter }}</span>
</v-avatar>
</div>
{{ userDisplayName }}
</v-col>
</v-row>
<v-btn
id="btn-join"
class="btn-dark"
large
@click.stop="handleJoin"
:loading="loading"
v-if="!currentUser"
>{{ $t("join.enter_room") }}</v-btn
>
<v-btn
id="btn-join"
class="btn-dark"
large
block
@click.stop="handleJoin"
:loading="loading"
v-else
>{{ $t("join.join") }}</v-btn
>
<v-btn id="btn-join" class="btn-dark" large @click.stop="handleJoin" :loading="loading" v-if="!currentUser">{{
roomId && roomId.startsWith("@") ? $t("join.enter_room_user") : $t("join.enter_room")
}}</v-btn>
<v-btn id="btn-join" class="btn-dark" large block @click.stop="handleJoin" :loading="loading" v-else>{{
roomId && roomId.startsWith("@") ? $t("join.join_user") : $t("join.join")
}}</v-btn>
<div v-if="loadingMessage" class="text-center">{{ loadingMessage }}</div>
</div>
@ -86,33 +74,21 @@
<v-col v-for="lang in activeLanguage" :key="lang.value">
<span class="active">{{ lang.text }}</span>
</v-col>
<v-col v-for="(lang, key) in getDisplayLanguage.slice(0,3)" :key="key">
<v-col v-for="(lang, key) in getDisplayLanguage.slice(0, 3)" :key="key">
<button class="inactive" @click="updateLanguage(lang.value)">{{ lang.text }}</button>
</v-col>
<v-col>
<v-btn
id="btn-select-language"
class="language-more"
@click="showSelectLanguageDialog = true"
>
<v-icon >language</v-icon><v-icon >more_horiz</v-icon>
<v-btn id="btn-select-language" class="language-more" @click="showSelectLanguageDialog = true">
<v-icon>language</v-icon><v-icon>more_horiz</v-icon>
</v-btn>
</v-col>
<SelectLanguageDialog
v-model="showSelectLanguageDialog"
v-on:close="showSelectLanguageDialog = false"
/>
<SelectLanguageDialog v-model="showSelectLanguageDialog" v-on:close="showSelectLanguageDialog = false" />
</v-row>
</div>
<div class="d-flex justify-center align-center mt-9">
<div class="mr-2">
<img
src="@/assets/logo.svg"
width="32"
height="32"
class="d-inline"
/>
<img src="@/assets/logo.svg" width="32" height="32" class="d-inline" />
</div>
<div>
<strong>{{ $t("project.name") }}</strong>
@ -131,7 +107,7 @@ import SelectLanguageDialog from "./SelectLanguageDialog.vue";
export default {
name: "Join",
mixins: [LanguageMixin,rememberMeMixin],
mixins: [LanguageMixin, rememberMeMixin],
components: {
SelectLanguageDialog,
},
@ -185,40 +161,23 @@ export default {
if (!this.$matrix.userAvatar) {
return null;
}
return this.$matrix.matrixClient.mxcUrlToHttp(
this.$matrix.userAvatar,
80,
80,
"scale",
true
);
return this.$matrix.matrixClient.mxcUrlToHttp(this.$matrix.userAvatar, 80, 80, "scale", true);
},
userAvatarLetter() {
if (!this.currentUser || !this.currentUser.userId) {
return null;
}
return (
this.currentUserDisplayName || this.currentUser.userId.substring(1)
)
.substring(0, 1)
.toUpperCase();
return (this.currentUserDisplayName || this.currentUser.userId.substring(1)).substring(0, 1).toUpperCase();
},
getDisplayLanguage() {
let displayLanguages = [...this.getLanguages()];
return displayLanguages.filter(lang => lang.display && lang.value !== this.$i18n.locale);
return displayLanguages.filter((lang) => lang.display && lang.value !== this.$i18n.locale);
},
activeLanguage() {
let activeLanguages = [...this.getLanguages()]
return activeLanguages.filter(lang => lang.value === this.$i18n.locale);
}
},
filters: {
removeHomeServer(roomName) {
let lastIndexDash = roomName.lastIndexOf("-");
let lastIndex = lastIndexDash > 0 ? lastIndexDash : roomName.lastIndexOf(":");
return roomName ? roomName.substring(roomName.indexOf("#") + 1, lastIndex) : '';
}
let activeLanguages = [...this.getLanguages()];
return activeLanguages.filter((lang) => lang.value === this.$i18n.locale);
},
},
watch: {
roomId: {
@ -227,10 +186,8 @@ export default {
if (!value || (value && value == oldVal)) {
return; // No change.
}
console.log(
"Join: Current room changed to " + (value ? value : "null")
);
this.roomName = this.roomId;
console.log("Join: Current room changed to " + (value ? value : "null"));
this.roomName = this.removeHomeServer(this.roomId);
this.waitingForInfo = true;
const self = this;
@ -243,10 +200,7 @@ export default {
const room = self.$matrix.getRoom(self.roomAliasOrId);
// Already joined?
if (
room &&
room.hasMembershipState(self.currentUser.user_id, "join")
) {
if (room && room.hasMembershipState(self.currentUser.user_id, "join")) {
// Yes, go to room
self.$navigation.push(
{
@ -274,16 +228,21 @@ export default {
activeLanguage() {
// Null status on language change, we don't know what status we are in so we can't get the right string.
this.loadingMessage = null;
}
},
},
methods: {
removeHomeServer(roomName) {
let lastIndexDash = roomName.lastIndexOf("-");
let lastIndex = lastIndexDash > 0 ? lastIndexDash : roomName.lastIndexOf(":");
return roomName ? roomName.substring(roomName.indexOf("#") + 1, lastIndex) : "";
},
getRoomInfo() {
if (this.roomId.startsWith("#")) {
this.$matrix
.getPublicRoomInfo(this.roomId)
.then((room) => {
console.log("Found room:", room);
this.roomName = room.name;
this.roomName = this.removeHomeServer(room.name);
this.roomAvatar = room.avatar;
})
.catch((err) => {
@ -292,11 +251,26 @@ export default {
.finally(() => {
this.waitingForInfo = false;
});
} 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;
});
} else {
// Private room, try to get name
const room = this.$matrix.getRoom(this.roomId);
if (room) {
this.roomName = room.name || this.roomName;
this.roomName = this.removeHomeServer(room.name || this.roomName);
}
this.waitingForInfo = false;
}
@ -336,28 +310,16 @@ export default {
setProfileData = true;
// Set display name and avatar directly on the matrix object.
if (
this.selectedProfile.name &&
this.selectedProfile.name.length > 0
) {
if (this.selectedProfile.name && this.selectedProfile.name.length > 0) {
this.$matrix.userDisplayName = this.selectedProfile.name;
}
}
if (
!setProfileData ||
!this.selectedProfile.name ||
this.selectedProfile.name.length == 0
) {
if (!setProfileData || !this.selectedProfile.name || this.selectedProfile.name.length == 0) {
return Promise.resolve(user);
} else {
console.log(
"Join: Set display name to: " + this.selectedProfile.name
);
return this.$matrix.matrixClient.setDisplayName(
this.selectedProfile.name,
undefined
);
console.log("Join: Set display name to: " + this.selectedProfile.name);
return this.$matrix.matrixClient.setDisplayName(this.selectedProfile.name, undefined);
}
}.bind(this)
)
@ -368,24 +330,26 @@ export default {
return Promise.resolve("no avatar");
} else {
console.log("Join: Updating avatar");
return util.setAvatar(
this.$matrix,
this.selectedProfile.image,
function (progress) {
console.log("Progress: " + JSON.stringify(progress));
}
);
return util.setAvatar(this.$matrix, this.selectedProfile.image, function (progress) {
console.log("Progress: " + JSON.stringify(progress));
});
}
}.bind(this)
)
.then(
function (ignoreduser) {
.then((ignoreduser) => {
if (this.roomId.startsWith("@")) {
// start direct chat with user
return this.$matrix.getOrCreatePrivateChat(this.roomId).then((room) => {
this.$matrix.setCurrentRoomId(room.roomId);
return room;
});
} else {
console.log("Join: joining room");
this.$analytics.event("Invitations", "Room Joined");
this.loadingMessage = this.$t("join.status_joining");
return this.$matrix.matrixClient.joinRoom(this.roomId);
}.bind(this)
)
}
})
.then((ignoredRoom) => {
this.loading = false;
this.loadingMessage = null;
@ -418,11 +382,7 @@ export default {
mounted() {
this.$matrix.on("Room.myMembership", this.onMyMembership);
this.availableAvatars = util.getDefaultAvatars();
this.selectAvatar(
this.availableAvatars[
Math.floor(Math.random() * this.availableAvatars.length)
]
);
this.selectAvatar(this.availableAvatars[Math.floor(Math.random() * this.availableAvatars.length)]);
// mounted() is called more than once, so multiple instances of this event
// do not necessarily indicate a user was shown the join page more than once.
// To analyze this data, segment users into those who have an "Invitations"
@ -431,10 +391,10 @@ export default {
},
destroyed() {
this.$matrix.off("Room.myMembership", this.onMyMembership);
}
},
};
</script>
<style lang="scss">
@import "@/assets/css/join.scss";
</style>
@import "@/assets/css/join.scss";
</style>