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

391 lines
13 KiB
JavaScript
Raw Normal View History

2016-10-28 16:08:03 +00:00
import Attachment from '../attachment/attachment.vue'
2016-10-30 15:12:35 +00:00
import FavoriteButton from '../favorite_button/favorite_button.vue'
import RetweetButton from '../retweet_button/retweet_button.vue'
import DeleteButton from '../delete_button/delete_button.vue'
2016-11-03 15:59:27 +00:00
import PostStatusForm from '../post_status_form/post_status_form.vue'
2017-02-16 14:58:49 +00:00
import UserCardContent from '../user_card_content/user_card_content.vue'
import UserAvatar from '../user_avatar/user_avatar.vue'
2019-01-26 15:45:03 +00:00
import Gallery from '../gallery/gallery.vue'
2019-01-27 13:47:30 +00:00
import LinkPreview from '../link-preview/link-preview.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
2019-01-26 15:45:03 +00:00
import fileType from 'src/services/file_type/file_type.service'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
2019-02-09 12:13:52 +00:00
import { filter, find, unescape } from 'lodash'
2016-10-28 16:08:03 +00:00
2016-10-28 13:19:42 +00:00
const Status = {
2018-04-09 16:43:31 +00:00
name: 'Status',
props: [
'statusoid',
2017-03-05 13:34:14 +00:00
'expandable',
'inConversation',
'focused',
'highlight',
'compact',
2018-04-09 16:43:31 +00:00
'replies',
'noReplyLinks',
'noHeading',
'inlineExpanded'
],
data () {
return {
replying: false,
expanded: false,
unmuted: false,
userExpanded: false,
preview: null,
showPreview: false,
showingTall: this.inConversation && this.focused,
showingLongSubject: false,
expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
? !this.$store.state.instance.collapseMessageWithSubject
: !this.$store.state.config.collapseMessageWithSubject,
betterShadow: this.$store.state.interface.browserSupport.cssFilter,
maxAttachments: 9
}
},
2016-10-28 16:08:03 +00:00
computed: {
localCollapseSubjectDefault () {
return typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
? this.$store.state.instance.collapseMessageWithSubject
: this.$store.state.config.collapseMessageWithSubject
},
muteWords () {
return this.$store.state.config.muteWords
},
2018-06-18 08:36:58 +00:00
repeaterClass () {
const user = this.statusoid.user
return highlightClass(user)
2018-06-18 08:36:58 +00:00
},
2018-04-25 14:35:25 +00:00
userClass () {
2018-06-18 08:36:58 +00:00
const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
return highlightClass(user)
2018-06-18 08:36:58 +00:00
},
2018-12-04 18:49:00 +00:00
deleted () {
return this.statusoid.deleted
},
2018-06-18 08:36:58 +00:00
repeaterStyle () {
const user = this.statusoid.user
const highlight = this.$store.state.config.highlight
return highlightStyle(highlight[user.screen_name])
2018-06-18 08:36:58 +00:00
},
userStyle () {
if (this.noHeading) return
2018-06-18 08:36:58 +00:00
const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
const highlight = this.$store.state.config.highlight
return highlightStyle(highlight[user.screen_name])
2018-04-25 14:35:25 +00:00
},
hideAttachments () {
2017-03-05 13:34:14 +00:00
return (this.$store.state.config.hideAttachments && !this.inConversation) ||
(this.$store.state.config.hideAttachmentsInConv && this.inConversation)
},
userProfileLink () {
return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
},
replyProfileLink () {
if (this.isReply) {
2019-01-30 14:57:19 +00:00
return this.generateUserProfileLink(this.status.in_reply_to_user_id, this.replyToName)
}
},
2016-10-28 16:08:03 +00:00
retweet () { return !!this.statusoid.retweeted_status },
retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name },
retweeterHtml () { return this.statusoid.user.name_html },
retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
2016-10-28 16:08:03 +00:00
status () {
if (this.retweet) {
return this.statusoid.retweeted_status
} else {
return this.statusoid
}
2016-11-06 19:45:26 +00:00
},
loggedIn () {
return !!this.$store.state.users.currentUser
2017-02-13 23:01:50 +00:00
},
muteWordHits () {
const statusText = this.status.text.toLowerCase()
const hits = filter(this.muteWords, (muteWord) => {
return statusText.includes(muteWord.toLowerCase())
})
return hits
},
muted () { return !this.unmuted && (this.status.user.muted || this.muteWordHits.length > 0) },
2019-02-06 18:18:13 +00:00
hideFilteredStatuses () {
return typeof this.$store.state.config.hideFilteredStatuses === 'undefined'
? this.$store.state.instance.hideFilteredStatuses
: this.$store.state.config.hideFilteredStatuses
},
2019-02-08 12:25:56 +00:00
hideStatus () {
2019-02-08 13:17:20 +00:00
return (this.hideReply || this.deleted) || (this.muted && this.hideFilteredStatuses)
2019-02-08 12:25:56 +00:00
},
isFocused () {
// retweet or root of an expanded conversation
2017-04-12 16:07:55 +00:00
if (this.focused) {
return true
2017-04-12 16:07:55 +00:00
} else if (!this.inConversation) {
return false
2017-04-12 16:07:55 +00:00
}
// use conversation highlight only when in conversation
return this.status.id === this.highlight
2018-04-09 16:43:31 +00:00
},
// This is a bit hacky, but we want to approximate post height before rendering
// so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
// as well as approximate line count by counting characters and approximating ~80
// per line.
//
// Using max-height + overflow: auto for status components resulted in false positives
// very often with japanese characters, and it was very annoying.
tallStatus () {
const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
return lengthScore > 20
},
longSubject () {
return this.status.summary.length > 900
},
isReply () {
return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
},
replyToName () {
const user = this.$store.state.users.usersObject[this.status.in_reply_to_user_id]
if (user) {
return user.screen_name
} else {
2019-01-24 17:27:20 +00:00
return this.status.in_reply_to_screen_name
}
},
hideReply () {
if (this.$store.state.config.replyVisibility === 'all') {
return false
}
if (this.inlineExpanded || this.expanded || this.inConversation || !this.isReply) {
return false
}
if (this.status.user.id === this.$store.state.users.currentUser.id) {
return false
}
2019-01-17 20:44:31 +00:00
if (this.status.type === 'retweet') {
return false
}
var checkFollowing = this.$store.state.config.replyVisibility === 'following'
for (var i = 0; i < this.status.attentions.length; ++i) {
if (this.status.user.id === this.status.attentions[i].id) {
continue
}
if (checkFollowing && this.status.attentions[i].following) {
return false
}
if (this.status.attentions[i].id === this.$store.state.users.currentUser.id) {
return false
}
}
return this.status.attentions.length > 0
},
hideSubjectStatus () {
if (this.tallStatus && !this.localCollapseSubjectDefault) {
2018-08-20 02:08:39 +00:00
return false
}
return !this.expandingSubject && this.status.summary
},
2018-04-09 16:43:31 +00:00
hideTallStatus () {
if (this.status.summary && this.localCollapseSubjectDefault) {
return false
}
2018-04-09 16:43:31 +00:00
if (this.showingTall) {
return false
}
return this.tallStatus
},
showingMore () {
return (this.tallStatus && this.showingTall) || (this.status.summary && this.expandingSubject)
2018-04-09 16:43:31 +00:00
},
nsfwClickthrough () {
if (!this.status.nsfw) {
return false
}
if (this.status.summary && this.localCollapseSubjectDefault) {
return false
}
return true
},
2018-08-26 00:50:11 +00:00
replySubject () {
2018-09-25 12:21:47 +00:00
if (!this.status.summary) return ''
2019-02-09 12:13:52 +00:00
const decodedSummary = unescape(this.status.summary)
const behavior = typeof this.$store.state.config.subjectLineBehavior === 'undefined'
? this.$store.state.instance.subjectLineBehavior
: this.$store.state.config.subjectLineBehavior
2019-02-08 16:25:53 +00:00
const startsWithRe = decodedSummary.match(/^re[: ]/i)
2018-09-25 12:16:26 +00:00
if (behavior !== 'noop' && startsWithRe || behavior === 'masto') {
2019-02-08 16:25:53 +00:00
return decodedSummary
2018-09-25 12:16:26 +00:00
} else if (behavior === 'email') {
2019-02-08 16:25:53 +00:00
return 're: '.concat(decodedSummary)
2018-09-25 12:16:26 +00:00
} else if (behavior === 'noop') {
return ''
2018-08-26 00:50:11 +00:00
}
},
2018-04-09 16:43:31 +00:00
attachmentSize () {
if ((this.$store.state.config.hideAttachments && !this.inConversation) ||
(this.$store.state.config.hideAttachmentsInConv && this.inConversation) ||
(this.status.attachments.length > this.maxAttachments)) {
2018-04-09 16:43:31 +00:00
return 'hide'
} else if (this.compact) {
return 'small'
}
return 'normal'
2019-01-26 15:45:03 +00:00
},
galleryTypes () {
if (this.attachmentSize === 'hide') {
return []
}
return this.$store.state.config.playVideosInModal
? ['image', 'video']
: ['image']
2019-01-26 15:45:03 +00:00
},
galleryAttachments () {
return this.status.attachments.filter(
file => fileType.fileMatchesSomeType(this.galleryTypes, file)
)
},
nonGalleryAttachments () {
return this.status.attachments.filter(
file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
)
}
2016-10-28 16:08:03 +00:00
},
components: {
2016-10-30 15:12:35 +00:00
Attachment,
2016-11-03 15:59:27 +00:00
FavoriteButton,
RetweetButton,
DeleteButton,
2017-02-16 14:58:49 +00:00
PostStatusForm,
UserCardContent,
UserAvatar,
Gallery,
2019-01-27 13:47:30 +00:00
LinkPreview
2016-11-03 15:59:27 +00:00
},
methods: {
2018-05-21 22:01:33 +00:00
visibilityIcon (visibility) {
switch (visibility) {
case 'private':
return 'icon-lock'
case 'unlisted':
return 'icon-lock-open-alt'
case 'direct':
return 'icon-mail-alt'
default:
return 'icon-globe'
2018-05-20 16:28:01 +00:00
}
},
linkClicked (event) {
let { target } = event
if (target.tagName === 'SPAN') {
target = target.parentNode
}
if (target.tagName === 'A') {
if (target.className.match(/mention/)) {
const href = target.href
const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
if (attn) {
event.stopPropagation()
event.preventDefault()
const link = this.generateUserProfileLink(attn.id, attn.screen_name)
this.$router.push(link)
return
}
}
if (target.className.match(/hashtag/)) {
// Extract tag name from link url
const tag = extractTagFromUrl(target.href)
if (tag) {
const link = this.generateTagLink(tag)
this.$router.push(link)
}
}
}
},
2016-11-03 15:59:27 +00:00
toggleReplying () {
this.replying = !this.replying
},
gotoOriginal (id) {
// only handled by conversation, not status_or_conversation
if (this.inConversation) {
this.$emit('goto', id)
}
},
toggleExpanded () {
this.$emit('toggleExpanded')
2017-02-13 23:01:50 +00:00
},
toggleMute () {
this.unmuted = !this.unmuted
2017-02-16 14:58:49 +00:00
},
toggleUserExpanded () {
this.userExpanded = !this.userExpanded
},
toggleShowMore () {
if (this.showingTall) {
this.showingTall = false
} else if (this.expandingSubject && this.status.summary) {
this.expandingSubject = false
} else if (this.hideTallStatus) {
this.showingTall = true
} else if (this.hideSubjectStatus && this.status.summary) {
this.expandingSubject = true
}
2018-04-09 16:43:31 +00:00
},
replyEnter (id, event) {
this.showPreview = true
const targetId = id
const statuses = this.$store.state.statuses.allStatuses
if (!this.preview) {
// if we have the status somewhere already
this.preview = find(statuses, { 'id': targetId })
// or if we have to fetch it
if (!this.preview) {
this.$store.state.api.backendInteractor.fetchStatus({id}).then((status) => {
this.preview = status
})
}
} else if (this.preview.id !== targetId) {
this.preview = find(statuses, { 'id': targetId })
}
},
replyLeave () {
this.showPreview = false
2018-12-15 03:16:44 +00:00
},
generateUserProfileLink (id, name) {
return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
},
generateTagLink (tag) {
return `/tag/${tag}`
},
setMedia () {
2019-01-26 15:45:03 +00:00
const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
return () => this.$store.dispatch('setMedia', attachments)
2018-08-05 02:44:02 +00:00
}
},
watch: {
2017-04-12 16:07:55 +00:00
'highlight': function (id) {
if (this.status.id === id) {
let rect = this.$el.getBoundingClientRect()
2017-04-12 16:07:55 +00:00
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)
2017-04-12 16:07:55 +00:00
}
}
}
2018-08-27 09:51:30 +00:00
},
filters: {
capitalize: function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
2016-10-28 16:08:03 +00:00
}
2016-10-28 13:19:42 +00:00
}
export default Status