amputoma-fe/src/components/chat/chat.js

import _ from 'lodash'
import { WSConnectionStatus } from '../../services/api/api.service.js'
import { mapGetters, mapState } from 'vuex'
import ChatMessage from '../chat_message/chat_message.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue'
import ChatTitle from '../chat_title/chat_title.vue'
import chatService from '../../services/chat_service/chat_service.js'
import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'

const BOTTOMED_OUT_OFFSET = 10
const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
const SAFE_RESIZE_TIME_OFFSET = 100

const Chat = {
  components: {
    ChatMessage,
    ChatTitle,
    PostStatusForm
  },
  data () {
    return {
      jumpToBottomButtonVisible: false,
      hoveredMessageChainId: undefined,
      lastScrollPosition: {},
      scrollableContainerHeight: '100%',
      errorLoadingChat: false
    }
  },
  created () {
    this.startFetching()
    window.addEventListener('resize', this.handleLayoutChange)
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
    if (typeof document.hidden !== 'undefined') {
      document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
    }

    this.$nextTick(() => {
      this.updateScrollableContainerHeight()
      this.handleResize()
    })
    this.setChatLayout()
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
    window.removeEventListener('resize', this.handleLayoutChange)
    this.unsetChatLayout()
    if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
    this.$store.dispatch('clearCurrentChat')
  },
  computed: {
    recipient () {
      return this.currentChat && this.currentChat.account
    },
    recipientId () {
      return this.$route.params.recipient_id
    },
    formPlaceholder () {
      if (this.recipient) {
        return this.$t('chats.message_user', { nickname: this.recipient.screen_name })
      } else {
        return ''
      }
    },
    chatViewItems () {
      return chatService.getView(this.currentChatMessageService)
    },
    newMessageCount () {
      return this.currentChatMessageService && this.currentChatMessageService.newMessageCount
    },
    streamingEnabled () {
      return this.mergedConfig.useStreamingApi && this.mastoUserSocketStatus === WSConnectionStatus.JOINED
    },
    ...mapGetters([
      'currentChat',
      'currentChatMessageService',
      'findOpenedChatByRecipientId',
      'mergedConfig'
    ]),
    ...mapState({
      backendInteractor: state => state.api.backendInteractor,
      mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
      mobileLayout: state => state.interface.mobileLayout,
      layoutHeight: state => state.interface.layoutHeight,
      currentUser: state => state.users.currentUser
    })
  },
  watch: {
    chatViewItems () {
      // We don't want to scroll to the bottom on a new message when the user is viewing older messages.
      // Therefore we need to know whether the scroll position was at the bottom before the DOM update.
      const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
      this.$nextTick(() => {
        if (bottomedOutBeforeUpdate) {
          this.scrollDown({ forceRead: !document.hidden })
        }
      })
    },
    '$route': function () {
      this.startFetching()
    },
    layoutHeight () {
      this.handleResize({ expand: true })
    },
    mastoUserSocketStatus (newValue) {
      if (newValue === WSConnectionStatus.JOINED) {
        this.fetchChat({ isFirstFetch: true })
      }
    }
  },
  methods: {
    // Used to animate the avatar near the first message of the message chain when any message belonging to the chain is hovered
    onMessageHover ({ isHovered, messageChainId }) {
      this.hoveredMessageChainId = isHovered ? messageChainId : undefined
    },
    onFilesDropped () {
      this.$nextTick(() => {
        this.handleResize()
        this.updateScrollableContainerHeight()
      })
    },
    handleVisibilityChange () {
      this.$nextTick(() => {
        if (!document.hidden && this.bottomedOut(BOTTOMED_OUT_OFFSET)) {
          this.scrollDown({ forceRead: true })
        }
      })
    },
    setChatLayout () {
      //   This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
      //   This layout prevents empty spaces from being visible at the bottom
      //   of the chat on iOS Safari (`safe-area-inset`) when
      //   - the on-screen keyboard appears and the user starts typing
      //   - the user selects the text inside the input area
      //   - the user selects and deletes the text that is multiple lines long
      //   TODO: unify the chat layout with the global layout.
      let html = document.querySelector('html')
      if (html) {
        html.classList.add('chat-layout')
      }

      this.$nextTick(() => {
        this.updateScrollableContainerHeight()
      })
    },
    unsetChatLayout () {
      let html = document.querySelector('html')
      if (html) {
        html.classList.remove('chat-layout')
      }
    },
    handleLayoutChange () {
      this.$nextTick(() => {
        this.updateScrollableContainerHeight()
        this.scrollDown()
      })
    },
    // Ensures the proper position of the posting form in the mobile layout (the mobile browser panel does not overlap or hide it)
    updateScrollableContainerHeight () {
      const header = this.$refs.header
      const footer = this.$refs.footer
      const inner = this.mobileLayout ? window.document.body : this.$refs.inner
      this.scrollableContainerHeight = scrollableContainerHeight(inner, header, footer) + 'px'
    },
    // Preserves the scroll position when OSK appears or the posting form changes its height.
    handleResize (opts = {}) {
      const { expand = false, delayed = false } = opts

      if (delayed) {
        setTimeout(() => {
          this.handleResize({ ...opts, delayed: false })
        }, SAFE_RESIZE_TIME_OFFSET)
        return
      }

      this.$nextTick(() => {
        this.updateScrollableContainerHeight()

        const { offsetHeight = undefined } = this.lastScrollPosition
        this.lastScrollPosition = getScrollPosition(this.$refs.scrollable)

        const diff = this.lastScrollPosition.offsetHeight - offsetHeight
        if (diff < 0 || (!this.bottomedOut() && expand)) {
          this.$nextTick(() => {
            this.updateScrollableContainerHeight()
            this.$refs.scrollable.scrollTo({
              top: this.$refs.scrollable.scrollTop - diff,
              left: 0
            })
          })
        }
      })
    },
    scrollDown (options = {}) {
      const { behavior = 'auto', forceRead = false } = options
      const scrollable = this.$refs.scrollable
      if (!scrollable) { return }
      this.$nextTick(() => {
        scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
      })
      if (forceRead || this.newMessageCount > 0) {
        this.readChat()
      }
    },
    readChat () {
      if (!(this.currentChatMessageService && this.currentChatMessageService.lastMessage)) { return }
      if (document.hidden) { return }
      const lastReadId = this.currentChatMessageService.lastMessage.id
      this.$store.dispatch('readChat', { id: this.currentChat.id, lastReadId })
    },
    bottomedOut (offset) {
      return isBottomedOut(this.$refs.scrollable, offset)
    },
    reachedTop () {
      const scrollable = this.$refs.scrollable
      return scrollable && scrollable.scrollTop <= 0
    },
    handleScroll: _.throttle(function () {
      if (!this.currentChat) { return }

      if (this.reachedTop()) {
        this.fetchChat({ maxId: this.currentChatMessageService.minId })
      } else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
        this.jumpToBottomButtonVisible = false
        if (this.newMessageCount > 0) {
          this.readChat()
        }
      } else {
        this.jumpToBottomButtonVisible = true
      }
    }, 100),
    handleScrollUp (positionBeforeLoading) {
      const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
      this.$refs.scrollable.scrollTo({
        top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
        left: 0
      })
    },
    fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) {
      const chatMessageService = this.currentChatMessageService
      if (!chatMessageService) { return }
      if (fetchLatest && this.streamingEnabled) { return }

      const chatId = chatMessageService.chatId
      const fetchOlderMessages = !!maxId
      const sinceId = fetchLatest && chatMessageService.lastMessage && chatMessageService.lastMessage.id

      this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId })
        .then((messages) => {
          // Clear the current chat in case we're recovering from a ws connection loss.
          if (isFirstFetch) {
            chatService.clear(chatMessageService)
          }

          const positionBeforeUpdate = getScrollPosition(this.$refs.scrollable)
          this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
            this.$nextTick(() => {
              if (fetchOlderMessages) {
                this.handleScrollUp(positionBeforeUpdate)
              }

              if (isFirstFetch) {
                this.updateScrollableContainerHeight()
              }
            })
          })
        })
    },
    async startFetching () {
      let chat = this.findOpenedChatByRecipientId(this.recipientId)
      if (!chat) {
        try {
          chat = await this.backendInteractor.getOrCreateChat({ accountId: this.recipientId })
        } catch (e) {
          console.error('Error creating or getting a chat', e)
          this.errorLoadingChat = true
        }
      }
      if (chat) {
        this.$nextTick(() => {
          this.scrollDown({ forceRead: true })
        })
        this.$store.dispatch('addOpenedChat', { chat })
        this.doStartFetching()
      }
    },
    doStartFetching () {
      this.$store.dispatch('startFetchingCurrentChat', {
        fetcher: () => setInterval(() => this.fetchChat({ fetchLatest: true }), 5000)
      })
      this.fetchChat({ isFirstFetch: true })
    },
    sendMessage ({ status, media }) {
      const params = {
        id: this.currentChat.id,
        content: status
      }

      if (media[0]) {
        params.mediaId = media[0].id
      }

      return this.backendInteractor.sendChatMessage(params)
        .then(data => {
          this.$store.dispatch('addChatMessages', { chatId: this.currentChat.id, messages: [data] }).then(() => {
            this.$nextTick(() => {
              this.handleResize()
              // When the posting form size changes because of a media attachment, we need an extra resize
              // to account for the potential delay in the DOM update.
              setTimeout(() => {
                this.updateScrollableContainerHeight()
              }, SAFE_RESIZE_TIME_OFFSET)
              this.scrollDown({ forceRead: true })
            })
          })

          return data
        })
        .catch(error => {
          console.error('Error sending message', error)
          return {
            error: this.$t('chats.error_sending_message')
          }
        })
    },
    goBack () {
      this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } })
    }
  }
}

export default Chat