pleroma-fe/src/components/status/status.js

import { unescape as ldUnescape, uniqBy } from 'lodash'

import MentionLink from 'src/components/mention_link/mention_link.vue'
import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import StatusActionButtons from 'src/components/status_action_buttons/status_action_buttons.vue'
import { muteFilterHits } from '../../services/status_parser/status_parser.js'
import {
  highlightClass,
  highlightStyle,
} from '../../services/user_highlighter/user_highlighter.js'
import AvatarList from '../avatar_list/avatar_list.vue'
import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue'
import StatusContent from '../status_content/status_content.vue'
import StatusPopover from '../status_popover/status_popover.vue'
import Timeago from '../timeago/timeago.vue'
import UserAvatar from '../user_avatar/user_avatar.vue'
import UserLink from '../user_link/user_link.vue'
import UserListPopover from '../user_list_popover/user_list_popover.vue'
import UserPopover from '../user_popover/user_popover.vue'

import { useInstanceStore } from 'src/stores/instance.js'
import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
import { useMergedConfigStore } from 'src/stores/merged_config.js'
import { useSyncConfigStore } from 'src/stores/sync_config.js'
import { useUserHighlightStore } from 'src/stores/user_highlight.js'

import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'

import { library } from '@fortawesome/fontawesome-svg-core'
import {
  faAngleDoubleRight,
  faChevronDown,
  faChevronUp,
  faEllipsisH,
  faEnvelope,
  faEye,
  faEyeSlash,
  faGlobe,
  faIgloo,
  faLock,
  faLockOpen,
  faPlay,
  faPlusSquare,
  faReply,
  faRetweet,
  faSmileBeam,
  faStar,
  faThumbtack,
  faTimes,
} from '@fortawesome/free-solid-svg-icons'

library.add(
  faEnvelope,
  faGlobe,
  faIgloo,
  faLock,
  faLockOpen,
  faTimes,
  faRetweet,
  faReply,
  faPlusSquare,
  faStar,
  faSmileBeam,
  faEllipsisH,
  faEyeSlash,
  faEye,
  faThumbtack,
  faChevronUp,
  faChevronDown,
  faAngleDoubleRight,
  faPlay,
)

const camelCase = (name) => name.charAt(0).toUpperCase() + name.slice(1)

const controlledOrUncontrolledGetters = (list) =>
  list.reduce((res, name) => {
    const camelized = camelCase(name)
    const toggle = `controlledToggle${camelized}`
    const controlledName = `controlled${camelized}`
    const uncontrolledName = `uncontrolled${camelized}`
    res[name] = function () {
      return (this.$data[toggle] !== undefined ||
        this.$props[toggle] !== undefined) &&
        this[toggle]
        ? this[controlledName]
        : this[uncontrolledName]
    }
    return res
  }, {})

const controlledOrUncontrolledToggle = (obj, name) => {
  const camelized = camelCase(name)
  const toggle = `controlledToggle${camelized}`
  const uncontrolledName = `uncontrolled${camelized}`
  if (obj[toggle]) {
    obj[toggle]()
  } else {
    obj[uncontrolledName] = !obj[uncontrolledName]
  }
}

const controlledOrUncontrolledSet = (obj, name, val) => {
  const camelized = camelCase(name)
  const set = `controlledSet${camelized}`
  const uncontrolledName = `uncontrolled${camelized}`
  if (obj[set]) {
    obj[set](val)
  } else {
    obj[uncontrolledName] = val
  }
}

