PostComponent.vue 42 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053
  1. <template>
  2. <div>
  3. <div v-if="!loaded" style="height: 80vh;" class="d-flex justify-content-center align-items-center">
  4. <img src="/img/pixelfed-icon-grey.svg" class="">
  5. </div>
  6. <div v-if="loaded && warning" class="bg-white pt-3 border-bottom">
  7. <div class="container">
  8. <p class="text-center font-weight-bold">You are blocking this account</p>
  9. <p class="text-center font-weight-bold">Click <a href="#" class="cursor-pointer" @click.prevent="warning = false; fetchData()">here</a> to view this status</p>
  10. </div>
  11. </div>
  12. <div v-if="loaded && warning == false" class="postComponent">
  13. <div v-if="profileLayout == 'metro'" class="container px-0">
  14. <div class="card card-md-rounded-0 status-container orientation-unknown">
  15. <div class="row px-0 mx-0">
  16. <div class="d-flex d-md-none align-items-center justify-content-between card-header bg-white w-100">
  17. <a :href="statusProfileUrl" class="d-flex align-items-center status-username text-truncate" data-toggle="tooltip" data-placement="bottom" :title="statusUsername">
  18. <div class="status-avatar mr-2">
  19. <img :src="statusAvatar" width="24px" height="24px" style="border-radius:12px;">
  20. </div>
  21. <div class="username">
  22. <span class="username-link font-weight-bold text-dark">{{ statusUsername }}</span>
  23. </div>
  24. </a>
  25. <div v-if="user != false" class="float-right">
  26. <div class="post-actions">
  27. <div class="dropdown">
  28. <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">
  29. <span class="fas fa-ellipsis-v text-muted"></span>
  30. </button>
  31. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
  32. <div v-if="!owner()">
  33. <a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a>
  34. <a class="dropdown-item font-weight-bold" v-on:click="muteProfile()">Mute Profile</a>
  35. <a class="dropdown-item font-weight-bold" v-on:click="blockProfile()">Block Profile</a>
  36. </div>
  37. <div v-if="ownerOrAdmin()">
  38. <a class="dropdown-item font-weight-bold" href="#" v-on:click.prevent="toggleCommentVisibility">{{ showComments ? 'Disable' : 'Enable'}} Comments</a>
  39. <a class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a>
  40. <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost(status)">Delete</a>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47. <div class="col-12 col-md-8 px-0 mx-0">
  48. <div class="postPresenterContainer d-none d-flex justify-content-center align-items-center" v-on:dblclick="likeStatus">
  49. <div v-if="status.pf_type === 'photo'" class="w-100">
  50. <photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
  51. </div>
  52. <div v-else-if="status.pf_type === 'video'" class="w-100">
  53. <video-presenter :status="status"></video-presenter>
  54. </div>
  55. <div v-else-if="status.pf_type === 'photo:album'" class="w-100">
  56. <photo-album-presenter :status="status" v-on:lightbox="lightbox"></photo-album-presenter>
  57. </div>
  58. <div v-else-if="status.pf_type === 'video:album'" class="w-100">
  59. <video-album-presenter :status="status"></video-album-presenter>
  60. </div>
  61. <div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
  62. <mixed-album-presenter :status="status" v-on:lightbox="lightbox"></mixed-album-presenter>
  63. </div>
  64. <div v-else class="w-100">
  65. <p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="col-12 col-md-4 px-0 d-flex flex-column border-left border-md-left-0">
  70. <div class="d-md-flex d-none align-items-center justify-content-between card-header py-3 bg-white">
  71. <a :href="statusProfileUrl" class="d-flex align-items-center status-username text-truncate" data-toggle="tooltip" data-placement="bottom" :title="statusUsername">
  72. <div class="status-avatar mr-2">
  73. <img :src="statusAvatar" width="24px" height="24px" style="border-radius:12px;">
  74. </div>
  75. <div class="username">
  76. <span class="username-link font-weight-bold text-dark">{{ statusUsername }}</span>
  77. </div>
  78. </a>
  79. <div class="float-right">
  80. <div class="post-actions">
  81. <div v-if="user != false" class="dropdown">
  82. <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">
  83. <span class="fas fa-ellipsis-v text-muted"></span>
  84. </button>
  85. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
  86. <span v-if="!owner()">
  87. <a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a>
  88. <a class="dropdown-item font-weight-bold" v-on:click="muteProfile">Mute Profile</a>
  89. <a class="dropdown-item font-weight-bold" v-on:click="blockProfile">Block Profile</a>
  90. </span>
  91. <span v-if="ownerOrAdmin()">
  92. <a class="dropdown-item font-weight-bold" href="#" v-on:click.prevent="toggleCommentVisibility">{{ showComments ? 'Disable' : 'Enable'}} Comments</a>
  93. <a class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a>
  94. <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost">Delete</a>
  95. </span>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. <div class="d-flex flex-md-column flex-column-reverse h-100" style="overflow-y: auto;">
  102. <div class="card-body status-comments pb-5">
  103. <div class="status-comment">
  104. <p :class="[status.content.length > 420 ? 'mb-1 read-more' : 'mb-1']" style="overflow: hidden;">
  105. <span class="font-weight-bold pr-1">{{statusUsername}}</span>
  106. <span class="comment-text" :id="status.id + '-status-readmore'" v-html="status.content"></span>
  107. </p>
  108. <div v-if="showComments">
  109. <hr>
  110. <div class="postCommentsLoader text-center">
  111. <div class="spinner-border" role="status">
  112. <span class="sr-only">Loading...</span>
  113. </div>
  114. </div>
  115. <div class="postCommentsContainer d-none">
  116. <p v-if="status.reply_count > 10"class="mb-1 text-center load-more-link d-none"><a href="#" class="text-muted" v-on:click="loadMore">Load more comments</a></p>
  117. <div class="comments">
  118. <div v-for="(reply, index) in results" class="pb-3" :key="'tl' + reply.id + '_' + index">
  119. <div v-if="reply.sensitive == true">
  120. <span class="py-3">
  121. <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>
  122. <span class="text-break">
  123. <span class="font-italic text-muted">This comment may contain sensitive material</span>
  124. <span class="text-primary cursor-pointer pl-1" @click="reply.sensitive = false;">Show</span>
  125. </span>
  126. </span>
  127. </div>
  128. <div v-else>
  129. <p class="d-flex justify-content-between align-items-top read-more" style="overflow-y: hidden;">
  130. <span>
  131. <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>
  132. <span class="text-break" v-html="reply.content"></span>
  133. </span>
  134. <span class="pl-2" style="min-width:38px">
  135. <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>
  136. <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>
  137. </span>
  138. </p>
  139. <p class="">
  140. <a v-once class="text-muted mr-3 text-decoration-none small" style="width: 20px;" v-text="timeAgo(reply.created_at)" :href="reply.url"></a>
  141. <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>
  142. <span class="text-muted comment-reaction font-weight-bold cursor-pointer" v-on:click="replyFocus(reply, index)">Reply</span>
  143. </p>
  144. <div v-if="reply.reply_count > 0" class="cursor-pointer" style="margin-left:30px;" v-on:click="toggleReplies(reply)">
  145. <span class="show-reply-bar"></span>
  146. <span class="comment-reaction font-weight-bold text-muted">{{reply.thread ? 'Hide' : 'View'}} Replies ({{reply.reply_count}})</span>
  147. </div>
  148. <div v-if="reply.thread == true" class="comment-thread">
  149. <div v-for="(s, sindex) in reply.replies" class="pb-3" :key="'cr' + s.id + '_' + index">
  150. <p class="d-flex justify-content-between align-items-top read-more" style="overflow-y: hidden;">
  151. <span>
  152. <a class="text-dark font-weight-bold mr-1" :href="s.account.url" :title="s.account.username">{{s.account.username}}</a>
  153. <span class="text-break" v-html="s.content"></span>
  154. </span>
  155. <span class="pl-2" style="min-width:38px">
  156. <span v-on:click="likeReply(s, $event)"><i v-bind:class="[s.favourited ? 'fas fa-heart fa-sm text-danger':'far fa-heart fa-sm text-lighter']"></i></span>
  157. <post-menu :status="s" :profile="user" :size="'sm'" :modal="'true'" class="d-inline-block pl-2" v-on:deletePost="deleteCommentReply(s.id, sindex, index) "></post-menu>
  158. </span>
  159. </p>
  160. <p class="">
  161. <a v-once class="text-muted mr-3 text-decoration-none small" style="width: 20px;" v-text="timeAgo(s.created_at)" :href="s.url"></a>
  162. <span v-if="s.favourites_count" class="text-muted comment-reaction font-weight-bold mr-3">{{s.favourites_count == 1 ? '1 like' : s.favourites_count + ' likes'}}</span>
  163. </p>
  164. </div>
  165. </div>
  166. </div>
  167. </div>
  168. </div>
  169. </div>
  170. </div>
  171. </div>
  172. </div>
  173. <div class="card-body flex-grow-0 py-1">
  174. <div class="reactions my-1">
  175. <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>
  176. <h3 v-if="!status.comments_disabled" class="far fa-comment pr-3 m-0 cursor-pointer" title="Comment" v-on:click="replyFocus(status)"></h3>
  177. <h3 v-if="status.visibility == 'public'" 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>
  178. <h3 v-if="status.visibility == 'public'" 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>
  179. </div>
  180. <div class="reaction-counts font-weight-bold mb-0">
  181. <span style="cursor:pointer;" v-on:click="likesModal">
  182. <span class="like-count">{{status.favourites_count || 0}}</span> likes
  183. </span>
  184. <span v-if="status.visibility == 'public'" class="float-right" style="cursor:pointer;" v-on:click="sharesModal">
  185. <span class="share-count pl-4">{{status.reblogs_count || 0}}</span> shares
  186. </span>
  187. </div>
  188. <div class="timestamp pt-2 d-flex align-items-bottom justify-content-between">
  189. <a v-bind:href="statusUrl" class="small text-muted">
  190. {{timestampFormat()}}
  191. </a>
  192. <span class="small text-muted text-capitalize cursor-pointer" v-on:click="visibilityModal">{{status.visibility}}</span>
  193. </div>
  194. </div>
  195. </div>
  196. <div v-if="showComments && user.length !== 0" class="card-footer bg-white px-2 py-0">
  197. <ul class="nav align-items-center emoji-reactions" style="overflow-x: scroll;flex-wrap: unset;">
  198. <li class="nav-item" v-on:click="emojiReaction">๐Ÿ˜‚</li>
  199. <li class="nav-item" v-on:click="emojiReaction">๐Ÿ’ฏ</li>
  200. <li class="nav-item" v-on:click="emojiReaction">โค๏ธ</li>
  201. <li class="nav-item" v-on:click="emojiReaction">๐Ÿ™Œ</li>
  202. <li class="nav-item" v-on:click="emojiReaction">๐Ÿ‘</li>
  203. <li class="nav-item" v-on:click="emojiReaction">๐Ÿ‘Œ</li>
  204. <li class="nav-item" v-on:click="emojiReaction">๐Ÿ˜</li>
  205. <li class="nav-item" v-on:click="emojiReaction">๐Ÿ˜ฏ</li>
  206. <li class="nav-item" v-on:click="emojiReaction">๐Ÿ˜ข</li>
  207. <li class="nav-item" v-on:click="emojiReaction">๐Ÿ˜…</li>
  208. <li class="nav-item" v-on:click="emojiReaction">๐Ÿ˜</li>
  209. <li class="nav-item" v-on:click="emojiReaction">๐Ÿ™‚</li>
  210. <li class="nav-item" v-on:click="emojiReaction">๐Ÿ˜Ž</li>
  211. <li class="nav-item" v-on:click="emojiReaction" v-for="e in emoji">{{e}}</li>
  212. </ul>
  213. </div>
  214. <div v-if="showComments" class="card-footer bg-white sticky-md-bottom p-0">
  215. <div v-if="user.length == 0" class="comment-form-guest p-3">
  216. <a href="/login">Login</a> to like or comment.
  217. </div>
  218. <form v-else class="border-0 rounded-0 align-middle" method="post" action="/i/comment" :data-id="statusId" data-truncate="false">
  219. <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>
  220. <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"/>
  221. </form>
  222. </div>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. <div v-if="profileLayout == 'moment'" class="momentui">
  228. <div class="bg-dark mt-md-n4">
  229. <div class="container" v-on:dblclick="likeStatus">
  230. <div class="postPresenterContainer d-none d-flex justify-content-center align-items-center bg-dark">
  231. <div v-if="status.pf_type === 'photo'" class="w-100">
  232. <photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
  233. </div>
  234. <div v-else-if="status.pf_type === 'video'" class="w-100">
  235. <video-presenter :status="status"></video-presenter>
  236. </div>
  237. <div v-else-if="status.pf_type === 'photo:album'" class="w-100">
  238. <photo-album-presenter :status="status" v-on:lightbox="lightbox"></photo-album-presenter>
  239. </div>
  240. <div v-else-if="status.pf_type === 'video:album'" class="w-100">
  241. <video-album-presenter :status="status"></video-album-presenter>
  242. </div>
  243. <div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
  244. <mixed-album-presenter :status="status" v-on:lightbox="lightbox"></mixed-album-presenter>
  245. </div>
  246. <div v-else class="w-100">
  247. <p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
  248. </div>
  249. </div>
  250. </div>
  251. </div>
  252. <div class="bg-white">
  253. <div class="container">
  254. <div class="row py-5">
  255. <div class="col-12 col-md-8">
  256. <div class="reactions py-2">
  257. <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>
  258. <h3 v-if="!status.comments_disabled" class="far fa-comment pr-3 m-0 cursor-pointer" title="Comment" v-on:click="replyFocus(status)"></h3>
  259. <h3 v-if="status.visibility == 'public'" v-bind:class="[reactions.shared ? 'far fa-share-square pr-3 m-0 text-primary float-right cursor-pointer' : 'far fa-share-square pr-3 m-0 share-btn float-right cursor-pointer']" title="Share" v-on:click="shareStatus"></h3>
  260. </div>
  261. <div class="reaction-counts font-weight-bold mb-0">
  262. <span style="cursor:pointer;" v-on:click="likesModal">
  263. <span class="like-count">{{status.favourites_count || 0}}</span> likes
  264. </span>
  265. <span v-if="status.visibility == 'public'" class="float-right" style="cursor:pointer;" v-on:click="sharesModal">
  266. <span class="share-count pl-4">{{status.reblogs_count || 0}}</span> shares
  267. </span>
  268. </div>
  269. <hr>
  270. <div class="media align-items-center">
  271. <img :src="statusAvatar" class="rounded-circle shadow-lg mr-3" alt="avatar" width="72px" height="72px">
  272. <div class="media-body lead">
  273. by <a :href="statusProfileUrl">{{statusUsername}}</a>
  274. </div>
  275. </div>
  276. <hr>
  277. <div>
  278. <p class="lead"><i class="far fa-clock"></i> {{timestampFormat()}}</p>
  279. <div class="lead" v-html="status.content"></div>
  280. </div>
  281. </div>
  282. <div class="col-12 col-md-4">
  283. <div v-if="status.comments_disabled" class="bg-light p-5 text-center lead">
  284. <p class="mb-0">Comments have been disabled on this post.</p>
  285. </div>
  286. </div>
  287. </div>
  288. </div>
  289. </div>
  290. </div>
  291. </div>
  292. <b-modal ref="likesModal"
  293. id="l-modal"
  294. hide-footer
  295. centered
  296. title="Likes"
  297. body-class="list-group-flush p-0">
  298. <div class="list-group">
  299. <div class="list-group-item border-0" v-for="(user, index) in likes" :key="'modal_likes_'+index">
  300. <div class="media">
  301. <a :href="user.url">
  302. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + 'โ€™s avatar'" width="30px">
  303. </a>
  304. <div class="media-body">
  305. <p class="mb-0" style="font-size: 14px">
  306. <a :href="user.url" class="font-weight-bold text-dark">
  307. {{user.username}}
  308. </a>
  309. </p>
  310. <p class="text-muted mb-0" style="font-size: 14px">
  311. {{user.display_name}}
  312. </a>
  313. </p>
  314. </div>
  315. </div>
  316. </div>
  317. <infinite-loading @infinite="infiniteLikesHandler" spinner="spiral">
  318. <div slot="no-more"></div>
  319. <div slot="no-results"></div>
  320. </infinite-loading>
  321. </div>
  322. </b-modal>
  323. <b-modal ref="sharesModal"
  324. id="s-modal"
  325. hide-footer
  326. centered
  327. title="Shares"
  328. body-class="list-group-flush p-0">
  329. <div class="list-group">
  330. <div class="list-group-item border-0" v-for="(user, index) in shares" :key="'modal_shares_'+index">
  331. <div class="media">
  332. <a :href="user.url">
  333. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + 'โ€™s avatar'" width="30px">
  334. </a>
  335. <div class="media-body">
  336. <div class="d-inline-block">
  337. <p class="mb-0" style="font-size: 14px">
  338. <a :href="user.url" class="font-weight-bold text-dark">
  339. {{user.username}}
  340. </a>
  341. </p>
  342. <p class="text-muted mb-0" style="font-size: 14px">
  343. {{user.display_name}}
  344. </a>
  345. </p>
  346. </div>
  347. <p class="float-right"><!-- <a class="btn btn-primary font-weight-bold py-1" href="#">Follow</a> --></p>
  348. </div>
  349. </div>
  350. </div>
  351. <infinite-loading @infinite="infiniteSharesHandler" spinner="spiral">
  352. <div slot="no-more"></div>
  353. <div slot="no-results"></div>
  354. </infinite-loading>
  355. </div>
  356. </b-modal>
  357. <b-modal
  358. id="lightbox"
  359. ref="lightboxModal"
  360. :hide-header="true"
  361. :hide-footer="true"
  362. centered
  363. size="lg"
  364. body-class="p-0"
  365. >
  366. <div v-if="lightboxMedia" :class="lightboxMedia.filter_class">
  367. <img :src="lightboxMedia.url" class="img-fluid" style="min-height: 100%; min-width: 100%">
  368. </div>
  369. </b-modal>
  370. </div>
  371. </template>
  372. <style type="text/css" scoped>
  373. .status-comments,
  374. .reactions {
  375. background: #fff;
  376. }
  377. .postPresenterContainer {
  378. background: #fff;
  379. }
  380. @media(min-width: 720px) {
  381. .postPresenterContainer {
  382. min-height: 600px;
  383. }
  384. }
  385. ::-webkit-scrollbar {
  386. width: 0px;
  387. background: transparent;
  388. }
  389. .reply-btn {
  390. position: absolute;
  391. bottom: 12px;
  392. right: 20px;
  393. width: 60px;
  394. text-align: center;
  395. border-radius: 0 3px 3px 0;
  396. }
  397. .text-lighter {
  398. color:#B8C2CC !important;
  399. }
  400. .text-break {
  401. overflow-wrap: break-word;
  402. }
  403. .comments p {
  404. margin-bottom: 0;
  405. }
  406. .comment-reaction {
  407. font-size: 80%;
  408. }
  409. .show-reply-bar {
  410. display: inline-block;
  411. border-bottom: 1px solid #999;
  412. height: 0;
  413. margin-right: 16px;
  414. vertical-align: middle;
  415. width: 24px;
  416. }
  417. .comment-thread {
  418. margin: 4px 0 0 40px;
  419. width: calc(100% - 40px);
  420. }
  421. .emoji-reactions .nav-item {
  422. font-size: 1.2rem;
  423. padding: 9px;
  424. cursor: pointer;
  425. }
  426. .emoji-reactions::-webkit-scrollbar {
  427. width: 0px;
  428. height: 0px;
  429. background: transparent;
  430. }
  431. </style>
  432. <style type="text/css" scoped>
  433. .momentui .bg-dark {
  434. background: #000 !important;
  435. }
  436. .momentui .carousel.slide,
  437. .momentui .carousel-item {
  438. background: #000 !important;
  439. }
  440. </style>
  441. <script>
  442. pixelfed.postComponent = {};
  443. export default {
  444. props: [
  445. 'status-id',
  446. 'status-username',
  447. 'status-template',
  448. 'status-url',
  449. 'status-profile-url',
  450. 'status-avatar',
  451. 'status-profile-id',
  452. 'profile-layout'
  453. ],
  454. data() {
  455. return {
  456. status: false,
  457. media: {},
  458. user: false,
  459. reactions: {
  460. liked: false,
  461. shared: false
  462. },
  463. likes: [],
  464. likesPage: 1,
  465. shares: [],
  466. sharesPage: 1,
  467. lightboxMedia: false,
  468. replyText: '',
  469. relationship: {},
  470. results: [],
  471. pagination: {},
  472. min_id: 0,
  473. max_id: 0,
  474. reply_to_profile_id: 0,
  475. thread: false,
  476. showComments: false,
  477. warning: false,
  478. loaded: false,
  479. loading: null,
  480. replyingToId: this.statusId,
  481. replyToIndex: 0,
  482. emoji: ['๐Ÿ˜€','๐Ÿคฃ','๐Ÿ˜ƒ','๐Ÿ˜„','๐Ÿ˜†','๐Ÿ˜‰','๐Ÿ˜Š','๐Ÿ˜‹','๐Ÿ˜˜','๐Ÿ˜—','๐Ÿ˜™','๐Ÿ˜š','๐Ÿค—','๐Ÿคฉ','๐Ÿค”','๐Ÿคจ','๐Ÿ˜','๐Ÿ˜‘','๐Ÿ˜ถ','๐Ÿ™„','๐Ÿ˜','๐Ÿ˜ฃ','๐Ÿ˜ฅ','๐Ÿ˜ฎ','๐Ÿค','๐Ÿ˜ช','๐Ÿ˜ซ','๐Ÿ˜ด','๐Ÿ˜Œ','๐Ÿ˜›','๐Ÿ˜œ','๐Ÿ˜','๐Ÿคค','๐Ÿ˜’','๐Ÿ˜“','๐Ÿ˜”','๐Ÿ˜•','๐Ÿ™ƒ','๐Ÿค‘','๐Ÿ˜ฒ','๐Ÿ™','๐Ÿ˜–','๐Ÿ˜ž','๐Ÿ˜Ÿ','๐Ÿ˜ค','๐Ÿ˜ญ','๐Ÿ˜ฆ','๐Ÿ˜ง','๐Ÿ˜จ','๐Ÿ˜ฉ','๐Ÿคฏ','๐Ÿ˜ฌ','๐Ÿ˜ฐ','๐Ÿ˜ฑ','๐Ÿ˜ณ','๐Ÿคช','๐Ÿ˜ต','๐Ÿ˜ก','๐Ÿ˜ ','๐Ÿคฌ','๐Ÿ˜ท','๐Ÿค’','๐Ÿค•','๐Ÿคข','๐Ÿคฎ','๐Ÿคง','๐Ÿ˜‡','๐Ÿค ','๐Ÿคก','๐Ÿคฅ','๐Ÿคซ','๐Ÿคญ','๐Ÿง','๐Ÿค“','๐Ÿ˜ˆ','๐Ÿ‘ฟ','๐Ÿ‘น','๐Ÿ‘บ','๐Ÿ’€','๐Ÿ‘ป','๐Ÿ‘ฝ','๐Ÿค–','๐Ÿ’ฉ','๐Ÿ˜บ','๐Ÿ˜ธ','๐Ÿ˜น','๐Ÿ˜ป','๐Ÿ˜ผ','๐Ÿ˜ฝ','๐Ÿ™€','๐Ÿ˜ฟ','๐Ÿ˜พ','๐Ÿคฒ','๐Ÿ‘','๐Ÿค','๐Ÿ‘','๐Ÿ‘Ž','๐Ÿ‘Š','โœŠ','๐Ÿค›','๐Ÿคœ','๐Ÿคž','โœŒ๏ธ','๐ŸคŸ','๐Ÿค˜','๐Ÿ‘ˆ','๐Ÿ‘‰','๐Ÿ‘†','๐Ÿ‘‡','โ˜๏ธ','โœ‹','๐Ÿคš','๐Ÿ–','๐Ÿ––','๐Ÿ‘‹','๐Ÿค™','๐Ÿ’ช','๐Ÿ–•','โœ๏ธ','๐Ÿ™','๐Ÿ’','๐Ÿ’„','๐Ÿ’‹','๐Ÿ‘„','๐Ÿ‘…','๐Ÿ‘‚','๐Ÿ‘ƒ','๐Ÿ‘ฃ','๐Ÿ‘','๐Ÿ‘€','๐Ÿง ','๐Ÿ—ฃ','๐Ÿ‘ค','๐Ÿ‘ฅ'],
  483. }
  484. },
  485. beforeMount() {
  486. let u = new URLSearchParams(window.location.search);
  487. if(u.has('ui') && u.get('ui') == 'moment' && this.profileLayout != 'moment') {
  488. this.profileLayout = 'moment';
  489. }
  490. if(u.has('ui') && u.get('ui') == 'metro' && this.profileLayout != 'metro') {
  491. this.profileLayout = 'metro';
  492. }
  493. },
  494. mounted() {
  495. this.fetchRelationships();
  496. },
  497. updated() {
  498. $('.carousel').carousel();
  499. window.pixelfed.readmore();
  500. },
  501. methods: {
  502. showMuteBlock() {
  503. let sid = this.status.account.id;
  504. let uid = this.user.id;
  505. if(sid == uid) {
  506. $('.post-actions .menu-author').removeClass('d-none');
  507. } else {
  508. $('.post-actions .menu-user').removeClass('d-none');
  509. }
  510. },
  511. reportUrl() {
  512. return '/i/report?type=post&id=' + this.status.id;
  513. },
  514. editUrl() {
  515. return this.status.url + '/edit';
  516. },
  517. timestampFormat() {
  518. let ts = new Date(this.status.created_at);
  519. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  520. },
  521. fetchData() {
  522. axios.get('/api/v2/profile/'+this.statusUsername+'/status/'+this.statusId)
  523. .then(response => {
  524. let self = this;
  525. self.status = response.data.status;
  526. self.user = response.data.user;
  527. self.media = self.status.media_attachments;
  528. self.reactions = response.data.reactions;
  529. self.likes = response.data.likes;
  530. self.shares = response.data.shares;
  531. self.likesPage = 2;
  532. self.sharesPage = 2;
  533. this.showMuteBlock();
  534. if(self.status.comments_disabled == false) {
  535. self.showComments = true;
  536. this.fetchComments();
  537. }
  538. this.loaded = true;
  539. $('head title').text(this.status.account.username + ' posted a photo: ' + this.status.favourites_count + ' likes');
  540. }).catch(error => {
  541. if(!error.response) {
  542. } else {
  543. switch(error.response.status) {
  544. case 401:
  545. break;
  546. default:
  547. break;
  548. }
  549. }
  550. });
  551. },
  552. likesModal() {
  553. if(this.status.favourites_count == 0 || $('body').hasClass('loggedIn') == false) {
  554. return;
  555. }
  556. this.$refs.likesModal.show();
  557. },
  558. sharesModal() {
  559. if(this.status.reblogs_count == 0 || $('body').hasClass('loggedIn') == false) {
  560. return;
  561. }
  562. this.$refs.sharesModal.show();
  563. },
  564. infiniteLikesHandler($state) {
  565. let api = '/api/v2/likes/profile/'+this.statusUsername+'/status/'+this.statusId;
  566. axios.get(api, {
  567. params: {
  568. page: this.likesPage,
  569. },
  570. }).then(({ data }) => {
  571. if (data.data.length > 0) {
  572. this.likes.push(...data.data);
  573. this.likesPage++;
  574. $state.loaded();
  575. } else {
  576. $state.complete();
  577. }
  578. });
  579. },
  580. infiniteSharesHandler($state) {
  581. axios.get('/api/v2/shares/profile/'+this.statusUsername+'/status/'+this.statusId, {
  582. params: {
  583. page: this.sharesPage,
  584. },
  585. }).then(({ data }) => {
  586. if (data.data.length > 0) {
  587. this.shares.push(...data.data);
  588. this.sharesPage++;
  589. $state.loaded();
  590. } else {
  591. $state.complete();
  592. }
  593. });
  594. },
  595. likeStatus(event) {
  596. if($('body').hasClass('loggedIn') == false) {
  597. window.location.href = '/login?next=' + encodeURIComponent(window.location.pathname);
  598. return;
  599. }
  600. axios.post('/i/like', {
  601. item: this.status.id
  602. }).then(res => {
  603. this.status.favourites_count = res.data.count;
  604. if(this.reactions.liked == true) {
  605. this.reactions.liked = false;
  606. let user = this.user.id;
  607. this.likes = this.likes.filter(function(like) {
  608. return like.id !== user;
  609. });
  610. } else {
  611. this.reactions.liked = true;
  612. let user = this.user;
  613. this.likes.push(user);
  614. }
  615. }).catch(err => {
  616. console.error(err);
  617. swal('Error', 'Something went wrong, please try again later.', 'error');
  618. });
  619. },
  620. shareStatus() {
  621. if($('body').hasClass('loggedIn') == false) {
  622. window.location.href = '/login?next=' + encodeURIComponent(window.location.pathname);
  623. return;
  624. }
  625. axios.post('/i/share', {
  626. item: this.status.id
  627. }).then(res => {
  628. this.status.reblogs_count = res.data.count;
  629. if(this.reactions.shared == true) {
  630. this.reactions.shared = false;
  631. let user = this.user.id;
  632. this.shares = this.shares.filter(function(reaction) {
  633. return reaction.id !== user;
  634. });
  635. } else {
  636. this.reactions.shared = true;
  637. let user = this.user;
  638. this.shares.push(user);
  639. }
  640. }).catch(err => {
  641. console.error(err);
  642. swal('Error', 'Something went wrong, please try again later.', 'error');
  643. });
  644. },
  645. bookmarkStatus() {
  646. if($('body').hasClass('loggedIn') == false) {
  647. window.location.href = '/login?next=' + encodeURIComponent(window.location.pathname);
  648. return;
  649. }
  650. axios.post('/i/bookmark', {
  651. item: this.status.id
  652. }).then(res => {
  653. if(this.reactions.bookmarked == true) {
  654. this.reactions.bookmarked = false;
  655. } else {
  656. this.reactions.bookmarked = true;
  657. }
  658. }).catch(err => {
  659. swal('Error', 'Something went wrong, please try again later.', 'error');
  660. });
  661. },
  662. muteProfile() {
  663. if($('body').hasClass('loggedIn') == false) {
  664. return;
  665. }
  666. axios.post('/i/mute', {
  667. type: 'user',
  668. item: this.status.account.id
  669. }).then(res => {
  670. swal('Success', 'You have successfully muted ' + this.status.account.acct, 'success');
  671. }).catch(err => {
  672. swal('Error', 'Something went wrong. Please try again later.', 'error');
  673. });
  674. },
  675. blockProfile() {
  676. if($('body').hasClass('loggedIn') == false) {
  677. return;
  678. }
  679. axios.post('/i/block', {
  680. type: 'user',
  681. item: this.status.account.id
  682. }).then(res => {
  683. swal('Success', 'You have successfully blocked ' + this.status.account.acct, 'success');
  684. }).catch(err => {
  685. swal('Error', 'Something went wrong. Please try again later.', 'error');
  686. });
  687. },
  688. deletePost(status) {
  689. if(!this.ownerOrAdmin()) {
  690. return;
  691. }
  692. var result = confirm('Are you sure you want to delete this post?');
  693. if (result) {
  694. if($('body').hasClass('loggedIn') == false) {
  695. return;
  696. }
  697. axios.post('/i/delete', {
  698. type: 'status',
  699. item: this.status.id
  700. }).then(res => {
  701. swal('Success', 'You have successfully deleted this post', 'success');
  702. setTimeout(function() {
  703. window.location.href = '/';
  704. }, 3000);
  705. }).catch(err => {
  706. swal('Error', 'Something went wrong. Please try again later.', 'error');
  707. });
  708. }
  709. },
  710. owner() {
  711. return this.user.id === this.status.account.id;
  712. },
  713. admin() {
  714. return this.user.is_admin == true;
  715. },
  716. ownerOrAdmin() {
  717. return this.owner() || this.admin();
  718. },
  719. lightbox(src) {
  720. this.lightboxMedia = src;
  721. this.$refs.lightboxModal.show();
  722. },
  723. postReply() {
  724. let self = this;
  725. if(this.replyText.length == 0 ||
  726. this.replyText.trim() == '@'+this.status.account.acct) {
  727. self.replyText = null;
  728. $('textarea[name="comment"]').blur();
  729. return;
  730. }
  731. let data = {
  732. item: this.replyingToId,
  733. comment: this.replyText
  734. }
  735. axios.post('/i/comment', data)
  736. .then(function(res) {
  737. let entity = res.data.entity;
  738. if(entity.in_reply_to_id == self.status.id) {
  739. self.results.push(entity);
  740. let elem = $('.status-comments')[0];
  741. elem.scrollTop = elem.clientHeight;
  742. } else {
  743. if(self.replyToIndex >= 0) {
  744. let el = self.results[self.replyToIndex];
  745. el.replies.push(entity);
  746. el.reply_count = el.reply_count + 1;
  747. }
  748. }
  749. self.replyText = '';
  750. });
  751. },
  752. deleteComment(id, i) {
  753. axios.post('/i/delete', {
  754. type: 'comment',
  755. item: id
  756. }).then(res => {
  757. this.results.splice(i, 1);
  758. }).catch(err => {
  759. swal('Something went wrong!', 'Please try again later', 'error');
  760. });
  761. },
  762. deleteCommentReply(id, i, pi) {
  763. axios.post('/i/delete', {
  764. type: 'comment',
  765. item: id
  766. }).then(res => {
  767. this.results[pi].replies.splice(i, 1);
  768. --this.results[pi].reply_count;
  769. }).catch(err => {
  770. swal('Something went wrong!', 'Please try again later', 'error');
  771. });
  772. },
  773. l(e) {
  774. let len = e.length;
  775. if(len < 10) { return e; }
  776. return e.substr(0, 10)+'...';
  777. },
  778. replyFocus(e, index) {
  779. this.replyToIndex = index;
  780. this.replyingToId = e.id;
  781. this.reply_to_profile_id = e.account.id;
  782. this.replyText = '@' + e.account.username + ' ';
  783. $('textarea[name="comment"]').focus();
  784. },
  785. fetchComments() {
  786. let url = '/api/v2/comments/'+this.statusUsername+'/status/'+this.statusId;
  787. axios.get(url)
  788. .then(response => {
  789. let self = this;
  790. this.results = _.reverse(response.data.data);
  791. this.pagination = response.data.meta.pagination;
  792. if(this.results.length > 0) {
  793. $('.load-more-link').removeClass('d-none');
  794. }
  795. $('.postCommentsLoader').addClass('d-none');
  796. $('.postCommentsContainer').removeClass('d-none');
  797. }).catch(error => {
  798. if(!error.response) {
  799. $('.postCommentsLoader .lds-ring')
  800. .attr('style','width:100%')
  801. .addClass('pt-4 font-weight-bold text-muted')
  802. .text('An error occurred, cannot fetch comments. Please try again later.');
  803. } else {
  804. switch(error.response.status) {
  805. case 401:
  806. $('.postCommentsLoader .lds-ring')
  807. .attr('style','width:100%')
  808. .addClass('pt-4 font-weight-bold text-muted')
  809. .text('Please login to view.');
  810. break;
  811. default:
  812. $('.postCommentsLoader .lds-ring')
  813. .attr('style','width:100%')
  814. .addClass('pt-4 font-weight-bold text-muted')
  815. .text('An error occurred, cannot fetch comments. Please try again later.');
  816. break;
  817. }
  818. }
  819. });
  820. },
  821. loadMore(e) {
  822. e.preventDefault();
  823. if(this.pagination.total_pages == 1 || this.pagination.current_page == this.pagination.total_pages) {
  824. $('.load-more-link').addClass('d-none');
  825. return;
  826. }
  827. $('.postCommentsLoader').removeClass('d-none');
  828. let next = this.pagination.links.next;
  829. axios.get(next)
  830. .then(response => {
  831. let self = this;
  832. let res = response.data.data;
  833. $('.postCommentsLoader').addClass('d-none');
  834. for(let i=0; i < res.length; i++) {
  835. this.results.unshift(res[i]);
  836. }
  837. this.pagination = response.data.meta.pagination;
  838. });
  839. },
  840. likeReply(status, $event) {
  841. if($('body').hasClass('loggedIn') == false) {
  842. return;
  843. }
  844. axios.post('/i/like', {
  845. item: status.id
  846. }).then(res => {
  847. status.favourites_count = res.data.count;
  848. if(status.favourited == true) {
  849. status.favourited = false;
  850. } else {
  851. status.favourited = true;
  852. }
  853. }).catch(err => {
  854. swal('Error', 'Something went wrong, please try again later.', 'error');
  855. });
  856. },
  857. truncate(str,lim) {
  858. return _.truncate(str,{
  859. length: lim
  860. });
  861. },
  862. timeAgo(ts) {
  863. let date = Date.parse(ts);
  864. let seconds = Math.floor((new Date() - date) / 1000);
  865. let interval = Math.floor(seconds / 31536000);
  866. if (interval >= 1) {
  867. return interval + "y";
  868. }
  869. interval = Math.floor(seconds / 604800);
  870. if (interval >= 1) {
  871. return interval + "w";
  872. }
  873. interval = Math.floor(seconds / 86400);
  874. if (interval >= 1) {
  875. return interval + "d";
  876. }
  877. interval = Math.floor(seconds / 3600);
  878. if (interval >= 1) {
  879. return interval + "h";
  880. }
  881. interval = Math.floor(seconds / 60);
  882. if (interval >= 1) {
  883. return interval + "m";
  884. }
  885. return Math.floor(seconds) + "s";
  886. },
  887. emojiReaction() {
  888. let em = event.target.innerText;
  889. if(this.replyText.length == 0) {
  890. this.reply_to_profile_id = this.status.account.id;
  891. this.replyText = em + ' ';
  892. $('textarea[name="comment"]').focus();
  893. } else {
  894. this.reply_to_profile_id = this.status.account.id;
  895. this.replyText += em + ' ';
  896. $('textarea[name="comment"]').focus();
  897. }
  898. },
  899. toggleCommentVisibility() {
  900. if(this.ownerOrAdmin() == false) {
  901. return;
  902. }
  903. let state = this.status.comments_disabled;
  904. let self = this;
  905. if(state == true) {
  906. // re-enable comments
  907. axios.post('/i/visibility', {
  908. item: self.status.id,
  909. disableComments: false
  910. }).then(function(res) {
  911. window.location.href = self.status.url;
  912. }).catch(function(err) {
  913. return;
  914. });
  915. } else {
  916. // disable comments
  917. axios.post('/i/visibility', {
  918. item: self.status.id,
  919. disableComments: true
  920. }).then(function(res) {
  921. self.status.comments_disabled = false;
  922. self.showComments = false;
  923. }).catch(function(err) {
  924. return;
  925. });
  926. }
  927. },
  928. fetchRelationships() {
  929. if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == false) {
  930. this.fetchData();
  931. return;
  932. } else {
  933. axios.get('/api/v1/accounts/relationships', {
  934. params: {
  935. 'id[]': this.statusProfileId
  936. }
  937. }).then(res => {
  938. if(res.data[0] == null) {
  939. this.fetchData();
  940. return;
  941. }
  942. this.relationship = res.data[0];
  943. if(res.data[0].blocking == true) {
  944. this.loaded = true;
  945. this.warning = true;
  946. return;
  947. } else {
  948. this.fetchData();
  949. return;
  950. }
  951. });
  952. }
  953. },
  954. visibilityModal() {
  955. switch(this.status.visibility) {
  956. case 'public':
  957. swal('Public Post', 'This post is visible to everyone.', 'info');
  958. break;
  959. case 'unlisted':
  960. swal('Unlisted Post', 'This post is visible on profiles and with a direct links. It is not displayed on timelines.', 'info');
  961. break;
  962. case 'private':
  963. swal('Private Post', 'This post is only visible to followers.', 'info');
  964. break;
  965. }
  966. },
  967. toggleReplies(reply) {
  968. if(reply.thread) {
  969. reply.thread = false;
  970. } else {
  971. if(reply.replies.length > 0) {
  972. reply.thread = true;
  973. return;
  974. }
  975. let url = '/api/v2/comments/'+reply.account.username+'/status/'+reply.id;
  976. axios.get(url)
  977. .then(response => {
  978. reply.replies = _.reverse(response.data.data);
  979. reply.thread = true;
  980. });
  981. }
  982. }
  983. },
  984. }
  985. </script>