diff --git a/resources/assets/js/components/PostComponent.vue b/resources/assets/js/components/PostComponent.vue index 92dff4c87..0816fc09b 100644 --- a/resources/assets/js/components/PostComponent.vue +++ b/resources/assets/js/components/PostComponent.vue @@ -1,8 +1,12 @@ @@ -272,9 +344,14 @@ export default { status: {}, media: {}, user: {}, - reactions: {} + reactions: {}, + likes: {}, + likesPage: 1, + shares: {}, + sharesPage: 1, } }, + mounted() { let token = $('meta[name="csrf-token"]').attr('content'); $('input[name="_token"]').each(function(k, v) { @@ -282,11 +359,12 @@ export default { el.val(token); }); this.fetchData(); - //pixelfed.hydrateLikes(); this.authCheck(); }, + updated() { $('.carousel').carousel(); + if(this.reactions) { if(this.reactions.bookmarked == true) { $('.far.fa-bookmark').removeClass('far').addClass('fas text-warning'); @@ -298,6 +376,11 @@ export default { $('.far.fa-heart ').removeClass('far text-dark').addClass('fas text-danger'); } } + + if(this.status) { + let title = this.status.account.username + ' posted a photo: ' + this.status.favourites_count + ' likes'; + $('head title').text(title); + } }, methods: { authCheck() { @@ -314,24 +397,36 @@ export default { $('.post-actions').removeClass('d-none'); } }, + reportUrl() { return '/i/report?type=post&id=' + this.status.id; }, + timestampFormat() { let ts = new Date(this.status.created_at); return ts.toDateString() + ' ' + ts.toLocaleTimeString(); }, + fetchData() { - let url = '/api/v2/profile/'+this.statusUsername+'/status/'+this.statusId; - axios.get(url) + let loader = this.$loading.show({ + 'opacity': 0, + 'background-color': '#f5f8fa' + }); + axios.get('/api/v2/profile/'+this.statusUsername+'/status/'+this.statusId) .then(response => { let self = this; self.status = response.data.status; self.user = response.data.user; self.media = self.status.media_attachments; self.reactions = response.data.reactions; + self.likes = response.data.likes; + self.shares = response.data.shares; + self.likesPage = 2; + self.sharesPage = 2; this.buildPresenter(); this.showMuteBlock(); + loader.hide(); + $('.postComponent').removeClass('d-none'); }).catch(error => { if(!error.response) { $('.postPresenterLoader .lds-ring').attr('style','width:100%').addClass('pt-4 font-weight-bold text-muted').text('An error occured, cannot fetch media. Please try again later.'); @@ -351,9 +446,58 @@ export default { } }); }, + commentFocus() { $('.comment-form input[name="comment"]').focus(); }, + + likesModal() { + if(this.status.favourites_count == 0 || $('body').hasClass('loggedIn') == false) { + return; + } + this.$refs.likesModal.show(); + }, + + sharesModal() { + if(this.status.reblogs_count == 0 || $('body').hasClass('loggedIn') == false) { + return; + } + this.$refs.sharesModal.show(); + }, + + infiniteLikesHandler($state) { + let api = '/api/v2/likes/profile/'+this.statusUsername+'/status/'+this.statusId; + axios.get(api, { + params: { + page: this.likesPage, + }, + }).then(({ data }) => { + if (data.data.length) { + this.likesPage += 1; + this.likes.push(...data.data); + $state.loaded(); + } else { + $state.complete(); + } + }); + }, + + infiniteSharesHandler($state) { + axios.get('/api/v2/shares/profile/'+this.statusUsername+'/status/'+this.statusId, { + params: { + page: this.sharesPage, + }, + }).then(({ data }) => { + if (data.data.length) { + this.sharesPage += 1; + this.shares.push(...data.data); + $state.loaded(); + } else { + $state.complete(); + } + }); + }, + buildPresenter() { let container = $('.postPresenterContainer'); let status = this.status; @@ -364,8 +508,6 @@ export default { el.val(status.account.id); }); - $('.status-comment .comment-text').html(status.content); - if(container.children().length != 0) { return; }