Update Timeline component, improve reblog support

This commit is contained in:
Daniel Supernault 2023-07-30 06:01:12 -06:00
parent ec2a1ed99c
commit 29de91e5d0
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
2 changed files with 179 additions and 64 deletions

View file

@ -3,18 +3,20 @@
<div class="card shadow-sm" style="border-radius: 15px;"> <div class="card shadow-sm" style="border-radius: 15px;">
<post-header <post-header
:profile="profile" :profile="profile"
:status="status" :status="shadowStatus"
:is-reblog="isReblog"
:reblog-account="reblogAccount"
@menu="openMenu" @menu="openMenu"
@follow="follow" @follow="follow"
@unfollow="unfollow" /> @unfollow="unfollow" />
<post-content <post-content
:profile="profile" :profile="profile"
:status="status" /> :status="shadowStatus" />
<post-reactions <post-reactions
v-if="reactionBar" v-if="reactionBar"
:status="status" :status="shadowStatus"
:profile="profile" :profile="profile"
:admin="admin" :admin="admin"
v-on:like="like" v-on:like="like"
@ -29,7 +31,7 @@
<div v-if="showCommentDrawer" class="card-footer rounded-bottom border-0" style="background: rgba(0,0,0,0.02);z-index: 3;"> <div v-if="showCommentDrawer" class="card-footer rounded-bottom border-0" style="background: rgba(0,0,0,0.02);z-index: 3;">
<comment-drawer <comment-drawer
:status="status" :status="shadowStatus"
:profile="profile" :profile="profile"
v-on:handle-report="handleReport" v-on:handle-report="handleReport"
v-on:counter-change="counterChange" v-on:counter-change="counterChange"
@ -90,14 +92,14 @@
}, },
mounted() { mounted() {
this.license = this.status.media_attachments && this.status.media_attachments.length ? this.license = this.shadowStatus.media_attachments && this.shadowStatus.media_attachments.length ?
this.status this.shadowStatus
.media_attachments .media_attachments
.filter(m => m.hasOwnProperty('license') && m.license && m.license.hasOwnProperty('id')) .filter(m => m.hasOwnProperty('license') && m.license && m.license.hasOwnProperty('id'))
.map(m => m.license)[0] : false; .map(m => m.license)[0] : false;
this.admin = window._sharedData.user.is_admin; this.admin = window._sharedData.user.is_admin;
this.owner = this.status.account.id == window._sharedData.user.id; this.owner = this.shadowStatus.account.id == window._sharedData.user.id;
if(this.status.reply_count && this.autoloadComments && this.status.comments_disabled === false) { if(this.shadowStatus.reply_count && this.autoloadComments && this.shadowStatus.comments_disabled === false) {
setTimeout(() => { setTimeout(() => {
this.showCommentDrawer = true; this.showCommentDrawer = true;
}, 1000); }, 1000);
@ -127,6 +129,24 @@
get() { get() {
return this.$store.state.newReactions; return this.$store.state.newReactions;
}, },
},
isReblog: {
get() {
return this.status.reblog != null;
}
},
reblogAccount: {
get() {
return this.status.reblog ? this.status.account : null;
}
},
shadowStatus: {
get() {
return this.status.reblog ? this.status.reblog : this.status;
}
} }
}, },
@ -137,7 +157,7 @@
handler: function(o, n) { handler: function(o, n) {
this.isBookmarking = false; this.isBookmarking = false;
} }
} },
}, },
methods: { methods: {

View file

@ -361,17 +361,30 @@
likeStatus(index) { likeStatus(index) {
let status = this.feed[index]; let status = this.feed[index];
if(status.reblog) {
status = status.reblog;
let state = status.favourited;
let count = status.favourites_count;
this.feed[index].reblog.favourites_count = count + 1;
this.feed[index].reblog.favourited = !status.favourited;
} else {
let state = status.favourited; let state = status.favourited;
let count = status.favourites_count; let count = status.favourites_count;
this.feed[index].favourites_count = count + 1; this.feed[index].favourites_count = count + 1;
this.feed[index].favourited = !status.favourited; this.feed[index].favourited = !status.favourited;
}
axios.post('/api/v1/statuses/' + status.id + '/favourite') axios.post('/api/v1/statuses/' + status.id + '/favourite')
.then(res => { .then(res => {
// //
}).catch(err => { }).catch(err => {
if(status.reblog) {
this.feed[index].reblog.favourites_count = count;
this.feed[index].reblog.favourited = false;
} else {
this.feed[index].favourites_count = count; this.feed[index].favourites_count = count;
this.feed[index].favourited = false; this.feed[index].favourited = false;
}
let el = document.createElement('p'); let el = document.createElement('p');
el.classList.add('text-left'); el.classList.add('text-left');
@ -413,17 +426,30 @@
unlikeStatus(index) { unlikeStatus(index) {
let status = this.feed[index]; let status = this.feed[index];
if(status.reblog) {
status = status.reblog;
let state = status.favourited;
let count = status.favourites_count;
this.feed[index].reblog.favourites_count = count - 1;
this.feed[index].reblog.favourited = !status.favourited;
} else {
let state = status.favourited; let state = status.favourited;
let count = status.favourites_count; let count = status.favourites_count;
this.feed[index].favourites_count = count - 1; this.feed[index].favourites_count = count - 1;
this.feed[index].favourited = !status.favourited; this.feed[index].favourited = !status.favourited;
}
axios.post('/api/v1/statuses/' + status.id + '/unfavourite') axios.post('/api/v1/statuses/' + status.id + '/unfavourite')
.then(res => { .then(res => {
// //
}).catch(err => { }).catch(err => {
if(status.reblog && status.pf_type == 'share') {
this.feed[index].reblog.favourites_count = count;
this.feed[index].reblog.favourited = false;
} else {
this.feed[index].favourites_count = count; this.feed[index].favourites_count = count;
this.feed[index].favourited = false; this.feed[index].favourited = false;
}
}) })
}, },
@ -445,7 +471,8 @@
openLikesModal(idx) { openLikesModal(idx) {
this.postIndex = idx; this.postIndex = idx;
this.likesModalPost = this.feed[this.postIndex]; let post = this.feed[this.postIndex];
this.likesModalPost = post.reblog ? post.reblog : post;
this.showLikesModal = true; this.showLikesModal = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.likesModal.open(); this.$refs.likesModal.open();
@ -454,7 +481,8 @@
openSharesModal(idx) { openSharesModal(idx) {
this.postIndex = idx; this.postIndex = idx;
this.sharesModalPost = this.feed[this.postIndex]; let post = this.feed[this.postIndex];
this.sharesModalPost = post.reblog ? post.reblog : post;
this.showSharesModal = true; this.showSharesModal = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.sharesModal.open(); this.$refs.sharesModal.open();
@ -492,19 +520,32 @@
}, },
counterChange(index, type) { counterChange(index, type) {
let post = this.feed[index];
switch(type) { switch(type) {
case 'comment-increment': case 'comment-increment':
if(post.reblog != null) {
this.feed[index].reblog.reply_count = this.feed[index].reblog.reply_count + 1;
} else {
this.feed[index].reply_count = this.feed[index].reply_count + 1; this.feed[index].reply_count = this.feed[index].reply_count + 1;
}
break; break;
case 'comment-decrement': case 'comment-decrement':
if(post.reblog != null) {
this.feed[index].reblog.reply_count = this.feed[index].reblog.reply_count - 1;
} else {
this.feed[index].reply_count = this.feed[index].reply_count - 1; this.feed[index].reply_count = this.feed[index].reply_count - 1;
}
break; break;
} }
}, },
openCommentLikesModal(post) { openCommentLikesModal(post) {
if(post.reblog != null) {
this.likesModalPost = post.reblog;
} else {
this.likesModalPost = post; this.likesModalPost = post;
}
this.showLikesModal = true; this.showLikesModal = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.likesModal.open(); this.$refs.likesModal.open();
@ -513,33 +554,59 @@
shareStatus(index) { shareStatus(index) {
let status = this.feed[index]; let status = this.feed[index];
if(status.reblog) {
status = status.reblog;
let state = status.reblogged;
let count = status.reblogs_count;
this.feed[index].reblog.reblogs_count = count + 1;
this.feed[index].reblog.reblogged = !status.reblogged;
} else {
let state = status.reblogged; let state = status.reblogged;
let count = status.reblogs_count; let count = status.reblogs_count;
this.feed[index].reblogs_count = count + 1; this.feed[index].reblogs_count = count + 1;
this.feed[index].reblogged = !status.reblogged; this.feed[index].reblogged = !status.reblogged;
}
axios.post('/api/v1/statuses/' + status.id + '/reblog') axios.post('/api/v1/statuses/' + status.id + '/reblog')
.then(res => { .then(res => {
// //
}).catch(err => { }).catch(err => {
if(status.reblog) {
this.feed[index].reblog.reblogs_count = count;
this.feed[index].reblog.reblogged = false;
} else {
this.feed[index].reblogs_count = count; this.feed[index].reblogs_count = count;
this.feed[index].reblogged = false; this.feed[index].reblogged = false;
}
}) })
}, },
unshareStatus(index) { unshareStatus(index) {
let status = this.feed[index]; let status = this.feed[index];
if(status.reblog) {
status = status.reblog;
let state = status.reblogged;
let count = status.reblogs_count;
this.feed[index].reblog.reblogs_count = count - 1;
this.feed[index].reblog.reblogged = !status.reblogged;
} else {
let state = status.reblogged; let state = status.reblogged;
let count = status.reblogs_count; let count = status.reblogs_count;
this.feed[index].reblogs_count = count - 1; this.feed[index].reblogs_count = count - 1;
this.feed[index].reblogged = !status.reblogged; this.feed[index].reblogged = !status.reblogged;
}
axios.post('/api/v1/statuses/' + status.id + '/unreblog') axios.post('/api/v1/statuses/' + status.id + '/unreblog')
.then(res => { .then(res => {
// //
}).catch(err => { }).catch(err => {
if(status.reblog) {
this.feed[index].reblog.reblogs_count = count;
this.feed[index].reblog.reblogged = false;
} else {
this.feed[index].reblogs_count = count; this.feed[index].reblogs_count = count;
this.feed[index].reblogged = false; this.feed[index].reblogged = false;
}
}) })
}, },
@ -554,11 +621,19 @@
handleBookmark(index) { handleBookmark(index) {
let p = this.feed[index]; let p = this.feed[index];
if(p.reblog) {
p = p.reblog;
}
axios.post('/i/bookmark', { axios.post('/i/bookmark', {
item: p.id item: p.id
}) })
.then(res => { .then(res => {
if(this.feed[index].reblog) {
this.feed[index].reblog.bookmarked = !p.bookmarked;
} else {
this.feed[index].bookmarked = !p.bookmarked; this.feed[index].bookmarked = !p.bookmarked;
}
}) })
.catch(err => { .catch(err => {
// this.feed[index].bookmarked = false; // this.feed[index].bookmarked = false;
@ -571,8 +646,17 @@
}, },
follow(index) { follow(index) {
// this.feed[index].relationship.following = true; if(this.feed[index].reblog) {
axios.post('/api/v1/accounts/' + this.feed[index].reblog.account.id + '/follow')
.then(res => {
this.$store.commit('updateRelationship', [res.data]);
this.updateProfile({ following_count: this.profile.following_count + 1 });
this.feed[index].reblog.account.followers_count = this.feed[index].reblog.account.followers_count + 1;
}).catch(err => {
swal('Oops!', 'An error occured when attempting to follow this account.', 'error');
this.feed[index].reblog.relationship.following = false;
});
} else {
axios.post('/api/v1/accounts/' + this.feed[index].account.id + '/follow') axios.post('/api/v1/accounts/' + this.feed[index].account.id + '/follow')
.then(res => { .then(res => {
this.$store.commit('updateRelationship', [res.data]); this.$store.commit('updateRelationship', [res.data]);
@ -582,11 +666,21 @@
swal('Oops!', 'An error occured when attempting to follow this account.', 'error'); swal('Oops!', 'An error occured when attempting to follow this account.', 'error');
this.feed[index].relationship.following = false; this.feed[index].relationship.following = false;
}); });
}
}, },
unfollow(index) { unfollow(index) {
// this.feed[index].relationship.following = false; if(this.feed[index].reblog) {
axios.post('/api/v1/accounts/' + this.feed[index].reblog.account.id + '/unfollow')
.then(res => {
this.$store.commit('updateRelationship', [res.data]);
this.updateProfile({ following_count: this.profile.following_count - 1 });
this.feed[index].reblog.account.followers_count = this.feed[index].reblog.account.followers_count - 1;
}).catch(err => {
swal('Oops!', 'An error occured when attempting to unfollow this account.', 'error');
this.feed[index].reblog.relationship.following = true;
});
} else {
axios.post('/api/v1/accounts/' + this.feed[index].account.id + '/unfollow') axios.post('/api/v1/accounts/' + this.feed[index].account.id + '/unfollow')
.then(res => { .then(res => {
this.$store.commit('updateRelationship', [res.data]); this.$store.commit('updateRelationship', [res.data]);
@ -596,6 +690,7 @@
swal('Oops!', 'An error occured when attempting to unfollow this account.', 'error'); swal('Oops!', 'An error occured when attempting to unfollow this account.', 'error');
this.feed[index].relationship.following = true; this.feed[index].relationship.following = true;
}); });
}
}, },
updateProfile(delta) { updateProfile(delta) {