|
@@ -1,443 +1,444 @@
|
|
|
<template>
|
|
|
- <div class="post-timeline-component web-wrapper">
|
|
|
- <div v-if="isLoaded" class="container-fluid mt-3">
|
|
|
- <div class="row">
|
|
|
- <div class="col-md-4 col-lg-3 d-md-block">
|
|
|
- <sidebar :user="user" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="col-md-8 col-lg-6">
|
|
|
- <div v-if="isReply" class="p-3 rounded-top mb-n3" style="background-color: var(--card-header-accent)">
|
|
|
- <p>
|
|
|
- <i class="fal fa-reply mr-1"></i> In reply to
|
|
|
-
|
|
|
- <a
|
|
|
- :href="'/i/web/profile/' + reply.account.id"
|
|
|
- class="font-weight-bold primary"
|
|
|
- @click.prevent="goToProfile(reply.account)">
|
|
|
- @{{ reply.account.acct }}
|
|
|
- </a>
|
|
|
-
|
|
|
- <button
|
|
|
- @click.prevent="goToPost(reply)"
|
|
|
- class="btn btn-primary font-weight-bold btn-sm px-3 float-right rounded-pill">
|
|
|
- View Post
|
|
|
- </button>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <status
|
|
|
- :key="post.id + ':fui:' + forceUpdateIdx"
|
|
|
- :status="post"
|
|
|
- :profile="user"
|
|
|
- v-on:menu="openContextMenu()"
|
|
|
- v-on:like="likeStatus()"
|
|
|
- v-on:unlike="unlikeStatus()"
|
|
|
- v-on:likes-modal="openLikesModal()"
|
|
|
- v-on:shares-modal="openSharesModal()"
|
|
|
- v-on:bookmark="handleBookmark()"
|
|
|
- v-on:share="shareStatus()"
|
|
|
- v-on:unshare="unshareStatus()"
|
|
|
- v-on:follow="follow()"
|
|
|
- v-on:unfollow="unfollow()"
|
|
|
- v-on:counter-change="counterChange"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="d-none d-lg-block col-lg-3">
|
|
|
- <rightbar />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div v-if="postStateError" class="container-fluid mt-3">
|
|
|
- <div class="row">
|
|
|
- <div class="col-md-4 col-lg-3 d-md-block">
|
|
|
- <sidebar :user="user" />
|
|
|
- </div>
|
|
|
- <div class="col-md-8 col-lg-6">
|
|
|
- <div class="card card-body shadow-none border">
|
|
|
- <div class="d-flex align-self-center flex-column" style="max-width: 500px;">
|
|
|
- <p class="text-center">
|
|
|
- <i class="far fa-exclamation-triangle fa-3x text-lighter"></i>
|
|
|
- </p>
|
|
|
- <p class="text-center lead font-weight-bold">Error displaying post</p>
|
|
|
- <p class="mb-0">This can happen for a few reasons:</p>
|
|
|
- <ul class="text-lighter">
|
|
|
- <li>The url is invalid or has a typo</li>
|
|
|
- <li>The page has been flagged for review by our automated abuse detection systems</li>
|
|
|
- <li>The content may have been deleted</li>
|
|
|
- <li>You do not have permission to view this content</li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="d-none d-lg-block col-lg-3">
|
|
|
- <rightbar />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <context-menu
|
|
|
- v-if="isLoaded"
|
|
|
- ref="contextMenu"
|
|
|
- :status="post"
|
|
|
- :profile="user"
|
|
|
- @report-modal="handleReport()"
|
|
|
- @delete="deletePost()"
|
|
|
- v-on:edit="handleEdit"
|
|
|
- />
|
|
|
-
|
|
|
- <likes-modal
|
|
|
- v-if="showLikesModal"
|
|
|
- ref="likesModal"
|
|
|
- :status="post"
|
|
|
- :profile="user"
|
|
|
- />
|
|
|
-
|
|
|
- <shares-modal
|
|
|
- v-if="showSharesModal"
|
|
|
- ref="sharesModal"
|
|
|
- :status="post"
|
|
|
- :profile="profile"
|
|
|
- />
|
|
|
-
|
|
|
- <report-modal
|
|
|
- v-if="post"
|
|
|
- ref="reportModal"
|
|
|
- :status="post"
|
|
|
- />
|
|
|
-
|
|
|
- <post-edit-modal
|
|
|
- ref="editModal"
|
|
|
- v-on:update="mergeUpdatedPost"
|
|
|
- />
|
|
|
-
|
|
|
- <drawer />
|
|
|
- </div>
|
|
|
+ <div class="post-timeline-component web-wrapper">
|
|
|
+ <div v-if="isLoaded" class="container-fluid mt-3">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-4 col-lg-3 d-md-block">
|
|
|
+ <sidebar :user="user" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-md-8 col-lg-6">
|
|
|
+ <div v-if="isReply" class="p-3 rounded-top mb-n3" style="background-color: var(--card-header-accent)">
|
|
|
+ <p>
|
|
|
+ <i class="fal fa-reply mr-1"></i> In reply to
|
|
|
+
|
|
|
+ <a
|
|
|
+ :href="'/i/web/profile/' + reply.account.id"
|
|
|
+ class="font-weight-bold primary"
|
|
|
+ @click.prevent="goToProfile(reply.account)">
|
|
|
+ @{{ reply.account.acct }}
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <button
|
|
|
+ @click.prevent="goToPost(reply)"
|
|
|
+ class="btn btn-primary font-weight-bold btn-sm px-3 float-right rounded-pill">
|
|
|
+ View Post
|
|
|
+ </button>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <status
|
|
|
+ :key="post.id + ':fui:' + forceUpdateIdx"
|
|
|
+ :status="post"
|
|
|
+ :profile="user"
|
|
|
+ v-on:menu="openContextMenu()"
|
|
|
+ v-on:like="likeStatus()"
|
|
|
+ v-on:unlike="unlikeStatus()"
|
|
|
+ v-on:likes-modal="openLikesModal()"
|
|
|
+ v-on:shares-modal="openSharesModal()"
|
|
|
+ v-on:bookmark="handleBookmark()"
|
|
|
+ v-on:share="shareStatus()"
|
|
|
+ v-on:unshare="unshareStatus()"
|
|
|
+ v-on:follow="follow()"
|
|
|
+ v-on:unfollow="unfollow()"
|
|
|
+ v-on:counter-change="counterChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="d-none d-lg-block col-lg-3">
|
|
|
+ <rightbar />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="postStateError" class="container-fluid mt-3">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-4 col-lg-3 d-md-block">
|
|
|
+ <sidebar :user="user" />
|
|
|
+ </div>
|
|
|
+ <div class="col-md-8 col-lg-6">
|
|
|
+ <div class="card card-body shadow-none border">
|
|
|
+ <div class="d-flex align-self-center flex-column" style="max-width: 500px;">
|
|
|
+ <p class="text-center">
|
|
|
+ <i class="far fa-exclamation-triangle fa-3x text-lighter"></i>
|
|
|
+ </p>
|
|
|
+ <p class="text-center lead font-weight-bold">Error displaying post</p>
|
|
|
+ <p class="mb-0">This can happen for a few reasons:</p>
|
|
|
+ <ul class="text-lighter">
|
|
|
+ <li>The url is invalid or has a typo</li>
|
|
|
+ <li>The page has been flagged for review by our automated abuse detection systems</li>
|
|
|
+ <li>The content may have been deleted</li>
|
|
|
+ <li>You do not have permission to view this content</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="d-none d-lg-block col-lg-3">
|
|
|
+ <rightbar />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <context-menu
|
|
|
+ v-if="isLoaded"
|
|
|
+ ref="contextMenu"
|
|
|
+ :status="post"
|
|
|
+ :profile="user"
|
|
|
+ @report-modal="handleReport()"
|
|
|
+ @delete="deletePost()"
|
|
|
+ v-on:edit="handleEdit"
|
|
|
+ />
|
|
|
+
|
|
|
+ <likes-modal
|
|
|
+ v-if="showLikesModal"
|
|
|
+ ref="likesModal"
|
|
|
+ :status="post"
|
|
|
+ :profile="user"
|
|
|
+ />
|
|
|
+
|
|
|
+ <shares-modal
|
|
|
+ v-if="showSharesModal"
|
|
|
+ ref="sharesModal"
|
|
|
+ :status="post"
|
|
|
+ :profile="profile"
|
|
|
+ />
|
|
|
+
|
|
|
+ <report-modal
|
|
|
+ v-if="post"
|
|
|
+ ref="reportModal"
|
|
|
+ :status="post"
|
|
|
+ />
|
|
|
+
|
|
|
+ <post-edit-modal
|
|
|
+ ref="editModal"
|
|
|
+ v-on:update="mergeUpdatedPost"
|
|
|
+ />
|
|
|
+
|
|
|
+ <drawer />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
- import Drawer from './partials/drawer.vue';
|
|
|
- import Rightbar from './partials/rightbar.vue';
|
|
|
- import Sidebar from './partials/sidebar.vue';
|
|
|
- import Status from './partials/TimelineStatus.vue';
|
|
|
- import ContextMenu from './partials/post/ContextMenu.vue';
|
|
|
- import MediaContainer from './partials/post/MediaContainer.vue';
|
|
|
- import LikesModal from './partials/post/LikeModal.vue';
|
|
|
- import SharesModal from './partials/post/ShareModal.vue';
|
|
|
- import ReportModal from './partials/modal/ReportPost.vue';
|
|
|
- import PostEditModal from './partials/post/PostEditModal.vue';
|
|
|
-
|
|
|
- export default {
|
|
|
- props: {
|
|
|
- cachedStatus: {
|
|
|
- type: Object
|
|
|
- },
|
|
|
-
|
|
|
- cachedProfile: {
|
|
|
- type: Object
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- components: {
|
|
|
- "drawer": Drawer,
|
|
|
- "sidebar": Sidebar,
|
|
|
- "status": Status,
|
|
|
- "context-menu": ContextMenu,
|
|
|
- "media-container": MediaContainer,
|
|
|
- "likes-modal": LikesModal,
|
|
|
- "shares-modal": SharesModal,
|
|
|
- "rightbar": Rightbar,
|
|
|
- "report-modal": ReportModal,
|
|
|
+ import Drawer from './partials/drawer.vue';
|
|
|
+ import Rightbar from './partials/rightbar.vue';
|
|
|
+ import Sidebar from './partials/sidebar.vue';
|
|
|
+ import Status from './partials/TimelineStatus.vue';
|
|
|
+ import ContextMenu from './partials/post/ContextMenu.vue';
|
|
|
+ import MediaContainer from './partials/post/MediaContainer.vue';
|
|
|
+ import LikesModal from './partials/post/LikeModal.vue';
|
|
|
+ import SharesModal from './partials/post/ShareModal.vue';
|
|
|
+ import ReportModal from './partials/modal/ReportPost.vue';
|
|
|
+ import PostEditModal from './partials/post/PostEditModal.vue';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ cachedStatus: {
|
|
|
+ type: Object
|
|
|
+ },
|
|
|
+
|
|
|
+ cachedProfile: {
|
|
|
+ type: Object
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ components: {
|
|
|
+ "drawer": Drawer,
|
|
|
+ "sidebar": Sidebar,
|
|
|
+ "status": Status,
|
|
|
+ "context-menu": ContextMenu,
|
|
|
+ "media-container": MediaContainer,
|
|
|
+ "likes-modal": LikesModal,
|
|
|
+ "shares-modal": SharesModal,
|
|
|
+ "rightbar": Rightbar,
|
|
|
+ "report-modal": ReportModal,
|
|
|
"post-edit-modal": PostEditModal
|
|
|
- },
|
|
|
-
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isLoaded: false,
|
|
|
- user: undefined,
|
|
|
- profile: undefined,
|
|
|
- post: undefined,
|
|
|
- relationship: {},
|
|
|
- media: undefined,
|
|
|
- mediaIndex: 0,
|
|
|
- showLikesModal: false,
|
|
|
- isReply: false,
|
|
|
- reply: {},
|
|
|
- showSharesModal: false,
|
|
|
- postStateError: false,
|
|
|
- forceUpdateIdx: 0
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- created() {
|
|
|
- this.init();
|
|
|
- },
|
|
|
-
|
|
|
- watch: {
|
|
|
- '$route': 'init'
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- this.fetchSelf();
|
|
|
- },
|
|
|
-
|
|
|
- fetchSelf() {
|
|
|
- this.user = window._sharedData.user;
|
|
|
- this.fetchPost();
|
|
|
- },
|
|
|
-
|
|
|
- fetchPost() {
|
|
|
- axios.get('/api/pixelfed/v1/statuses/'+this.$route.params.id)
|
|
|
- .then(res => {
|
|
|
- if(!res.data || !res.data.hasOwnProperty('id')) {
|
|
|
- this.$router.push('/i/web/404');
|
|
|
- }
|
|
|
- if(!res.data.hasOwnProperty('account') || !res.data.account) {
|
|
|
- this.postStateError = true;
|
|
|
- return;
|
|
|
- }
|
|
|
- this.post = res.data;
|
|
|
- this.media = this.post.media_attachments;
|
|
|
- this.profile = this.post.account;
|
|
|
- if(this.post.in_reply_to_id) {
|
|
|
- this.fetchReply();
|
|
|
- } else {
|
|
|
- this.fetchRelationship();
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- switch(err.response.status) {
|
|
|
- case 403:
|
|
|
- case 404:
|
|
|
- this.$router.push('/i/web/404');
|
|
|
- break;
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- fetchReply() {
|
|
|
- axios.get('/api/pixelfed/v1/statuses/' + this.post.in_reply_to_id)
|
|
|
- .then(res => {
|
|
|
- this.reply = res.data;
|
|
|
- this.isReply = true;
|
|
|
- this.fetchRelationship();
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- this.fetchRelationship();
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- fetchRelationship() {
|
|
|
- if(this.profile.id == this.user.id) {
|
|
|
- this.relationship = {};
|
|
|
- this.fetchState();
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- axios.get('/api/pixelfed/v1/accounts/relationships', {
|
|
|
- params: {
|
|
|
- 'id[]': this.profile.id
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- this.relationship = res.data[0];
|
|
|
- this.fetchState();
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- fetchState() {
|
|
|
- axios.get('/api/v2/statuses/'+this.post.id+'/state')
|
|
|
- .then(res => {
|
|
|
- this.post.favourited = res.data.liked;
|
|
|
- this.post.reblogged = res.data.shared;
|
|
|
- this.post.bookmarked = res.data.bookmarked;
|
|
|
- if(!this.post.favourites_count && this.post.favourited) {
|
|
|
- this.post.favourites_count = 1;
|
|
|
- }
|
|
|
- this.isLoaded = true;
|
|
|
- }).catch(err => {
|
|
|
- this.isLoaded = false;
|
|
|
- this.postStateError = true;
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- goBack() {
|
|
|
- this.$router.push('/i/web');
|
|
|
- },
|
|
|
-
|
|
|
- likeStatus() {
|
|
|
- let count = this.post.favourites_count;
|
|
|
- this.post.favourites_count = count + 1;
|
|
|
- this.post.favourited = !this.post.favourited;
|
|
|
-
|
|
|
- axios.post('/api/v1/statuses/' + this.post.id + '/favourite')
|
|
|
- .then(res => {
|
|
|
- //
|
|
|
- }).catch(err => {
|
|
|
- this.post.favourites_count = count;
|
|
|
- this.post.favourited = false;
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- unlikeStatus() {
|
|
|
- let count = this.post.favourites_count;
|
|
|
- this.post.favourites_count = count - 1;
|
|
|
- this.post.favourited = !this.post.favourited;
|
|
|
-
|
|
|
- axios.post('/api/v1/statuses/' + this.post.id + '/unfavourite')
|
|
|
- .then(res => {
|
|
|
- //
|
|
|
- }).catch(err => {
|
|
|
- this.post.favourites_count = count;
|
|
|
- this.post.favourited = false;
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- shareStatus() {
|
|
|
- let count = this.post.reblogs_count;
|
|
|
- this.post.reblogs_count = count + 1;
|
|
|
- this.post.reblogged = !this.post.reblogged;
|
|
|
-
|
|
|
- axios.post('/api/v1/statuses/' + this.post.id + '/reblog')
|
|
|
- .then(res => {
|
|
|
- //
|
|
|
- }).catch(err => {
|
|
|
- this.post.reblogs_count = count;
|
|
|
- this.post.reblogged = false;
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- unshareStatus() {
|
|
|
- let count = this.post.reblogs_count;
|
|
|
- this.post.reblogs_count = count - 1;
|
|
|
- this.post.reblogged = !this.post.reblogged;
|
|
|
-
|
|
|
- axios.post('/api/v1/statuses/' + this.post.id + '/unreblog')
|
|
|
- .then(res => {
|
|
|
- //
|
|
|
- }).catch(err => {
|
|
|
- this.post.reblogs_count = count;
|
|
|
- this.post.reblogged = false;
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- follow() {
|
|
|
- axios.post('/api/v1/accounts/' + this.post.account.id + '/follow')
|
|
|
- .then(res => {
|
|
|
- this.$store.commit('updateRelationship', [res.data]);
|
|
|
- this.user.following_count++;
|
|
|
- this.post.account.followers_count++;
|
|
|
- }).catch(err => {
|
|
|
- swal('Oops!', 'An error occurred when attempting to follow this account.', 'error');
|
|
|
- this.post.relationship.following = false;
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- unfollow() {
|
|
|
- axios.post('/api/v1/accounts/' + this.post.account.id + '/unfollow')
|
|
|
- .then(res => {
|
|
|
- this.$store.commit('updateRelationship', [res.data]);
|
|
|
- this.user.following_count--;
|
|
|
- this.post.account.followers_count--;
|
|
|
- }).catch(err => {
|
|
|
- swal('Oops!', 'An error occurred when attempting to unfollow this account.', 'error');
|
|
|
- this.post.relationship.following = true;
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- openContextMenu() {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.contextMenu.open();
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- openLikesModal() {
|
|
|
- this.showLikesModal = true;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.likesModal.open();
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- openSharesModal() {
|
|
|
- this.showSharesModal = true;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.sharesModal.open();
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- deletePost() {
|
|
|
- this.$router.push('/i/web');
|
|
|
- },
|
|
|
-
|
|
|
- goToPost(post) {
|
|
|
- this.$router.push({
|
|
|
- name: 'post',
|
|
|
- path: `/i/web/post/${post.id}`,
|
|
|
- params: {
|
|
|
- id: post.id,
|
|
|
- cachedStatus: post,
|
|
|
- cachedProfile: this.user
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- goToProfile(account) {
|
|
|
- this.$router.push({
|
|
|
- name: 'profile',
|
|
|
- path: `/i/web/profile/${account.id}`,
|
|
|
- params: {
|
|
|
- id: account.id,
|
|
|
- cachedProfile: account,
|
|
|
- cachedUser: this.user
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- handleBookmark() {
|
|
|
- axios.post('/i/bookmark', {
|
|
|
- item: this.post.id
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- this.post.bookmarked = !this.post.bookmarked;
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- this.$bvToast.toast('Cannot bookmark post at this time.', {
|
|
|
- title: 'Bookmark Error',
|
|
|
- variant: 'danger',
|
|
|
- autoHideDelay: 5000
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- handleReport() {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.reportModal.open();
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- counterChange(type) {
|
|
|
- switch(type) {
|
|
|
- case 'comment-increment':
|
|
|
- this.post.reply_count = this.post.reply_count + 1;
|
|
|
- break;
|
|
|
-
|
|
|
- case 'comment-decrement':
|
|
|
- this.post.reply_count = this.post.reply_count - 1;
|
|
|
- break;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- handleEdit(status) {
|
|
|
- this.$refs.editModal.show(status);
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isLoaded: false,
|
|
|
+ user: undefined,
|
|
|
+ profile: undefined,
|
|
|
+ post: undefined,
|
|
|
+ relationship: {},
|
|
|
+ media: undefined,
|
|
|
+ mediaIndex: 0,
|
|
|
+ showLikesModal: false,
|
|
|
+ isReply: false,
|
|
|
+ reply: {},
|
|
|
+ showSharesModal: false,
|
|
|
+ postStateError: false,
|
|
|
+ forceUpdateIdx: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ '$route': 'init'
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this.fetchSelf();
|
|
|
+ },
|
|
|
+
|
|
|
+ fetchSelf() {
|
|
|
+ this.user = window._sharedData.user;
|
|
|
+ this.isReply = false;
|
|
|
+ this.fetchPost();
|
|
|
+ },
|
|
|
+
|
|
|
+ fetchPost() {
|
|
|
+ axios.get('/api/pixelfed/v1/statuses/'+this.$route.params.id)
|
|
|
+ .then(res => {
|
|
|
+ if(!res.data || !res.data.hasOwnProperty('id')) {
|
|
|
+ this.$router.push('/i/web/404');
|
|
|
+ }
|
|
|
+ if(!res.data.hasOwnProperty('account') || !res.data.account) {
|
|
|
+ this.postStateError = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.post = res.data;
|
|
|
+ this.media = this.post.media_attachments;
|
|
|
+ this.profile = this.post.account;
|
|
|
+ if(this.post.in_reply_to_id) {
|
|
|
+ this.fetchReply();
|
|
|
+ } else {
|
|
|
+ this.fetchRelationship();
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ switch(err.response.status) {
|
|
|
+ case 403:
|
|
|
+ case 404:
|
|
|
+ this.$router.push('/i/web/404');
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ fetchReply() {
|
|
|
+ axios.get('/api/pixelfed/v1/statuses/' + this.post.in_reply_to_id)
|
|
|
+ .then(res => {
|
|
|
+ this.reply = res.data;
|
|
|
+ this.isReply = true;
|
|
|
+ this.fetchRelationship();
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.fetchRelationship();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ fetchRelationship() {
|
|
|
+ if(this.profile.id == this.user.id) {
|
|
|
+ this.relationship = {};
|
|
|
+ this.fetchState();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ axios.get('/api/pixelfed/v1/accounts/relationships', {
|
|
|
+ params: {
|
|
|
+ 'id[]': this.profile.id
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ this.relationship = res.data[0];
|
|
|
+ this.fetchState();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ fetchState() {
|
|
|
+ axios.get('/api/v2/statuses/'+this.post.id+'/state')
|
|
|
+ .then(res => {
|
|
|
+ this.post.favourited = res.data.liked;
|
|
|
+ this.post.reblogged = res.data.shared;
|
|
|
+ this.post.bookmarked = res.data.bookmarked;
|
|
|
+ if(!this.post.favourites_count && this.post.favourited) {
|
|
|
+ this.post.favourites_count = 1;
|
|
|
+ }
|
|
|
+ this.isLoaded = true;
|
|
|
+ }).catch(err => {
|
|
|
+ this.isLoaded = false;
|
|
|
+ this.postStateError = true;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ goBack() {
|
|
|
+ this.$router.push('/i/web');
|
|
|
+ },
|
|
|
+
|
|
|
+ likeStatus() {
|
|
|
+ let count = this.post.favourites_count;
|
|
|
+ this.post.favourites_count = count + 1;
|
|
|
+ this.post.favourited = !this.post.favourited;
|
|
|
+
|
|
|
+ axios.post('/api/v1/statuses/' + this.post.id + '/favourite')
|
|
|
+ .then(res => {
|
|
|
+ //
|
|
|
+ }).catch(err => {
|
|
|
+ this.post.favourites_count = count;
|
|
|
+ this.post.favourited = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ unlikeStatus() {
|
|
|
+ let count = this.post.favourites_count;
|
|
|
+ this.post.favourites_count = count - 1;
|
|
|
+ this.post.favourited = !this.post.favourited;
|
|
|
+
|
|
|
+ axios.post('/api/v1/statuses/' + this.post.id + '/unfavourite')
|
|
|
+ .then(res => {
|
|
|
+ //
|
|
|
+ }).catch(err => {
|
|
|
+ this.post.favourites_count = count;
|
|
|
+ this.post.favourited = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ shareStatus() {
|
|
|
+ let count = this.post.reblogs_count;
|
|
|
+ this.post.reblogs_count = count + 1;
|
|
|
+ this.post.reblogged = !this.post.reblogged;
|
|
|
+
|
|
|
+ axios.post('/api/v1/statuses/' + this.post.id + '/reblog')
|
|
|
+ .then(res => {
|
|
|
+ //
|
|
|
+ }).catch(err => {
|
|
|
+ this.post.reblogs_count = count;
|
|
|
+ this.post.reblogged = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ unshareStatus() {
|
|
|
+ let count = this.post.reblogs_count;
|
|
|
+ this.post.reblogs_count = count - 1;
|
|
|
+ this.post.reblogged = !this.post.reblogged;
|
|
|
+
|
|
|
+ axios.post('/api/v1/statuses/' + this.post.id + '/unreblog')
|
|
|
+ .then(res => {
|
|
|
+ //
|
|
|
+ }).catch(err => {
|
|
|
+ this.post.reblogs_count = count;
|
|
|
+ this.post.reblogged = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ follow() {
|
|
|
+ axios.post('/api/v1/accounts/' + this.post.account.id + '/follow')
|
|
|
+ .then(res => {
|
|
|
+ this.$store.commit('updateRelationship', [res.data]);
|
|
|
+ this.user.following_count++;
|
|
|
+ this.post.account.followers_count++;
|
|
|
+ }).catch(err => {
|
|
|
+ swal('Oops!', 'An error occurred when attempting to follow this account.', 'error');
|
|
|
+ this.post.relationship.following = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ unfollow() {
|
|
|
+ axios.post('/api/v1/accounts/' + this.post.account.id + '/unfollow')
|
|
|
+ .then(res => {
|
|
|
+ this.$store.commit('updateRelationship', [res.data]);
|
|
|
+ this.user.following_count--;
|
|
|
+ this.post.account.followers_count--;
|
|
|
+ }).catch(err => {
|
|
|
+ swal('Oops!', 'An error occurred when attempting to unfollow this account.', 'error');
|
|
|
+ this.post.relationship.following = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ openContextMenu() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.contextMenu.open();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ openLikesModal() {
|
|
|
+ this.showLikesModal = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.likesModal.open();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ openSharesModal() {
|
|
|
+ this.showSharesModal = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.sharesModal.open();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ deletePost() {
|
|
|
+ this.$router.push('/i/web');
|
|
|
+ },
|
|
|
+
|
|
|
+ goToPost(post) {
|
|
|
+ this.$router.push({
|
|
|
+ name: 'post',
|
|
|
+ path: `/i/web/post/${post.id}`,
|
|
|
+ params: {
|
|
|
+ id: post.id,
|
|
|
+ cachedStatus: post,
|
|
|
+ cachedProfile: this.user
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ goToProfile(account) {
|
|
|
+ this.$router.push({
|
|
|
+ name: 'profile',
|
|
|
+ path: `/i/web/profile/${account.id}`,
|
|
|
+ params: {
|
|
|
+ id: account.id,
|
|
|
+ cachedProfile: account,
|
|
|
+ cachedUser: this.user
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ handleBookmark() {
|
|
|
+ axios.post('/i/bookmark', {
|
|
|
+ item: this.post.id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.post.bookmarked = !this.post.bookmarked;
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.$bvToast.toast('Cannot bookmark post at this time.', {
|
|
|
+ title: 'Bookmark Error',
|
|
|
+ variant: 'danger',
|
|
|
+ autoHideDelay: 5000
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ handleReport() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.reportModal.open();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ counterChange(type) {
|
|
|
+ switch(type) {
|
|
|
+ case 'comment-increment':
|
|
|
+ this.post.reply_count = this.post.reply_count + 1;
|
|
|
+ break;
|
|
|
+
|
|
|
+ case 'comment-decrement':
|
|
|
+ this.post.reply_count = this.post.reply_count - 1;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleEdit(status) {
|
|
|
+ this.$refs.editModal.show(status);
|
|
|
},
|
|
|
|
|
|
mergeUpdatedPost(post) {
|
|
|
- this.post = post;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.forceUpdateIdx++;
|
|
|
- });
|
|
|
+ this.post = post;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.forceUpdateIdx++;
|
|
|
+ });
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|