PostComponent.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684
  1. <style>
  2. #l-modal .modal-body,
  3. #s-modal .modal-body {
  4. max-height: 70vh;
  5. overflow-y: scroll;
  6. }
  7. .postPresenterContainer {
  8. background: #000;
  9. }
  10. .status-comments,
  11. .reactions,
  12. .col-md-4 {
  13. background: #fff;
  14. }
  15. .postPresenterContainer {
  16. min-height: 600px;
  17. }
  18. </style>
  19. <template>
  20. <div class="postComponent d-none">
  21. <div class="container px-0 mt-md-4">
  22. <div class="card card-md-rounded-0 status-container orientation-unknown">
  23. <div class="row px-0 mx-0">
  24. <div class="d-flex d-md-none align-items-center justify-content-between card-header bg-white w-100">
  25. <a :href="statusProfileUrl" class="d-flex align-items-center status-username text-truncate" data-toggle="tooltip" data-placement="bottom" :title="statusUsername">
  26. <div class="status-avatar mr-2">
  27. <img :src="statusAvatar" width="24px" height="24px" style="border-radius:12px;">
  28. </div>
  29. <div class="username">
  30. <span class="username-link font-weight-bold text-dark">{{ statusUsername }}</span>
  31. </div>
  32. </a>
  33. <div class="float-right">
  34. <div class="post-actions">
  35. <div class="dropdown">
  36. <button class="btn btn-link text-dark no-caret dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Post options">
  37. <span class="fas fa-ellipsis-v text-muted"></span>
  38. </button>
  39. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
  40. <span class="menu-user d-none">
  41. <a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a>
  42. <a class="dropdown-item font-weight-bold" v-on:click="muteProfile">Mute Profile</a>
  43. <a class="dropdown-item font-weight-bold" v-on:click="blockProfile">Block Profile</a>
  44. </span>
  45. <span class="menu-author d-none">
  46. <a class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a>
  47. <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost">Delete</a>
  48. </span>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="col-12 col-md-8 status-photo px-0 mx-0">
  55. <div class="postPresenterLoader text-center">
  56. <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
  57. </div>
  58. <div class="postPresenterContainer d-none">
  59. </div>
  60. </div>
  61. <div class="col-12 col-md-4 px-0 d-flex flex-column border-left border-md-left-0">
  62. <div class="d-md-flex d-none align-items-center justify-content-between card-header py-3 bg-white">
  63. <a :href="statusProfileUrl" class="d-flex align-items-center status-username text-truncate" data-toggle="tooltip" data-placement="bottom" :title="statusUsername">
  64. <div class="status-avatar mr-2">
  65. <img :src="statusAvatar" width="24px" height="24px" style="border-radius:12px;">
  66. </div>
  67. <div class="username">
  68. <span class="username-link font-weight-bold text-dark">{{ statusUsername }}</span>
  69. </div>
  70. </a>
  71. <div class="float-right">
  72. <div class="post-actions">
  73. <div class="dropdown">
  74. <button class="btn btn-link text-dark no-caret dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Post options">
  75. <span class="fas fa-ellipsis-v text-muted"></span>
  76. </button>
  77. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
  78. <span class="menu-user d-none">
  79. <a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a>
  80. <a class="dropdown-item font-weight-bold" v-on:click="muteProfile">Mute Profile</a>
  81. <a class="dropdown-item font-weight-bold" v-on:click="blockProfile">Block Profile</a>
  82. </span>
  83. <span class="menu-author d-none">
  84. <a class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a>
  85. <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost">Delete</a>
  86. </span>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. <div class="d-flex flex-md-column flex-column-reverse h-100">
  93. <div class="card-body status-comments">
  94. <div class="status-comment">
  95. <p class="mb-1 read-more" style="overflow: hidden;">
  96. <span class="font-weight-bold pr-1">{{statusUsername}}</span>
  97. <span class="comment-text" :id="status.id + '-status-readmore'" v-html="status.content"></span>
  98. </p>
  99. <post-comments :user="this.user" :post-id="statusId" :post-username="statusUsername"></post-comments>
  100. </div>
  101. </div>
  102. <div class="card-body flex-grow-0 py-1">
  103. <div class="reactions my-1">
  104. <h3 v-bind:class="[reactions.liked ? 'fas fa-heart text-danger pr-3 m-0' : 'far fa-heart pr-3 m-0 like-btn']" title="Like" v-on:click="likeStatus"></h3>
  105. <h3 class="far fa-comment pr-3 m-0" title="Comment" v-on:click="commentFocus"></h3>
  106. <h3 v-bind:class="[reactions.shared ? 'far fa-share-square pr-3 m-0 text-primary' : 'far fa-share-square pr-3 m-0 share-btn']" title="Share" v-on:click="shareStatus"></h3>
  107. <h3 v-bind:class="[reactions.bookmarked ? 'fas fa-bookmark text-warning m-0 float-right' : 'far fa-bookmark m-0 float-right']" title="Bookmark" v-on:click="bookmarkStatus"></h3>
  108. </div>
  109. <div class="reaction-counts font-weight-bold mb-0">
  110. <span style="cursor:pointer;" v-on:click="likesModal">
  111. <span class="like-count">{{status.favourites_count || 0}}</span> likes
  112. </span>
  113. <span class="float-right" style="cursor:pointer;" v-on:click="sharesModal">
  114. <span class="share-count pl-4">{{status.reblogs_count || 0}}</span> shares
  115. </span>
  116. </div>
  117. <div class="timestamp">
  118. <a v-bind:href="statusUrl" class="small text-muted">
  119. {{timestampFormat()}}
  120. </a>
  121. </div>
  122. </div>
  123. </div>
  124. <div class="card-footer bg-white sticky-md-bottom">
  125. <div class="comment-form-guest">
  126. <a href="/login">Login</a> to like or comment.
  127. </div>
  128. <form class="comment-form d-none" method="post" action="/i/comment" :data-id="statusId" data-truncate="false">
  129. <input type="hidden" name="_token" value="">
  130. <input type="hidden" name="item" :value="statusId">
  131. <input class="form-control" name="comment" placeholder="Add a comment..." autocomplete="off">
  132. </form>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. </div>
  138. <b-modal ref="likesModal"
  139. id="l-modal"
  140. hide-footer
  141. centered
  142. title="Likes"
  143. body-class="list-group-flush p-0">
  144. <div class="list-group">
  145. <div class="list-group-item border-0" v-for="user in likes">
  146. <div class="media">
  147. <a :href="user.url">
  148. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '\'s avatar'" width="30px">
  149. </a>
  150. <div class="media-body">
  151. <p class="mb-0" style="font-size: 14px">
  152. <a :href="user.url" class="font-weight-bold text-dark">
  153. {{user.username}}
  154. </a>
  155. </p>
  156. <p class="text-muted mb-0" style="font-size: 14px">
  157. {{user.display_name}}
  158. </a>
  159. </p>
  160. </div>
  161. </div>
  162. </div>
  163. <infinite-loading @infinite="infiniteLikesHandler" spinner="spiral">
  164. <div slot="no-more"></div>
  165. <div slot="no-results"></div>
  166. </infinite-loading>
  167. </div>
  168. </b-modal>
  169. <b-modal ref="sharesModal"
  170. id="s-modal"
  171. hide-footer
  172. centered
  173. title="Shares"
  174. body-class="list-group-flush p-0">
  175. <div class="list-group">
  176. <div class="list-group-item border-0" v-for="user in shares">
  177. <div class="media">
  178. <a :href="user.url">
  179. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '\'s avatar'" width="30px">
  180. </a>
  181. <div class="media-body">
  182. <p class="mb-0" style="font-size: 14px">
  183. <a :href="user.url" class="font-weight-bold text-dark">
  184. {{user.username}}
  185. </a>
  186. </p>
  187. <p class="text-muted mb-0" style="font-size: 14px">
  188. {{user.display_name}}
  189. </a>
  190. </p>
  191. </div>
  192. </div>
  193. </div>
  194. <infinite-loading @infinite="infiniteSharesHandler" spinner="spiral">
  195. <div slot="no-more"></div>
  196. <div slot="no-results"></div>
  197. </infinite-loading>
  198. </div>
  199. </b-modal>
  200. </div>
  201. </template>
  202. <script>
  203. pixelfed.postComponent = {};
  204. pixelfed.presenter = {
  205. show: {
  206. image: function(container, media, status) {
  207. $('.status-container')
  208. .removeClass('orientation-unknown')
  209. .addClass('orientation-' + media[0]['orientation']);
  210. let wrapper = $('<div>');
  211. container.addClass('d-flex align-items-center');
  212. if(media[0]['filter_class']) {
  213. wrapper.addClass(media[0]['filter_class']);
  214. }
  215. let el = $('<img>');
  216. el.attr('src', media[0]['url']);
  217. el.attr('title', media[0]['description']);
  218. wrapper.append(el);
  219. if(status.sensitive == true) {
  220. let spoilerText = status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media';
  221. let cw = $('<details>').addClass('details-animated w-100');
  222. let summary = $('<summary>');
  223. let text = $('<p>').addClass('mb-0 lead font-weight-bold').text(spoilerText);
  224. let direction = $('<p>').addClass('font-weight-light').text('(click to show)');
  225. summary.append(text, direction);
  226. cw.append(summary, wrapper);
  227. container.append(cw);
  228. } else {
  229. container.append(wrapper);
  230. }
  231. },
  232. video: function(container, media, status) {
  233. let wrapper = $('<div>');
  234. container.addClass('d-flex align-items-center');
  235. let el = $('<video>');
  236. el.addClass('embed-responsive-item');
  237. el.attr('controls', '');
  238. el.attr('loop', '');
  239. el.attr('src', media[0]['url']);
  240. el.attr('title', media[0]['description']);
  241. wrapper.append(el);
  242. if(status.sensitive == true) {
  243. let spoilerText = status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media';
  244. let cw = $('<details>').addClass('details-animated w-100');
  245. let summary = $('<summary>');
  246. let text = $('<p>').addClass('mb-0 lead font-weight-bold').text(spoilerText);
  247. let direction = $('<p>').addClass('font-weight-light').text('(click to show)');
  248. summary.append(text, direction);
  249. cw.append(summary, wrapper);
  250. container.append(cw);
  251. } else {
  252. container.append(wrapper);
  253. }
  254. const player = new Plyr(el, {
  255. controls: [
  256. 'restart', // Restart playback
  257. 'play', // Play/pause playback
  258. 'progress', // The progress bar and scrubber for playback and buffering
  259. 'current-time', // The current time of playback
  260. 'duration', // The full duration of the media
  261. 'volume', // Volume control
  262. 'captions', // Toggle captions
  263. 'settings', // Settings menu
  264. 'fullscreen', // Toggle fullscreen
  265. ]
  266. });
  267. player.volume = 0.75;
  268. },
  269. imageAlbum: function(container, media, status) {
  270. $('.status-container')
  271. .removeClass('orientation-unknown')
  272. .addClass('orientation-' + media[0]['orientation']);
  273. let id = 'photo-carousel-wrapper-' + status.id;
  274. let wrapper = $('<div>');
  275. container.addClass('d-flex align-items-center');
  276. wrapper.addClass('carousel slide carousel-fade');
  277. wrapper.attr('data-ride', 'carousel');
  278. wrapper.attr('id', id);
  279. let indicators = $('<ol>');
  280. indicators.addClass('carousel-indicators');
  281. let prev = $('<a>');
  282. prev.addClass('carousel-control-prev');
  283. prev.attr('href', '#' + id);
  284. prev.attr('role', 'button');
  285. prev.attr('data-slide', 'prev');
  286. let prevIcon = $('<span>').addClass('carousel-control-prev-icon').attr('aria-hidden', 'true');
  287. let prevSr = $('<span>').addClass('sr-only');
  288. prev.append(prevIcon, prevSr);
  289. let next = $('<a>');
  290. next.addClass('carousel-control-next');
  291. next.attr('href', '#' + id);
  292. next.attr('role', 'button');
  293. next.attr('data-slide', 'next');
  294. let nextIcon = $('<span>').addClass('carousel-control-next-icon').attr('aria-hidden', 'true');
  295. let nextSr = $('<span>').addClass('sr-only');
  296. let inner = $('<div>').addClass('carousel-inner');
  297. next.append(nextIcon, nextSr);
  298. for(let i = 0; i < media.length; i++) {
  299. let li = $('<li>');
  300. li.attr('data-target', '#' + id);
  301. li.attr('data-slide-to', i);
  302. if(i == 0) {
  303. li.addClass('active');
  304. }
  305. indicators.append(li);
  306. let item = media[i];
  307. let carouselItem = $('<div>').addClass('carousel-item');
  308. if(i == 0) {
  309. carouselItem.addClass('active');
  310. }
  311. let figure = $('<figure>');
  312. if(item['filter_class']) {
  313. figure.addClass(item['filter_class']);
  314. }
  315. let badge = $('<span>');
  316. badge.addClass('float-right mr-3 badge badge-dark');
  317. badge.style = 'position:fixed;top:8px;right:0;margin-bottom:-20px;';
  318. badge.text(i+1 + '/' + media.length);
  319. let img = $('<img>');
  320. img.addClass('d-block w-100');
  321. img.attr('src', item['url']);
  322. figure.append(badge, img);
  323. carouselItem.append(figure);
  324. inner.append(carouselItem);
  325. }
  326. wrapper.append(indicators, inner, prev, next);
  327. if(status.sensitive == true) {
  328. let spoilerText = status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media';
  329. let cw = $('<details>').addClass('details-animated w-100');
  330. let summary = $('<summary>');
  331. let text = $('<p>').addClass('mb-0 lead font-weight-bold').text(spoilerText);
  332. let direction = $('<p>').addClass('font-weight-light').text('(click to show)');
  333. summary.append(text, direction);
  334. cw.append(summary, wrapper);
  335. container.append(cw);
  336. } else {
  337. container.append(wrapper);
  338. }
  339. }
  340. }
  341. };
  342. export default {
  343. props: ['status-id', 'status-username', 'status-template', 'status-url', 'status-profile-url', 'status-avatar'],
  344. data() {
  345. return {
  346. status: {},
  347. media: {},
  348. user: {},
  349. reactions: {
  350. liked: false,
  351. shared: false
  352. },
  353. likes: {},
  354. likesPage: 1,
  355. shares: {},
  356. sharesPage: 1,
  357. }
  358. },
  359. mounted() {
  360. this.fetchData();
  361. this.authCheck();
  362. let token = $('meta[name="csrf-token"]').attr('content');
  363. $('input[name="_token"]').each(function(k, v) {
  364. let el = $(v);
  365. el.val(token);
  366. });
  367. },
  368. updated() {
  369. $('.carousel').carousel();
  370. if(this.reactions) {
  371. if(this.reactions.bookmarked == true) {
  372. $('.far.fa-bookmark').removeClass('far').addClass('fas text-warning');
  373. }
  374. if(this.reactions.shared == true) {
  375. $('.far.fa-share-square').addClass('text-primary');
  376. }
  377. if(this.reactions.liked == true) {
  378. $('.far.fa-heart ').removeClass('far text-dark').addClass('fas text-danger');
  379. }
  380. }
  381. if(this.status) {
  382. let title = this.status.account.username + ' posted a photo: ' + this.status.favourites_count + ' likes';
  383. $('head title').text(title);
  384. }
  385. },
  386. methods: {
  387. authCheck() {
  388. let authed = $('body').hasClass('loggedIn');
  389. if(authed == true) {
  390. $('.comment-form-guest').addClass('d-none');
  391. $('.comment-form').removeClass('d-none');
  392. }
  393. },
  394. showMuteBlock() {
  395. let sid = this.status.account.id;
  396. let uid = this.user.id;
  397. if(sid == uid) {
  398. $('.post-actions .menu-author').removeClass('d-none');
  399. } else {
  400. $('.post-actions .menu-user').removeClass('d-none');
  401. }
  402. },
  403. reportUrl() {
  404. return '/i/report?type=post&id=' + this.status.id;
  405. },
  406. editUrl() {
  407. return this.status.url + '/edit';
  408. },
  409. timestampFormat() {
  410. let ts = new Date(this.status.created_at);
  411. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  412. },
  413. fetchData() {
  414. let loader = this.$loading.show({
  415. 'opacity': 0,
  416. 'background-color': '#f5f8fa'
  417. });
  418. axios.get('/api/v2/profile/'+this.statusUsername+'/status/'+this.statusId)
  419. .then(response => {
  420. let self = this;
  421. self.status = response.data.status;
  422. self.user = response.data.user;
  423. self.media = self.status.media_attachments;
  424. self.reactions = response.data.reactions;
  425. self.likes = response.data.likes;
  426. self.shares = response.data.shares;
  427. self.likesPage = 2;
  428. self.sharesPage = 2;
  429. this.buildPresenter();
  430. this.showMuteBlock();
  431. loader.hide();
  432. $('.postComponent').removeClass('d-none');
  433. }).catch(error => {
  434. if(!error.response) {
  435. $('.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.');
  436. } else {
  437. switch(error.response.status) {
  438. case 401:
  439. $('.postPresenterLoader .lds-ring')
  440. .attr('style','width:100%')
  441. .addClass('pt-4 font-weight-bold text-muted')
  442. .text('Please login to view.');
  443. break;
  444. default:
  445. $('.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.');
  446. break;
  447. }
  448. }
  449. });
  450. },
  451. commentFocus() {
  452. $('.comment-form input[name="comment"]').focus();
  453. },
  454. likesModal() {
  455. if(this.status.favourites_count == 0 || $('body').hasClass('loggedIn') == false) {
  456. return;
  457. }
  458. this.$refs.likesModal.show();
  459. },
  460. sharesModal() {
  461. if(this.status.reblogs_count == 0 || $('body').hasClass('loggedIn') == false) {
  462. return;
  463. }
  464. this.$refs.sharesModal.show();
  465. },
  466. infiniteLikesHandler($state) {
  467. let api = '/api/v2/likes/profile/'+this.statusUsername+'/status/'+this.statusId;
  468. axios.get(api, {
  469. params: {
  470. page: this.likesPage,
  471. },
  472. }).then(({ data }) => {
  473. if (data.data.length) {
  474. this.likesPage += 1;
  475. this.likes.push(...data.data);
  476. $state.loaded();
  477. } else {
  478. $state.complete();
  479. }
  480. });
  481. },
  482. infiniteSharesHandler($state) {
  483. axios.get('/api/v2/shares/profile/'+this.statusUsername+'/status/'+this.statusId, {
  484. params: {
  485. page: this.sharesPage,
  486. },
  487. }).then(({ data }) => {
  488. if (data.data.length) {
  489. this.sharesPage += 1;
  490. this.shares.push(...data.data);
  491. $state.loaded();
  492. } else {
  493. $state.complete();
  494. }
  495. });
  496. },
  497. buildPresenter() {
  498. let container = $('.postPresenterContainer');
  499. let status = this.status;
  500. let media = this.media;
  501. $('input[name="item"]').each(function(k, v) {
  502. let el = $(v);
  503. el.val(status.account.id);
  504. });
  505. if(container.children().length != 0) {
  506. return;
  507. }
  508. let template = this.status.pf_type ? this.status.pf_type : this.statusTemplate;
  509. switch(template) {
  510. case 'image':
  511. case 'photo':
  512. pixelfed.presenter.show.image(container, media, this.status);
  513. break;
  514. case 'album':
  515. case 'photo:album':
  516. pixelfed.presenter.show.imageAlbum(container, media, this.status);
  517. break;
  518. case 'video':
  519. pixelfed.presenter.show.video(container, media, this.status);
  520. break;
  521. case 'video:album':
  522. case 'photo:video:album':
  523. $('.postPresenterLoader .lds-ring').attr('style','width:100%').addClass('pt-4 font-weight-bold text-muted').text('We cannot load this post properly. We\'re working on a fix!');
  524. return;
  525. break;
  526. default:
  527. $('.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.');
  528. break;
  529. }
  530. if(container.children().length == 0) {
  531. $('.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.');
  532. return;
  533. }
  534. pixelfed.readmore();
  535. $('.postPresenterLoader').addClass('d-none');
  536. $('.postPresenterContainer').removeClass('d-none');
  537. },
  538. likeStatus(event) {
  539. if($('body').hasClass('loggedIn') == false) {
  540. return;
  541. }
  542. axios.post('/i/like', {
  543. item: this.status.id
  544. }).then(res => {
  545. this.status.favourites_count = res.data.count;
  546. if(this.reactions.liked == true) {
  547. this.reactions.liked = false;
  548. } else {
  549. this.reactions.liked = true;
  550. }
  551. }).catch(err => {
  552. swal('Error', 'Something went wrong, please try again later.', 'error');
  553. });
  554. },
  555. shareStatus() {
  556. if($('body').hasClass('loggedIn') == false) {
  557. return;
  558. }
  559. axios.post('/i/share', {
  560. item: this.status.id
  561. }).then(res => {
  562. this.status.reblogs_count = res.data.count;
  563. if(this.reactions.shared == true) {
  564. this.reactions.shared = false;
  565. } else {
  566. this.reactions.shared = true;
  567. }
  568. }).catch(err => {
  569. swal('Error', 'Something went wrong, please try again later.', 'error');
  570. });
  571. },
  572. bookmarkStatus() {
  573. if($('body').hasClass('loggedIn') == false) {
  574. return;
  575. }
  576. axios.post('/i/bookmark', {
  577. item: this.status.id
  578. }).then(res => {
  579. if(this.reactions.bookmarked == true) {
  580. this.reactions.bookmarked = false;
  581. } else {
  582. this.reactions.bookmarked = true;
  583. }
  584. }).catch(err => {
  585. swal('Error', 'Something went wrong, please try again later.', 'error');
  586. });
  587. },
  588. muteProfile() {
  589. if($('body').hasClass('loggedIn') == false) {
  590. return;
  591. }
  592. axios.post('/i/mute', {
  593. type: 'user',
  594. item: this.status.account.id
  595. }).then(res => {
  596. swal('Success', 'You have successfully muted ' + this.status.account.acct, 'success');
  597. }).catch(err => {
  598. swal('Error', 'Something went wrong. Please try again later.', 'error');
  599. });
  600. },
  601. blockProfile() {
  602. if($('body').hasClass('loggedIn') == false) {
  603. return;
  604. }
  605. axios.post('/i/block', {
  606. type: 'user',
  607. item: this.status.account.id
  608. }).then(res => {
  609. swal('Success', 'You have successfully blocked ' + this.status.account.acct, 'success');
  610. }).catch(err => {
  611. swal('Error', 'Something went wrong. Please try again later.', 'error');
  612. });
  613. },
  614. deletePost() {
  615. if($('body').hasClass('loggedIn') == false) {
  616. return;
  617. }
  618. axios.post('/i/delete', {
  619. type: 'status',
  620. item: this.status.id
  621. }).then(res => {
  622. swal('Success', 'You have successfully deleted this post', 'success');
  623. }).catch(err => {
  624. swal('Error', 'Something went wrong. Please try again later.', 'error');
  625. });
  626. }
  627. }
  628. }
  629. </script>