diff --git a/src/components/app/MessageLogs.vue b/src/components/app/MessageLogs.vue
index c606245..2ec18ec 100644
--- a/src/components/app/MessageLogs.vue
+++ b/src/components/app/MessageLogs.vue
@@ -5,27 +5,28 @@
Load more
-
+
@@ -63,7 +64,8 @@ export default {
loading: false,
},
selectedChannelID: null,
- currentScrollTopPos: null
+ currentScrollTopPos: null,
+ backToBottomLoading: false,
};
},
methods: {
@@ -86,8 +88,10 @@ export default {
this.$store.dispatch('unloadTopMessages', {channelID: this.selectedChannelID});
},
unloadBottomMessages(){
- if (this.selectedChannelMessages && this.selectedChannelMessages.length >= 100)
+ if (this.selectedChannelMessages && this.selectedChannelMessages.length >= 100){
+ this.$store.dispatch('setBottomUnloadStatus', {channelID: this.selectedChannelID, status: true})
this.$store.dispatch('unloadBottomMessages', {channelID: this.selectedChannelID});
+ }
},
onResize(dimentions) {
this.scrollDown();
@@ -110,24 +114,24 @@ export default {
this.$store.dispatch('addMessages', result.data.messages)
this.$nextTick(_ => {
this.$set(this.loadMoreTop, 'loading', false);
- msgLogs.scrollTop = msgLogs.scrollHeight - scrollHeight;
+ msgLogs.scrollTop = msgLogs.scrollHeight - scrollHeight;
})
}
},
async loadBottomMessages() {
-
if (this.loadMoreBottom.loading) return;
const msgLogs = this.$refs['msg-logs'];
const scrollTop = msgLogs.scrollTop;
const scrollHeight = msgLogs.scrollHeight;
+ const channelID = this.selectedChannelID;
const beforeMessageID = this.selectedChannelMessages[this.selectedChannelMessages.length - 1].messageID;
-
this.$set(this.loadMoreBottom, 'loading', true);
- const {ok, result, error} = await messagesService.get(this.selectedChannelID, null, beforeMessageID)
+ const {ok, result, error} = await messagesService.get(channelID, null, beforeMessageID)
if (ok) {
if (!result.data.messages.length) {
+ this.$store.dispatch('setBottomUnloadStatus', {channelID, status: false})
this.$set(this.loadMoreBottom, 'loading', false);
this.$set(this.loadMoreBottom, 'show', false);
return;
@@ -139,35 +143,51 @@ export default {
this.$set(this.loadMoreBottom, 'loading', false);
this.scrolledDown = false;
msgLogs.scrollTop = scrollTop
- this.$set(this.loadMoreBottom, 'show', true);
+ this.$set(this.loadMoreBottom, 'show', true);
})
}
},
scrolledUpEvent() {
+ this.unloadBottomMessages();
const msgLogs = this.$refs['msg-logs'];
const scrollTop = msgLogs.scrollTop;
const scrollHeight = msgLogs.scrollHeight;
- this.unloadBottomMessages();
+ this.$set(this.loadMoreBottom, 'show', true);
this.$nextTick(_ => {
- this.$set(this.loadMoreBottom, 'show', true);
- msgLogs.scrollTop = msgLogs.scrollHeight - scrollHeight;
+ msgLogs.scrollTop = 0;
if (this.loadMoreTop.show)
this.loadMoreMessages();
})
},
scrolledDownEvent(){
this.unloadTopMessages()
+ this.$set(this.loadMoreTop, 'show', true);
this.$nextTick(_ => {
if (this.loadMoreBottom.show)
this.loadBottomMessages();
- this.$set(this.loadMoreTop, 'show', true);
})
},
- backToBottomEvent() {
- this.scrollDown({force: true});
- this.unloadTopMessages();
+ async backToBottomEvent() {
+ if (this.backToBottomLoading) return;
+ const channelID = this.selectedChannelID;
+ const bottomUnloaded = this.bottomUnloaded[this.selectedChannelID];
+ if (bottomUnloaded === undefined || bottomUnloaded === false) {
+ this.scrollDown({force: true});
+ this.unloadTopMessages();
+ return;
+ }
+ this.backToBottomLoading = true;
+ const {ok, result, error} = await messagesService.get(this.selectedChannelID)
+ if (ok) {
+ this.$store.dispatch('messages', {messages: result.data.messages.reverse(), channelID});
+ this.$set(this.loadMoreBottom, 'show', false);
+ this.$store.dispatch('setBottomUnloadStatus', {channelID, status: false})
+ this.$nextTick(_ => {this.scrollDown({force: true});})
+
+ }
+ this.backToBottomLoading = false;
},
},
@@ -256,6 +276,9 @@ export default {
},
scrollPosition() {
return this.$store.getters.scrollPosition;
+ },
+ bottomUnloaded() {
+ return this.$store.getters.bottomUnloaded;
}
}
};
@@ -316,4 +339,15 @@ export default {
font-size: 35px;
}
}
+
+
+.show-message-animation {
+ animation: showMessage 0.3s ease-in-out;
+}
+@keyframes showMessage {
+ from {
+ transform: translate(-50px, 0);
+ opacity: 0;
+ }
+}
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index 8d36617..43503bf 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -275,7 +275,6 @@ export default {
color: white;
overflow: hidden;
border-radius: 5px;
- animation: showMessage 0.3s ease-in-out;
}
.presence-message .text {
@@ -308,7 +307,6 @@ export default {
.message {
margin: 10px;
display: flex;
- animation: showMessage 0.3s ease-in-out;
}
.ownMessage .triangle-inner {
@@ -358,13 +356,6 @@ export default {
margin-top: 3px;
}
-@keyframes showMessage {
- from {
- transform: translate(-50px, 0);
- opacity: 0;
- }
-}
-
.avatar {
margin: auto 5px 0 0;
}
diff --git a/src/store/modules/messageModule.js b/src/store/modules/messageModule.js
index 2481c31..bc0cb72 100644
--- a/src/store/modules/messageModule.js
+++ b/src/store/modules/messageModule.js
@@ -6,7 +6,8 @@ import messagesService from "@/services/messagesService";
const state = {
messages: {},
- scrollPosition: {}
+ scrollPosition: {},
+ bottomUnloaded: {},
};
const getters = {
@@ -15,6 +16,9 @@ const getters = {
},
scrollPosition(state) {
return state.scrollPosition
+ },
+ bottomUnloaded(state) {
+ return state.bottomUnloaded;
}
};
@@ -69,13 +73,17 @@ const actions = {
context.commit("messages", data);
},
addMessage(context, data) {
+ //check if bottom messages unloaded.
+ const channelID = data.message.channelID;
+ const unloadedList = context.state.bottomUnloaded[channelID];
+ if (unloadedList === undefined || unloadedList === true) return
+
// if the message is sent by this client, add additional information.
if (data.sender) {
data.message.creator = context.getters.user;
data.message.status = 0;
}
- // send notification if message is not ours
context.commit("addMessage", data);
},
addMessages(context, messagesArr){
@@ -129,6 +137,9 @@ const actions = {
const unloaded = messages.slice(0, -50)
context.commit('messages', {channelID, messages: unloaded})
+ },
+ setBottomUnloadStatus(context, { channelID, status }) {
+ context.commit('setBottomUnloadStatus', { channelID, status })
}
};
@@ -153,6 +164,9 @@ async function getMessages(context, channelID, isServerChannel) {
const mutations = {
+ setBottomUnloadStatus(state, {channelID, status}) {
+ Vue.set(state.bottomUnloaded, channelID, status)
+ },
changeScrollPosition(state, {channelID, pos}) {
Vue.set(state.scrollPosition, channelID, pos);
},
@@ -178,7 +192,7 @@ const mutations = {
state.messages[message.channelID].find((o, i) => {
if (o.tempID === tempID) {
- Vue.set(state.messages[message.channelID], i, message);
+ Vue.set(state.messages[message.channelID], i, Object.assign({}, message, {tempID}));
return true;
}
});
diff --git a/src/utils/changelog.js b/src/utils/changelog.js
index 6f49203..e687714 100644
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@@ -14,22 +14,32 @@
const config = [
+ {
+ version: 6.5,
+ title: "Bug fixes",
+ shortTitle: "",
+ date: "20/08/2019",
+ headColor: "rgba(25, 130, 255, 0.77)",
+ fix: [
+ 'Fixed a bug where when being scrolled up, new messages would cause it to not load more.',
+ 'Fixed a bug where scroll to bottom button wouldnt work'
+ ],
+ },
{
version: 6.4,
title: "Scrolling up should be smoother!",
shortTitle: "",
date: "19/08/2019",
- headColor: "rgba(25, 130, 255, 0.77)",
new: [
'Scrolling up should be smoother now as messages below get unloaded.'
- ]
+ ],
+ msg: 'Known issue: When scrolled up and messages get unloaded below, new messages sent get appended at the bottom and messes up things D: going to fix asap.'
},
{
version: 6.3,
title: "Performance Improvements!",
shortTitle: "",
date: "18/08/2019",
- headColor: "rgba(25, 130, 255, 0.77)",
msg: "I finally managed to find out why the chat is choppy when scrolling. The rotated emote is the cause. In this update, emotes only appear when hovering over the profile picture."
},