direct_conversation_status.js (3944B)
1 import { mapState } from 'vuex'
2 import Attachment from '../attachment/attachment.vue'
3 import UserAvatar from '../user_avatar/user_avatar.vue'
4 import Gallery from '../gallery/gallery.vue'
5 import LinkPreview from '../link-preview/link-preview.vue'
6 import StatusContent from '../status_content/status_content.vue'
7 import DirectConversationDate from '../direct_conversation_date/direct_conversation_date.vue'
8 import DirectConversationTitle from '../direct_conversation_title/direct_conversation_title'
9 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
10 import { getSelectedText } from 'src/services/window_utils/window_utils.js'
11 import Popover from '../popover/popover.vue'
12
13 const DirectConversationStatus = {
14 name: 'DirectConversationStatus',
15 props: [
16 'edited',
17 'noHeading',
18 'directConversationViewItem',
19 'sequenceHovered'
20 ],
21 components: {
22 Attachment,
23 StatusContent,
24 UserAvatar,
25 Gallery,
26 LinkPreview,
27 DirectConversationDate,
28 DirectConversationTitle,
29 Popover
30 },
31 computed: {
32 // Returns HH:MM (hours and minutes) in local time.
33 createdAt () {
34 const time = this.directConversationViewItem.data.created_at
35 const lang = this.$store.getters.mergedConfig.interfaceLanguage
36 return time.toLocaleTimeString(lang, { hour: '2-digit', minute: '2-digit', hour12: false })
37 },
38 isCurrentUser () {
39 return this.status.user.id === this.currentUser.id
40 },
41 deleted () {
42 return this.status.deleted
43 },
44 userProfileLink () {
45 return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
46 },
47 status () {
48 return this.directConversationViewItem.data
49 },
50 isStatus () {
51 return this.directConversationViewItem.type === 'status'
52 },
53 tags () {
54 return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
55 },
56 statusVisibility () {
57 return this.$t(`status.visibility.${this.status.visibility}`)
58 },
59 visibilityIcon () {
60 switch (this.status.visibility) {
61 case 'private':
62 return 'icon-lock'
63 case 'unlisted':
64 return 'icon-lock-open-alt'
65 case 'direct':
66 return 'icon-mail-alt'
67 default:
68 return 'icon-globe'
69 }
70 },
71 ...mapState({
72 betterShadow: state => state.interface.browserSupport.cssFilter,
73 currentUser: state => state.users.currentUser
74 })
75 },
76 methods: {
77 onHover (bool) {
78 this.$emit('hover', { state: bool, sequenceId: this.directConversationViewItem.sequenceId })
79 },
80 onStatusBodyClick (e) {
81 if (getSelectedText() || (e.target.tagName === 'A') || e.target.closest('.link-preview-card, .attachments')) {
82 e.preventDefault()
83 e.stopPropagation()
84 }
85 },
86 viewInTimeline () {
87 this.$router.push({ name: 'conversation', params: { id: this.status.id } })
88 },
89 toggleActions (e) {
90 // Prevent opening the menu when selecting text or clicking on a link preview
91 if (getSelectedText()) { return }
92 if (e.target.tagName === 'A') { return }
93 if (e.target.closest('.link-preview-card, .attachments')) { return }
94
95 this.$emit('toggleActions', this.directConversationViewItem.id)
96 },
97 deleteStatus () {
98 const confirmed = window.confirm(this.$t('direct_conversations.delete_confirm'))
99 if (confirmed) {
100 this.$store.dispatch('deleteStatus', { id: this.directConversationViewItem.id })
101 this.$store.dispatch('removeFromCurrentDirectConversationStatuses', { id: this.directConversationViewItem.id })
102 }
103 this.$emit('toggleActions', this.directConversationViewItem.id)
104 },
105 generateUserProfileLink (id, name) {
106 return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
107 }
108 }
109 }
110
111 export default DirectConversationStatus