RemotePost.vue 54 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524
  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 mt-n4 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"><a href="#" class="btn btn-primary font-weight-bold px-5" @click.prevent="warning = false; fetchData()">View Status</a></p>
  10. </div>
  11. </div>
  12. <div v-if="loaded && warning == false && currentLayout === 'status'" class="postComponent">
  13. <div class="container px-0">
  14. <div v-if="status.pf_type === 'text'" class="col-12 col-md-6 offset-md-3">
  15. <status-card
  16. class="border-top"
  17. :status="status"
  18. :recommended="false"
  19. v-on:comment-focus="commentFocus" />
  20. <comment-feed :status="status" class="mt-3" />
  21. </div>
  22. <div v-if="status.pf_type === 'poll'" class="col-12 col-md-6 offset-md-3">
  23. <poll-card :status="status" :profile="profile" :fetch-state="true"/>
  24. <comment-feed :status="status" class="mt-3" />
  25. </div>
  26. <div v-else class="card card-md-rounded-0 status-container orientation-unknown shadow-none border">
  27. <div class="row px-0 mx-0">
  28. <div class="d-flex d-md-none align-items-center justify-content-between card-header bg-white w-100">
  29. <div class="d-flex">
  30. <div class="status-avatar mr-2" @click="redirect(profileUrl)">
  31. <img :src="statusAvatar" width="24px" height="24px" style="border-radius:12px;" class="cursor-pointer" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">
  32. </div>
  33. <div class="username">
  34. <span class="username-link font-weight-bold text-dark cursor-pointer" @click="redirect(profileUrl)">{{ statusUsername }}</span>
  35. <span v-if="status.account.is_admin" class="fa-stack" title="Admin Account" data-toggle="tooltip" style="height:1em; line-height:1em; max-width:19px;">
  36. <i class="fas fa-certificate text-danger fa-stack-1x"></i>
  37. <i class="fas fa-crown text-white fa-sm fa-stack-1x" style="font-size:7px;"></i>
  38. </span>
  39. <p class="mb-0" style="font-size: 10px;">
  40. <span v-if="loaded && status.taggedPeople.length" class="mb-0">
  41. <span class="font-weight-light cursor-pointer" style="color:#718096" title="Tagged People" data-toggle="tooltip" data-placement="bottom" @click="showTaggedPeopleModal()"><i class="fas fa-tag text-lighter"></i> <span class="font-weight-bold">{{status.taggedPeople.length}} Tagged People</span></span>
  42. </span>
  43. <span v-if="loaded && status.place != null && status.taggedPeople.length" class="px-2 font-weight-bold text-lighter">&#8226;</span>
  44. <span v-if="loaded && status.place != null" class="mb-0 cursor-pointer text-truncate" style="color:#718096" @click="redirect('/discover/places/' + status.place.id + '/' + status.place.slug)"><i class="fas fa-map-marked-alt text-lighter"></i> <span class="font-weight-bold">{{status.place.name}}, {{status.place.country}}</span></span>
  45. </p>
  46. </div>
  47. </div>
  48. <div v-if="user != false" class="float-right">
  49. <div class="post-actions">
  50. <div>
  51. <button class="btn btn-link text-dark no-caret" title="Post options" @click="ctxMenu()">
  52. <span class="fas fa-ellipsis-v text-muted"></span>
  53. </button>
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. <div class="col-12 col-md-8 px-0 mx-0">
  59. <div class="postPresenterContainer d-none d-flex justify-content-center align-items-center" style="background: #000;">
  60. <div v-if="status.pf_type === 'photo'" class="w-100">
  61. <photo-presenter :status="status" v-on:togglecw="status.sensitive = false"></photo-presenter>
  62. </div>
  63. <div v-else-if="status.pf_type === 'video'" class="w-100">
  64. <video-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-presenter>
  65. </div>
  66. <div v-else-if="status.pf_type === 'photo:album'" class="w-100">
  67. <photo-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></photo-album-presenter>
  68. </div>
  69. <div v-else-if="status.pf_type === 'video:album'" class="w-100">
  70. <video-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-album-presenter>
  71. </div>
  72. <div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
  73. <mixed-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></mixed-album-presenter>
  74. </div>
  75. <div v-else class="w-100">
  76. <p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
  77. </div>
  78. </div>
  79. </div>
  80. <div class="col-12 col-md-4 px-0 d-flex flex-column border-left border-md-left-0">
  81. <div class="d-md-flex d-none align-items-center justify-content-between card-header py-3 bg-white">
  82. <div class="d-flex align-items-center status-username text-truncate">
  83. <div class="status-avatar mr-2" @click="redirect(profileUrl)">
  84. <img :src="statusAvatar" width="24px" height="24px" style="border-radius:12px;" class="cursor-pointer" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">
  85. </div>
  86. <div class="username">
  87. <span class="username-link font-weight-bold text-dark cursor-pointer" @click="redirect(profileUrl)">{{ statusUsername }}</span>
  88. <span v-if="status.account.is_admin" class="fa-stack" title="Admin Account" data-toggle="tooltip" style="height:1em; line-height:1em; max-width:19px;">
  89. <i class="fas fa-certificate text-danger fa-stack-1x"></i>
  90. <i class="fas fa-crown text-white fa-sm fa-stack-1x" style="font-size:7px;"></i>
  91. </span>
  92. <p class="mb-0" style="font-size: 10px;">
  93. <span v-if="loaded && status.taggedPeople.length" class="mb-0">
  94. <span class="font-weight-light cursor-pointer" style="color:#718096" title="Tagged People" data-toggle="tooltip" data-placement="bottom" @click="showTaggedPeopleModal()"><i class="fas fa-tag text-lighter"></i> <span class="font-weight-bold">{{status.taggedPeople.length}} Tagged People</span></span>
  95. </span>
  96. <span v-if="loaded && status.place != null && status.taggedPeople.length" class="px-2 font-weight-bold text-lighter">&#8226;</span>
  97. <span v-if="loaded && status.place != null" class="mb-0 cursor-pointer text-truncate" style="color:#718096" @click="redirect('/discover/places/' + status.place.id + '/' + status.place.slug)"><i class="fas fa-map-marked-alt text-lighter"></i> <span class="font-weight-bold">{{status.place.name}}, {{status.place.country}}</span></span>
  98. </p>
  99. </div>
  100. </div>
  101. <div class="float-right">
  102. <div class="post-actions">
  103. <div v-if="user != false">
  104. <button class="btn btn-link text-dark no-caret" title="Post options" @click="ctxMenu()">
  105. <span class="fas fa-ellipsis-v text-muted"></span>
  106. </button>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. <div class="d-flex flex-md-column flex-column-reverse h-100" style="overflow-y: auto;">
  112. <div class="card-body status-comments pt-0">
  113. <div class="status-comment">
  114. <div v-if="status.content.length" class="pt-3">
  115. <div v-if="status.sensitive">
  116. <span class="py-3">
  117. <a class="text-dark font-weight-bold mr-1" :href="profileUrl" v-bind:title="status.account.username">{{truncate(status.account.username,15)}}</a>
  118. <span class="text-break">
  119. <span class="font-italic text-muted">This comment may contain sensitive material</span>
  120. <span class="text-primary cursor-pointer pl-1" @click="status.sensitive = false">Show</span>
  121. </span>
  122. </span>
  123. </div>
  124. <div v-else>
  125. <p :class="[status.content.length > 620 ? 'mb-1 read-more' : 'mb-1']" style="overflow: hidden;">
  126. <a class="font-weight-bold pr-1 text-dark text-decoration-none" :href="profileUrl">{{statusUsername}}</a>
  127. <span class="comment-text" :id="status.id + '-status-readmore'" v-html="status.content"></span>
  128. </p>
  129. </div>
  130. <hr>
  131. </div>
  132. <div v-if="showComments">
  133. <div class="postCommentsLoader text-center py-2">
  134. <div class="spinner-border" role="status">
  135. <span class="sr-only">Loading...</span>
  136. </div>
  137. </div>
  138. <div class="postCommentsContainer d-none">
  139. <p class="mb-1 text-center load-more-link d-none my-4">
  140. <a href="#" class="text-dark" v-on:click="loadMore" title="Load more comments" data-toggle="tooltip" data-placement="bottom">
  141. <svg class="bi bi-plus-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="font-size:2em;"> <path fill-rule="evenodd" d="M8 3.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H4a.5.5 0 010-1h3.5V4a.5.5 0 01.5-.5z" clip-rule="evenodd"/> <path fill-rule="evenodd" d="M7.5 8a.5.5 0 01.5-.5h4a.5.5 0 010 1H8.5V12a.5.5 0 01-1 0V8z" clip-rule="evenodd"/> <path fill-rule="evenodd" d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z" clip-rule="evenodd"/></svg>
  142. </a>
  143. </p>
  144. <div class="comments mt-3">
  145. <div v-for="(reply, index) in results" class="pb-4 media" :key="'tl' + reply.id + '_' + index">
  146. <img :src="reply.account.avatar" class="rounded-circle border mr-3" width="42px" height="42px" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">
  147. <div class="media-body">
  148. <div v-if="reply.sensitive == true">
  149. <span class="py-3">
  150. <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>
  151. <span class="text-break">
  152. <span class="font-italic text-muted">This comment may contain sensitive material</span>
  153. <span class="text-primary cursor-pointer pl-1" @click="reply.sensitive = false;">Show</span>
  154. </span>
  155. </span>
  156. </div>
  157. <div v-else>
  158. <p class="d-flex justify-content-between align-items-top read-more" style="overflow-y: hidden;">
  159. <span>
  160. <a class="text-dark font-weight-bold mr-1 text-break" :href="reply.account.url" v-bind:title="reply.account.username">{{truncate(reply.account.username,15)}}</a>
  161. <span class="text-break comment-body" style="word-break: break-all;" v-html="reply.content"></span>
  162. </span>
  163. <span style="min-width:38px;">
  164. <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>
  165. <post-menu :status="reply" :profile="user" :size="'sm'" :modal="'true'" class="d-inline-block px-2" v-on:deletePost="deleteComment(reply.id, index)"></post-menu>
  166. </span>
  167. </p>
  168. <p class="">
  169. <a v-once class="text-muted mr-3 text-decoration-none small" style="width: 20px;" v-text="timeAgo(reply.created_at)" :href="permalinkUrl(reply)"></a>
  170. <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>
  171. <span class="text-muted comment-reaction font-weight-bold cursor-pointer" v-on:click="replyFocus(reply, index, true)">Reply</span>
  172. </p>
  173. <div v-if="reply.reply_count > 0" class="cursor-pointer" v-on:click="toggleReplies(reply)">
  174. <span class="show-reply-bar"></span>
  175. <span class="comment-reaction font-weight-bold text-muted">{{reply.thread ? 'Hide' : 'View'}} Replies ({{reply.reply_count}})</span>
  176. </div>
  177. <div v-if="reply.thread == true" class="comment-thread">
  178. <div v-for="(s, sindex) in reply.replies" class="pb-3 media" :key="'cr' + s.id + '_' + index">
  179. <img :src="s.account.avatar" class="rounded-circle border mr-3" width="25px" height="25px" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">
  180. <div class="media-body">
  181. <p class="d-flex justify-content-between align-items-top read-more" style="overflow-y: hidden;">
  182. <span>
  183. <a class="text-dark font-weight-bold mr-1" :href="s.account.url" :title="s.account.username">{{s.account.username}}</a>
  184. <span class="text-break comment-body" style="word-break: break-all;" v-html="s.content"></span>
  185. </span>
  186. <span class="pl-2" style="min-width:38px">
  187. <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>
  188. <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>
  189. </span>
  190. </p>
  191. <p class="">
  192. <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>
  193. <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>
  194. </p>
  195. </div>
  196. </div>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. <div v-if="reactionBarLoading" class="card-body flex-grow-0 py-4 text-center">
  207. <div class="spinner-border" role="status">
  208. <span class="sr-only">Loading...</span>
  209. </div>
  210. </div>
  211. <div v-else class="card-body flex-grow-0 py-1">
  212. <div v-if="loaded && user.hasOwnProperty('id')" class="reactions my-2 pb-1 d-flex justify-content-between">
  213. <h3 v-bind:class="[reactions.liked ? 'fas fa-heart text-danger mr-3 m-0 cursor-pointer' : 'far fa-heart pr-3 m-0 like-btn cursor-pointer']" title="Like" v-on:click="likeStatus"></h3>
  214. <h3 v-if="!status.comments_disabled" class="far fa-comment mr-3 m-0 cursor-pointer" title="Comment" v-on:click="replyFocus(status)"></h3>
  215. <h3 @click="redirect(status.media_attachments[0].url)" class="fas fa-expand m-0 mr-3 cursor-pointer"></h3>
  216. <!-- <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> -->
  217. <h3 v-if="status.visibility == 'public'" v-bind:class="[reactions.bookmarked ? 'fas fa-bookmark text-warning m-0 mr-3 cursor-pointer' : 'far fa-bookmark m-0 mr-3 cursor-pointer']" title="Bookmark" v-on:click="bookmarkStatus"></h3>
  218. <h3 v-if="status.visibility == 'public'" v-bind:class="[reactions.shared ? 'fas fa-retweet m-0 text-primary cursor-pointer' : 'fas fa-retweet m-0 share-btn cursor-pointer']" title="Share" v-on:click="shareStatus"></h3>
  219. </div>
  220. <div class="reaction-counts mb-0">
  221. <div v-if="status.liked_by.username && status.liked_by.username !== user.username" class="likes mb-1">
  222. <span class="like-count">Liked by
  223. <a class="font-weight-bold text-dark" :href="status.liked_by.url">{{status.liked_by.username}}</a>
  224. <span v-if="status.liked_by.others == true">
  225. and <span class="font-weight-bold text-dark cursor-pointer" @click="likesModal"><span v-if="status.liked_by.total_count_pretty">{{status.liked_by.total_count_pretty}}</span> others</span>
  226. </span>
  227. </span>
  228. </div>
  229. </div>
  230. <div class="timestamp pt-2 d-flex align-items-bottom justify-content-between">
  231. <a v-bind:href="statusUrl" class="small text-muted" :title="status.created_at">
  232. {{timestampFormat()}}
  233. </a>
  234. <span class="small text-muted text-capitalize cursor-pointer" v-on:click="visibilityModal">{{status.visibility}}</span>
  235. </div>
  236. </div>
  237. </div>
  238. <div v-if="showComments" class="card-footer bg-white sticky-md-bottom p-0">
  239. <div v-if="user.length == 0" class="comment-form-guest p-3">
  240. <a href="/login">Login</a> to like or comment.
  241. </div>
  242. <form v-else class="border-0 rounded-0 align-middle" method="post" action="/i/comment" :data-id="statusId" data-truncate="false">
  243. <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;" @click="replyFocus(status)"></textarea>
  244. <input type="button" value="Post" class="d-inline-block btn btn-link font-weight-bold reply-btn text-decoration-none" disabled/>
  245. </form>
  246. </div>
  247. </div>
  248. </div>
  249. </div>
  250. <div class="container" v-if="showProfileMorePosts">
  251. <p class="text-lighter px-3 mt-5" style="font-weight: 600;font-size: 15px;">More posts from <a :href="profileUrl" class="text-dark">{{this.statusUsername}}</a></p>
  252. <div class="profile-timeline mt-md-4">
  253. <div class="row">
  254. <div class="col-4 p-1 p-md-3" v-for="(s, index) in profileMorePosts" :key="'tlob:'+index">
  255. <a class="card info-overlay card-md-border-0" :href="getStatusUrl(s)" v-once>
  256. <div :class="[s.sensitive ? 'square' : 'square ' + s.media_attachments[0].filter_class]">
  257. <span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
  258. <span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
  259. <span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
  260. <div class="square-content" v-bind:style="previewBackground(s)">
  261. </div>
  262. <div class="info-overlay-text">
  263. <h5 class="text-white m-auto font-weight-bold">
  264. <span>
  265. <span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
  266. <span class="d-flex-inline">{{s.favourites_count}}</span>
  267. </span>
  268. <span>
  269. <span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
  270. <span class="d-flex-inline">{{s.reblogs_count}}</span>
  271. </span>
  272. </h5>
  273. </div>
  274. </div>
  275. </a>
  276. </div>
  277. </div>
  278. </div>
  279. </div>
  280. </div>
  281. </div>
  282. <comment-card
  283. v-if="currentLayout === 'comments'"
  284. :status="status"
  285. :profile="profile"
  286. v-on:current-layout="setCurrentLayout"
  287. :backToStatus="true"
  288. />
  289. <b-modal ref="likesModal"
  290. id="l-modal"
  291. hide-footer
  292. centered
  293. title="Likes"
  294. body-class="list-group-flush py-3 px-0">
  295. <div class="list-group">
  296. <div class="list-group-item border-0 py-1" v-for="(user, index) in likes" :key="'modal_likes_'+index">
  297. <div class="media">
  298. <a :href="user.url">
  299. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">
  300. </a>
  301. <div class="media-body">
  302. <p class="mb-0" style="font-size: 14px">
  303. <a :href="user.url" class="font-weight-bold text-dark">
  304. {{user.username}}
  305. </a>
  306. </p>
  307. <p v-if="!user.local" class="text-muted mb-0 text-truncate mr-3" style="font-size: 14px" :title="user.acct" data-toggle="dropdown" data-placement="bottom">
  308. <span class="font-weight-bold">{{user.acct.split('@')[0]}}</span><span class="text-lighter">&commat;{{user.acct.split('@')[1]}}</span>
  309. </p>
  310. <p v-else class="text-muted mb-0 text-truncate" style="font-size: 14px">
  311. {{user.display_name}}
  312. </p>
  313. </div>
  314. </div>
  315. </div>
  316. <infinite-loading @infinite="infiniteLikesHandler" spinner="spiral">
  317. <div slot="no-more"></div>
  318. <div slot="no-results"></div>
  319. </infinite-loading>
  320. </div>
  321. </b-modal>
  322. <b-modal ref="sharesModal"
  323. id="s-modal"
  324. hide-footer
  325. centered
  326. title="Shares"
  327. body-class="list-group-flush py-3 px-0">
  328. <div class="list-group">
  329. <div class="list-group-item border-0 py-1" v-for="(user, index) in shares" :key="'modal_shares_'+index">
  330. <div class="media">
  331. <a :href="user.url">
  332. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">
  333. </a>
  334. <div class="media-body">
  335. <div class="d-inline-block">
  336. <p class="mb-0" style="font-size: 14px">
  337. <a :href="user.url" class="font-weight-bold text-dark">
  338. {{user.username}}
  339. </a>
  340. </p>
  341. <p class="text-muted mb-0" style="font-size: 14px">
  342. {{user.display_name}}
  343. </a>
  344. </p>
  345. </div>
  346. <p class="float-right"><!-- <a class="btn btn-primary font-weight-bold py-1" href="#">Follow</a> --></p>
  347. </div>
  348. </div>
  349. </div>
  350. <infinite-loading @infinite="infiniteSharesHandler" spinner="spiral">
  351. <div slot="no-more"></div>
  352. <div slot="no-results"></div>
  353. </infinite-loading>
  354. </div>
  355. </b-modal>
  356. <b-modal ref="taggedModal"
  357. id="tagged-modal"
  358. hide-footer
  359. centered
  360. title="Tagged People"
  361. body-class="list-group-flush py-3 px-0">
  362. <div class="list-group">
  363. <div class="list-group-item border-0 py-1" v-for="(taguser, index) in status.taggedPeople" :key="'modal_taggedpeople_'+index">
  364. <div class="media">
  365. <a :href="'/'+taguser.username">
  366. <img class="mr-3 rounded-circle box-shadow" :src="taguser.avatar" :alt="taguser.username + '’s avatar'" width="30px" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">
  367. </a>
  368. <div class="media-body">
  369. <p class="pt-1 d-flex justify-content-between" style="font-size: 14px">
  370. <a :href="'/'+taguser.username" class="font-weight-bold text-dark">
  371. {{taguser.username}}
  372. </a>
  373. <button v-if="taguser.id == user.id" class="btn btn-outline-primary btn-sm py-1 px-3" @click="untagMe()">Untag Me</button>
  374. </p>
  375. </div>
  376. </div>
  377. </div>
  378. </div>
  379. <p class="mb-0 text-center small text-muted font-weight-bold"><a href="/site/kb/tagging-people">Learn more</a> about Tagging People.</p>
  380. </b-modal>
  381. <b-modal ref="ctxModal"
  382. id="ctx-modal"
  383. hide-header
  384. hide-footer
  385. centered
  386. rounded
  387. size="sm"
  388. body-class="list-group-flush p-0 rounded">
  389. <div class="list-group text-center">
  390. <div v-if="user && user.id != status.account.id && relationship && relationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuUnfollow()">Unfollow</div>
  391. <div v-if="user && user.id != status.account.id && relationship && !relationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-primary" @click="ctxMenuFollow()">Follow</div>
  392. <div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div>
  393. <div v-if="status && user.id == status.account.id" class="list-group-item rounded cursor-pointer" @click="toggleCommentVisibility">{{ showComments ? 'Disable' : 'Enable'}} Comments</div>
  394. <a v-if="status && user.id == status.account.id" class="list-group-item rounded cursor-pointer text-dark text-decoration-none" :href="editUrl()">Edit</a>
  395. <div v-if="user && user.is_admin == true" class="list-group-item rounded cursor-pointer" @click="ctxModMenu()">ModTools</div>
  396. <div v-if="status && user.id != status.account.id && !relationship.blocking && !user.is_admin" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="blockProfile()">Block</div>
  397. <div v-if="status && user.id != status.account.id && relationship.blocking && !user.is_admin" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="unblockProfile()">Unblock</div>
  398. <a v-if="user && user.id != status.account.id && !user.is_admin" class="list-group-item rounded cursor-pointer font-weight-bold text-danger text-decoration-none" :href="reportUrl()">Report</a>
  399. <div v-if="status && (user.is_admin || user.id == status.account.id)" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="deletePost(ctxMenuStatus)">Delete</div>
  400. <div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxMenu()">Cancel</div>
  401. </div>
  402. </b-modal>
  403. <b-modal ref="ctxModModal"
  404. id="ctx-mod-modal"
  405. hide-header
  406. hide-footer
  407. centered
  408. rounded
  409. size="sm"
  410. body-class="list-group-flush p-0 rounded">
  411. <div class="list-group text-center">
  412. <div class="list-group-item rounded cursor-pointer" @click="toggleCommentVisibility">{{ showComments ? 'Disable' : 'Enable'}} Comments</div>
  413. <div class="list-group-item rounded cursor-pointer" @click="moderatePost('unlist')">Unlist from Timelines</div>
  414. <div v-if="status.sensitive" class="list-group-item rounded cursor-pointer" @click="moderatePost('remcw')">Remove Content Warning</div>
  415. <div v-else class="list-group-item rounded cursor-pointer" @click="moderatePost('addcw')">Add Content Warning</div>
  416. <div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxModMenuClose()">Cancel</div>
  417. </div>
  418. </b-modal>
  419. <b-modal ref="replyModal"
  420. id="ctx-reply-modal"
  421. hide-footer
  422. centered
  423. rounded
  424. :title-html="replyingToUsername ? 'Reply to <span class=text-dark>' + replyingToUsername + '</span>' : ''"
  425. title-tag="p"
  426. title-class="font-weight-bold text-muted"
  427. size="md"
  428. body-class="p-2 rounded">
  429. <div>
  430. <textarea class="form-control" rows="4" style="border: none; font-size: 18px; resize: none; white-space: pre-wrap;outline: none;" placeholder="Reply here ..." v-model="replyText">
  431. </textarea>
  432. <div class="border-top border-bottom my-2">
  433. <ul class="nav align-items-center emoji-reactions" style="overflow-x: scroll;flex-wrap: unset;">
  434. <li class="nav-item" v-on:click="emojiReaction(status)" v-for="e in emoji">{{e}}</li>
  435. </ul>
  436. </div>
  437. <div class="d-flex justify-content-between align-items-center">
  438. <div>
  439. <span class="pl-2 small text-muted font-weight-bold text-monospace">
  440. <span :class="[replyText.length > config.uploader.max_caption_length ? 'text-danger':'text-dark']">{{replyText.length > config.uploader.max_caption_length ? config.uploader.max_caption_length - replyText.length : replyText.length}}</span>/{{config.uploader.max_caption_length}}
  441. </span>
  442. </div>
  443. <div class="d-flex align-items-center">
  444. <div class="custom-control custom-switch mr-3">
  445. <input type="checkbox" class="custom-control-input" id="replyModalCWSwitch" v-model="replySensitive">
  446. <label :class="[replySensitive ? 'custom-control-label font-weight-bold text-dark':'custom-control-label text-lighter']" for="replyModalCWSwitch">Mark as NSFW</label>
  447. </div>
  448. <!-- <select class="custom-select custom-select-sm my-0 mr-2">
  449. <option value="public" selected="">Public</option>
  450. <option value="unlisted">Unlisted</option>
  451. <option value="followers">Followers Only</option>
  452. </select> -->
  453. <button class="btn btn-primary btn-sm py-2 px-4 lead text-uppercase font-weight-bold" v-on:click.prevent="postReply()" :disabled="replyText.length == 0">
  454. {{replySending == true ? 'POSTING' : 'POST'}}
  455. </button>
  456. </div>
  457. </div>
  458. </div>
  459. </b-modal>
  460. </div>
  461. </template>
  462. <style type="text/css" scoped>
  463. .status-comments,
  464. .reactions {
  465. background: #fff;
  466. }
  467. .postPresenterContainer {
  468. background: #fff;
  469. }
  470. @media(min-width: 720px) {
  471. .postPresenterContainer {
  472. min-height: 600px;
  473. }
  474. }
  475. ::-webkit-scrollbar {
  476. width: 0px;
  477. background: transparent;
  478. }
  479. .reply-btn {
  480. position: absolute;
  481. bottom: 12px;
  482. right: 20px;
  483. width: 60px;
  484. text-align: center;
  485. border-radius: 0 3px 3px 0;
  486. }
  487. .text-lighter {
  488. color:#B8C2CC !important;
  489. }
  490. .text-break {
  491. overflow-wrap: break-word;
  492. }
  493. .comments p {
  494. margin-bottom: 0;
  495. }
  496. .comment-reaction {
  497. font-size: 80%;
  498. }
  499. .show-reply-bar {
  500. display: inline-block;
  501. border-bottom: 1px solid #999;
  502. height: 0;
  503. margin-right: 16px;
  504. vertical-align: middle;
  505. width: 24px;
  506. }
  507. .comment-thread {
  508. margin-top: 1rem;
  509. }
  510. .emoji-reactions .nav-item {
  511. font-size: 1.2rem;
  512. padding: 9px;
  513. cursor: pointer;
  514. }
  515. .emoji-reactions::-webkit-scrollbar {
  516. width: 0px;
  517. height: 0px;
  518. background: transparent;
  519. }
  520. @media (min-width: 1200px) {
  521. .container {
  522. max-width: 1100px;
  523. }
  524. }
  525. </style>
  526. <script>
  527. pixelfed.postComponent = {};
  528. import StatusCard from './partials/StatusCard.vue';
  529. import CommentCard from './partials/CommentCard.vue';
  530. import PollCard from './partials/PollCard.vue';
  531. import CommentFeed from './partials/CommentFeed.vue';
  532. export default {
  533. props: [
  534. 'status-id',
  535. 'status-username',
  536. 'status-template',
  537. 'status-url',
  538. 'status-profile-url',
  539. 'status-avatar',
  540. 'status-profile-id',
  541. 'profile-layout'
  542. ],
  543. components: {
  544. StatusCard,
  545. CommentCard,
  546. CommentFeed,
  547. PollCard
  548. },
  549. data() {
  550. return {
  551. config: window.App.config,
  552. status: false,
  553. media: {},
  554. user: false,
  555. profile: false,
  556. reactions: {
  557. liked: false,
  558. shared: false
  559. },
  560. likes: [],
  561. likesPage: 1,
  562. shares: [],
  563. sharesPage: 1,
  564. replyText: '',
  565. replyStatus: {},
  566. replySensitive: false,
  567. relationship: {},
  568. results: [],
  569. pagination: {},
  570. min_id: 0,
  571. max_id: 0,
  572. reply_to_profile_id: 0,
  573. thread: false,
  574. showComments: false,
  575. warning: false,
  576. loaded: false,
  577. loading: null,
  578. replyingToId: this.statusId,
  579. replyingToUsername: this.statusUsername,
  580. replyToIndex: 0,
  581. replySending: false,
  582. emoji: window.App.util.emoji,
  583. showReadMore: true,
  584. showCaption: true,
  585. layout: this.profileLayout,
  586. showProfileMorePosts: false,
  587. profileMorePosts: [],
  588. replySending: false,
  589. reactionBarLoading: true,
  590. profileUrl: null,
  591. currentLayout: 'status'
  592. }
  593. },
  594. mounted() {
  595. axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
  596. this.profile = res.data;
  597. });
  598. this.fetchRelationships();
  599. if(localStorage.getItem('pf_metro_ui.exp.rm') == 'false') {
  600. this.showReadMore = false;
  601. } else {
  602. this.showReadMore = true;
  603. }
  604. },
  605. updated() {
  606. $('.carousel').carousel();
  607. $('[data-toggle="tooltip"]').tooltip();
  608. if(this.showReadMore == true) {
  609. window.pixelfed.readmore();
  610. }
  611. document.querySelectorAll('.hashtag').forEach(function(i, e) {
  612. i.href = App.util.format.rewriteLinks(i);
  613. });
  614. },
  615. methods: {
  616. reportUrl() {
  617. return '/i/report?type=post&id=' + this.status.id;
  618. },
  619. editUrl() {
  620. return this.status.url + '/edit';
  621. },
  622. timestampFormat() {
  623. let ts = new Date(this.status.created_at);
  624. return ts.toDateString() + ' · ' + ts.toLocaleTimeString();
  625. },
  626. fetchData() {
  627. let self = this;
  628. axios.get('/api/v2/profile/'+this.statusUsername+'/status/'+this.statusId)
  629. .then(response => {
  630. self.status = response.data.status;
  631. self.media = self.status.media_attachments;
  632. self.likesPage = 2;
  633. self.sharesPage = 2;
  634. self.showCaption = !response.data.status.sensitive;
  635. if(self.status.comments_disabled == false) {
  636. self.showComments = true;
  637. this.fetchComments();
  638. }
  639. self.profileUrl = '/i/web/profile/_/' + response.data.status.account.id;
  640. this.loaded = true;
  641. // setTimeout(function() {
  642. // self.fetchProfilePosts();
  643. // }, 3000);
  644. setTimeout(function() {
  645. self.fetchState();
  646. document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) {
  647. i.href = App.util.format.rewriteLinks(i);
  648. });
  649. }, 500);
  650. }).catch(error => {
  651. swal('Oops!', 'An error occured, please try refreshing the page.', 'error');
  652. });
  653. },
  654. fetchState() {
  655. let self = this;
  656. axios.get('/api/v2/profile/'+this.statusUsername+'/status/'+this.statusId+'/state')
  657. .then(res => {
  658. self.user = res.data.user;
  659. window._sharedData.curUser = self.user;
  660. window.App.util.navatar();
  661. self.likes = res.data.likes;
  662. self.shares = res.data.shares;
  663. self.reactions = res.data.reactions;
  664. self.reactionBarLoading = false;
  665. });
  666. },
  667. likesModal() {
  668. if($('body').hasClass('loggedIn') == false) {
  669. window.location.href = '/login?next=' + encodeURIComponent('/p/' + this.status.shortcode);
  670. return;
  671. }
  672. if(this.likes.length) {
  673. this.$refs.likesModal.show();
  674. return;
  675. }
  676. axios.get('/api/v2/likes/profile/'+this.statusUsername+'/status/'+this.statusId)
  677. .then(res => {
  678. this.likes = res.data.data;
  679. this.$refs.likesModal.show();
  680. });
  681. },
  682. sharesModal() {
  683. if(this.status.reblogs_count == 0 || $('body').hasClass('loggedIn') == false) {
  684. window.location.href = '/login?next=' + encodeURIComponent('/p/' + this.status.shortcode);
  685. return;
  686. }
  687. if(this.shares.length) {
  688. this.$refs.sharesModal.show();
  689. return;
  690. }
  691. axios.get('/api/v2/shares/profile/'+this.statusUsername+'/status/'+this.statusId)
  692. .then(res => {
  693. this.shares = res.data.data;
  694. this.$refs.sharesModal.show();
  695. });
  696. },
  697. infiniteLikesHandler($state) {
  698. let api = '/api/v2/likes/profile/'+this.statusUsername+'/status/'+this.statusId;
  699. axios.get(api, {
  700. params: {
  701. page: this.likesPage,
  702. },
  703. }).then(({ data }) => {
  704. if (data.data.length > 0) {
  705. this.likes.push(...data.data);
  706. this.likesPage++;
  707. $state.loaded();
  708. } else {
  709. $state.complete();
  710. }
  711. });
  712. },
  713. infiniteSharesHandler($state) {
  714. axios.get('/api/v2/shares/profile/'+this.statusUsername+'/status/'+this.statusId, {
  715. params: {
  716. page: this.sharesPage,
  717. },
  718. }).then(({ data }) => {
  719. if (data.data.length > 0) {
  720. this.shares.push(...data.data);
  721. this.sharesPage++;
  722. $state.loaded();
  723. } else {
  724. $state.complete();
  725. }
  726. });
  727. },
  728. likeStatus(event) {
  729. if($('body').hasClass('loggedIn') == false) {
  730. window.location.href = '/login?next=' + encodeURIComponent(window.location.pathname);
  731. return;
  732. }
  733. axios.post('/i/like', {
  734. item: this.status.id
  735. }).then(res => {
  736. this.status.favourites_count = res.data.count;
  737. if(this.reactions.liked == true) {
  738. this.reactions.liked = false;
  739. let user = this.user.id;
  740. this.likes = this.likes.filter(function(like) {
  741. return like.id !== user;
  742. });
  743. } else {
  744. this.reactions.liked = true;
  745. let user = this.user;
  746. this.likes.unshift(user);
  747. setTimeout(function() {
  748. event.target.classList.add('animate__animated', 'animate__bounce');
  749. },100);
  750. }
  751. }).catch(err => {
  752. console.error(err);
  753. swal('Error', 'Something went wrong, please try again later.', 'error');
  754. });
  755. window.navigator.vibrate(200);
  756. },
  757. shareStatus() {
  758. if($('body').hasClass('loggedIn') == false) {
  759. window.location.href = '/login?next=' + encodeURIComponent(window.location.pathname);
  760. return;
  761. }
  762. axios.post('/i/share', {
  763. item: this.status.id
  764. }).then(res => {
  765. this.status.reblogs_count = res.data.count;
  766. if(this.reactions.shared == true) {
  767. this.reactions.shared = false;
  768. let user = this.user.id;
  769. this.shares = this.shares.filter(function(reaction) {
  770. return reaction.id !== user;
  771. });
  772. } else {
  773. this.reactions.shared = true;
  774. let user = this.user;
  775. this.shares.push(user);
  776. }
  777. }).catch(err => {
  778. console.error(err);
  779. swal('Error', 'Something went wrong, please try again later.', 'error');
  780. });
  781. },
  782. bookmarkStatus() {
  783. if($('body').hasClass('loggedIn') == false) {
  784. window.location.href = '/login?next=' + encodeURIComponent(window.location.pathname);
  785. return;
  786. }
  787. axios.post('/i/bookmark', {
  788. item: this.status.id
  789. }).then(res => {
  790. if(this.reactions.bookmarked == true) {
  791. this.reactions.bookmarked = false;
  792. } else {
  793. this.reactions.bookmarked = true;
  794. }
  795. }).catch(err => {
  796. swal('Error', 'Something went wrong, please try again later.', 'error');
  797. });
  798. },
  799. blockProfile() {
  800. if($('body').hasClass('loggedIn') == false) {
  801. return;
  802. }
  803. axios.post('/i/block', {
  804. type: 'user',
  805. item: this.status.account.id
  806. }).then(res => {
  807. this.$refs.ctxModal.hide();
  808. this.relationship.blocking = true;
  809. swal('Success', 'You have successfully blocked ' + this.status.account.acct, 'success');
  810. }).catch(err => {
  811. swal('Error', 'Something went wrong. Please try again later.', 'error');
  812. });
  813. },
  814. unblockProfile() {
  815. if($('body').hasClass('loggedIn') == false) {
  816. return;
  817. }
  818. axios.post('/i/unblock', {
  819. type: 'user',
  820. item: this.status.account.id
  821. }).then(res => {
  822. this.relationship.blocking = false;
  823. this.$refs.ctxModal.hide();
  824. swal('Success', 'You have successfully unblocked ' + this.status.account.acct, 'success');
  825. }).catch(err => {
  826. swal('Error', 'Something went wrong. Please try again later.', 'error');
  827. });
  828. },
  829. deletePost(status) {
  830. if(!this.ownerOrAdmin()) {
  831. return;
  832. }
  833. var result = confirm('Are you sure you want to delete this post?');
  834. if (result) {
  835. if($('body').hasClass('loggedIn') == false) {
  836. return;
  837. }
  838. axios.post('/i/delete', {
  839. type: 'status',
  840. item: this.status.id
  841. }).then(res => {
  842. swal('Success', 'You have successfully deleted this post', 'success');
  843. setTimeout(function() {
  844. window.location.href = '/';
  845. }, 3000);
  846. }).catch(err => {
  847. swal('Error', 'Something went wrong. Please try again later.', 'error');
  848. });
  849. }
  850. },
  851. owner() {
  852. return this.user.id === this.status.account.id;
  853. },
  854. admin() {
  855. return this.user.is_admin == true;
  856. },
  857. ownerOrAdmin() {
  858. return this.owner() || this.admin();
  859. },
  860. postReply() {
  861. let self = this;
  862. this.replySending = true;
  863. if(this.replyText.length == 0 ||
  864. this.replyText.trim() == '@'+this.status.account.acct) {
  865. self.replyText = null;
  866. $('textarea[name="comment"]').blur();
  867. return;
  868. }
  869. let data = {
  870. item: this.replyingToId,
  871. comment: this.replyText,
  872. sensitive: this.replySensitive
  873. }
  874. this.replyText = '';
  875. axios.post('/i/comment', data)
  876. .then(function(res) {
  877. let entity = res.data.entity;
  878. if(entity.in_reply_to_id == self.status.id) {
  879. if(self.layout == 'metro') {
  880. self.results.push(entity);
  881. } else {
  882. self.results.unshift(entity);
  883. }
  884. let elem = $('.status-comments')[0];
  885. elem.scrollTop = elem.clientHeight * 2;
  886. } else {
  887. if(self.replyToIndex >= 0) {
  888. let el = self.results[self.replyToIndex];
  889. el.replies.push(entity);
  890. el.reply_count = el.reply_count + 1;
  891. }
  892. }
  893. self.$refs.replyModal.hide();
  894. self.replySending = false;
  895. });
  896. },
  897. deleteComment(id, i) {
  898. axios.post('/i/delete', {
  899. type: 'comment',
  900. item: id
  901. }).then(res => {
  902. this.results.splice(i, 1);
  903. }).catch(err => {
  904. swal('Something went wrong!', 'Please try again later', 'error');
  905. });
  906. },
  907. deleteCommentReply(id, i, pi) {
  908. axios.post('/i/delete', {
  909. type: 'comment',
  910. item: id
  911. }).then(res => {
  912. this.results[pi].replies.splice(i, 1);
  913. --this.results[pi].reply_count;
  914. }).catch(err => {
  915. swal('Something went wrong!', 'Please try again later', 'error');
  916. });
  917. },
  918. l(e) {
  919. let len = e.length;
  920. if(len < 10) { return e; }
  921. return e.substr(0, 10)+'...';
  922. },
  923. replyFocus(e, index, prependUsername = false) {
  924. if($('body').hasClass('loggedIn') == false) {
  925. this.redirect('/login?next=' + encodeURIComponent(window.location.pathname));
  926. return;
  927. }
  928. if(this.status.comments_disabled) {
  929. return;
  930. }
  931. this.replyToIndex = index;
  932. this.replyingToId = e.id;
  933. this.replyingToUsername = e.account.username;
  934. this.reply_to_profile_id = e.account.id;
  935. let username = e.account.local ? '@' + e.account.username + ' '
  936. : '@' + e.account.acct + ' ';
  937. if(prependUsername == true) {
  938. this.replyText = username;
  939. }
  940. this.$refs.replyModal.show();
  941. },
  942. fetchComments() {
  943. let url = '/api/v2/comments/'+this.statusProfileId+'/status/'+this.statusId;
  944. axios.get(url)
  945. .then(response => {
  946. let self = this;
  947. this.results = this.layout == 'metro' ?
  948. _.reverse(response.data.data) :
  949. response.data.data;
  950. this.pagination = response.data.meta.pagination;
  951. if(this.results.length > 0) {
  952. $('.load-more-link').removeClass('d-none');
  953. }
  954. $('.postCommentsLoader').addClass('d-none');
  955. $('.postCommentsContainer').removeClass('d-none');
  956. setTimeout(function() {
  957. document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) {
  958. i.href = App.util.format.rewriteLinks(i);
  959. });
  960. }, 500);
  961. }).catch(error => {
  962. if(!error.response) {
  963. $('.postCommentsLoader .lds-ring')
  964. .attr('style','width:100%')
  965. .addClass('pt-4 font-weight-bold text-muted')
  966. .text('An error occurred, cannot fetch comments. Please try again later.');
  967. } else {
  968. switch(error.response.status) {
  969. case 401:
  970. $('.postCommentsLoader .lds-ring')
  971. .attr('style','width:100%')
  972. .addClass('pt-4 font-weight-bold text-muted')
  973. .text('Please login to view.');
  974. break;
  975. default:
  976. $('.postCommentsLoader .lds-ring')
  977. .attr('style','width:100%')
  978. .addClass('pt-4 font-weight-bold text-muted')
  979. .text('An error occurred, cannot fetch comments. Please try again later.');
  980. break;
  981. }
  982. }
  983. });
  984. },
  985. loadMore(e) {
  986. e.preventDefault();
  987. if(this.pagination.total_pages == 1 || this.pagination.current_page == this.pagination.total_pages) {
  988. $('.load-more-link').addClass('d-none');
  989. return;
  990. }
  991. $('.load-more-link').addClass('d-none');
  992. $('.postCommentsLoader').removeClass('d-none');
  993. let next = this.pagination.links.next;
  994. axios.get(next)
  995. .then(response => {
  996. let self = this;
  997. let res = response.data.data;
  998. $('.postCommentsLoader').addClass('d-none');
  999. for(let i=0; i < res.length; i++) {
  1000. this.results.unshift(res[i]);
  1001. }
  1002. this.pagination = response.data.meta.pagination;
  1003. $('.load-more-link').removeClass('d-none');
  1004. });
  1005. },
  1006. likeReply(status, $event) {
  1007. if($('body').hasClass('loggedIn') == false) {
  1008. swal('Login', 'Please login to perform this action.', 'info');
  1009. return;
  1010. }
  1011. axios.post('/i/like', {
  1012. item: status.id
  1013. }).then(res => {
  1014. status.favourites_count = res.data.count;
  1015. if(status.favourited == true) {
  1016. status.favourited = false;
  1017. } else {
  1018. status.favourited = true;
  1019. }
  1020. }).catch(err => {
  1021. swal('Error', 'Something went wrong, please try again later.', 'error');
  1022. });
  1023. },
  1024. truncate(str,lim) {
  1025. return _.truncate(str,{
  1026. length: lim
  1027. });
  1028. },
  1029. timeAgo(ts) {
  1030. return App.util.format.timeAgo(ts);
  1031. },
  1032. emojiReaction() {
  1033. let em = event.target.innerText;
  1034. if(this.replyText.length == 0) {
  1035. this.reply_to_profile_id = this.status.account.id;
  1036. this.replyText = em + ' ';
  1037. $('textarea[name="comment"]').focus();
  1038. } else {
  1039. this.reply_to_profile_id = this.status.account.id;
  1040. this.replyText += em + ' ';
  1041. $('textarea[name="comment"]').focus();
  1042. }
  1043. },
  1044. toggleCommentVisibility() {
  1045. if(this.ownerOrAdmin() == false) {
  1046. return;
  1047. }
  1048. let state = this.status.comments_disabled;
  1049. let self = this;
  1050. if(state == true) {
  1051. // re-enable comments
  1052. axios.post('/i/visibility', {
  1053. item: self.status.id,
  1054. disableComments: false
  1055. }).then(function(res) {
  1056. self.status.comments_disabled = false;
  1057. self.$refs.ctxModal.hide();
  1058. window.location.reload();
  1059. }).catch(function(err) {
  1060. return;
  1061. });
  1062. } else {
  1063. // disable comments
  1064. axios.post('/i/visibility', {
  1065. item: self.status.id,
  1066. disableComments: true
  1067. }).then(function(res) {
  1068. self.status.comments_disabled = true;
  1069. self.showComments = false;
  1070. self.$refs.ctxModal.hide();
  1071. }).catch(function(err) {
  1072. return;
  1073. });
  1074. }
  1075. },
  1076. fetchRelationships() {
  1077. if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == false) {
  1078. this.fetchData();
  1079. return;
  1080. } else {
  1081. axios.get('/api/pixelfed/v1/accounts/relationships', {
  1082. params: {
  1083. 'id[]': this.statusProfileId
  1084. }
  1085. }).then(res => {
  1086. if(res.data[0] == null) {
  1087. this.fetchData();
  1088. return;
  1089. }
  1090. this.relationship = res.data[0];
  1091. if(res.data[0].blocking == true) {
  1092. this.loaded = true;
  1093. this.warning = true;
  1094. return;
  1095. } else {
  1096. this.fetchData();
  1097. return;
  1098. }
  1099. });
  1100. }
  1101. },
  1102. visibilityModal() {
  1103. switch(this.status.visibility) {
  1104. case 'public':
  1105. swal('Public Post', 'This post is visible to everyone.', 'info');
  1106. break;
  1107. case 'unlisted':
  1108. swal('Unlisted Post', 'This post is visible on profiles and with a direct links. It is not displayed on timelines.', 'info');
  1109. break;
  1110. case 'private':
  1111. swal('Private Post', 'This post is only visible to followers.', 'info');
  1112. break;
  1113. }
  1114. },
  1115. toggleReplies(reply) {
  1116. if(reply.thread) {
  1117. reply.thread = false;
  1118. } else {
  1119. if(reply.replies.length > 0) {
  1120. reply.thread = true;
  1121. return;
  1122. }
  1123. let url = '/api/v2/comments/'+reply.account.id+'/status/'+reply.id;
  1124. axios.get(url)
  1125. .then(response => {
  1126. reply.replies = _.reverse(response.data.data);
  1127. reply.thread = true;
  1128. });
  1129. }
  1130. },
  1131. redirect(url) {
  1132. window.location.href = url;
  1133. },
  1134. permalinkUrl(reply, showOrigin = false) {
  1135. let profile = reply.account;
  1136. if(profile.local == true) {
  1137. return reply.url;
  1138. } else {
  1139. return showOrigin ?
  1140. reply.url :
  1141. '/i/web/post/_/' + profile.id + '/' + reply.id;
  1142. }
  1143. },
  1144. fetchProfilePosts() {
  1145. if(!$('body').hasClass('loggedIn') && this.loaded) {
  1146. return;
  1147. }
  1148. let self = this;
  1149. let apiUrl = '/api/pixelfed/v1/accounts/' + this.statusProfileId + '/statuses';
  1150. axios.get(apiUrl, {
  1151. params: {
  1152. only_media: true,
  1153. min_id: 1,
  1154. limit: 9
  1155. }
  1156. })
  1157. .then(res => {
  1158. let data = res.data.filter(function(status) {
  1159. return status.media_attachments.length > 0 &&
  1160. status.id != self.statusId &&
  1161. status.sensitive == false
  1162. });
  1163. let ids = data.map(status => status.id);
  1164. // if(data.length >= 3) {
  1165. // self.showProfileMorePosts = true;
  1166. // }
  1167. self.profileMorePosts = data.slice(0,6);
  1168. })
  1169. },
  1170. previewUrl(status) {
  1171. return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url;
  1172. },
  1173. previewBackground(status) {
  1174. let preview = this.previewUrl(status);
  1175. return 'background-image: url(' + preview + ');';
  1176. },
  1177. getStatusUrl(status, showOrigin = false) {
  1178. if(status.local == true || showOrigin == true) {
  1179. return status.url;
  1180. }
  1181. return '/i/web/post/_/' + status.account.id + '/' + status.id;
  1182. },
  1183. showTaggedPeopleModal() {
  1184. if(!$('body').hasClass('loggedIn') && this.loaded) {
  1185. return;
  1186. }
  1187. this.$refs.taggedModal.show();
  1188. },
  1189. untagMe() {
  1190. this.$refs.taggedModal.hide();
  1191. let id = this.user.id;
  1192. axios.post('/api/local/compose/tag/untagme', {
  1193. status_id: this.statusId,
  1194. profile_id: id
  1195. }).then(res => {
  1196. this.status.taggedPeople = this.status.taggedPeople.filter(t => {
  1197. return t.id != id;
  1198. });
  1199. swal('Untagged', 'You have been untagged from this post.', 'success');
  1200. }).catch(err => {
  1201. swal('An Error Occurred', 'Please try again later.', 'error');
  1202. });
  1203. },
  1204. copyPostUrl() {
  1205. navigator.clipboard.writeText(this.statusUrl);
  1206. return;
  1207. },
  1208. moderatePost(action, $event) {
  1209. let status = this.status;
  1210. let username = status.account.username;
  1211. let msg = '';
  1212. let self = this;
  1213. switch(action) {
  1214. case 'addcw':
  1215. msg = 'Are you sure you want to add a content warning to this post?';
  1216. swal({
  1217. title: 'Confirm',
  1218. text: msg,
  1219. icon: 'warning',
  1220. buttons: true,
  1221. dangerMode: true
  1222. }).then(res => {
  1223. if(res) {
  1224. axios.post('/api/v2/moderator/action', {
  1225. action: action,
  1226. item_id: status.id,
  1227. item_type: 'status'
  1228. }).then(res => {
  1229. swal('Success', 'Successfully added content warning', 'success');
  1230. status.sensitive = true;
  1231. self.ctxModMenuClose();
  1232. }).catch(err => {
  1233. swal(
  1234. 'Error',
  1235. 'Something went wrong, please try again later.',
  1236. 'error'
  1237. );
  1238. self.ctxModMenuClose();
  1239. });
  1240. }
  1241. });
  1242. break;
  1243. case 'remcw':
  1244. msg = 'Are you sure you want to remove the content warning on this post?';
  1245. swal({
  1246. title: 'Confirm',
  1247. text: msg,
  1248. icon: 'warning',
  1249. buttons: true,
  1250. dangerMode: true
  1251. }).then(res => {
  1252. if(res) {
  1253. axios.post('/api/v2/moderator/action', {
  1254. action: action,
  1255. item_id: status.id,
  1256. item_type: 'status'
  1257. }).then(res => {
  1258. swal('Success', 'Successfully added content warning', 'success');
  1259. status.sensitive = false;
  1260. self.ctxModMenuClose();
  1261. }).catch(err => {
  1262. swal(
  1263. 'Error',
  1264. 'Something went wrong, please try again later.',
  1265. 'error'
  1266. );
  1267. self.ctxModMenuClose();
  1268. });
  1269. }
  1270. });
  1271. break;
  1272. case 'unlist':
  1273. msg = 'Are you sure you want to unlist this post?';
  1274. swal({
  1275. title: 'Confirm',
  1276. text: msg,
  1277. icon: 'warning',
  1278. buttons: true,
  1279. dangerMode: true
  1280. }).then(res => {
  1281. if(res) {
  1282. axios.post('/api/v2/moderator/action', {
  1283. action: action,
  1284. item_id: status.id,
  1285. item_type: 'status'
  1286. }).then(res => {
  1287. // this.feed = this.feed.filter(f => {
  1288. // return f.id != status.id;
  1289. // });
  1290. swal('Success', 'Successfully unlisted post', 'success');
  1291. self.ctxModMenuClose();
  1292. }).catch(err => {
  1293. self.ctxModMenuClose();
  1294. swal(
  1295. 'Error',
  1296. 'Something went wrong, please try again later.',
  1297. 'error'
  1298. );
  1299. });
  1300. }
  1301. });
  1302. break;
  1303. }
  1304. },
  1305. ctxMenu() {
  1306. this.$refs.ctxModal.show();
  1307. return;
  1308. },
  1309. closeCtxMenu(truncate) {
  1310. this.$refs.ctxModal.hide();
  1311. },
  1312. ctxModMenu() {
  1313. this.$refs.ctxModal.hide();
  1314. this.$refs.ctxModModal.show();
  1315. },
  1316. ctxModMenuClose() {
  1317. this.$refs.ctxModal.hide();
  1318. this.$refs.ctxModModal.hide();
  1319. },
  1320. ctxMenuCopyLink() {
  1321. let status = this.status;
  1322. navigator.clipboard.writeText(status.url);
  1323. this.closeCtxMenu();
  1324. return;
  1325. },
  1326. ctxMenuFollow() {
  1327. let id = this.status.account.id;
  1328. axios.post('/i/follow', {
  1329. item: id
  1330. }).then(res => {
  1331. let username = this.status.account.acct;
  1332. this.relationship.following = true;
  1333. this.$refs.ctxModal.hide();
  1334. setTimeout(function() {
  1335. swal('Follow successful!', 'You are now following ' + username, 'success');
  1336. }, 500);
  1337. });
  1338. },
  1339. ctxMenuUnfollow() {
  1340. let id = this.status.account.id;
  1341. axios.post('/i/follow', {
  1342. item: id
  1343. }).then(res => {
  1344. let username = this.status.account.acct;
  1345. this.relationship.following = false;
  1346. this.$refs.ctxModal.hide();
  1347. setTimeout(function() {
  1348. swal('Unfollow successful!', 'You are no longer following ' + username, 'success');
  1349. }, 500);
  1350. });
  1351. },
  1352. setCurrentLayout(layout) {
  1353. this.currentLayout = layout;
  1354. },
  1355. commentFocus(status, $event) {
  1356. if(status.comments_disabled) {
  1357. return;
  1358. }
  1359. this.replies = {};
  1360. this.replyStatus = {};
  1361. this.replyText = '';
  1362. this.replyId = status.id;
  1363. this.replyStatus = status;
  1364. // this.$refs.replyModal.show();
  1365. this.fetchStatusComments(status, '');
  1366. $('nav').hide();
  1367. $('footer').hide();
  1368. $('.mobile-footer-spacer').attr('style', 'display:none !important');
  1369. $('.mobile-footer').attr('style', 'display:none !important');
  1370. $('.mt-md-4').hide();
  1371. this.currentLayout = 'comments';
  1372. window.history.pushState({}, '', this.getStatusUrl(status));
  1373. return;
  1374. },
  1375. fetchStatusComments(status, card) {
  1376. let url = '/api/v2/comments/'+status.account.id+'/status/'+status.id;
  1377. axios.get(url)
  1378. .then(response => {
  1379. let self = this;
  1380. this.replies = _.reverse(response.data.data);
  1381. this.pagination = response.data.meta.pagination;
  1382. if(this.replies.length > 0) {
  1383. $('.load-more-link').removeClass('d-none');
  1384. }
  1385. $('.postCommentsLoader').addClass('d-none');
  1386. $('.postCommentsContainer').removeClass('d-none');
  1387. // setTimeout(function() {
  1388. // document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) {
  1389. // i.href = App.util.format.rewriteLinks(i);
  1390. // });
  1391. // }, 500);
  1392. }).catch(error => {
  1393. if(!error.response) {
  1394. $('.postCommentsLoader .lds-ring')
  1395. .attr('style','width:100%')
  1396. .addClass('pt-4 font-weight-bold text-muted')
  1397. .text('An error occurred, cannot fetch comments. Please try again later.');
  1398. } else {
  1399. switch(error.response.status) {
  1400. case 401:
  1401. $('.postCommentsLoader .lds-ring')
  1402. .attr('style','width:100%')
  1403. .addClass('pt-4 font-weight-bold text-muted')
  1404. .text('Please login to view.');
  1405. break;
  1406. default:
  1407. $('.postCommentsLoader .lds-ring')
  1408. .attr('style','width:100%')
  1409. .addClass('pt-4 font-weight-bold text-muted')
  1410. .text('An error occurred, cannot fetch comments. Please try again later.');
  1411. break;
  1412. }
  1413. }
  1414. });
  1415. },
  1416. },
  1417. }
  1418. </script>