fixed:scroll bottom btn,new msgs while scrolled up

src/components/app/MessageLogs.vue

@@ -5,27 +5,28 @@
         <spinner :size="30" v-if="loadMoreTop.loading" />
         <div class="text" v-if="!loadMoreTop.loading" @click="loadMoreMessages">Load more</div>
       </div>
-      <message
+        <message
-        class="message-container"
+          class="message-container"
-        v-for="(msg, index) in selectedChannelMessages"
+          v-for="(msg, index) in selectedChannelMessages"
-        :key="index + selectedChannelID"
+          :class="{'show-message-animation': index === selectedChannelMessages.length - 1}"
-        :date="msg.created"
+          :key="msg.tempID || msg.messageID"
-        :admin="msg.creator.admin"
+          :date="msg.created"
-        :username="msg.creator.username"
+          :admin="msg.creator.admin"
-        :uniqueID="msg.creator.uniqueID"
+          :username="msg.creator.username"
-        :avatar="msg.creator.avatar"
+          :uniqueID="msg.creator.uniqueID"
-        :message="msg.message"
+          :avatar="msg.creator.avatar"
-        :embed="msg.embed"
+          :message="msg.message"
-        :files="msg.files"
+          :embed="msg.embed"
-        :status="msg.status"
+          :files="msg.files"
-        :messageID="msg.messageID"
+          :status="msg.status"
-        :channelID="msg.channelID"
+          :messageID="msg.messageID"
-        :type="msg.type"
+          :channelID="msg.channelID"
-        :timeEdited="msg.timeEdited"
+          :type="msg.type"
-      />
+          :timeEdited="msg.timeEdited"
+        />
       <uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue"/>
         <div class="load-more-button" v-if="loadMoreBottom.show && selectedChannelMessages.length >= 50">
-          <spinner :size="30" v-if="!loadMoreTop.loading" />
+          <spinner :size="30" v-if="loadMoreBottom.loading" />
         <div class="text" v-if="!loadMoreBottom.loading">Load more</div>
       </div>
     </div>
@@ -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();
@@ -115,19 +119,19 @@ export default {
       }
     },
     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 = 0;
-        msgLogs.scrollTop = msgLogs.scrollHeight - scrollHeight; 
         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() {
+    async backToBottomEvent() {
-      this.scrollDown({force: true});
+      if (this.backToBottomLoading) return;
-      this.unloadTopMessages();
+      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;
+  }
+}
 </style>

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;
 }

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;
       }
     });

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."
   },