Merge branch 'fix/chat-misc-fixes' into 'develop'

Misc Chat fixes

See merge request pleroma/pleroma-fe!1265

CHANGELOG.md

@@ -12,6 +12,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fixed chats list not updating its order when new messages come in
 - Fixed chat messages sometimes getting lost when you receive a message at the same time
 - Fixed clicking NSFW hider through status popover
+- Fixed chat-view back button being hard to click
+- Fixed fresh chat notifications being cleared immediately while leaving the chat view and not having time to actually see the messages
 
 ### Changed
 - Clicking immediately when timeline shifts is now blocked to prevent misclicks

src/components/chat/chat.js

@@ -21,6 +21,7 @@ library.add(
 const BOTTOMED_OUT_OFFSET = 10
 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
 const SAFE_RESIZE_TIME_OFFSET = 100
+const MARK_AS_READ_DELAY = 1500
 
 const Chat = {
   components: {
@@ -104,7 +105,7 @@ const Chat = {
       const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
       this.$nextTick(() => {
         if (bottomedOutBeforeUpdate) {
-          this.scrollDown({ forceRead: !document.hidden })
+          this.scrollDown()
         }
       })
     },
@@ -210,7 +211,7 @@ const Chat = {
       this.$nextTick(() => {
         scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
       })
-      if (forceRead || this.newMessageCount > 0) {
+      if (forceRead) {
         this.readChat()
       }
     },
@@ -235,12 +236,18 @@ const Chat = {
       } else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
         this.jumpToBottomButtonVisible = false
         if (this.newMessageCount > 0) {
-          this.readChat()
+          // Use a delay before marking as read to prevent situation where new messages
+          // arrive just as you're leaving the view and messages that you didn't actually
+          // get to see get marked as read.
+          window.setTimeout(() => {
+            // Don't mark as read if the element doesn't exist, user has left chat view
+            if (this.$el) this.readChat()
+          }, MARK_AS_READ_DELAY)
         }
       } else {
         this.jumpToBottomButtonVisible = true
       }
-    }, 100),
+    }, 200),
     handleScrollUp (positionBeforeLoading) {
       const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
       this.$refs.scrollable.scrollTo({

src/components/chat/chat.scss

@@ -58,8 +58,10 @@
 
   .go-back-button {
     cursor: pointer;
-    margin-right: 1.7em;
+    width: 28px;
-    margin-left: 0.3em;
+    text-align: center;
+    padding: 0.6em;
+    margin: -0.6em 0.6em -0.6em -0.6em;
   }
 
   .jump-to-bottom-button {
@@ -74,7 +76,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
     z-index: 10;
     transition: 0.35s all;
     transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

src/components/chat_new/chat_new.scss

@@ -23,7 +23,9 @@
 
   .go-back-button {
     cursor: pointer;
-    margin-right: 1.7em;
+    width: 28px;
-    margin-left: 0.3em;
+    text-align: center;
+    padding: 0.6em;
+    margin: -0.6em 0.6em -0.6em -0.6em;
   }
 }

src/services/chat_utils/chat_utils.js

@@ -3,7 +3,7 @@ import { showDesktopNotification } from '../desktop_notification_utils/desktop_n
 export const maybeShowChatNotification = (store, chat) => {
   if (!chat.lastMessage) return
   if (store.rootState.chats.currentChatId === chat.id && !document.hidden) return
-  if (store.rootState.users.currentUser.id === chat.lastMessage.account.id) return
+  if (store.rootState.users.currentUser.id === chat.lastMessage.account_id) return
 
   const opts = {
     tag: chat.lastMessage.id,

src/services/promise_interval/promise_interval.js

@@ -10,7 +10,14 @@ export const promiseInterval = (promiseCall, interval) => {
   let timeout = null
 
   const func = () => {
-    promiseCall().finally(() => {
+    const promise = promiseCall()
+    // something unexpected happened and promiseCall did not
+    // return a promise, abort the loop.
+    if (!(promise && promise.finally)) {
+      console.warn('promiseInterval: promise call did not return a promise, stopping interval.')
+      return
+    }
+    promise.finally(() => {
       if (stopped) return
       timeout = window.setTimeout(func, interval)
     })