117 lines
3.1 KiB
JavaScript
117 lines
3.1 KiB
JavaScript
import { mapState as mapPiniaState } from 'pinia'
|
|
import { defineAsyncComponent } from 'vue'
|
|
import { mapGetters, mapState } from 'vuex'
|
|
|
|
import Attachment from '../attachment/attachment.vue'
|
|
import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
|
|
import Gallery from '../gallery/gallery.vue'
|
|
import LinkPreview from '../link-preview/link-preview.vue'
|
|
import Popover from '../popover/popover.vue'
|
|
import StatusContent from '../status_content/status_content.vue'
|
|
import UserAvatar from '../user_avatar/user_avatar.vue'
|
|
|
|
import { useInstanceStore } from 'src/stores/instance.js'
|
|
import { useInterfaceStore } from 'src/stores/interface'
|
|
|
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
import { faEllipsisH, faTimes } from '@fortawesome/free-solid-svg-icons'
|
|
|
|
library.add(faTimes, faEllipsisH)
|
|
|
|
const ChatMessage = {
|
|
name: 'ChatMessage',
|
|
props: [
|
|
'author',
|
|
'edited',
|
|
'noHeading',
|
|
'chatViewItem',
|
|
'hoveredMessageChain',
|
|
],
|
|
emits: ['hover'],
|
|
components: {
|
|
Popover,
|
|
Attachment,
|
|
StatusContent,
|
|
UserAvatar,
|
|
Gallery,
|
|
LinkPreview,
|
|
ChatMessageDate,
|
|
UserPopover: defineAsyncComponent(
|
|
() => import('../user_popover/user_popover.vue'),
|
|
),
|
|
},
|
|
computed: {
|
|
// Returns HH:MM (hours and minutes) in local time.
|
|
createdAt() {
|
|
const time = this.chatViewItem.data.created_at
|
|
return time.toLocaleTimeString('en', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false,
|
|
})
|
|
},
|
|
isCurrentUser() {
|
|
return this.message.account_id === this.currentUser.id
|
|
},
|
|
message() {
|
|
return this.chatViewItem.data
|
|
},
|
|
isMessage() {
|
|
return this.chatViewItem.type === 'message'
|
|
},
|
|
messageForStatusContent() {
|
|
return {
|
|
summary: '',
|
|
emojis: this.message.emojis,
|
|
raw_html: this.message.content || '',
|
|
text: this.message.content || '',
|
|
attachments: this.message.attachments,
|
|
}
|
|
},
|
|
hasAttachment() {
|
|
return this.message.attachments.length > 0
|
|
},
|
|
...mapPiniaState(useInterfaceStore, {
|
|
betterShadow: (store) => store.browserSupport.cssFilter,
|
|
}),
|
|
...mapState({
|
|
currentUser: (state) => state.users.currentUser,
|
|
restrictedNicknames: (state) => useInstanceStore().restrictedNicknames,
|
|
}),
|
|
popoverMarginStyle() {
|
|
if (this.isCurrentUser) {
|
|
return {}
|
|
} else {
|
|
return { left: 50 }
|
|
}
|
|
},
|
|
...mapGetters(['mergedConfig', 'findUser']),
|
|
},
|
|
data() {
|
|
return {
|
|
hovered: false,
|
|
menuOpened: false,
|
|
}
|
|
},
|
|
methods: {
|
|
onHover(bool) {
|
|
this.$emit('hover', {
|
|
isHovered: bool,
|
|
messageChainId: this.chatViewItem.messageChainId,
|
|
})
|
|
},
|
|
async deleteMessage() {
|
|
const confirmed = window.confirm(this.$t('chats.delete_confirm'))
|
|
if (confirmed) {
|
|
await this.$store.dispatch('deleteChatMessage', {
|
|
messageId: this.chatViewItem.data.id,
|
|
chatId: this.chatViewItem.data.chat_id,
|
|
})
|
|
}
|
|
this.hovered = false
|
|
this.menuOpened = false
|
|
},
|
|
},
|
|
}
|
|
|
|
export default ChatMessage
|