Some fixes with unread marker

This commit is contained in:
Pavel Djundik 2018-07-11 12:27:44 +03:00 committed by Pavel Djundik
parent c84eee22f2
commit c369f0fdb7
2 changed files with 26 additions and 21 deletions

View file

@ -6,9 +6,9 @@
aria-relevant="additions" aria-relevant="additions"
@copy="onCopy" @copy="onCopy"
> >
<template v-for="(message, id) in getCondensedMessages"> <template v-for="(message, id) in condensedMessages">
<div <div
v-if="shouldDisplayDateMarker(id)" v-if="shouldDisplayDateMarker(message, id)"
:key="message.id + '-date'" :key="message.id + '-date'"
:data-time="message.time" :data-time="message.time"
:aria-label="message.time | localedate" :aria-label="message.time | localedate"
@ -21,7 +21,7 @@
</div> </div>
</div> </div>
<div <div
v-if="shouldDisplayUnreadMarker(message.id)" v-if="shouldDisplayUnreadMarker(id)"
:key="message.id + '-unread'" :key="message.id + '-unread'"
class="unread-marker" class="unread-marker"
> >
@ -56,7 +56,7 @@ export default {
channel: Object, channel: Object,
}, },
computed: { computed: {
getCondensedMessages() { condensedMessages() {
if (this.channel.type !== "channel") { if (this.channel.type !== "channel") {
return this.channel.messages; return this.channel.messages;
} }
@ -78,6 +78,7 @@ export default {
if (lastCondensedContainer === null) { if (lastCondensedContainer === null) {
lastCondensedContainer = { lastCondensedContainer = {
id: message.id, // Use id of first message in the condensed container id: message.id, // Use id of first message in the condensed container
time: message.time,
type: "condensed", type: "condensed",
messages: [], messages: [],
}; };
@ -92,19 +93,23 @@ export default {
}, },
}, },
methods: { methods: {
shouldDisplayDateMarker(id) { shouldDisplayDateMarker(message, id) {
const previousTime = this.channel.messages[id - 1]; const previousMessage = this.condensedMessages[id - 1];
if (!previousTime) { if (!previousMessage) {
return true; return true;
} }
const currentTime = this.channel.messages[id]; return (new Date(previousMessage.time)).getDay() !== (new Date(message.time)).getDay();
return (new Date(previousTime.time)).getDay() !== (new Date(currentTime.time)).getDay();
}, },
shouldDisplayUnreadMarker(msgId) { shouldDisplayUnreadMarker(id) {
return this.channel.firstUnread === msgId; const previousMessage = this.condensedMessages[id - 1];
if (!previousMessage) {
return false;
}
return this.channel.firstUnread === previousMessage.id;
}, },
onCopy() { onCopy() {
clipboard(this.$el); clipboard(this.$el);

View file

@ -24,18 +24,18 @@ socket.on("msg", function(data) {
utils.lastMessageId = data.msg.id; utils.lastMessageId = data.msg.id;
} }
// We set a maximum timeout of 2 seconds so that messages don't take too long to appear.
utils.requestIdleCallback(() => processReceivedMessage(data), 2000);
});
function processReceivedMessage(data) {
let targetId = data.chan; let targetId = data.chan;
let target = "#chan-" + targetId; let target = "#chan-" + targetId;
let channelContainer = $("#chat").find(target); let channelContainer = $("#chat").find(target);
let channel = findChannel(data.chan); let channel = findChannel(data.chan);
channel.channel.highlight = data.highlight; if (typeof data.highlight !== "undefined") {
channel.channel.unread = data.unread; channel.channel.highlight = data.highlight;
}
if (typeof data.unread !== "undefined") {
channel.channel.unread = data.unread;
}
if (data.msg.self || data.msg.highlight) { if (data.msg.self || data.msg.highlight) {
utils.updateTitle(); utils.updateTitle();
@ -65,7 +65,7 @@ function processReceivedMessage(data) {
notifyMessage(targetId, channelContainer, data); notifyMessage(targetId, channelContainer, data);
if (data.msg.self) { if (data.msg.self) {
channel.channel.firstUnread = 0; channel.channel.firstUnread = channel.channel.messages[channel.channel.messages.length - 1].id;
} }
let messageLimit = 0; let messageLimit = 0;
@ -93,7 +93,7 @@ function processReceivedMessage(data) {
user.lastMessage = (new Date(data.msg.time)).getTime() || Date.now(); user.lastMessage = (new Date(data.msg.time)).getTime() || Date.now();
} }
} }
} });
function notifyMessage(targetId, channel, msg) { function notifyMessage(targetId, channel, msg) {
msg = msg.msg; msg = msg.msg;