Various fixes and improvements
* Re-set user's status if they disconnect and reconnect * Remove "(offline)" text next to ChatServer/ChatClient messages * Make names and pictures in presence messages clickable to open profile cards
This commit is contained in:
parent
30c5538ce6
commit
bdb5e6359b
|
@ -134,8 +134,6 @@ func pushMessageContext(sub *Subscriber, channel string, msg messages.Message) {
|
|||
strings.TrimSpace(msg.Message),
|
||||
))
|
||||
|
||||
fmt.Printf("Context %s:\n%+v\n", channel, messageContexts[channel])
|
||||
|
||||
// Trim the context to recent messages only.
|
||||
if len(messageContexts[channel]) > messageContextSize {
|
||||
messageContexts[channel] = messageContexts[channel][len(messageContexts[channel])-messageContextSize:]
|
||||
|
|
50
src/App.vue
50
src/App.vue
|
@ -967,6 +967,7 @@ export default {
|
|||
|
||||
// WhoList updates.
|
||||
onWho(msg) {
|
||||
let sendMe = false; // re-send our 'me' at the end
|
||||
this.whoList = msg.whoList;
|
||||
this.whoOnline = {};
|
||||
|
||||
|
@ -974,15 +975,21 @@ export default {
|
|||
this.whoList = [];
|
||||
}
|
||||
|
||||
// If we had a camera open with any of these and they have gone
|
||||
// off camera, close our side of the connection.
|
||||
for (let row of this.whoList) {
|
||||
this.whoMap[row.username] = row;
|
||||
this.whoOnline[row.username] = true;
|
||||
|
||||
// If we had a camera open with any of these and they have gone
|
||||
// off camera, close our side of the connection.
|
||||
if (this.WebRTC.streams[row.username] != undefined &&
|
||||
!(row.video & this.VideoFlag.Active)) {
|
||||
this.closeVideo(row.username, "offerer");
|
||||
}
|
||||
|
||||
// If the server disagrees with our current status, send our status back.
|
||||
if (row.username === this.username && row.status !== this.status) {
|
||||
sendMe = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Hang up on mutual cameras, if they changed their setting while we
|
||||
|
@ -992,6 +999,11 @@ export default {
|
|||
// Has the back-end server forgotten we are on video? This can
|
||||
// happen if we disconnect/reconnect while we were streaming.
|
||||
if (this.webcam.active && !(this.whoMap[this.username]?.video & this.VideoFlag.Active)) {
|
||||
sendMe = true;
|
||||
}
|
||||
|
||||
// Do we need to set our me status again?
|
||||
if (sendMe) {
|
||||
this.sendMe();
|
||||
}
|
||||
},
|
||||
|
@ -1670,7 +1682,7 @@ export default {
|
|||
},
|
||||
isUserOffline(username) {
|
||||
// Return if the username is not presently online in the chat.
|
||||
return this.whoOnline[username] !== true;
|
||||
return this.whoOnline[username] !== true && username !== 'ChatServer' && username !== 'ChatClient';
|
||||
},
|
||||
avatarForUsername(username) {
|
||||
if (this.whoMap[username] != undefined && this.whoMap[username].avatar) {
|
||||
|
@ -1703,9 +1715,6 @@ export default {
|
|||
if (nick) {
|
||||
return nick;
|
||||
}
|
||||
} else if (this.whoMap[username] == undefined && username !== 'ChatServer' && username !== 'ChatClient') {
|
||||
// User is not even logged in! Add this note to their name
|
||||
username += " (offline)";
|
||||
}
|
||||
return username;
|
||||
},
|
||||
|
@ -3751,37 +3760,10 @@ export default {
|
|||
</div>
|
||||
|
||||
<div v-for="(msg, i) in chatHistory" v-bind:key="i">
|
||||
<!-- Enter chat presence messages draw as a short banner -->
|
||||
<div v-if="msg.action === 'presence'" class="notification is-success is-light py-1 px-3 mb-2">
|
||||
|
||||
<!-- Tiny avatar next to name and action buttons -->
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-narrow pr-0 pt-4">
|
||||
<figure class="image is-16x16">
|
||||
<img v-if="avatarForUsername(msg.username)"
|
||||
:src="avatarForUsername(msg.username)">
|
||||
<img v-else src="/static/img/shy.png">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="column">
|
||||
<!-- Timestamp on the right -->
|
||||
<span class="float-right is-size-7" :title="msg.at">
|
||||
{{ prettyDate(msg.at) }}
|
||||
</span>
|
||||
|
||||
<strong>{{ nicknameForUsername(msg.username) }}</strong>
|
||||
<span v-if="isUserOffline(msg.username)" class="ml-1">(offline)</span>
|
||||
<small v-else class="ml-1">(@{{ msg.username }})</small>
|
||||
{{ msg.message }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Normal chat message: full size card w/ avatar -->
|
||||
<MessageBox
|
||||
v-else
|
||||
:message="msg"
|
||||
:is-presence="msg.action === 'presence'"
|
||||
:appearance="messageStyle"
|
||||
:position="i"
|
||||
:user="getUser(msg.username)"
|
||||
|
|
|
@ -4,20 +4,21 @@ import 'vue3-emoji-picker/css';
|
|||
|
||||
export default {
|
||||
props: {
|
||||
message: Object, // chat Message object
|
||||
appearance: String, // message style appearance (cards, compact, etc.)
|
||||
user: Object, // User object of the Message author
|
||||
isOffline: Boolean, // user is not currently online
|
||||
username: String, // current username logged in
|
||||
websiteUrl: String, // Base URL to website (for profile/avatar URLs)
|
||||
isDnd: Boolean, // user is not accepting DMs
|
||||
isMuted: Boolean, // user is muted by current user
|
||||
reactions: Object, // emoji reactions on the message
|
||||
message: Object, // chat Message object
|
||||
isPresence: Boolean, // presence message (joined/left room, kicked, etc.)
|
||||
appearance: String, // message style appearance (cards, compact, etc.)
|
||||
user: Object, // User object of the Message author
|
||||
isOffline: Boolean, // user is not currently online
|
||||
username: String, // current username logged in
|
||||
websiteUrl: String, // Base URL to website (for profile/avatar URLs)
|
||||
isDnd: Boolean, // user is not accepting DMs
|
||||
isMuted: Boolean, // user is muted by current user
|
||||
reactions: Object, // emoji reactions on the message
|
||||
reportEnabled: Boolean, // Report Message webhook is available
|
||||
position: Number, // position of the message (0 to n), for the emoji menu to know which side to pop
|
||||
isDm: Boolean, // is in a DM thread (hide DM buttons)
|
||||
isOp: Boolean, // current user is Operator (always show takeback button)
|
||||
noButtons: Boolean, // hide all message buttons (e.g. for Report Modal)
|
||||
position: Number, // position of the message (0 to n), for the emoji menu to know which side to pop
|
||||
isDm: Boolean, // is in a DM thread (hide DM buttons)
|
||||
isOp: Boolean, // current user is Operator (always show takeback button)
|
||||
noButtons: Boolean, // hide all message buttons (e.g. for Report Modal)
|
||||
},
|
||||
components: {
|
||||
EmojiPicker,
|
||||
|
@ -172,8 +173,40 @@ export default {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Presence message banners -->
|
||||
<div v-if="isPresence" class="notification is-success is-light py-1 px-3 mb-2">
|
||||
|
||||
<!-- Tiny avatar next to name and action buttons -->
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-narrow pr-0 pt-4">
|
||||
<a :href="profileURL"
|
||||
@click.prevent="openProfile()"
|
||||
:class="{ 'cursor-default': !profileURL }">
|
||||
<figure class="image is-16x16">
|
||||
<img v-if="avatarURL" :src="avatarURL">
|
||||
<img v-else src="/static/img/shy.png">
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<!-- Timestamp on the right -->
|
||||
<span class="float-right is-size-7" :title="message.at">
|
||||
{{ prettyDate(message.at) }}
|
||||
</span>
|
||||
|
||||
<span @click="openProfile()" class="cursor-pointer">
|
||||
<strong>{{ nickname }}</strong>
|
||||
<span v-if="isOffline" class="ml-1">(offline)</span>
|
||||
<small v-else class="ml-1">(@{{ message.username }})</small>
|
||||
</span>
|
||||
{{ message.message }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Card Style (default) -->
|
||||
<div v-if="appearance === 'cards' || !appearance" class="box mb-2 px-4 pt-3 pb-1 position-relative">
|
||||
<div v-else-if="appearance === 'cards' || !appearance" class="box mb-2 px-4 pt-3 pb-1 position-relative">
|
||||
<div class="media mb-0">
|
||||
<div class="media-left">
|
||||
<a :href="profileURL"
|
||||
|
|
Loading…
Reference in New Issue
Block a user