PostComponent.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. <style>
  2. </style>
  3. <template>
  4. <div class="postComponent">
  5. <div class="container px-0 mt-md-4">
  6. <div class="card card-md-rounded-0 status-container orientation-unknown">
  7. <div class="row mx-0">
  8. <div class="d-flex d-md-none align-items-center justify-content-between card-header bg-white w-100">
  9. <a :href="statusProfileUrl" class="d-flex align-items-center status-username text-truncate" data-toggle="tooltip" data-placement="bottom" :title="statusUsername">
  10. <div class="status-avatar mr-2">
  11. <img :src="statusAvatar" width="24px" height="24px" style="border-radius:12px;">
  12. </div>
  13. <div class="username">
  14. <span class="username-link font-weight-bold text-dark">{{ statusUsername }}</span>
  15. </div>
  16. </a>
  17. <div class="float-right">
  18. <div class="post-actions d-none">
  19. <div class="dropdown">
  20. <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">
  21. <span class="fas fa-ellipsis-v text-muted"></span>
  22. </button>
  23. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
  24. <a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a>
  25. <div class="dropdown-divider"></div>
  26. <form method="post" action="/i/mute">
  27. <input type="hidden" name="_token" value="">
  28. <input type="hidden" name="type" value="user">
  29. <input type="hidden" name="item" value="">
  30. <button type="submit" class="dropdown-item btn btn-link font-weight-bold">Mute this user</button>
  31. </form>
  32. <form method="post" action="/i/block">
  33. <input type="hidden" name="_token" value="">
  34. <input type="hidden" name="type" value="user">
  35. <input type="hidden" name="item" value="">
  36. <button type="submit" class="dropdown-item btn btn-link font-weight-bold">Block this user</button>
  37. </form>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. <div class="col-12 col-md-8 status-photo px-0">
  44. <div class="postPresenterLoader text-center">
  45. <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
  46. </div>
  47. <div class="postPresenterContainer d-none">
  48. </div>
  49. </div>
  50. <div class="col-12 col-md-4 px-0 d-flex flex-column border-left border-md-left-0">
  51. <div class="d-md-flex d-none align-items-center justify-content-between card-header py-3 bg-white">
  52. <a :href="statusProfileUrl" class="d-flex align-items-center status-username text-truncate" data-toggle="tooltip" data-placement="bottom" :title="statusUsername">
  53. <div class="status-avatar mr-2">
  54. <img :src="statusAvatar" width="24px" height="24px" style="border-radius:12px;">
  55. </div>
  56. <div class="username">
  57. <span class="username-link font-weight-bold text-dark">{{ statusUsername }}</span>
  58. </div>
  59. </a>
  60. <div class="float-right">
  61. <div class="post-actions d-none">
  62. <div class="dropdown">
  63. <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">
  64. <span class="fas fa-ellipsis-v text-muted"></span>
  65. </button>
  66. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
  67. <a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a>
  68. <div class="dropdown-divider"></div>
  69. <form method="post" action="/i/mute">
  70. <input type="hidden" name="_token" value="">
  71. <input type="hidden" name="type" value="user">
  72. <input type="hidden" name="item" value="">
  73. <button type="submit" class="dropdown-item btn btn-link font-weight-bold">Mute this user</button>
  74. </form>
  75. <form method="post" action="/i/block">
  76. <input type="hidden" name="_token" value="">
  77. <input type="hidden" name="type" value="user">
  78. <input type="hidden" name="item" value="">
  79. <button type="submit" class="dropdown-item btn btn-link font-weight-bold">Block this user</button>
  80. </form>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. <div class="d-flex flex-md-column flex-column-reverse h-100">
  87. <div class="card-body status-comments">
  88. <div class="status-comment">
  89. <p class="mb-1 read-more" style="overflow: hidden;">
  90. <span class="font-weight-bold pr-1">{{statusUsername}}</span>
  91. <span class="comment-text" :id="status.id + '-status-readmore'"></span>
  92. </p>
  93. <post-comments :user="this.user" :post-id="statusId" :post-username="statusUsername"></post-comments>
  94. </div>
  95. </div>
  96. <div class="card-body flex-grow-0 py-1">
  97. <div class="reactions my-1">
  98. <form class="d-inline-flex pr-3 like-form" method="post" action="/i/like" style="display: inline;" :data-id="statusId" data-action="like">
  99. <input type="hidden" name="_token" value="">
  100. <input type="hidden" name="item" :value="statusId">
  101. <button class="btn btn-link text-dark p-0 border-0" type="submit" title="Like!">
  102. <h3 class="status-heart m-0 far fa-heart text-dark"></h3>
  103. </button>
  104. </form>
  105. <h3 class="far fa-comment pr-3 m-0" title="Comment" v-on:click="commentFocus"></h3>
  106. <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">
  107. <input type="hidden" name="_token" value="">
  108. <input type="hidden" name="item" :value="statusId">
  109. <button class="btn btn-link text-dark p-0" type="submit" title="Share">
  110. <h3 class="m-0 far fa-share-square"></h3>
  111. </button>
  112. </form>
  113. <span class="float-right">
  114. <form class="d-inline-flex" method="post" action="/i/bookmark" style="display: inline;" data-id="#" data-action="bookmark" onclick="this.preventDefault()">
  115. <input type="hidden" name="_token" value="">
  116. <input type="hidden" name="item" :value="statusId">
  117. <button class="btn btn-link text-dark p-0 border-0" type="submit" title="Save">
  118. <h3 class="m-0 far fa-bookmark"></h3>
  119. </button>
  120. </form>
  121. </span>
  122. </div>
  123. <div class="likes font-weight-bold mb-0">
  124. <span class="like-count">{{status.favourites_count || 0}}</span> likes
  125. </div>
  126. <div class="timestamp">
  127. <a v-bind:href="statusUrl" class="small text-muted">
  128. {{timestampFormat()}}
  129. </a>
  130. </div>
  131. </div>
  132. </div>
  133. <div class="card-footer bg-white sticky-md-bottom">
  134. <div class="comment-form-guest">
  135. <a href="/login">Login</a> to like or comment.
  136. </div>
  137. <form class="comment-form d-none" method="post" action="/i/comment" :data-id="statusId" data-truncate="false">
  138. <input type="hidden" name="_token" value="">
  139. <input type="hidden" name="item" :value="statusId">
  140. <input class="form-control" name="comment" placeholder="Add a comment..." autocomplete="off">
  141. </form>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. </div>
  148. </template>
  149. <script>
  150. pixelfed.postComponent = {};
  151. pixelfed.presenter = {
  152. show: {
  153. image: function(container, media) {
  154. $('.status-container')
  155. .removeClass('orientation-unknown')
  156. .addClass('orientation-' + media[0]['orientation']);
  157. let wrapper = $('<div>');
  158. wrapper.addClass(media[0]['filter_class']);
  159. let el = $('<img>');
  160. el.attr('src', media[0]['url']);
  161. el.attr('title', media[0]['description']);
  162. wrapper.append(el);
  163. container.append(wrapper);
  164. },
  165. video: function(container, media) {
  166. let wrapper = $('<div>');
  167. wrapper.addClass('embed-responsive embed-responsive-4by3');
  168. let el = $('<video>');
  169. el.addClass('embed-responsive-item');
  170. el.attr('controls', '');
  171. el.attr('src', media[0]['url']);
  172. el.attr('title', media[0]['description']);
  173. wrapper.append(el);
  174. container.append(wrapper);
  175. },
  176. imageAlbum: function(container, media, status) {
  177. $('.status-container')
  178. .removeClass('orientation-unknown')
  179. .addClass('orientation-' + media[0]['orientation']);
  180. let id = 'photo-carousel-wrapper-' + status.id;
  181. let wrapper = $('<div>');
  182. wrapper.addClass('carousel slide carousel-fade');
  183. wrapper.attr('data-ride', 'carousel');
  184. wrapper.attr('id', id);
  185. let indicators = $('<ol>');
  186. indicators.addClass('carousel-indicators');
  187. let prev = $('<a>');
  188. prev.addClass('carousel-control-prev');
  189. prev.attr('href', '#' + id);
  190. prev.attr('role', 'button');
  191. prev.attr('data-slide', 'prev');
  192. let prevIcon = $('<span>').addClass('carousel-control-prev-icon').attr('aria-hidden', 'true');
  193. let prevSr = $('<span>').addClass('sr-only');
  194. prev.append(prevIcon, prevSr);
  195. let next = $('<a>');
  196. next.addClass('carousel-control-next');
  197. next.attr('href', '#' + id);
  198. next.attr('role', 'button');
  199. next.attr('data-slide', 'next');
  200. let nextIcon = $('<span>').addClass('carousel-control-next-icon').attr('aria-hidden', 'true');
  201. let nextSr = $('<span>').addClass('sr-only');
  202. let inner = $('<div>').addClass('carousel-inner');
  203. next.append(nextIcon, nextSr);
  204. for(let i = 0; i < media.length; i++) {
  205. let li = $('<li>');
  206. li.attr('data-target', '#' + id);
  207. li.attr('data-slide-to', i);
  208. if(i == 0) {
  209. li.addClass('active');
  210. }
  211. indicators.append(li);
  212. let item = media[i];
  213. let carouselItem = $('<div>').addClass('carousel-item');
  214. if(i == 0) {
  215. carouselItem.addClass('active');
  216. }
  217. let figure = $('<figure>');
  218. if(item['filter_class']) {
  219. figure.addClass(item['filter_class']);
  220. }
  221. let badge = $('<span>');
  222. badge.addClass('float-right mr-3 badge badge-dark');
  223. badge.style = 'position:fixed;top:8px;right:0;margin-bottom:-20px;';
  224. badge.text(i+1 + '/' + media.length);
  225. let img = $('<img>');
  226. img.addClass('d-block w-100');
  227. img.attr('src', item['url']);
  228. figure.append(badge, img);
  229. carouselItem.append(figure);
  230. inner.append(carouselItem);
  231. }
  232. wrapper.append(indicators, inner, prev, next);
  233. container.append(wrapper);
  234. }
  235. }
  236. };
  237. export default {
  238. props: ['status-id', 'status-username', 'status-template', 'status-url', 'status-profile-url', 'status-avatar'],
  239. data() {
  240. return {
  241. status: {},
  242. media: {},
  243. user: {},
  244. reactions: {}
  245. }
  246. },
  247. mounted() {
  248. let token = $('meta[name="csrf-token"]').attr('content');
  249. $('input[name="_token"]').each(function(k, v) {
  250. let el = $(v);
  251. el.val(token);
  252. });
  253. this.fetchData();
  254. //pixelfed.hydrateLikes();
  255. this.authCheck();
  256. },
  257. updated() {
  258. $('.carousel').carousel();
  259. if(this.reactions) {
  260. if(this.reactions.bookmarked == true) {
  261. $('.far.fa-bookmark').removeClass('far').addClass('fas text-warning');
  262. }
  263. if(this.reactions.shared == true) {
  264. $('.far.fa-share-square').addClass('text-primary');
  265. }
  266. if(this.reactions.liked == true) {
  267. $('.far.fa-heart ').removeClass('far text-dark').addClass('fas text-danger');
  268. }
  269. }
  270. },
  271. methods: {
  272. authCheck() {
  273. let authed = $('body').hasClass('loggedIn');
  274. if(authed == true) {
  275. $('.comment-form-guest').addClass('d-none');
  276. $('.comment-form').removeClass('d-none');
  277. }
  278. },
  279. showMuteBlock() {
  280. let sid = this.status.account.id;
  281. let uid = this.user.id;
  282. if(sid != uid) {
  283. $('.post-actions').removeClass('d-none');
  284. }
  285. },
  286. reportUrl() {
  287. return '/i/report?type=post&id=' + this.status.id;
  288. },
  289. timestampFormat() {
  290. let ts = new Date(this.status.created_at);
  291. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  292. },
  293. fetchData() {
  294. let url = '/api/v2/profile/'+this.statusUsername+'/status/'+this.statusId;
  295. axios.get(url)
  296. .then(response => {
  297. let self = this;
  298. self.status = response.data.status;
  299. self.user = response.data.user;
  300. self.media = self.status.media_attachments;
  301. self.reactions = response.data.reactions;
  302. this.buildPresenter();
  303. this.showMuteBlock();
  304. }).catch(error => {
  305. if(!error.response) {
  306. $('.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.');
  307. } else {
  308. switch(error.response.status) {
  309. case 401:
  310. $('.postPresenterLoader .lds-ring')
  311. .attr('style','width:100%')
  312. .addClass('pt-4 font-weight-bold text-muted')
  313. .text('Please login to view.');
  314. break;
  315. default:
  316. $('.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.');
  317. break;
  318. }
  319. }
  320. });
  321. },
  322. commentFocus() {
  323. $('.comment-form input[name="comment"]').focus();
  324. },
  325. buildPresenter() {
  326. let container = $('.postPresenterContainer');
  327. let status = this.status;
  328. let media = this.media;
  329. $('input[name="item"]').each(function(k, v) {
  330. let el = $(v);
  331. el.val(status.account.id);
  332. });
  333. $('.status-comment .comment-text').html(status.content);
  334. if(container.children().length != 0) {
  335. return;
  336. }
  337. switch(this.statusTemplate) {
  338. case 'image':
  339. pixelfed.presenter.show.image(container, media);
  340. break;
  341. case 'album':
  342. pixelfed.presenter.show.imageAlbum(container, media, this.status);
  343. break;
  344. case 'video':
  345. pixelfed.presenter.show.video(container, media);
  346. break;
  347. default:
  348. $('.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.');
  349. break;
  350. }
  351. if(container.children().length == 0) {
  352. $('.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.');
  353. return;
  354. }
  355. pixelfed.readmore();
  356. $('.postPresenterLoader').addClass('d-none');
  357. $('.postPresenterContainer').removeClass('d-none');
  358. },
  359. }
  360. }
  361. </script>