fix back button size, fix missing chat notifications being marked as read too eagerly, fix promiseinterval erroring when not getting a promise

This commit is contained in:
Shpuld Shpuldson 2020-10-27 10:03:04 +02:00
parent e2c4816feb
commit 2c441c7922
4 changed files with 25 additions and 11 deletions

View file

@ -11,6 +11,7 @@ import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContaine
const BOTTOMED_OUT_OFFSET = 10 const BOTTOMED_OUT_OFFSET = 10
const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
const SAFE_RESIZE_TIME_OFFSET = 100 const SAFE_RESIZE_TIME_OFFSET = 100
const MARK_AS_READ_DELAY = 1500
const Chat = { const Chat = {
components: { components: {
@ -94,7 +95,7 @@ const Chat = {
const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET) const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
this.$nextTick(() => { this.$nextTick(() => {
if (bottomedOutBeforeUpdate) { if (bottomedOutBeforeUpdate) {
this.scrollDown({ forceRead: !document.hidden }) this.scrollDown()
} }
}) })
}, },
@ -200,7 +201,7 @@ const Chat = {
this.$nextTick(() => { this.$nextTick(() => {
scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior }) scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
}) })
if (forceRead || this.newMessageCount > 0) { if (forceRead) {
this.readChat() this.readChat()
} }
}, },
@ -225,12 +226,17 @@ const Chat = {
} else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) { } else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
this.jumpToBottomButtonVisible = false this.jumpToBottomButtonVisible = false
if (this.newMessageCount > 0) { 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(() => {
if (this.$el) this.readChat()
}, MARK_AS_READ_DELAY)
} }
} else { } else {
this.jumpToBottomButtonVisible = true this.jumpToBottomButtonVisible = true
} }
}, 100), }, 200),
handleScrollUp (positionBeforeLoading) { handleScrollUp (positionBeforeLoading) {
const positionAfterLoading = getScrollPosition(this.$refs.scrollable) const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
this.$refs.scrollable.scrollTo({ this.$refs.scrollable.scrollTo({

View file

@ -58,11 +58,12 @@
.go-back-button { .go-back-button {
cursor: pointer; cursor: pointer;
margin-right: 1.4em; padding: 0.6em;
margin: -0.6em 0.8em -0.6em -0.6em;
height: 100%;
i { i {
display: flex; vertical-align: middle;
align-items: center;
} }
} }
@ -78,7 +79,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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; z-index: 10;
transition: 0.35s all; transition: 0.35s all;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

View file

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

View file

@ -10,7 +10,14 @@ export const promiseInterval = (promiseCall, interval) => {
let timeout = null let timeout = null
const func = () => { 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 if (stopped) return
timeout = window.setTimeout(func, interval) timeout = window.setTimeout(func, interval)
}) })