PostComponent.vue 21 KB

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