Update PostComponent.vue

This commit is contained in:
Daniel Supernault 2024-10-05 23:59:40 -06:00
parent 3c09a6ed2a
commit 1c6abc2f54
No known key found for this signature in database
GPG Key ID: 23740873EE6F76A1
1 changed files with 86 additions and 125 deletions

View File

@ -302,53 +302,6 @@
v-on:likeStatus="likeStatus" />
<comment-feed :status="status" class="mt-3" />
<!-- <div v-if="user.hasOwnProperty('id')" class="card card-body shadow-none border border-top-0 bg-light">
<div class="media">
<img src="/storage/avatars/default.png" class="rounded-circle mr-2" width="40" height="40">
<div class="media-body">
<div class="form-group mb-0" style="position:relative;">
<input class="form-control rounded-pill" placeholder="Add a comment..." style="padding-right: 90px;">
<div class="btn btn-primary btn-sm rounded-pill font-weight-bold px-3" style="position:absolute;top: 5px;right:6px;">Post</div>
</div>
</div>
</div>
</div>
<div v-if="user.hasOwnProperty('id')" v-for="(reply, index) in results" :key="'replies:'+index" class="card card-body shadow-none border border-top-0">
<div class="media">
<img :src="reply.account.avatar" class="rounded-circle border mr-3" width="32px" height="32px">
<div class="media-body">
<div v-if="reply.sensitive == true">
<span class="py-3">
<a class="text-dark font-weight-bold mr-3" style="font-size: 13px;" :href="profileUrl(reply)" v-bind:title="reply.account.username">{{trimCaption(reply.account.username,15)}}</a>
<span class="text-break" style="font-size: 13px;">
<span class="font-italic text-muted">This comment may contain sensitive material</span>
<span class="text-primary cursor-pointer pl-1" @click="reply.sensitive = false;">Show</span>
</span>
</span>
</div>
<div v-else>
<p class="d-flex justify-content-between align-items-top read-more mb-0" style="overflow-y: hidden;">
<span class="mr-3" style="font-size: 13px;">
<a class="text-dark font-weight-bold mr-1 text-break" :href="profileUrl(reply)" v-bind:title="reply.account.username">{{trimCaption(reply.account.username,15)}}</a>
<span class="text-break comment-body" style="word-break: break-all;" v-html="reply.content"></span>
</span>
<span class="text-right" style="min-width: 30px;">
<span v-on:click="likeReply(reply, $event)"><i v-bind:class="[reply.favourited ? 'fas fa-heart fa-sm text-danger':'far fa-heart fa-sm text-lighter']"></i></span>
<span class="pl-2 text-lighter cursor-pointer" @click="ctxMenu(reply)">
<span class="fas fa-ellipsis-v text-lighter"></span>
</span>
</span>
</p>
<p class="mb-0">
<a v-once class="text-muted mr-3 text-decoration-none small" style="width: 20px;" v-text="timeAgo(reply.created_at)" :href="getStatusUrl(reply)"></a>
<span v-if="reply.favourites_count" class="text-muted comment-reaction font-weight-bold mr-3 small">{{reply.favourites_count == 1 ? '1 like' : reply.favourites_count + ' likes'}}</span>
<span class="small text-muted comment-reaction font-weight-bold cursor-pointer" v-on:click="replyFocus(reply, index, true)">Reply</span>
</p>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
@ -660,85 +613,85 @@ export default {
},
data() {
return {
config: window.App.config,
status: false,
media: {},
user: false,
reactions: {
liked: false,
shared: false
},
likes: [],
likesCursor: null,
likesCanLoadMore: true,
likedLoaded: false,
shares: [],
lightboxMedia: false,
replyText: '',
replyStatus: {},
replySensitive: false,
relationship: {},
results: [],
pagination: {},
min_id: 0,
max_id: 0,
reply_to_profile_id: 0,
thread: false,
showComments: false,
warning: false,
loaded: false,
loading: null,
replyingToId: this.statusId,
replyingToUsername: this.statusUsername,
replyToIndex: 0,
replySending: false,
emoji: window.App.util.emoji,
showReadMore: true,
showCaption: true,
ctxEmbedPayload: false,
copiedEmbed: false,
ctxEmbedShowCaption: true,
ctxEmbedShowLikes: false,
ctxEmbedCompactMode: false,
layout: this.profileLayout,
showProfileMorePosts: false,
profileMorePosts: [],
reactionBarLoading: true,
tributeSettings: {
collection: [
{
trigger: '@',
menuShowMinLength: 2,
values: (function (text, cb) {
let url = '/api/compose/v0/search/mention';
axios.get(url, { params: { q: text }})
.then(res => {
cb(res.data);
})
.catch(err => {
console.log(err);
})
return {
config: window.App.config,
status: false,
media: {},
user: false,
reactions: {
liked: false,
shared: false
},
likes: [],
likesCursor: null,
likesCanLoadMore: true,
likedLoaded: false,
shares: [],
lightboxMedia: false,
replyText: '',
replyStatus: {},
replySensitive: false,
relationship: {},
results: [],
pagination: {},
min_id: 0,
max_id: 0,
reply_to_profile_id: 0,
thread: false,
showComments: false,
warning: false,
loaded: false,
loading: null,
replyingToId: this.statusId,
replyingToUsername: this.statusUsername,
replyToIndex: 0,
replySending: false,
emoji: window.App.util.emoji,
showReadMore: true,
showCaption: true,
ctxEmbedPayload: false,
copiedEmbed: false,
ctxEmbedShowCaption: true,
ctxEmbedShowLikes: false,
ctxEmbedCompactMode: false,
layout: this.profileLayout,
showProfileMorePosts: false,
profileMorePosts: [],
reactionBarLoading: true,
tributeSettings: {
collection: [
{
trigger: '@',
menuShowMinLength: 2,
values: (function (text, cb) {
let url = '/api/compose/v0/search/mention';
axios.get(url, { params: { q: text }})
.then(res => {
cb(res.data);
})
},
{
trigger: '#',
menuShowMinLength: 2,
values: (function (text, cb) {
let url = '/api/compose/v0/search/hashtag';
axios.get(url, { params: { q: text }})
.then(res => {
cb(res.data);
})
.catch(err => {
console.log(err);
})
.catch(err => {
console.log(err);
})
}
]
},
content: undefined
}
})
},
{
trigger: '#',
menuShowMinLength: 2,
values: (function (text, cb) {
let url = '/api/compose/v0/search/hashtag';
axios.get(url, { params: { q: text }})
.then(res => {
cb(res.data);
})
.catch(err => {
console.log(err);
})
})
}
]
},
content: undefined
}
},
watch: {
ctxEmbedShowCaption: function (n,o) {
@ -1424,7 +1377,15 @@ export default {
},
previewUrl(status) {
return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url;
if(status.sensitive) {
return '/storage/no-preview.png';
}
if(status.media_attachments[0]?.optimized_url) {
return status.media_attachments[0]?.optimized_url;
}
return status.media_attachments[0].preview_url;
},
previewBackground(status) {