2019-05-28 11:03:14 +00:00
|
|
|
<template>
|
2019-09-17 16:36:11 +00:00
|
|
|
<div class="post-content">
|
|
|
|
<div class="post-header">
|
|
|
|
<div class="post-author-wrapper">
|
|
|
|
<router-link v-if="item.actor_info"
|
|
|
|
:to="{ name: 'profile',
|
|
|
|
params: { account: (item.local && item.type!=='SocialAppNotification') ? item.actor_info.preferredUsername : item.actor_info.account }
|
|
|
|
}">
|
|
|
|
<span class="post-author">
|
|
|
|
{{ userDisplayName(item.actor_info) }}
|
|
|
|
</span>
|
|
|
|
<span class="post-author-id">
|
|
|
|
@{{ item.actor_info.account }}
|
|
|
|
</span>
|
|
|
|
</router-link>
|
|
|
|
<a v-else :href="item.attributedTo">
|
|
|
|
<span class="post-author-id">
|
|
|
|
{{ item.attributedTo }}
|
|
|
|
</span>
|
2019-10-25 12:31:47 +00:00
|
|
|
</a>
|
2019-05-29 14:54:00 +00:00
|
|
|
</div>
|
2019-09-17 16:36:11 +00:00
|
|
|
<a :data-timestamp="timestamp" class="post-timestamp live-relative-timestamp" @click="getSinglePostTimeline">
|
|
|
|
{{ relativeTimestamp }}
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
|
|
<div v-if="item.content" class="post-message">
|
2022-09-14 12:11:42 +00:00
|
|
|
<RichText :text="source"
|
|
|
|
:autolink="true"
|
|
|
|
:reference-limit="2"
|
|
|
|
:arguments="richParameters" />
|
2019-09-17 16:36:11 +00:00
|
|
|
</div>
|
|
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
|
|
<div v-else class="post-message" v-html="item.actor_info.summary" />
|
|
|
|
<div v-if="hasAttachments" class="post-attachments">
|
|
|
|
<post-attachment :attachments="item.attachment" />
|
|
|
|
</div>
|
2022-09-13 13:51:00 +00:00
|
|
|
<div v-if="this.$route && this.$route.params.type !== 'notifications' && !serverData.public" class="post-actions">
|
2022-09-12 13:42:18 +00:00
|
|
|
<NcButton type="tertiary-no-background"
|
2022-06-20 12:31:44 +00:00
|
|
|
v-tooltip="t('social', 'Reply')"
|
|
|
|
@click="reply">
|
|
|
|
<template #icon>
|
|
|
|
<Reply :size="20" />
|
|
|
|
</template>
|
2022-09-12 13:42:18 +00:00
|
|
|
</NcButton>
|
|
|
|
<NcButton type="tertiary-no-background"
|
2022-06-20 12:31:44 +00:00
|
|
|
v-tooltip="t('social', 'Boost')"
|
|
|
|
@click="boost">
|
|
|
|
<template #icon>
|
2022-09-14 08:31:07 +00:00
|
|
|
<Repeat :size="20" :fill-color="isBoosted ? 'blue' : 'var(--color-main-text)'" />
|
2022-06-20 12:31:44 +00:00
|
|
|
</template>
|
2022-09-12 13:42:18 +00:00
|
|
|
</NcButton>
|
|
|
|
<NcButton v-if="!isLiked"
|
2022-06-20 12:31:44 +00:00
|
|
|
type="tertiary-no-background"
|
|
|
|
v-tooltip="t('social', 'Like')"
|
|
|
|
@click="like">
|
|
|
|
<template #icon>
|
2022-07-12 12:28:25 +00:00
|
|
|
<HeartOutline :size="20" />
|
2022-06-20 12:31:44 +00:00
|
|
|
</template>
|
2022-09-12 13:42:18 +00:00
|
|
|
</NcButton>
|
|
|
|
<NcButton v-if="isLiked"
|
2022-06-20 12:31:44 +00:00
|
|
|
type="tertiary-no-background"
|
|
|
|
v-tooltip="t('social', 'Undo Like')"
|
|
|
|
@click="like">
|
|
|
|
<template #icon>
|
2022-07-12 12:28:25 +00:00
|
|
|
<Heart :size="20" :fill-color="'var(--color-error)'" />
|
2022-06-20 12:31:44 +00:00
|
|
|
</template>
|
2022-09-12 13:42:18 +00:00
|
|
|
</NcButton>
|
|
|
|
<NcActions>
|
|
|
|
<NcActionButton v-if="item.actor_info.account === cloudId"
|
2022-06-20 12:31:44 +00:00
|
|
|
@click="remove()"
|
|
|
|
icon="icon-delete">
|
|
|
|
{{ t('social', 'Delete') }}
|
2022-09-12 13:42:18 +00:00
|
|
|
</NcActionButton>
|
|
|
|
</NcActions>
|
2019-05-29 14:54:00 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2019-05-28 11:03:14 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import * as linkify from 'linkifyjs'
|
|
|
|
import pluginMention from 'linkifyjs/plugins/mention'
|
|
|
|
import 'linkifyjs/string'
|
|
|
|
import currentUser from './../mixins/currentUserMixin'
|
2019-09-09 14:16:40 +00:00
|
|
|
import PostAttachment from './PostAttachment.vue'
|
2022-09-12 13:42:18 +00:00
|
|
|
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
|
|
|
|
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
|
|
|
|
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
|
2022-06-20 12:31:44 +00:00
|
|
|
import Repeat from 'vue-material-design-icons/Repeat.vue'
|
|
|
|
import Reply from 'vue-material-design-icons/Reply.vue'
|
|
|
|
import Heart from 'vue-material-design-icons/Heart.vue'
|
|
|
|
import HeartOutline from 'vue-material-design-icons/HeartOutline.vue'
|
2019-10-25 12:31:47 +00:00
|
|
|
import Logger from '../logger'
|
2020-09-25 17:35:24 +00:00
|
|
|
import MessageContent from './MessageContent'
|
2020-10-09 16:16:40 +00:00
|
|
|
import moment from '@nextcloud/moment'
|
|
|
|
import { generateUrl } from '@nextcloud/router'
|
2022-09-14 12:11:42 +00:00
|
|
|
import RichText from '@nextcloud/vue-richtext'
|
2019-05-28 11:03:14 +00:00
|
|
|
|
|
|
|
pluginMention(linkify)
|
|
|
|
|
|
|
|
export default {
|
2019-06-27 16:25:51 +00:00
|
|
|
name: 'TimelinePost',
|
2019-05-28 11:03:14 +00:00
|
|
|
components: {
|
2020-09-25 17:35:24 +00:00
|
|
|
PostAttachment,
|
2022-06-20 12:31:44 +00:00
|
|
|
MessageContent,
|
2022-09-12 16:13:43 +00:00
|
|
|
NcActions,
|
|
|
|
NcActionButton,
|
|
|
|
NcButton,
|
2022-06-20 12:31:44 +00:00
|
|
|
Repeat,
|
|
|
|
Reply,
|
|
|
|
Heart,
|
|
|
|
HeartOutline,
|
2022-09-14 12:11:42 +00:00
|
|
|
RichText,
|
2019-05-28 11:03:14 +00:00
|
|
|
},
|
2022-06-20 12:31:44 +00:00
|
|
|
mixins: [currentUser],
|
2019-05-28 11:03:14 +00:00
|
|
|
props: {
|
2019-05-28 14:08:09 +00:00
|
|
|
item: { type: Object, default: () => {} },
|
2019-05-29 14:54:00 +00:00
|
|
|
parentAnnounce: { type: Object, default: () => {} }
|
2019-05-28 11:03:14 +00:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
relativeTimestamp() {
|
2020-10-09 16:16:40 +00:00
|
|
|
return moment(this.item.published).fromNow()
|
2019-05-28 11:03:14 +00:00
|
|
|
},
|
|
|
|
timestamp() {
|
|
|
|
return Date.parse(this.item.published)
|
|
|
|
},
|
2020-09-25 17:35:24 +00:00
|
|
|
source() {
|
2020-10-02 15:18:40 +00:00
|
|
|
if (!this.item.source && this.item.content) {
|
|
|
|
// local posts don't have a source json
|
2022-09-14 12:11:42 +00:00
|
|
|
console.debug(this.item.content)
|
|
|
|
return this.item.content
|
2019-07-29 14:04:42 +00:00
|
|
|
}
|
2022-09-14 12:11:42 +00:00
|
|
|
console.debug(JSON.parse(this.item.source))
|
2020-09-25 17:35:24 +00:00
|
|
|
return JSON.parse(this.item.source)
|
2019-05-28 11:03:14 +00:00
|
|
|
},
|
|
|
|
avatarUrl() {
|
2020-10-09 16:16:40 +00:00
|
|
|
return generateUrl('/apps/social/api/v1/global/actor/avatar?id=' + this.item.attributedTo)
|
2019-05-28 11:03:14 +00:00
|
|
|
},
|
2019-07-11 20:00:13 +00:00
|
|
|
hasAttachments() {
|
2019-07-15 13:13:35 +00:00
|
|
|
return (typeof this.item.attachment !== 'undefined')
|
2019-07-11 20:00:13 +00:00
|
|
|
},
|
2019-05-28 11:03:14 +00:00
|
|
|
isBoosted() {
|
|
|
|
if (typeof this.item.action === 'undefined') {
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
return !!this.item.action.values.boosted
|
2019-07-10 15:39:49 +00:00
|
|
|
},
|
|
|
|
isLiked() {
|
|
|
|
if (typeof this.item.action === 'undefined') {
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
return !!this.item.action.values.liked
|
2022-09-14 12:11:42 +00:00
|
|
|
},
|
|
|
|
richParameters() {
|
|
|
|
return {}
|
|
|
|
},
|
2019-05-28 11:03:14 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2020-10-12 14:54:13 +00:00
|
|
|
/**
|
2022-06-20 12:31:44 +00:00
|
|
|
* @function getSinglePostTimeline
|
|
|
|
* @description Opens the timeline of the post clicked
|
|
|
|
*/
|
2020-10-12 14:54:13 +00:00
|
|
|
getSinglePostTimeline(e) {
|
|
|
|
// Display internal or external post
|
|
|
|
if (!this.item.local) {
|
|
|
|
if (this.item.type === 'Note') {
|
|
|
|
window.open(this.item.id)
|
|
|
|
} else if (this.item.type === 'Announce') {
|
|
|
|
window.open(this.item.object)
|
|
|
|
} else {
|
|
|
|
Logger.warn("Don't know what to do with posts of type " + this.item.type, { post: this.item })
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.$router.push({ name: 'single-post',
|
|
|
|
params: {
|
|
|
|
account: this.item.actor_info.preferredUsername,
|
|
|
|
id: this.item.id,
|
|
|
|
localId: this.item.id.split('/')[this.item.id.split('/').length - 1],
|
|
|
|
type: 'single-post'
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
2019-05-28 11:03:14 +00:00
|
|
|
userDisplayName(actorInfo) {
|
|
|
|
return actorInfo.name !== '' ? actorInfo.name : actorInfo.preferredUsername
|
|
|
|
},
|
|
|
|
reply() {
|
2019-10-15 10:16:38 +00:00
|
|
|
this.$store.commit('setComposerDisplayStatus', true)
|
2019-05-28 11:03:14 +00:00
|
|
|
this.$root.$emit('composer-reply', this.item)
|
|
|
|
},
|
|
|
|
boost() {
|
2019-05-29 14:54:00 +00:00
|
|
|
let params = {
|
|
|
|
post: this.item,
|
|
|
|
parentAnnounce: this.parentAnnounce
|
|
|
|
}
|
2019-05-28 11:03:14 +00:00
|
|
|
if (this.isBoosted) {
|
2019-05-28 14:08:09 +00:00
|
|
|
this.$store.dispatch('postUnBoost', params)
|
2019-05-28 11:03:14 +00:00
|
|
|
} else {
|
2019-05-28 14:08:09 +00:00
|
|
|
this.$store.dispatch('postBoost', params)
|
2019-05-28 11:03:14 +00:00
|
|
|
}
|
2019-07-10 15:39:49 +00:00
|
|
|
},
|
2022-06-20 12:31:44 +00:00
|
|
|
remove() {
|
|
|
|
this.$store.dispatch('postDelete', this.item)
|
|
|
|
},
|
2019-07-10 15:39:49 +00:00
|
|
|
like() {
|
|
|
|
let params = {
|
|
|
|
post: this.item,
|
|
|
|
parentAnnounce: this.parentAnnounce
|
|
|
|
}
|
2019-07-10 15:40:12 +00:00
|
|
|
if (this.isLiked) {
|
2019-07-10 15:39:49 +00:00
|
|
|
this.$store.dispatch('postUnlike', params)
|
|
|
|
} else {
|
|
|
|
this.$store.dispatch('postLike', params)
|
|
|
|
}
|
2019-05-28 11:03:14 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
2022-09-14 12:11:42 +00:00
|
|
|
@import '@nextcloud/vue-richtext/dist/style.css';
|
2022-06-20 12:31:44 +00:00
|
|
|
.post-content {
|
|
|
|
padding: 4px 4px 4px 8px;
|
|
|
|
font-size: 15px;
|
|
|
|
line-height: 1.6em;
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
|
2022-09-14 12:11:42 +00:00
|
|
|
::v-deep a.widget-default {
|
|
|
|
text-decoration: none !important;
|
|
|
|
}
|
|
|
|
|
2022-06-20 12:31:44 +00:00
|
|
|
&:hover {
|
|
|
|
border-radius: 8px;
|
|
|
|
background-color: var(--color-background-hover);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-05-28 11:03:14 +00:00
|
|
|
.post-author {
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
.post-author-id {
|
|
|
|
opacity: .7;
|
|
|
|
}
|
|
|
|
|
|
|
|
.post-timestamp {
|
|
|
|
width: 120px;
|
|
|
|
text-align: right;
|
|
|
|
flex-shrink: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.post-actions {
|
|
|
|
margin-left: -13px;
|
|
|
|
height: 44px;
|
2022-06-20 12:31:44 +00:00
|
|
|
display: flex;
|
2019-05-28 11:03:14 +00:00
|
|
|
|
|
|
|
.post-actions-more {
|
|
|
|
position: relative;
|
|
|
|
width: 44px;
|
|
|
|
height: 34px;
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
.icon-reply,
|
|
|
|
.icon-boost,
|
|
|
|
.icon-boosted,
|
2019-07-10 15:39:49 +00:00
|
|
|
.icon-starred,
|
|
|
|
.icon-favorite,
|
2019-05-28 11:03:14 +00:00
|
|
|
.icon-more {
|
|
|
|
display: inline-block;
|
|
|
|
width: 44px;
|
|
|
|
height: 34px;
|
|
|
|
opacity: .5;
|
|
|
|
&:hover, &:focus {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.icon-boosted {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
span {
|
|
|
|
/* opacity: 0.5; */
|
|
|
|
}
|
|
|
|
.entry-content {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
2019-08-19 13:46:36 +00:00
|
|
|
.post-header {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
|
2019-05-28 11:03:14 +00:00
|
|
|
.post-timestamp {
|
|
|
|
opacity: .7;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<style>
|
|
|
|
.post-message a {
|
|
|
|
text-decoration: underline;
|
2019-11-08 13:38:09 +00:00
|
|
|
overflow-wrap: anywhere;
|
2019-05-28 11:03:14 +00:00
|
|
|
}
|
|
|
|
</style>
|