const Status = {
  name: 'Status',
  components: {
    PostStatusForm,
    UserAvatar,
    AvatarList,
    Timeago,
    StatusPopover,
    UserListPopover,
    EmojiReactions,
    StatusContent,
    RichContent,
    MentionLink,
    MentionsLine,
    UserPopover,
    UserLink,
    StatusActionButtons,
  },
  props: [
    'statusoid',
    'replies',

    'expandable',
    'focused',
    'highlight',
    'compact',
    'isPreview',
    'noHeading',
    'inlineExpanded',
    'showPinned',
    'inProfile',
    'inConversation',
    'inQuote',
    'profileUserId',
    'simpleTree',
    'showOtherRepliesAsButton',
    'dive',

    'controlledThreadDisplayStatus',
    'controlledToggleThreadDisplay',
    'controlledShowingTall',
    'controlledToggleShowingTall',
    'controlledExpandingSubject',
    'controlledToggleExpandingSubject',
    'controlledShowingLongSubject',
    'controlledToggleShowingLongSubject',
    'controlledReplying',
    'controlledToggleReplying',
    'controlledMediaPlaying',
    'controlledSetMediaPlaying',
  ],
  emits: ['interacted', 'goto', 'toggleExpanded'],
  data() {
    return {
      uncontrolledReplying: false,
      unmuted: false,
      userExpanded: false,
      uncontrolledMediaPlaying: [],
      suspendable: true,
      error: null,
      headTailLinks: null,
      displayQuote: !this.inQuote,
    }
  },
  computed: {
    ...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
    showReasonMutedThread() {
      return (
        (this.status.thread_muted ||
          (this.status.reblog && this.status.reblog.thread_muted)) &&
        !this.inConversation
      )
    },
    repeaterClass() {
      const user = this.statusoid.user
      return highlightClass(user)
    },
    userClass() {
      const user = this.retweet
        ? this.statusoid.retweeted_status.user
        : this.statusoid.user
      return highlightClass(user)
    },
    deleted() {
      return this.statusoid.deleted
    },
    repeaterStyle() {
      const user = this.statusoid.user
      return highlightStyle(useUserHighlightStore().get(user.screen_name))
    },
    userStyle() {
      if (this.noHeading) return
      const user = this.retweet
        ? this.statusoid.retweeted_status.user
        : this.statusoid.user
      return highlightStyle(useUserHighlightStore().get(user.screen_name))
    },
    userProfileLink() {
      return this.generateUserProfileLink(
        this.status.user.id,
        this.status.user.screen_name,
      )
    },
    replyProfileLink() {
      if (this.isReply) {
        const user = this.$store.getters.findUser(
          this.status.in_reply_to_user_id,
        )
        // FIXME Why user not found sometimes???
        return user ? user.statusnet_profile_url : 'NOT_FOUND'
      }
    },
    retweet() {
      return !!this.statusoid.retweeted_status
    },
    retweeterUser() {
      return this.statusoid.user
    },
    retweeter() {
      return this.statusoid.user.name || this.statusoid.user.screen_name_ui
    },
    retweeterHtml() {
      return this.statusoid.user.name
    },
    retweeterProfileLink() {
      return this.generateUserProfileLink(
        this.statusoid.user.id,
        this.statusoid.user.screen_name,
      )
    },
    status() {
      if (this.retweet) {
        return this.statusoid.retweeted_status
      } else {
        return this.statusoid
      }
    },
    statusFromGlobalRepository() {
      // NOTE: Consider to replace status with statusFromGlobalRepository
      return this.$store.state.statuses.allStatusesObject[this.status.id]
    },
    loggedIn() {
      return !!this.currentUser
    },
    muteFilterHits() {
      return muteFilterHits(
        Object.values(useSyncConfigStore().prefsStorage.simple.muteFilters),
        this.status,
      )
    },
    botStatus() {
      return this.status.user.actor_type === 'Service'
    },
    showActorTypeIndicator() {
      return !this.hideBotIndication
    },
    sensitiveStatus() {
      return this.status.nsfw
    },
    mentionsLine() {
      if (!this.headTailLinks) return []
      const writtenSet = new Set(
        this.headTailLinks.writtenMentions.map((_) => _.url),
      )
      return this.status.attentions
        .filter((attn) => {
          // no reply user
          return (
            attn.id !== this.status.in_reply_to_user_id &&
            // no self-replies
            attn.statusnet_profile_url !==
              this.status.user.statusnet_profile_url &&
            // don't include if mentions is written
            !writtenSet.has(attn.statusnet_profile_url)
          )
        })
        .map((attn) => ({
          url: attn.statusnet_profile_url,
          content: attn.screen_name,
          userId: attn.id,
        }))
    },
    hasMentionsLine() {
      return this.mentionsLine.length > 0
    },
    muteReasons() {
      return [
        this.userIsMuted ? 'user' : null,
        this.status.thread_muted ? 'thread' : null,
        this.muteFilterHits.length > 0 ? 'filtered' : null,
        this.muteBotStatuses && this.botStatus ? 'bot' : null,
        this.muteSensitiveStatuses && this.sensitiveStatus ? 'nsfw' : null,
      ].filter((_) => _)
    },
    muteLocalized() {
      if (this.muteReasons.length === 0) return null
      const mainReason = () => {
        switch (this.muteReasons[0]) {
          case 'user':
            return this.$t('status.muted_user')
          case 'thread':
            return this.$t('status.thread_muted')
          case 'filtered':
            return this.$t(
              'status.muted_filters',
              {
                name: this.muteFilterHits[0].name,
                filterMore: this.muteFilterHits.length - 1,
              },
              this.muteFilterHits.length,
            )
          case 'bot':
            return this.$t('status.bot_muted')
          case 'nsfw':
            return this.$t('status.sensitive_muted')
        }
      }
      if (this.muteReasons.length > 1) {
        return this.$t(
          'status.multi_reason_mute',
          {
            main: mainReason(),
            numReasonsMore: this.muteReasons.length - 1,
          },
          this.muteReasons.length - 1,
        )
      } else {
        return mainReason()
      }
    },
    muted() {
      if (this.statusoid.user.id === this.currentUser.id) return false
      return !this.unmuted && !this.shouldNotMute && this.muteReasons.length > 0
    },
    userIsMuted() {
      if (this.statusoid.user.id === this.currentUser.id) return false
      const { status } = this
      const { reblog } = status
      const relationship = this.$store.getters.relationship(status.user.id)
      const relationshipReblog =
        reblog && this.$store.getters.relationship(reblog.user.id)
      return (
        (status.muted && !status.thread_muted) ||
        // Reprööt of a muted post according to BE
        (reblog && reblog.muted && !reblog.thread_muted) ||
        // Muted user
        relationship.muting ||
        // Muted user of a reprööt
        (relationshipReblog && relationshipReblog.muting)
      )
    },
    shouldNotMute() {
      if (this.isFocused) return true
      const { status } = this
      const { reblog } = status
      return (
        ((this.inProfile &&
          // Don't mute user's posts on user timeline (except reblogs)
          ((!reblog && status.user.id === this.profileUserId) ||
            // Same as above but also allow self-reblogs
            (reblog && reblog.user.id === this.profileUserId))) ||
          // Don't mute statuses in muted conversation when said conversation is opened
          (this.inConversation && status.thread_muted)) &&
        // No excuses if post has muted words
        !this.muteFilterHits.length > 0
      )
    },
    hideMutedUsers() {
      return this.mergedConfig.hideMutedPosts
    },
    hideMutedThreads() {
      return this.mergedConfig.hideMutedThreads
    },
    hideFilteredStatuses() {
      return this.mergedConfig.hideFilteredStatuses
    },
    hideWordFilteredPosts() {
      return this.mergedConfig.hideWordFilteredPosts
    },
    hideStatus() {
      return (
        !this.shouldNotMute &&
        ((this.muted && this.hideFilteredStatuses) ||
          (this.userIsMuted && this.hideMutedUsers) ||
          (this.status.thread_muted && this.hideMutedThreads) ||
          (this.muteFilterHits.length > 0 && this.hideWordFilteredPosts) ||
          this.muteFilterHits.some((x) => x.hide))
      )
    },
    isFocused() {
      // retweet or root of an expanded conversation
      if (this.focused) {
        return true
      } else if (!this.inConversation) {
        return false
      }
      // use conversation highlight only when in conversation
      return this.status.id === this.highlight
    },
    isReply() {
      return !!(
        this.status.in_reply_to_status_id && this.status.in_reply_to_user_id
      )
    },
    replyToName() {
      if (this.status.in_reply_to_screen_name) {
        return this.status.in_reply_to_screen_name
      } else {
        const user = this.$store.getters.findUser(
          this.status.in_reply_to_user_id,
        )
        return user && user.screen_name_ui
      }
    },
    replySubject() {
      if (!this.status.summary) return ''
      const decodedSummary = ldUnescape(this.status.summary)
      const behavior = this.mergedConfig.subjectLineBehavior
      const startsWithRe = decodedSummary.match(/^re[: ]/i)
      if ((behavior !== 'noop' && startsWithRe) || behavior === 'masto') {
        return decodedSummary
      } else if (behavior === 'email') {
        return 're: '.concat(decodedSummary)
      } else if (behavior === 'noop') {
        return ''
      }
    },
    combinedFavsAndRepeatsUsers() {
      // Use the status from the global status repository since favs and repeats are saved in it
      const combinedUsers = [].concat(
        this.statusFromGlobalRepository.favoritedBy,
        this.statusFromGlobalRepository.rebloggedBy,
      )
      return uniqBy(combinedUsers, 'id')
    },
    tags() {
      return this.status.tags
        .filter((tagObj) => Object.hasOwn(tagObj, 'name'))
        .map((tagObj) => tagObj.name)
        .join(' ')
    },
    hidePostStats() {
      return this.mergedConfig.hidePostStats
    },
    shouldDisplayFavsAndRepeats() {
      return (
        !this.hidePostStats &&
        this.isFocused &&
        (this.combinedFavsAndRepeatsUsers.length > 0 ||
          this.statusFromGlobalRepository.quotes_count)
      )
    },
    muteBotStatuses() {
      return this.mergedConfig.muteBotStatuses
    },
    muteSensitiveStatuses() {
      return this.mergedConfig.muteSensitiveStatuses
    },
    hideBotIndication() {
      return this.mergedConfig.hideBotIndication
    },
    currentUser() {
      return this.$store.state.users.currentUser
    },
    mergedConfig() {
      return useMergedConfigStore().mergedConfig
    },
    isSuspendable() {
      return !this.replying && this.mediaPlaying.length === 0
    },
    inThreadForest() {
      return !!this.controlledThreadDisplayStatus
    },
    threadShowing() {
      return this.controlledThreadDisplayStatus === 'showing'
    },
    visibilityLocalized() {
      return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
    },
    isEdited() {
      return this.status.edited_at !== null
    },
    editingAvailable() {
      return useInstanceCapabilitiesStore().editingAvailable
    },
    hasVisibleQuote() {
      return this.status.quote_url && this.status.quote_visible
    },
    hasInvisibleQuote() {
      return this.status.quote_url && !this.status.quote_visible
    },
    quotedStatus() {
      return this.status.quote_id
        ? this.$store.state.statuses.allStatusesObject[this.status.quote_id]
        : undefined
    },
    shouldDisplayQuote() {
      return this.quotedStatus && this.displayQuote
    },
    scrobblePresent() {
      if (this.mergedConfig.hideScrobbles) return false
      if (!this.status.user?.latestScrobble) return false
      const value = this.mergedConfig.hideScrobblesAfter.match(/\d+/gs)[0]
      const unit = this.mergedConfig.hideScrobblesAfter.match(/\D+/gs)[0]
      let multiplier = 60 * 1000 // minutes is smallest unit
      switch (unit) {
        case 'm':
          break
        case 'h':
          multiplier *= 60 // hour
          break
        case 'd':
          multiplier *= 60 // hour
          multiplier *= 24 // day
          break
      }
      const maxAge = Number(value) * multiplier
      const createdAt = Date.parse(this.status.user.latestScrobble.created_at)
      const age = Date.now() - createdAt
      if (age > maxAge) return false
      return this.status.user.latestScrobble.artist
    },
    scrobble() {
      return this.status.user?.latestScrobble
    },
  },
  methods: {
    visibilityIcon(visibility) {
      switch (visibility) {
        case 'private':
          return 'lock'
        case 'unlisted':
          return 'lock-open'
        case 'direct':
          return 'envelope'
        case 'local':
          return 'igloo'
        default:
          return 'globe'
      }
    },
    showError(error) {
      this.error = error
    },
    clearError() {
      this.$emit('interacted')
      this.error = undefined
    },
    toggleReplying() {
      this.$emit('interacted')
      if (this.replying) {
        this.$refs.postStatusForm.requestClose()
      } else {
        this.doToggleReplying()
      }
    },
    doToggleReplying() {
      controlledOrUncontrolledToggle(this, 'replying')
    },
    gotoOriginal(id) {
      if (this.inConversation) {
        this.$emit('goto', id)
      }
    },
    toggleExpanded() {
      this.$emit('toggleExpanded')
    },
    toggleMute() {
      this.unmuted = !this.unmuted
    },
    toggleUserExpanded() {
      this.userExpanded = !this.userExpanded
    },
    generateUserProfileLink(id, name) {
      return generateProfileLink(
        id,
        name,
        useInstanceStore().restrictedNicknames,
      )
    },
    addMediaPlaying(id) {
      controlledOrUncontrolledSet(
        this,
        'mediaPlaying',
        this.mediaPlaying.concat(id),
      )
    },
    removeMediaPlaying(id) {
      controlledOrUncontrolledSet(
        this,
        'mediaPlaying',
        this.mediaPlaying.filter((mediaId) => mediaId !== id),
      )
    },
    setHeadTailLinks(headTailLinks) {
      this.headTailLinks = headTailLinks
    },
    toggleThreadDisplay() {
      this.controlledToggleThreadDisplay()
    },
    scrollIfHighlighted(highlightId) {
      if (this.$el.getBoundingClientRect == null) return
      const id = highlightId
      if (this.status.id === id) {
        const rect = this.$el.getBoundingClientRect()
        if (rect.top < 100) {
          // Post is above screen, match its top to screen top
          window.scrollBy(0, rect.top - 100)
        } else if (rect.height >= window.innerHeight - 50) {
          // Post we want to see is taller than screen so match its top to screen top
          window.scrollBy(0, rect.top - 100)
        } else if (rect.bottom > window.innerHeight - 50) {
          // Post is below screen, match its bottom to screen bottom
          window.scrollBy(0, rect.bottom - window.innerHeight + 50)
        }
      }
    },
    toggleDisplayQuote() {
      if (this.shouldDisplayQuote) {
        this.displayQuote = false
      } else if (!this.quotedStatus) {
        this.$store.dispatch('fetchStatus', this.status.quote_id).then(() => {
          this.displayQuote = true
        })
      } else {
        this.displayQuote = true
      }
    },
  },
  watch: {
    highlight: function (id) {
      this.scrollIfHighlighted(id)
    },
    'status.repeat_num': function (num) {
      // refetch repeats when repeat_num is changed in any way
      if (
        this.isFocused &&
        this.statusFromGlobalRepository.rebloggedBy &&
        this.statusFromGlobalRepository.rebloggedBy.length !== num
      ) {
        this.$store.dispatch('fetchRepeats', this.status.id)
      }
    },
    'status.fave_num': function (num) {
      // refetch favs when fave_num is changed in any way
      if (
        this.isFocused &&
        this.statusFromGlobalRepository.favoritedBy &&
        this.statusFromGlobalRepository.favoritedBy.length !== num
      ) {
        this.$store.dispatch('fetchFavs', this.status.id)
      }
    },
    isSuspendable: function (val) {
      this.suspendable = val
    },
  },
}

export default Status