PostComponent.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859
  1. <template>
  2. <div class="postComponent d-none">
  3. <div class="container px-0">
  4. <div class="card card-md-rounded-0 status-container orientation-unknown">
  5. <div class="row px-0 mx-0">
  6. <div class="d-flex d-md-none align-items-center justify-content-between card-header bg-white w-100">
  7. <a :href="statusProfileUrl" class="d-flex align-items-center status-username text-truncate" data-toggle="tooltip" data-placement="bottom" :title="statusUsername">
  8. <div class="status-avatar mr-2">
  9. <img :src="statusAvatar" width="24px" height="24px" style="border-radius:12px;">
  10. </div>
  11. <div class="username">
  12. <span class="username-link font-weight-bold text-dark">{{ statusUsername }}</span>
  13. </div>
  14. </a>
  15. <div v-if="user != false" class="float-right">
  16. <div class="post-actions">
  17. <div class="dropdown">
  18. <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">
  19. <span class="fas fa-ellipsis-v text-muted"></span>
  20. </button>
  21. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
  22. <div v-if="!owner()">
  23. <a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a>
  24. <a class="dropdown-item font-weight-bold" v-on:click="muteProfile()">Mute Profile</a>
  25. <a class="dropdown-item font-weight-bold" v-on:click="blockProfile()">Block Profile</a>
  26. </div>
  27. <div v-if="ownerOrAdmin()">
  28. <a class="dropdown-item font-weight-bold" href="#" v-on:click.prevent="toggleCommentVisibility">{{ showComments ? 'Disable' : 'Enable'}} Comments</a>
  29. <a class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a>
  30. <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost(status)">Delete</a>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="col-12 col-md-8 px-0 mx-0">
  38. <div class="postPresenterLoader text-center">
  39. <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
  40. </div>
  41. <div class="postPresenterContainer d-none d-flex justify-content-center align-items-center">
  42. <div v-if="status.pf_type === 'photo'" class="w-100">
  43. <photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
  44. </div>
  45. <div v-else-if="status.pf_type === 'video'" class="w-100">
  46. <video-presenter :status="status"></video-presenter>
  47. </div>
  48. <div v-else-if="status.pf_type === 'photo:album'" class="w-100">
  49. <photo-album-presenter :status="status" v-on:lightbox="lightbox"></photo-album-presenter>
  50. </div>
  51. <div v-else-if="status.pf_type === 'video:album'" class="w-100">
  52. <video-album-presenter :status="status"></video-album-presenter>
  53. </div>
  54. <div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
  55. <mixed-album-presenter :status="status" v-on:lightbox="lightbox"></mixed-album-presenter>
  56. </div>
  57. <div v-else class="w-100">
  58. <p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="col-12 col-md-4 px-0 d-flex flex-column border-left border-md-left-0">
  63. <div class="d-md-flex d-none align-items-center justify-content-between card-header py-3 bg-white">
  64. <a :href="statusProfileUrl" class="d-flex align-items-center status-username text-truncate" data-toggle="tooltip" data-placement="bottom" :title="statusUsername">
  65. <div class="status-avatar mr-2">
  66. <img :src="statusAvatar" width="24px" height="24px" style="border-radius:12px;">
  67. </div>
  68. <div class="username">
  69. <span class="username-link font-weight-bold text-dark">{{ statusUsername }}</span>
  70. </div>
  71. </a>
  72. <div class="float-right">
  73. <div class="post-actions">
  74. <div v-if="user != false" class="dropdown">
  75. <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">
  76. <span class="fas fa-ellipsis-v text-muted"></span>
  77. </button>
  78. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
  79. <span v-if="!owner()">
  80. <a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a>
  81. <a class="dropdown-item font-weight-bold" v-on:click="muteProfile">Mute Profile</a>
  82. <a class="dropdown-item font-weight-bold" v-on:click="blockProfile">Block Profile</a>
  83. </span>
  84. <span v-if="ownerOrAdmin()">
  85. <a class="dropdown-item font-weight-bold" href="#" v-on:click.prevent="toggleCommentVisibility">{{ showComments ? 'Disable' : 'Enable'}} Comments</a>
  86. <a class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a>
  87. <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost">Delete</a>
  88. </span>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. <div class="d-flex flex-md-column flex-column-reverse h-100">
  95. <div class="card-body status-comments pb-5">
  96. <div class="status-comment">
  97. <p class="mb-1 read-more" style="overflow: hidden;">
  98. <span class="font-weight-bold pr-1">{{statusUsername}}</span>
  99. <span class="comment-text" :id="status.id + '-status-readmore'" v-html="status.content"></span>
  100. </p>
  101. <div v-if="showComments">
  102. <div class="postCommentsLoader text-center">
  103. <div class="spinner-border" role="status">
  104. <span class="sr-only">Loading...</span>
  105. </div>
  106. </div>
  107. <div class="postCommentsContainer d-none pt-3">
  108. <p class="mb-1 text-center load-more-link d-none"><a href="#" class="text-muted" v-on:click="loadMore">Load more comments</a></p>
  109. <div class="comments" data-min-id="0" data-max-id="0">
  110. <div v-for="(reply, index) in results" class="pb-3">
  111. <p class="d-flex justify-content-between align-items-top read-more" style="overflow-y: hidden;">
  112. <span>
  113. <a class="text-dark font-weight-bold mr-1" :href="reply.account.url" v-bind:title="reply.account.username">{{truncate(reply.account.username,15)}}</a>
  114. <span class="text-break" v-html="reply.content"></span>
  115. </span>
  116. <span class="pl-2" style="min-width:38px">
  117. <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>
  118. <post-menu :status="reply" :profile="user" :size="'sm'" :modal="'true'" class="d-inline-block pl-2" v-on:deletePost="deleteComment(reply.id, index)"></post-menu>
  119. </span>
  120. </p>
  121. <p class="">
  122. <span class="text-muted mr-3" style="width: 20px;" v-text="timeAgo(reply.created_at)"></span>
  123. <span v-if="reply.favourites_count" class="text-muted comment-reaction font-weight-bold mr-3">{{reply.favourites_count == 1 ? '1 like' : reply.favourites_count + ' likes'}}</span>
  124. <span class="text-muted comment-reaction font-weight-bold cursor-pointer" v-on:click="replyFocus(reply)">Reply</span>
  125. </p>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. <div class="card-body flex-grow-0 py-1">
  133. <div class="reactions my-1">
  134. <h3 v-bind:class="[reactions.liked ? 'fas fa-heart text-danger pr-3 m-0 cursor-pointer' : 'far fa-heart pr-3 m-0 like-btn cursor-pointer']" title="Like" v-on:click="likeStatus"></h3>
  135. <h3 class="far fa-comment pr-3 m-0 cursor-pointer" title="Comment" v-on:click="replyFocus(status)"></h3>
  136. <h3 v-bind:class="[reactions.shared ? 'far fa-share-square pr-3 m-0 text-primary cursor-pointer' : 'far fa-share-square pr-3 m-0 share-btn cursor-pointer']" title="Share" v-on:click="shareStatus"></h3>
  137. <h3 v-bind:class="[reactions.bookmarked ? 'fas fa-bookmark text-warning m-0 float-right cursor-pointer' : 'far fa-bookmark m-0 float-right cursor-pointer']" title="Bookmark" v-on:click="bookmarkStatus"></h3>
  138. </div>
  139. <div class="reaction-counts font-weight-bold mb-0">
  140. <span style="cursor:pointer;" v-on:click="likesModal">
  141. <span class="like-count">{{status.favourites_count || 0}}</span> likes
  142. </span>
  143. <span class="float-right" style="cursor:pointer;" v-on:click="sharesModal">
  144. <span class="share-count pl-4">{{status.reblogs_count || 0}}</span> shares
  145. </span>
  146. </div>
  147. <div class="timestamp">
  148. <a v-bind:href="statusUrl" class="small text-muted">
  149. {{timestampFormat()}}
  150. </a>
  151. </div>
  152. </div>
  153. </div>
  154. <div v-if="showComments && user.length !== 0" class="card-footer bg-white px-2 py-0">
  155. <ul class="nav align-items-center emoji-reactions" style="overflow-x: scroll;flex-wrap: unset;">
  156. <li class="nav-item" v-on:click="emojiReaction">😂</li>
  157. <li class="nav-item" v-on:click="emojiReaction">💯</li>
  158. <li class="nav-item" v-on:click="emojiReaction">❤️</li>
  159. <li class="nav-item" v-on:click="emojiReaction">🙌</li>
  160. <li class="nav-item" v-on:click="emojiReaction">👏</li>
  161. <li class="nav-item" v-on:click="emojiReaction">😍</li>
  162. <li class="nav-item" v-on:click="emojiReaction">😯</li>
  163. <li class="nav-item" v-on:click="emojiReaction">😢</li>
  164. <li class="nav-item" v-on:click="emojiReaction">😅</li>
  165. <li class="nav-item" v-on:click="emojiReaction">😁</li>
  166. <li class="nav-item" v-on:click="emojiReaction">🙂</li>
  167. <li class="nav-item" v-on:click="emojiReaction">😎</li>
  168. </ul>
  169. </div>
  170. <div v-if="showComments" class="card-footer bg-white sticky-md-bottom p-0">
  171. <div v-if="user.length == 0" class="comment-form-guest p-3">
  172. <a href="/login">Login</a> to like or comment.
  173. </div>
  174. <form v-else class="border-0 rounded-0 align-middle" method="post" action="/i/comment" :data-id="statusId" data-truncate="false">
  175. <textarea class="form-control border-0 rounded-0" name="comment" placeholder="Add a comment…" autocomplete="off" autocorrect="off" style="height:56px;line-height: 18px;max-height:80px;resize: none; padding-right:4.2rem;" v-model="replyText"></textarea>
  176. <input type="button" value="Post" class="d-inline-block btn btn-link font-weight-bold reply-btn text-decoration-none" v-on:click.prevent="postReply"/>
  177. </form>
  178. </div>
  179. </div>
  180. </div>
  181. </div>
  182. </div>
  183. <b-modal ref="likesModal"
  184. id="l-modal"
  185. hide-footer
  186. centered
  187. title="Likes"
  188. body-class="list-group-flush p-0">
  189. <div class="list-group">
  190. <div class="list-group-item border-0" v-for="(user, index) in likes" :key="'modal_likes_'+index">
  191. <div class="media">
  192. <a :href="user.url">
  193. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px">
  194. </a>
  195. <div class="media-body">
  196. <p class="mb-0" style="font-size: 14px">
  197. <a :href="user.url" class="font-weight-bold text-dark">
  198. {{user.username}}
  199. </a>
  200. </p>
  201. <p class="text-muted mb-0" style="font-size: 14px">
  202. {{user.display_name}}
  203. </a>
  204. </p>
  205. </div>
  206. </div>
  207. </div>
  208. <infinite-loading @infinite="infiniteLikesHandler" spinner="spiral">
  209. <div slot="no-more"></div>
  210. <div slot="no-results"></div>
  211. </infinite-loading>
  212. </div>
  213. </b-modal>
  214. <b-modal ref="sharesModal"
  215. id="s-modal"
  216. hide-footer
  217. centered
  218. title="Shares"
  219. body-class="list-group-flush p-0">
  220. <div class="list-group">
  221. <div class="list-group-item border-0" v-for="(user, index) in shares" :key="'modal_shares_'+index">
  222. <div class="media">
  223. <a :href="user.url">
  224. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px">
  225. </a>
  226. <div class="media-body">
  227. <div class="d-inline-block">
  228. <p class="mb-0" style="font-size: 14px">
  229. <a :href="user.url" class="font-weight-bold text-dark">
  230. {{user.username}}
  231. </a>
  232. </p>
  233. <p class="text-muted mb-0" style="font-size: 14px">
  234. {{user.display_name}}
  235. </a>
  236. </p>
  237. </div>
  238. <p class="float-right"><!-- <a class="btn btn-primary font-weight-bold py-1" href="#">Follow</a> --></p>
  239. </div>
  240. </div>
  241. </div>
  242. <infinite-loading @infinite="infiniteSharesHandler" spinner="spiral">
  243. <div slot="no-more"></div>
  244. <div slot="no-results"></div>
  245. </infinite-loading>
  246. </div>
  247. </b-modal>
  248. <b-modal
  249. id="lightbox"
  250. ref="lightboxModal"
  251. :hide-header="true"
  252. :hide-footer="true"
  253. centered
  254. size="lg"
  255. body-class="p-0"
  256. >
  257. <div v-if="lightboxMedia" :class="lightboxMedia.filter_class">
  258. <img :src="lightboxMedia.url" class="img-fluid" style="min-height: 100%; min-width: 100%">
  259. </div>
  260. </b-modal>
  261. </div>
  262. </template>
  263. <style type="text/css" scoped>
  264. .status-comments,
  265. .reactions,
  266. .col-md-4 {
  267. background: #fff;
  268. }
  269. .postPresenterContainer {
  270. background: #fff;
  271. }
  272. @media(min-width: 720px) {
  273. .postPresenterContainer {
  274. min-height: 600px;
  275. }
  276. }
  277. ::-webkit-scrollbar {
  278. width: 0px;
  279. background: transparent;
  280. }
  281. .reply-btn {
  282. position: absolute;
  283. bottom: 12px;
  284. right: 20px;
  285. width: 60px;
  286. text-align: center;
  287. border-radius: 0 3px 3px 0;
  288. }
  289. .text-lighter {
  290. color:#B8C2CC !important;
  291. }
  292. .text-break {
  293. overflow-wrap: break-word;
  294. }
  295. .comments p {
  296. margin-bottom: 0;
  297. }
  298. .comment-reaction {
  299. font-size: 80%;
  300. }
  301. .show-reply-bar {
  302. display: inline-block;
  303. border-bottom: 1px solid #999;
  304. height: 0;
  305. margin-right: 16px;
  306. vertical-align: middle;
  307. width: 24px;
  308. }
  309. .comment-thread {
  310. margin: 4px 0 0 40px;
  311. width: calc(100% - 40px);
  312. }
  313. .emoji-reactions .nav-item {
  314. font-size: 1.2rem;
  315. padding: 7px;
  316. cursor: pointer;
  317. }
  318. .emoji-reactions::-webkit-scrollbar {
  319. width: 0px;
  320. height: 0px;
  321. background: transparent;
  322. }
  323. </style>
  324. <script>
  325. pixelfed.postComponent = {};
  326. export default {
  327. props: ['status-id', 'status-username', 'status-template', 'status-url', 'status-profile-url', 'status-avatar'],
  328. data() {
  329. return {
  330. status: false,
  331. media: {},
  332. user: false,
  333. reactions: {
  334. liked: false,
  335. shared: false
  336. },
  337. likes: [],
  338. likesPage: 1,
  339. shares: [],
  340. sharesPage: 1,
  341. lightboxMedia: false,
  342. replyText: '',
  343. results: [],
  344. pagination: {},
  345. min_id: 0,
  346. max_id: 0,
  347. reply_to_profile_id: 0,
  348. thread: false,
  349. showComments: false
  350. }
  351. },
  352. mounted() {
  353. this.fetchData();
  354. this.authCheck();
  355. let token = $('meta[name="csrf-token"]').attr('content');
  356. $('input[name="_token"]').each(function(k, v) {
  357. let el = $(v);
  358. el.val(token);
  359. });
  360. },
  361. updated() {
  362. $('.carousel').carousel();
  363. pixelfed.readmore();
  364. if(this.reactions) {
  365. if(this.reactions.bookmarked == true) {
  366. $('.postComponent .far.fa-bookmark').removeClass('far').addClass('fas text-warning');
  367. }
  368. if(this.reactions.shared == true) {
  369. $('.postComponent .far.fa-share-square').addClass('text-primary');
  370. }
  371. if(this.reactions.liked == true) {
  372. $('.postComponent .far.fa-heart').removeClass('far text-dark').addClass('fas text-danger');
  373. }
  374. }
  375. },
  376. methods: {
  377. authCheck() {
  378. let authed = $('body').hasClass('loggedIn');
  379. if(authed == true) {
  380. $('.comment-form-guest').addClass('d-none');
  381. $('.comment-form').removeClass('d-none');
  382. }
  383. },
  384. showMuteBlock() {
  385. let sid = this.status.account.id;
  386. let uid = this.user.id;
  387. if(sid == uid) {
  388. $('.post-actions .menu-author').removeClass('d-none');
  389. } else {
  390. $('.post-actions .menu-user').removeClass('d-none');
  391. }
  392. },
  393. reportUrl() {
  394. return '/i/report?type=post&id=' + this.status.id;
  395. },
  396. editUrl() {
  397. return this.status.url + '/edit';
  398. },
  399. timestampFormat() {
  400. let ts = new Date(this.status.created_at);
  401. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  402. },
  403. fetchData() {
  404. let loader = this.$loading.show({
  405. 'opacity': 0,
  406. 'background-color': '#f5f8fa'
  407. });
  408. axios.get('/api/v2/profile/'+this.statusUsername+'/status/'+this.statusId)
  409. .then(response => {
  410. let self = this;
  411. self.status = response.data.status;
  412. self.user = response.data.user;
  413. self.media = self.status.media_attachments;
  414. self.reactions = response.data.reactions;
  415. self.likes = response.data.likes;
  416. self.shares = response.data.shares;
  417. self.likesPage = 2;
  418. self.sharesPage = 2;
  419. //this.buildPresenter();
  420. this.showMuteBlock();
  421. loader.hide();
  422. pixelfed.readmore();
  423. if(self.status.comments_disabled == false) {
  424. self.showComments = true;
  425. this.fetchComments();
  426. }
  427. $('.postComponent').removeClass('d-none');
  428. $('.postPresenterLoader').addClass('d-none');
  429. $('.postPresenterContainer').removeClass('d-none');
  430. $('head title').text(this.status.account.username + ' posted a photo: ' + this.status.favourites_count + ' likes');
  431. }).catch(error => {
  432. if(!error.response) {
  433. $('.postPresenterLoader .lds-ring').attr('style','width:100%').addClass('pt-4 font-weight-bold text-muted').text('An error occurred, cannot fetch media. Please try again later.');
  434. } else {
  435. switch(error.response.status) {
  436. case 401:
  437. $('.postPresenterLoader .lds-ring')
  438. .attr('style','width:100%')
  439. .addClass('pt-4 font-weight-bold text-muted')
  440. .text('Please login to view.');
  441. break;
  442. default:
  443. $('.postPresenterLoader .lds-ring').attr('style','width:100%').addClass('pt-4 font-weight-bold text-muted').text('An error occurred, cannot fetch media. Please try again later.');
  444. break;
  445. }
  446. }
  447. });
  448. },
  449. likesModal() {
  450. if(this.status.favourites_count == 0 || $('body').hasClass('loggedIn') == false) {
  451. return;
  452. }
  453. this.$refs.likesModal.show();
  454. },
  455. sharesModal() {
  456. if(this.status.reblogs_count == 0 || $('body').hasClass('loggedIn') == false) {
  457. return;
  458. }
  459. this.$refs.sharesModal.show();
  460. },
  461. infiniteLikesHandler($state) {
  462. let api = '/api/v2/likes/profile/'+this.statusUsername+'/status/'+this.statusId;
  463. axios.get(api, {
  464. params: {
  465. page: this.likesPage,
  466. },
  467. }).then(({ data }) => {
  468. if (data.data.length > 0) {
  469. this.likes.push(...data.data);
  470. this.likesPage++;
  471. $state.loaded();
  472. } else {
  473. $state.complete();
  474. }
  475. });
  476. },
  477. infiniteSharesHandler($state) {
  478. axios.get('/api/v2/shares/profile/'+this.statusUsername+'/status/'+this.statusId, {
  479. params: {
  480. page: this.sharesPage,
  481. },
  482. }).then(({ data }) => {
  483. if (data.data.length > 0) {
  484. this.shares.push(...data.data);
  485. this.sharesPage++;
  486. $state.loaded();
  487. } else {
  488. $state.complete();
  489. }
  490. });
  491. },
  492. likeStatus(event) {
  493. if($('body').hasClass('loggedIn') == false) {
  494. window.location.href = '/login?next=' + encodeURIComponent(window.location.pathname);
  495. return;
  496. }
  497. axios.post('/i/like', {
  498. item: this.status.id
  499. }).then(res => {
  500. this.status.favourites_count = res.data.count;
  501. if(this.reactions.liked == true) {
  502. this.reactions.liked = false;
  503. let user = this.user.id;
  504. this.likes = this.likes.filter(function(like) {
  505. return like.id !== user;
  506. });
  507. } else {
  508. this.reactions.liked = true;
  509. let user = this.user;
  510. this.likes.push(user);
  511. }
  512. }).catch(err => {
  513. console.error(err);
  514. swal('Error', 'Something went wrong, please try again later.', 'error');
  515. });
  516. },
  517. shareStatus() {
  518. if($('body').hasClass('loggedIn') == false) {
  519. window.location.href = '/login?next=' + encodeURIComponent(window.location.pathname);
  520. return;
  521. }
  522. axios.post('/i/share', {
  523. item: this.status.id
  524. }).then(res => {
  525. this.status.reblogs_count = res.data.count;
  526. if(this.reactions.shared == true) {
  527. this.reactions.shared = false;
  528. let user = this.user.id;
  529. this.shares = this.shares.filter(function(reaction) {
  530. return reaction.id !== user;
  531. });
  532. } else {
  533. this.reactions.shared = true;
  534. let user = this.user;
  535. this.shares.push(user);
  536. }
  537. }).catch(err => {
  538. console.error(err);
  539. swal('Error', 'Something went wrong, please try again later.', 'error');
  540. });
  541. },
  542. bookmarkStatus() {
  543. if($('body').hasClass('loggedIn') == false) {
  544. window.location.href = '/login?next=' + encodeURIComponent(window.location.pathname);
  545. return;
  546. }
  547. axios.post('/i/bookmark', {
  548. item: this.status.id
  549. }).then(res => {
  550. if(this.reactions.bookmarked == true) {
  551. this.reactions.bookmarked = false;
  552. } else {
  553. this.reactions.bookmarked = true;
  554. }
  555. }).catch(err => {
  556. swal('Error', 'Something went wrong, please try again later.', 'error');
  557. });
  558. },
  559. muteProfile() {
  560. if($('body').hasClass('loggedIn') == false) {
  561. return;
  562. }
  563. axios.post('/i/mute', {
  564. type: 'user',
  565. item: this.status.account.id
  566. }).then(res => {
  567. swal('Success', 'You have successfully muted ' + this.status.account.acct, 'success');
  568. }).catch(err => {
  569. swal('Error', 'Something went wrong. Please try again later.', 'error');
  570. });
  571. },
  572. blockProfile() {
  573. if($('body').hasClass('loggedIn') == false) {
  574. return;
  575. }
  576. axios.post('/i/block', {
  577. type: 'user',
  578. item: this.status.account.id
  579. }).then(res => {
  580. swal('Success', 'You have successfully blocked ' + this.status.account.acct, 'success');
  581. }).catch(err => {
  582. swal('Error', 'Something went wrong. Please try again later.', 'error');
  583. });
  584. },
  585. deletePost(status) {
  586. if(!this.ownerOrAdmin()) {
  587. return;
  588. }
  589. var result = confirm('Are you sure you want to delete this post?');
  590. if (result) {
  591. if($('body').hasClass('loggedIn') == false) {
  592. return;
  593. }
  594. axios.post('/i/delete', {
  595. type: 'status',
  596. item: this.status.id
  597. }).then(res => {
  598. swal('Success', 'You have successfully deleted this post', 'success');
  599. window.location.href = '/';
  600. }).catch(err => {
  601. swal('Error', 'Something went wrong. Please try again later.', 'error');
  602. });
  603. }
  604. },
  605. owner() {
  606. return this.user.id === this.status.account.id;
  607. },
  608. admin() {
  609. return this.user.is_admin == true;
  610. },
  611. ownerOrAdmin() {
  612. return this.owner() || this.admin();
  613. },
  614. lightbox(src) {
  615. this.lightboxMedia = src;
  616. this.$refs.lightboxModal.show();
  617. },
  618. postReply() {
  619. let self = this;
  620. if(this.replyText.length == 0 ||
  621. this.replyText.trim() == '@'+this.status.account.acct) {
  622. self.replyText = null;
  623. $('textarea[name="comment"]').blur();
  624. return;
  625. }
  626. let data = {
  627. item: this.statusId,
  628. comment: this.replyText
  629. }
  630. axios.post('/i/comment', data)
  631. .then(function(res) {
  632. let entity = res.data.entity;
  633. self.results.push(entity);
  634. self.replyText = '';
  635. let elem = $('.status-comments')[0];
  636. elem.scrollTop = elem.clientHeight;
  637. });
  638. },
  639. deleteComment(id, i) {
  640. axios.post('/i/delete', {
  641. type: 'comment',
  642. item: id
  643. }).then(res => {
  644. this.results.splice(i, 1);
  645. }).catch(err => {
  646. swal('Something went wrong!', 'Please try again later', 'error');
  647. });
  648. },
  649. l(e) {
  650. let len = e.length;
  651. if(len < 10) { return e; }
  652. return e.substr(0, 10)+'...';
  653. },
  654. replyFocus(e) {
  655. this.reply_to_profile_id = e.account.id;
  656. this.replyText = '@' + e.account.username + ' ';
  657. $('textarea[name="comment"]').focus();
  658. },
  659. fetchComments() {
  660. let url = '/api/v2/comments/'+this.statusUsername+'/status/'+this.statusId;
  661. axios.get(url)
  662. .then(response => {
  663. let self = this;
  664. this.results = _.reverse(response.data.data);
  665. this.pagination = response.data.meta.pagination;
  666. if(this.results.length > 0) {
  667. $('.load-more-link').removeClass('d-none');
  668. }
  669. $('.postCommentsLoader').addClass('d-none');
  670. $('.postCommentsContainer').removeClass('d-none');
  671. }).catch(error => {
  672. if(!error.response) {
  673. $('.postCommentsLoader .lds-ring')
  674. .attr('style','width:100%')
  675. .addClass('pt-4 font-weight-bold text-muted')
  676. .text('An error occurred, cannot fetch comments. Please try again later.');
  677. } else {
  678. switch(error.response.status) {
  679. case 401:
  680. $('.postCommentsLoader .lds-ring')
  681. .attr('style','width:100%')
  682. .addClass('pt-4 font-weight-bold text-muted')
  683. .text('Please login to view.');
  684. break;
  685. default:
  686. $('.postCommentsLoader .lds-ring')
  687. .attr('style','width:100%')
  688. .addClass('pt-4 font-weight-bold text-muted')
  689. .text('An error occurred, cannot fetch comments. Please try again later.');
  690. break;
  691. }
  692. }
  693. });
  694. },
  695. loadMore(e) {
  696. e.preventDefault();
  697. if(this.pagination.total_pages == 1 || this.pagination.current_page == this.pagination.total_pages) {
  698. $('.load-more-link').addClass('d-none');
  699. return;
  700. }
  701. $('.postCommentsLoader').removeClass('d-none');
  702. let next = this.pagination.links.next;
  703. axios.get(next)
  704. .then(response => {
  705. let self = this;
  706. let res = response.data.data;
  707. $('.postCommentsLoader').addClass('d-none');
  708. for(let i=0; i < res.length; i++) {
  709. this.results.unshift(res[i]);
  710. }
  711. this.pagination = response.data.meta.pagination;
  712. });
  713. },
  714. likeReply(status, $event) {
  715. if($('body').hasClass('loggedIn') == false) {
  716. return;
  717. }
  718. axios.post('/i/like', {
  719. item: status.id
  720. }).then(res => {
  721. status.favourites_count = res.data.count;
  722. if(status.favourited == true) {
  723. status.favourited = false;
  724. } else {
  725. status.favourited = true;
  726. }
  727. }).catch(err => {
  728. swal('Error', 'Something went wrong, please try again later.', 'error');
  729. });
  730. },
  731. truncate(str,lim) {
  732. return _.truncate(str,{
  733. length: lim
  734. });
  735. },
  736. timeAgo(ts) {
  737. let date = Date.parse(ts);
  738. let seconds = Math.floor((new Date() - date) / 1000);
  739. let interval = Math.floor(seconds / 31536000);
  740. if (interval >= 1) {
  741. return interval + "y";
  742. }
  743. interval = Math.floor(seconds / 604800);
  744. if (interval >= 1) {
  745. return interval + "w";
  746. }
  747. interval = Math.floor(seconds / 86400);
  748. if (interval >= 1) {
  749. return interval + "d";
  750. }
  751. interval = Math.floor(seconds / 3600);
  752. if (interval >= 1) {
  753. return interval + "h";
  754. }
  755. interval = Math.floor(seconds / 60);
  756. if (interval >= 1) {
  757. return interval + "m";
  758. }
  759. return Math.floor(seconds) + "s";
  760. },
  761. emojiReaction() {
  762. let em = event.target.innerText;
  763. if(this.replyText.length == 0) {
  764. this.reply_to_profile_id = this.status.account.id;
  765. this.replyText = '@' + this.status.account.username + ' ' + em;
  766. $('textarea[name="comment"]').focus();
  767. } else {
  768. this.reply_to_profile_id = this.status.account.id;
  769. this.replyText += em;
  770. $('textarea[name="comment"]').focus();
  771. }
  772. },
  773. toggleCommentVisibility() {
  774. if(this.ownerOrAdmin() == false) {
  775. return;
  776. }
  777. let state = this.status.comments_disabled;
  778. let self = this;
  779. if(state == true) {
  780. // re-enable comments
  781. axios.post('/i/visibility', {
  782. item: self.status.id,
  783. disableComments: false
  784. }).then(function(res) {
  785. window.location.href = self.status.url;
  786. }).catch(function(err) {
  787. return;
  788. });
  789. } else {
  790. // disable comments
  791. axios.post('/i/visibility', {
  792. item: self.status.id,
  793. disableComments: true
  794. }).then(function(res) {
  795. self.status.comments_disabled = false;
  796. self.showComments = false;
  797. }).catch(function(err) {
  798. return;
  799. });
  800. }
  801. }
  802. },
  803. }
  804. </script>