commit: 148789767a28a988751af9635cd53fe6d85a4c75
parent 40ce3a9bd8711029453f3753637ff7a53d7ee23f
Author: Shpuld Shpludson <shp@cock.li>
Date: Sun, 1 Nov 2020 17:50:43 +0000
Merge branch 'fix/chat-misc-fixes' into 'develop'
Misc Chat fixes
See merge request pleroma/pleroma-fe!1265
Diffstat:
6 files changed, 32 insertions(+), 12 deletions(-)
diff --git a/CHANGELOG.md b/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
diff --git a/src/components/chat/chat.js b/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({
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
@@ -25,7 +25,7 @@
min-height: 100%;
margin: 0 0 0 0;
border-radius: 10px 10px 0 0;
- border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0 ;
+ border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
&::after {
border-radius: 0;
@@ -58,8 +58,10 @@
.go-back-button {
cursor: pointer;
- margin-right: 1.7em;
- margin-left: 0.3em;
+ width: 28px;
+ 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);
diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss
@@ -23,7 +23,9 @@
.go-back-button {
cursor: pointer;
- margin-right: 1.7em;
- margin-left: 0.3em;
+ width: 28px;
+ text-align: center;
+ padding: 0.6em;
+ margin: -0.6em 0.6em -0.6em -0.6em;
}
}
diff --git a/src/services/chat_utils/chat_utils.js b/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,
diff --git a/src/services/promise_interval/promise_interval.js b/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)
})
