Guest avatars
This commit is contained in:
N-Pex
parent
7b2b8df829
commit
dbd7c28660
18 changed files with 301 additions and 103 deletions
|
|
@ -650,10 +650,10 @@ export default {
|
|||
showAttachmentPicker() {
|
||||
// Guests not currently allowed to send attachments (=actually upload them)
|
||||
// See https://matrix.org/docs/spec/client_server/r0.2.0#guest-access
|
||||
if (this.$matrix.currentUser && this.$matrix.currentUser.is_guest) {
|
||||
this.showNotAllowedForGuests = true;
|
||||
return;
|
||||
}
|
||||
// if (this.$matrix.currentUser && this.$matrix.currentUser.is_guest) {
|
||||
// this.showNotAllowedForGuests = true;
|
||||
// return;
|
||||
// }
|
||||
this.$refs.attachment.click()
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -21,15 +21,26 @@
|
|||
<div class="join-message">
|
||||
<!-- Join the group chat in a web browser or with the Keanu app. -->
|
||||
</div>
|
||||
<v-combobox
|
||||
v-if="!currentUser || currentUser"
|
||||
@update:search-input="updateDisplayName"
|
||||
:items="defaultDisplayNames"
|
||||
:value="displayName"
|
||||
label="User name"
|
||||
outlined
|
||||
dense
|
||||
></v-combobox>
|
||||
<v-container class="join-user-info">
|
||||
<v-row>
|
||||
<v-col class="flex-grow-0 flex-shrink-0">
|
||||
<v-avatar @click="showAvatarPicker = true">
|
||||
<v-img v-if="userAvatar" :src="userAvatar.image" />
|
||||
</v-avatar>
|
||||
</v-col>
|
||||
<v-col class="flex-shrink-1 flex-grow-1">
|
||||
<v-combobox
|
||||
v-if="!currentUser || currentUser"
|
||||
@update:search-input="updateDisplayName"
|
||||
:items="defaultDisplayNames"
|
||||
:value="displayName"
|
||||
label="User name"
|
||||
outlined
|
||||
dense
|
||||
></v-combobox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<!--<v-btn
|
||||
class="btn-light"
|
||||
|
|
@ -67,6 +78,48 @@
|
|||
|
||||
<div v-if="loadingMessage">{{ loadingMessage }}</div>
|
||||
</div>
|
||||
|
||||
<v-dialog
|
||||
scrollable
|
||||
:fullscreen="$vuetify.breakpoint.xs"
|
||||
width="500"
|
||||
transition="dialog-bottom-transition"
|
||||
v-model="showAvatarPicker"
|
||||
>
|
||||
<v-card>
|
||||
<v-toolbar dark flat color="primary">
|
||||
<v-btn icon dark @click="showAvatarPicker = false">
|
||||
<v-icon>close</v-icon>
|
||||
</v-btn>
|
||||
<v-toolbar-title>Select an Avatar</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-container row wrap>
|
||||
<v-col
|
||||
v-for="avatar in availableAvatars"
|
||||
:key="avatar.id"
|
||||
xs4
|
||||
sm3
|
||||
d-flex
|
||||
>
|
||||
<v-card tile flat class="d-flex">
|
||||
<v-card-text class="d-flex">
|
||||
<v-avatar
|
||||
size="48"
|
||||
@click="selectAvatar(avatar)"
|
||||
class="avatar-picker-avatar"
|
||||
:class="{ current: avatar === userAvatar }"
|
||||
>
|
||||
<img :src="avatar.image" />
|
||||
</v-avatar>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -86,12 +139,17 @@ export default {
|
|||
loadingMessage: null,
|
||||
waitingForInfo: true,
|
||||
waitingForMembership: false,
|
||||
userAvatar: null,
|
||||
displayName: null,
|
||||
defaultDisplayNames: ["Guest Pandolin", "Guest Iguana", "Guest Horse"],
|
||||
defaultDisplayNames: [],
|
||||
availableAvatars: [],
|
||||
showAvatarPicker: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$matrix.on("Room.myMembership", this.onMyMembership);
|
||||
this.availableAvatars = util.getDefaultAvatars();
|
||||
this.userAvatar = this.availableAvatars[0];
|
||||
|
||||
this.roomId = this.$matrix.currentRoomId;
|
||||
this.roomName = this.roomId;
|
||||
|
|
@ -124,11 +182,13 @@ export default {
|
|||
.catch((ignoredErr) => {
|
||||
this.waitingForMembership = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!this.currentUser || this.currentUser.is_guest) {
|
||||
var values = require("!!raw-loader!../assets/usernames.txt").default.split('\n').filter((item) => {
|
||||
return item.length > 0;
|
||||
})
|
||||
var values = require("!!raw-loader!../assets/usernames.txt")
|
||||
.default.split("\n")
|
||||
.filter((item) => {
|
||||
return item.length > 0;
|
||||
});
|
||||
this.displayName = values[Math.floor(Math.random() * values.length)];
|
||||
this.defaultDisplayNames = values;
|
||||
}
|
||||
|
|
@ -188,20 +248,48 @@ export default {
|
|||
if (this.currentUser) {
|
||||
clientPromise = this.$matrix.getMatrixClient(this.currentUser);
|
||||
} else {
|
||||
clientPromise = this.$store.dispatch("auth/login", this.guestUser)
|
||||
clientPromise = this.$store.dispatch("auth/login", this.guestUser);
|
||||
}
|
||||
return clientPromise
|
||||
.then(function(user) {
|
||||
if ((this.currentUser && !this.currentUser.is_guest) || !this.displayName) {
|
||||
return Promise.resolve(user);
|
||||
} else {
|
||||
return this.$matrix.matrixClient.setDisplayName(this.displayName, undefined);
|
||||
}
|
||||
}.bind(this))
|
||||
.then(function(ignoreduser) {
|
||||
this.loadingMessage = "Joining room...";
|
||||
return this.$matrix.matrixClient.joinRoom(this.roomId);
|
||||
}.bind(this))
|
||||
.then(
|
||||
function (user) {
|
||||
if (
|
||||
(this.currentUser && !this.currentUser.is_guest) ||
|
||||
!this.displayName
|
||||
) {
|
||||
return Promise.resolve(user);
|
||||
} else {
|
||||
return this.$matrix.matrixClient.setDisplayName(
|
||||
this.displayName,
|
||||
undefined
|
||||
);
|
||||
}
|
||||
}.bind(this)
|
||||
)
|
||||
.then(
|
||||
function () {
|
||||
if (
|
||||
(this.currentUser && !this.currentUser.is_guest) ||
|
||||
!this.userAvatar
|
||||
) {
|
||||
return Promise.resolve("no avatar");
|
||||
} else {
|
||||
return util.setAvatar(
|
||||
this.$matrix.matrixClient,
|
||||
this.userAvatar.image,
|
||||
function (progress) {
|
||||
console.log("Progress: " + JSON.stringify(progress));
|
||||
}
|
||||
);
|
||||
}
|
||||
}.bind(this)
|
||||
)
|
||||
.then(
|
||||
function (ignoreduser) {
|
||||
this.loadingMessage = "Joining room...";
|
||||
return this.$matrix.matrixClient.joinRoom(this.roomId);
|
||||
}.bind(this)
|
||||
)
|
||||
.then((room) => {
|
||||
this.loading = false;
|
||||
this.loadingMessage = null;
|
||||
|
|
@ -222,7 +310,12 @@ export default {
|
|||
|
||||
updateDisplayName(value) {
|
||||
this.displayName = value;
|
||||
}
|
||||
},
|
||||
|
||||
selectAvatar(avatar) {
|
||||
this.userAvatar = avatar;
|
||||
this.showAvatarPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,65 @@
|
|||
<template>
|
||||
<div v-if="room">
|
||||
<v-container fluid>
|
||||
<v-row class="chat-header-row align-center">
|
||||
<div class="chat-header">
|
||||
<v-container fluid>
|
||||
<v-row class="chat-header-row align-center">
|
||||
<v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
|
||||
<v-btn
|
||||
v-show="$navigation && $navigation.canPop()"
|
||||
icon
|
||||
@click.stop="$navigation.pop"
|
||||
>
|
||||
<v-icon>arrow_back</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
|
||||
<v-btn v-show="$navigation && $navigation.canPop()" icon @click.stop="$navigation.pop">
|
||||
<v-icon>arrow_back</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<!-- <v-col class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
|
||||
<!-- <v-col class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
|
||||
<v-btn icon class="members-icon" @click.stop="showRoomInfo">
|
||||
<v-icon>people</v-icon>
|
||||
</v-btn>
|
||||
<div class="num-members">{{ memberCount }}</div>
|
||||
</v-col> -->
|
||||
|
||||
<v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
|
||||
<div class="room-name" v-if="room">{{ room.summary.info.title }}</div>
|
||||
</v-col>
|
||||
<!-- <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
|
||||
<v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
|
||||
<div class="room-name" v-if="room">
|
||||
{{ room.summary.info.title }}
|
||||
</div>
|
||||
</v-col>
|
||||
<!-- <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
|
||||
<v-btn class="leave-button">Leave</v-btn>
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
<v-card class="members ma-3">
|
||||
<v-card-title>Members<v-spacer></v-spacer><div>{{ room.getJoinedMemberCount() }}</div></v-card-title>
|
||||
<v-card-title
|
||||
>Members<v-spacer></v-spacer>
|
||||
<div>{{ room.getJoinedMemberCount() }}</div></v-card-title
|
||||
>
|
||||
<v-card-text>
|
||||
<div class="member ma-2" v-for="member in room.getJoinedMembers()" :key="member.userId">
|
||||
<v-avatar class="avatar" size="40" color="grey">
|
||||
<img
|
||||
v-if="memberAvatar(member)"
|
||||
:src="memberAvatar(member)"
|
||||
/>
|
||||
<span v-else class="white--text headline">{{
|
||||
member.name.substring(0, 1).toUpperCase()
|
||||
}}</span>
|
||||
</v-avatar>
|
||||
{{ member.user ? member.user.displayName : member.name }}{{ (member.userId == $matrix.currentUserId) ? " (you)" : "" }}
|
||||
<v-btn color="black" v-if="member.userId == $matrix.currentUserId" text absolute right @click.stop="showEditDialog = true">edit</v-btn>
|
||||
<div
|
||||
class="member ma-2"
|
||||
v-for="member in room.getJoinedMembers()"
|
||||
:key="member.userId"
|
||||
>
|
||||
<v-avatar class="avatar" size="40" color="grey">
|
||||
<img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
|
||||
<span v-else class="white--text headline">{{
|
||||
member.name.substring(0, 1).toUpperCase()
|
||||
}}</span>
|
||||
</v-avatar>
|
||||
{{ member.user ? member.user.displayName : member.name
|
||||
}}{{ member.userId == $matrix.currentUserId ? " (you)" : "" }}
|
||||
<v-btn
|
||||
color="black"
|
||||
v-if="member.userId == $matrix.currentUserId"
|
||||
text
|
||||
absolute
|
||||
right
|
||||
@click.stop="showEditDialog = true"
|
||||
>edit</v-btn
|
||||
>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
|
@ -54,22 +74,29 @@
|
|||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- EDIT dialog -->
|
||||
<v-dialog v-model="showEditDialog" class="ma-0 pa-0" width="50%">
|
||||
<v-card>
|
||||
<v-card-title>Display name</v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field v-model="displayName" />
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text @click="showEditDialog = false">Cancel</v-btn>
|
||||
<v-btn color="primary" text @click="$matrix.matrixClient.setDisplayName(displayName);showEditDialog = false">Ok</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- EDIT dialog -->
|
||||
<v-dialog v-model="showEditDialog" class="ma-0 pa-0" width="50%">
|
||||
<v-card>
|
||||
<v-card-title>Display name</v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field v-model="displayName" />
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text @click="showEditDialog = false">Cancel</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
text
|
||||
@click="
|
||||
$matrix.matrixClient.setDisplayName(displayName);
|
||||
showEditDialog = false;
|
||||
"
|
||||
>Ok</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -82,7 +109,7 @@ export default {
|
|||
showEditDialog: false,
|
||||
user: null,
|
||||
displayName: "",
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$matrix.on("Room.timeline", this.onEvent);
|
||||
|
|
@ -106,8 +133,8 @@ export default {
|
|||
handler(newVal, ignoredOldVal) {
|
||||
console.log("RoomInfo: Current room changed");
|
||||
this.memberCount = newVal.getJoinedMemberCount();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -124,9 +151,7 @@ export default {
|
|||
this.memberCount = this.room.getJoinedMemberCount();
|
||||
},
|
||||
|
||||
showRoomInfo() {
|
||||
|
||||
},
|
||||
showRoomInfo() {},
|
||||
|
||||
memberAvatar(member) {
|
||||
if (member) {
|
||||
|
|
@ -142,14 +167,20 @@ export default {
|
|||
},
|
||||
|
||||
upgradeAccount() {
|
||||
this.$matrix.upgradeGuestAccount()
|
||||
.then(() => {
|
||||
console.log("Done");
|
||||
})
|
||||
.catch(err => {
|
||||
console.log("ERROR", err);
|
||||
})
|
||||
}
|
||||
this.$matrix
|
||||
.upgradeGuestAccount()
|
||||
.then(user => {
|
||||
// Done, login with the "new" account to get a real token instead of our guest token.
|
||||
this.user = user;
|
||||
return this.$store.dispatch("auth/login", this.user);
|
||||
})
|
||||
.then(() => {
|
||||
console.log("Upgrade done!");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("ERROR", err);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue