1
0

Timeline.vue 45 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388
  1. <template>
  2. <div class="container" style="">
  3. <div v-if="layout === 'feed'" class="row">
  4. <div :class="[modes.distractionFree ? 'col-md-8 col-lg-8 offset-md-2 px-0 my-sm-3 timeline order-2 order-md-1':'col-md-8 col-lg-8 px-0 my-sm-3 timeline order-2 order-md-1']">
  5. <div class="d-none" data-id="StoryTimelineComponent"></div>
  6. <div style="padding-top:10px;">
  7. <div v-if="loading" class="text-center">
  8. <div class="spinner-border" role="status">
  9. <span class="sr-only">Loading...</span>
  10. </div>
  11. </div>
  12. <div :data-status-id="status.id" v-for="(status, index) in feed" :key="`${index}-${status.id}`">
  13. <div v-if="index == 2 && showSuggestions == true && suggestions.length" class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border">
  14. <div class="card-header d-flex align-items-center justify-content-between bg-white border-0 pb-0">
  15. <h6 class="text-muted font-weight-bold mb-0">Suggestions For You</h6>
  16. <span class="cursor-pointer text-muted" v-on:click="hideSuggestions"><i class="fas fa-times"></i></span>
  17. </div>
  18. <div class="card-body row mx-0">
  19. <div class="col-12 col-md-4 mb-3" v-for="(rec, index) in suggestions">
  20. <div class="card">
  21. <div class="card-body text-center pt-3">
  22. <p class="mb-0">
  23. <a :href="'/'+rec.username">
  24. <img :src="rec.avatar" class="img-fluid rounded-circle cursor-pointer" width="45px" height="45px">
  25. </a>
  26. </p>
  27. <div class="py-3">
  28. <p class="font-weight-bold text-dark cursor-pointer mb-0">
  29. <a :href="'/'+rec.username" class="text-decoration-none text-dark">
  30. {{rec.username}}
  31. </a>
  32. </p>
  33. <p class="small text-muted mb-0">{{rec.message}}</p>
  34. </div>
  35. <p class="mb-0">
  36. <a class="btn btn-primary btn-block font-weight-bold py-0" href="#" @click.prevent="expRecFollow(rec.id, index)">Follow</a>
  37. </p>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. <div v-if="index == 4 && showHashtagPosts && hashtagPosts.length" class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border">
  44. <div class="card-header d-flex align-items-center justify-content-between bg-white border-0 pb-0">
  45. <span></span>
  46. <h6 class="text-muted font-weight-bold mb-0"><a :href="'/discover/tags/'+hashtagPostsName+'?src=tr'">#{{hashtagPostsName}}</a></h6>
  47. <span class="cursor-pointer text-muted" v-on:click="showHashtagPosts = false"><i class="fas fa-times"></i></span>
  48. </div>
  49. <div class="card-body row mx-0">
  50. <div v-for="(tag, index) in hashtagPosts" class="col-4 p-0 p-sm-2 p-md-3 hashtag-post-square">
  51. <a class="card info-overlay card-md-border-0" :href="tag.status.url">
  52. <div :class="[tag.status.filter ? 'square ' + tag.status.filter : 'square']">
  53. <div class="square-content" :style="'background-image: url('+tag.status.thumb+')'"></div>
  54. <div class="info-overlay-text">
  55. <h5 class="text-white m-auto font-weight-bold">
  56. <span class="pr-4">
  57. <span class="far fa-heart fa-lg pr-1"></span> {{tag.status.like_count}}
  58. </span>
  59. <span>
  60. <span class="fas fa-retweet fa-lg pr-1"></span> {{tag.status.share_count}}
  61. </span>
  62. </h5>
  63. </div>
  64. </div>
  65. </a>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border">
  70. <div v-if="!modes.distractionFree" class="card-header d-inline-flex align-items-center bg-white">
  71. <img v-bind:src="status.account.avatar" width="32px" height="32px" class="cursor-pointer" style="border-radius: 32px;" @click="profileUrl(status)">
  72. <div class="pl-2">
  73. <!-- <a class="d-block username font-weight-bold text-dark" v-bind:href="status.account.url" style="line-height:0.5;"> -->
  74. <a class="username font-weight-bold text-dark text-decoration-none" v-bind:href="profileUrl(status)" v-html="statusCardUsernameFormat(status)">
  75. Loading...
  76. </a>
  77. <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;">
  78. <i class="fas fa-certificate text-danger fa-stack-1x"></i>
  79. <i class="fas fa-crown text-white fa-sm fa-stack-1x" style="font-size:7px;"></i>
  80. </span>
  81. <span v-if="scope != 'home' && status.account.id != profile.id && status.account.relationship">
  82. <span class="px-1">•</span>
  83. <span :class="'font-weight-bold cursor-pointer ' + [status.account.relationship.following == true ? 'text-muted' : 'text-primary']" @click="followAction(status)">{{status.account.relationship.following == true ? 'Following' : 'Follow'}}</span>
  84. </span>
  85. <a v-if="status.place" class="d-block small text-decoration-none" :href="'/discover/places/'+status.place.id+'/'+status.place.slug" style="color:#718096">{{status.place.name}}, {{status.place.country}}</a>
  86. </div>
  87. <div class="text-right" style="flex-grow:1;">
  88. <button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu(status)">
  89. <span class="fas fa-ellipsis-h text-lighter"></span>
  90. </button>
  91. </div>
  92. </div>
  93. <div class="postPresenterContainer" style="background: #000;">
  94. <div v-if="status.pf_type === 'photo'" class="w-100">
  95. <photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
  96. </div>
  97. <div v-else-if="status.pf_type === 'video'" class="w-100">
  98. <video-presenter :status="status"></video-presenter>
  99. </div>
  100. <div v-else-if="status.pf_type === 'photo:album'" class="w-100">
  101. <photo-album-presenter :status="status" v-on:lightbox="lightbox"></photo-album-presenter>
  102. </div>
  103. <div v-else-if="status.pf_type === 'video:album'" class="w-100">
  104. <video-album-presenter :status="status"></video-album-presenter>
  105. </div>
  106. <div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
  107. <mixed-album-presenter :status="status" v-on:lightbox="lightbox"></mixed-album-presenter>
  108. </div>
  109. <div v-else class="w-100">
  110. <p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
  111. </div>
  112. </div>
  113. <div class="card-body">
  114. <div v-if="!modes.distractionFree" class="reactions my-1 pb-2">
  115. <h3 v-bind:class="[status.favourited ? 'fas fa-heart text-danger pr-3 m-0 cursor-pointer' : 'far fa-heart pr-3 m-0 like-btn text-lighter cursor-pointer']" title="Like" v-on:click="likeStatus(status, $event)"></h3>
  116. <h3 v-if="!status.comments_disabled" class="far fa-comment text-lighter pr-3 m-0 cursor-pointer" title="Comment" v-on:click="commentFocus(status, $event)"></h3>
  117. <h3 v-if="status.visibility == 'public'" v-bind:class="[status.reblogged ? 'fas fa-retweet pr-3 m-0 text-primary cursor-pointer' : 'fas fa-retweet pr-3 m-0 text-lighter share-btn cursor-pointer']" title="Share" v-on:click="shareStatus(status, $event)"></h3>
  118. <span v-if="status.pf_type == 'photo'" class="float-right">
  119. <h3 class="fas fa-expand pr-3 m-0 cursor-pointer text-lighter" v-on:click="lightbox(status)"></h3>
  120. </span>
  121. </div>
  122. <div class="likes font-weight-bold" v-if="expLc(status) == true && !modes.distractionFree">
  123. <span class="like-count">{{status.favourites_count}}</span> {{status.favourites_count == 1 ? 'like' : 'likes'}}
  124. </div>
  125. <div class="caption">
  126. <p class="mb-2 read-more" style="overflow: hidden;">
  127. <span class="username font-weight-bold">
  128. <bdi><a class="text-dark" :href="profileUrl(status)">{{status.account.username}}</a></bdi>
  129. </span>
  130. <span class="status-content" v-html="status.content"></span>
  131. </p>
  132. </div>
  133. <div class="comments" v-if="status.id == replyId && !status.comments_disabled">
  134. <p class="mb-0 d-flex justify-content-between align-items-top read-more" style="overflow-y: hidden;" v-for="(reply, index) in replies">
  135. <span>
  136. <a class="text-dark font-weight-bold mr-1" :href="profileUrl(reply)">{{reply.account.username}}</a>
  137. <span v-html="reply.content"></span>
  138. </span>
  139. <span class="mb-0" style="min-width:38px">
  140. <span v-on:click="likeStatus(reply, $event)">
  141. <i v-bind:class="[reply.favourited ? 'fas fa-heart fa-sm text-danger cursor-pointer':'far fa-heart fa-sm text-lighter cursor-pointer']"></i>
  142. </span>
  143. <!-- <post-menu :status="reply" :profile="profile" size="sm" :modal="'true'" :feed="feed" class="d-inline-flex pl-2"></post-menu> -->
  144. <span class="text-lighter pl-2 cursor-pointer" @click="ctxMenu(reply)">
  145. <span class="fas fa-ellipsis-v text-lighter"></span>
  146. </span>
  147. </span>
  148. </p>
  149. </div>
  150. <div class="timestamp mt-2">
  151. <p class="small text-uppercase mb-0">
  152. <a :href="statusUrl(status)" class="text-muted">
  153. <timeago :datetime="status.created_at" :auto-update="60" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.created_at)" v-b-tooltip.hover.bottom></timeago>
  154. </a>
  155. <a v-if="modes.distractionFree" class="float-right" :href="status.url">
  156. <i class="fas fa-ellipsis-h fa-lg text-muted"></i>
  157. </a>
  158. </p>
  159. </div>
  160. </div>
  161. <div v-if="status.id == replyId && !status.comments_disabled" class="card-footer bg-white px-2 py-0">
  162. <ul class="nav align-items-center emoji-reactions" style="overflow-x: scroll;flex-wrap: unset;">
  163. <li class="nav-item" v-on:click="emojiReaction(status)" v-for="e in emoji">{{e}}</li>
  164. </ul>
  165. </div>
  166. <div v-if="status.id == replyId && !status.comments_disabled" class="card-footer bg-white sticky-md-bottom p-0">
  167. <form class="border-0 rounded-0 align-middle" method="post" action="/i/comment" :data-id="status.id" data-truncate="false">
  168. <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>
  169. <input type="button" value="Post" class="d-inline-block btn btn-link font-weight-bold reply-btn text-decoration-none" v-on:click.prevent="commentSubmit(status, $event)" :disabled="replyText.length == 0" />
  170. </form>
  171. </div>
  172. </div>
  173. </div>
  174. <div v-if="!loading && feed.length">
  175. <div class="card shadow-none">
  176. <div class="card-body">
  177. <infinite-loading @infinite="infiniteTimeline" :distance="800">
  178. <div slot="no-more" class="font-weight-bold">No more posts to load</div>
  179. <div slot="no-results" class="font-weight-bold">No more posts to load</div>
  180. </infinite-loading>
  181. </div>
  182. </div>
  183. </div>
  184. <div v-if="!loading && scope == 'home' && feed.length == 0">
  185. <div class="card shadow-none border">
  186. <div class="card-body text-center">
  187. <p class="h2 font-weight-lighter p-5">Hello, {{profile.acct}}</p>
  188. <p class="text-lighter"><i class="fas fa-camera-retro fa-5x"></i></p>
  189. <p class="h3 font-weight-lighter p-5">Start following people to build your timeline.</p>
  190. <p><a href="/discover" class="btn btn-primary font-weight-bold py-0">Discover new people and posts</a></p>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. <div v-if="!modes.distractionFree" class="col-md-4 col-lg-4 my-3 order-1 order-md-2 d-none d-md-block">
  197. <div class="position-sticky" style="top:78px;">
  198. <div class="mb-4">
  199. <div class="">
  200. <div class="">
  201. <div class="media d-flex align-items-center">
  202. <a :href="profile.url">
  203. <img class="mr-3 rounded-circle box-shadow" :src="profile.avatar || '/storage/avatars/default.png'" alt="avatar" width="64px" height="64px">
  204. </a>
  205. <div class="media-body d-flex justify-content-between word-break" >
  206. <div>
  207. <p class="mb-0 px-0 font-weight-bold"><a :href="profile.url" class="text-dark">{{profile.username || 'loading...'}}</a></p>
  208. <p class="my-0 text-muted pb-0">{{profile.display_name || 'loading...'}}</p>
  209. </div>
  210. <div class="ml-2">
  211. <a class="text-muted" href="/settings/home"><i class="fas fa-cog fa-lg"></i></a>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. <div class="card-footer bg-transparent border-0 mt-2 py-1">
  217. <div class="d-flex justify-content-between text-center">
  218. <span class="cursor-pointer" @click="redirect(profile.url)">
  219. <p class="mb-0 font-weight-bold">{{formatCount(profile.statuses_count)}}</p>
  220. <p class="mb-0 small text-muted">Posts</p>
  221. </span>
  222. <span class="cursor-pointer" @click="redirect(profile.url+'?md=followers')">
  223. <p class="mb-0 font-weight-bold">{{formatCount(profile.followers_count)}}</p>
  224. <p class="mb-0 small text-muted">Followers</p>
  225. </span>
  226. <span class="cursor-pointer" @click="redirect(profile.url+'?md=following')">
  227. <p class="mb-0 font-weight-bold">{{formatCount(profile.following_count)}}</p>
  228. <p class="mb-0 small text-muted">Following</p>
  229. </span>
  230. </div>
  231. </div>
  232. </div>
  233. </div>
  234. <div class="mb-4">
  235. <a class="btn btn-light btn-block btn-sm font-weight-bold text-dark mb-3 border bg-white" href="/i/compose" data-toggle="modal" data-target="#composeModal">
  236. <i class="far fa-plus-square pr-3 fa-lg pt-1"></i> Compose Post
  237. </a>
  238. </div>
  239. <div v-if="showTips && !loading" class="mb-4 card-tips">
  240. <announcements-card v-on:show-tips="showTips = $event"></announcements-card>
  241. </div>
  242. <div v-show="modes.notify == true && !loading" class="mb-4">
  243. <notification-card></notification-card>
  244. </div>
  245. <div v-show="showSuggestions == true && suggestions.length && config.ab && config.ab.rec == true" class="mb-4">
  246. <div class="card">
  247. <div class="card-header bg-white d-flex align-items-center justify-content-between">
  248. <a class="small text-muted cursor-pointer" href="#" @click.prevent="refreshSuggestions" ref="suggestionRefresh"><i class="fas fa-sync-alt"></i></a>
  249. <div class="small text-dark text-uppercase font-weight-bold">Suggestions</div>
  250. <div class="small text-muted cursor-pointer" v-on:click="hideSuggestions"><i class="fas fa-times"></i></div>
  251. </div>
  252. <div class="card-body pt-0">
  253. <div v-for="(rec, index) in suggestions" class="media align-items-center mt-3">
  254. <a :href="'/'+rec.username">
  255. <img :src="rec.avatar" width="32px" height="32px" class="rounded-circle mr-3">
  256. </a>
  257. <div class="media-body">
  258. <p class="mb-0 font-weight-bold small">
  259. <a :href="'/'+rec.username" class="text-decoration-none text-dark">
  260. {{rec.username}}
  261. </a>
  262. </p>
  263. <p class="mb-0 small text-muted">{{rec.message}}</p>
  264. </div>
  265. <a class="font-weight-bold small" href="#" @click.prevent="expRecFollow(rec.id, index)">Follow</a>
  266. </div>
  267. </div>
  268. </div>
  269. </div>
  270. <footer>
  271. <div class="container pb-5">
  272. <p class="mb-0 text-uppercase font-weight-bold text-muted small">
  273. <a href="/site/about" class="text-dark pr-2">About Us</a>
  274. <a href="/site/help" class="text-dark pr-2">Help</a>
  275. <a href="/site/language" class="text-dark pr-2">Language</a>
  276. <a href="/discover/profiles" class="text-dark pr-2">Profiles</a>
  277. <a href="/discover/places" class="text-dark pr-2">Places</a>
  278. <a href="/site/privacy" class="text-dark pr-2">Privacy</a>
  279. <a href="/site/terms" class="text-dark pr-2">Terms</a>
  280. </p>
  281. <p class="mb-0 text-uppercase font-weight-bold text-muted small">
  282. <a href="http://pixelfed.org" class="text-muted" rel="noopener" title="" data-toggle="tooltip">Powered by Pixelfed</a>
  283. </p>
  284. </div>
  285. </footer>
  286. </div>
  287. </div>
  288. </div>
  289. <div v-else class="row pt-2">
  290. <div class="col-12">
  291. <div v-if="loading" class="text-center">
  292. <div class="spinner-border" role="status">
  293. <span class="sr-only">Loading...</span>
  294. </div>
  295. </div>
  296. <div v-else class="row">
  297. <div class="col-12 col-md-4 p-1 p-md-3 mb-3" v-for="(s, index) in feed" :key="`${index}-${s.id}`">
  298. <div class="card info-overlay card-md-border-0 shadow-sm border border-light" :href="statusUrl(s)">
  299. <div :class="[s.sensitive ? 'square' : 'square ' + s.media_attachments[0].filter_class]">
  300. <span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
  301. <span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
  302. <span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
  303. <div class="square-content" v-bind:style="previewBackground(s)">
  304. </div>
  305. <div class="info-overlay-text px-4">
  306. <p class="text-white m-auto text-center">
  307. {{trimCaption(s.content_text)}}
  308. </p>
  309. </div>
  310. </div>
  311. </div>
  312. <div class="py-3 media align-items-center">
  313. <img :src="s.account.avatar" class="mr-3 rounded-circle shadow-sm" :alt="s.account.username + ' \'s avatar'" width="30px" height="30px">
  314. <div class="media-body">
  315. <p class="mb-0 font-weight-bold small">{{s.account.username}}</p>
  316. <p class="mb-0" style="line-height: 0.7;">
  317. <a :href="statusUrl(s)" class="small text-lighter">
  318. <timeago :datetime="s.created_at" :auto-update="60" :converter-options="{includeSeconds:true}" :title="timestampFormat(s.created_at)" v-b-tooltip.hover.bottom></timeago>
  319. </a>
  320. </p>
  321. </div>
  322. <div class="ml-3">
  323. <p class="mb-0">
  324. <span class="font-weight-bold small">{{s.favourites_count == 1 ? '1 like' : s.favourites_count+' likes'}}</span>
  325. <span class="px-2"><i v-bind:class="[s.favourited ? 'fas fa-heart text-danger cursor-pointer' : 'far fa-heart like-btn text-lighter cursor-pointer']" v-on:click="likeStatus(s, $event)"></i></span>
  326. <span class="mr-2 cursor-pointer"><i class="fas fa-ellipsis-v" @click="ctxMenu(s)"></i></span>
  327. </p>
  328. </div>
  329. </div>
  330. </div>
  331. </div>
  332. <div v-if="!loading && feed.length">
  333. <infinite-loading @infinite="infiniteTimeline" :distance="800">
  334. <div slot="no-more" class="font-weight-bold">No more posts to load</div>
  335. <div slot="no-results" class="font-weight-bold">No more posts to load</div>
  336. </infinite-loading>
  337. </div>
  338. </div>
  339. </div>
  340. <b-modal ref="ctxModal"
  341. id="ctx-modal"
  342. hide-header
  343. hide-footer
  344. centered
  345. rounded
  346. size="sm"
  347. body-class="list-group-flush p-0 rounded">
  348. <div class="list-group text-center">
  349. <div v-if="ctxMenuStatus && ctxMenuStatus.account.id != profile.id" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuReportPost()">Report inappropriate</div>
  350. <div v-if="ctxMenuStatus && ctxMenuStatus.account.id != profile.id && ctxMenuRelationship && ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuUnfollow()">Unfollow</div>
  351. <div v-if="ctxMenuStatus && ctxMenuStatus.account.id != profile.id && ctxMenuRelationship && !ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-primary" @click="ctxMenuFollow()">Follow</div>
  352. <div class="list-group-item rounded cursor-pointer" @click="ctxMenuGoToPost()">Go to post</div>
  353. <div v-if="ctxMenuStatus && ctxMenuStatus.local == true" class="list-group-item rounded cursor-pointer" @click="ctxMenuEmbed()">Embed</div>
  354. <!-- <div class="list-group-item rounded cursor-pointer" @click="ctxMenuShare()">Share</div> -->
  355. <div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div>
  356. <div v-if="profile && profile.is_admin == true" class="list-group-item rounded cursor-pointer" @click="ctxModMenuShow()">Moderation Tools</div>
  357. <div v-if="ctxMenuStatus && (profile.is_admin || profile.id == ctxMenuStatus.account.id)" class="list-group-item rounded cursor-pointer" @click="deletePost(ctxMenuStatus)">Delete</div>
  358. <div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxMenu()">Cancel</div>
  359. </div>
  360. </b-modal>
  361. <b-modal ref="ctxModModal"
  362. id="ctx-mod-modal"
  363. hide-header
  364. hide-footer
  365. centered
  366. rounded
  367. size="sm"
  368. body-class="list-group-flush p-0 rounded">
  369. <div class="list-group text-center">
  370. <div class="list-group-item rounded cursor-pointer" @click="moderatePost(ctxMenuStatus, 'unlist')">Unlist from Timelines</div>
  371. <div class="list-group-item rounded cursor-pointer" @click="">Add Content Warning</div>
  372. <div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxModMenuClose()">Cancel</div>
  373. </div>
  374. </b-modal>
  375. <b-modal ref="ctxShareModal"
  376. id="ctx-share-modal"
  377. title="Share"
  378. hide-footer
  379. centered
  380. rounded
  381. size="sm"
  382. body-class="list-group-flush p-0 rounded text-center">
  383. <div class="list-group-item rounded cursor-pointer border-top-0">Email</div>
  384. <div class="list-group-item rounded cursor-pointer">Facebook</div>
  385. <div class="list-group-item rounded cursor-pointer">Mastodon</div>
  386. <div class="list-group-item rounded cursor-pointer">Pinterest</div>
  387. <div class="list-group-item rounded cursor-pointer">Pixelfed</div>
  388. <div class="list-group-item rounded cursor-pointer">Twitter</div>
  389. <div class="list-group-item rounded cursor-pointer">VK</div>
  390. <div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxShareMenu()">Cancel</div>
  391. </b-modal>
  392. <b-modal ref="ctxEmbedModal"
  393. id="ctx-embed-modal"
  394. hide-header
  395. hide-footer
  396. centered
  397. rounded
  398. size="md"
  399. body-class="p-2 rounded">
  400. <div>
  401. <textarea class="form-control disabled" rows="1" style="border: 1px solid #efefef; font-size: 14px; line-height: 12px; height: 37px; margin: 0 0 7px; resize: none; white-space: nowrap;" v-model="ctxEmbedPayload"></textarea>
  402. <hr>
  403. <button :class="copiedEmbed ? 'btn btn-primary btn-block btn-sm py-1 font-weight-bold disabed': 'btn btn-primary btn-block btn-sm py-1 font-weight-bold'" @click="ctxCopyEmbed" :disabled="copiedEmbed">{{copiedEmbed ? 'Embed Code Copied!' : 'Copy Embed Code'}}</button>
  404. <p class="mb-0 px-2 small text-muted">By using this embed, you agree to our <a href="/site/terms">Terms of Use</a></p>
  405. </div>
  406. </b-modal>
  407. <b-modal
  408. id="lightbox"
  409. ref="lightboxModal"
  410. hide-header
  411. hide-footer
  412. centered
  413. size="lg"
  414. body-class="p-0"
  415. >
  416. <div v-if="lightboxMedia" :class="lightboxMedia.filter_class" class="w-100 h-100">
  417. <img :src="lightboxMedia.url" style="max-height: 100%; max-width: 100%">
  418. </div>
  419. </b-modal>
  420. </div>
  421. </template>
  422. <style type="text/css" scoped>
  423. .postPresenterContainer {
  424. display: flex;
  425. align-items: center;
  426. background: #fff;
  427. }
  428. .word-break {
  429. word-break: break-all;
  430. }
  431. .small .custom-control-label {
  432. padding-top: 3px;
  433. }
  434. .reply-btn {
  435. position: absolute;
  436. bottom: 12px;
  437. right: 20px;
  438. width: 60px;
  439. text-align: center;
  440. border-radius: 0 3px 3px 0;
  441. }
  442. .emoji-reactions .nav-item {
  443. font-size: 1.2rem;
  444. padding: 9px;
  445. cursor: pointer;
  446. }
  447. .emoji-reactions::-webkit-scrollbar {
  448. width: 0px;
  449. height: 0px;
  450. background: transparent;
  451. }
  452. .reply-btn[disabled] {
  453. opacity: .3;
  454. color: #3897f0;
  455. }
  456. </style>
  457. <script type="text/javascript">
  458. export default {
  459. props: ['scope', 'layout'],
  460. data() {
  461. return {
  462. ids: [],
  463. config: window.App.config,
  464. page: 2,
  465. feed: [],
  466. profile: {},
  467. min_id: 0,
  468. max_id: 0,
  469. suggestions: {},
  470. loading: true,
  471. replies: [],
  472. replyId: null,
  473. modes: {
  474. 'mod': false,
  475. 'dark': false,
  476. 'notify': true,
  477. 'distractionFree': false
  478. },
  479. followers: [],
  480. followerCursor: 1,
  481. followerMore: true,
  482. following: [],
  483. followingCursor: 1,
  484. followingMore: true,
  485. lightboxMedia: false,
  486. showSuggestions: false,
  487. showReadMore: true,
  488. replyStatus: {},
  489. replyText: '',
  490. emoji: window.App.util.emoji,
  491. showHashtagPosts: false,
  492. hashtagPosts: [],
  493. hashtagPostsName: '',
  494. ctxMenuStatus: false,
  495. ctxMenuRelationship: false,
  496. ctxEmbedPayload: false,
  497. copiedEmbed: false,
  498. showTips: true,
  499. }
  500. },
  501. beforeMount() {
  502. this.fetchProfile();
  503. this.fetchTimelineApi();
  504. },
  505. mounted() {
  506. if($('link[data-stylesheet="dark"]').length != 0) {
  507. this.modes.dark = true;
  508. }
  509. if(localStorage.getItem('pf_metro_ui.exp.rec') == 'false') {
  510. this.showSuggestions = false;
  511. } else {
  512. this.showSuggestions = true;
  513. }
  514. if(localStorage.getItem('pf_metro_ui.exp.rm') == 'false') {
  515. this.showReadMore = false;
  516. } else {
  517. this.showReadMore = true;
  518. }
  519. if(localStorage.getItem('pf_metro_ui.exp.df') == 'true') {
  520. this.modes.distractionFree = true;
  521. } else {
  522. this.modes.distractionFree = false;
  523. }
  524. if(localStorage.getItem('metro-tips') == 'false') {
  525. this.showTips = false;
  526. }
  527. this.$nextTick(function () {
  528. $('[data-toggle="tooltip"]').tooltip();
  529. let u = new URLSearchParams(window.location.search);
  530. if(u.has('a') && u.get('a') == 'co') {
  531. $('#composeModal').modal('show');
  532. }
  533. });
  534. },
  535. updated() {
  536. if(this.showReadMore == true) {
  537. pixelfed.readmore();
  538. }
  539. },
  540. methods: {
  541. fetchProfile() {
  542. axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
  543. this.profile = res.data;
  544. if(this.profile.is_admin == true) {
  545. this.modes.mod = true;
  546. }
  547. //this.expRec();
  548. }).catch(err => {
  549. swal(
  550. 'Oops, something went wrong',
  551. 'Please reload the page.',
  552. 'error'
  553. );
  554. });
  555. },
  556. fetchTimelineApi() {
  557. let apiUrl = false;
  558. switch(this.scope) {
  559. case 'home':
  560. apiUrl = '/api/pixelfed/v1/timelines/home';
  561. break;
  562. case 'local':
  563. apiUrl = '/api/pixelfed/v1/timelines/public';
  564. break;
  565. case 'network':
  566. apiUrl = '/api/pixelfed/v1/timelines/network';
  567. break;
  568. }
  569. axios.get(apiUrl, {
  570. params: {
  571. max_id: this.max_id,
  572. limit: 3
  573. }
  574. }).then(res => {
  575. let data = res.data;
  576. this.feed.push(...data);
  577. let ids = data.map(status => status.id);
  578. this.ids = ids;
  579. this.min_id = Math.max(...ids).toString();
  580. this.max_id = Math.min(...ids).toString();
  581. this.loading = false;
  582. $('.timeline .pagination').removeClass('d-none');
  583. // if(this.feed.length == 4) {
  584. // this.fetchTimelineApi();
  585. // }
  586. if(this.hashtagPosts.length == 0) {
  587. this.fetchHashtagPosts();
  588. }
  589. // this.fetchStories();
  590. }).catch(err => {
  591. swal(
  592. 'Oops, something went wrong',
  593. 'Please reload the page.',
  594. 'error'
  595. );
  596. });
  597. },
  598. infiniteTimeline($state) {
  599. if(this.loading) {
  600. $state.complete();
  601. return;
  602. }
  603. if(this.page > 40) {
  604. this.loading = false;
  605. $state.complete();
  606. }
  607. let apiUrl = false;
  608. switch(this.scope) {
  609. case 'home':
  610. apiUrl = '/api/pixelfed/v1/timelines/home';
  611. break;
  612. case 'local':
  613. apiUrl = '/api/pixelfed/v1/timelines/public';
  614. break;
  615. case 'network':
  616. apiUrl = '/api/pixelfed/v1/timelines/network';
  617. break;
  618. }
  619. axios.get(apiUrl, {
  620. params: {
  621. max_id: this.max_id,
  622. limit: 6
  623. },
  624. }).then(res => {
  625. if (res.data.length && this.loading == false) {
  626. let data = res.data;
  627. let self = this;
  628. data.forEach((d, index) => {
  629. if(self.ids.indexOf(d.id) == -1) {
  630. self.feed.push(d);
  631. self.ids.push(d.id);
  632. }
  633. });
  634. this.min_id = Math.max(...this.ids).toString();
  635. this.max_id = Math.min(...this.ids).toString();
  636. this.page += 1;
  637. $state.loaded();
  638. this.loading = false;
  639. } else {
  640. $state.complete();
  641. }
  642. }).catch(err => {
  643. this.loading = false;
  644. $state.complete();
  645. });
  646. },
  647. reportUrl(status) {
  648. let type = status.in_reply_to ? 'comment' : 'post';
  649. let id = status.id;
  650. return '/i/report?type=' + type + '&id=' + id;
  651. },
  652. commentFocus(status, $event) {
  653. if(this.replyId == status.id || status.comments_disabled) {
  654. return;
  655. }
  656. this.replies = {};
  657. this.replyStatus = {};
  658. this.replyText = '';
  659. this.replyId = status.id;
  660. this.replyStatus = status;
  661. this.fetchStatusComments(status, '');
  662. },
  663. likeStatus(status) {
  664. if($('body').hasClass('loggedIn') == false) {
  665. return;
  666. }
  667. let count = status.favourites_count;
  668. status.favourited = !status.favourited;
  669. axios.post('/i/like', {
  670. item: status.id
  671. }).then(res => {
  672. status.favourites_count = res.data.count;
  673. }).catch(err => {
  674. status.favourited = !status.favourited;
  675. status.favourites_count = count;
  676. swal('Error', 'Something went wrong, please try again later.', 'error');
  677. });
  678. },
  679. shareStatus(status, $event) {
  680. if($('body').hasClass('loggedIn') == false) {
  681. return;
  682. }
  683. axios.post('/i/share', {
  684. item: status.id
  685. }).then(res => {
  686. status.reblogs_count = res.data.count;
  687. status.reblogged = !status.reblogged;
  688. }).catch(err => {
  689. swal('Error', 'Something went wrong, please try again later.', 'error');
  690. });
  691. },
  692. timestampFormat(timestamp) {
  693. let ts = new Date(timestamp);
  694. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  695. },
  696. redirect(url) {
  697. window.location.href = url;
  698. return;
  699. },
  700. statusOwner(status) {
  701. let sid = status.account.id;
  702. let uid = this.profile.id;
  703. if(sid == uid) {
  704. return true;
  705. } else {
  706. return false;
  707. }
  708. },
  709. fetchStatusComments(status, card) {
  710. axios.get('/api/v2/status/'+status.id+'/replies')
  711. .then(res => {
  712. let data = res.data.filter(res => {
  713. return res.sensitive == false;
  714. });
  715. this.replies = _.reverse(data);
  716. }).catch(err => {
  717. })
  718. },
  719. muteProfile(status) {
  720. if($('body').hasClass('loggedIn') == false) {
  721. return;
  722. }
  723. axios.post('/i/mute', {
  724. type: 'user',
  725. item: status.account.id
  726. }).then(res => {
  727. this.feed = this.feed.filter(s => s.account.id !== status.account.id);
  728. swal('Success', 'You have successfully muted ' + status.account.acct, 'success');
  729. }).catch(err => {
  730. swal('Error', 'Something went wrong. Please try again later.', 'error');
  731. });
  732. },
  733. blockProfile(status) {
  734. if($('body').hasClass('loggedIn') == false) {
  735. return;
  736. }
  737. axios.post('/i/block', {
  738. type: 'user',
  739. item: status.account.id
  740. }).then(res => {
  741. this.feed = this.feed.filter(s => s.account.id !== status.account.id);
  742. swal('Success', 'You have successfully blocked ' + status.account.acct, 'success');
  743. }).catch(err => {
  744. swal('Error', 'Something went wrong. Please try again later.', 'error');
  745. });
  746. },
  747. deletePost(status) {
  748. if($('body').hasClass('loggedIn') == false || this.ownerOrAdmin(status) == false) {
  749. return;
  750. }
  751. if(window.confirm('Are you sure you want to delete this post?') == false) {
  752. return;
  753. }
  754. axios.post('/i/delete', {
  755. type: 'status',
  756. item: status.id
  757. }).then(res => {
  758. this.feed = this.feed.filter(s => {
  759. return s.id != status.id;
  760. });
  761. this.$refs.ctxModal.hide();
  762. }).catch(err => {
  763. swal('Error', 'Something went wrong. Please try again later.', 'error');
  764. });
  765. },
  766. commentSubmit(status, $event) {
  767. let id = status.id;
  768. let comment = this.replyText;
  769. axios.post('/i/comment', {
  770. item: id,
  771. comment: comment
  772. }).then(res => {
  773. this.replyText = '';
  774. this.replies.push(res.data.entity);
  775. });
  776. },
  777. moderatePost(status, action, $event) {
  778. let username = status.account.username;
  779. switch(action) {
  780. case 'autocw':
  781. let msg = 'Are you sure you want to enforce CW for ' + username + ' ?';
  782. swal({
  783. title: 'Confirm',
  784. text: msg,
  785. icon: 'warning',
  786. buttons: true,
  787. dangerMode: true
  788. }).then(res => {
  789. if(res) {
  790. axios.post('/api/v2/moderator/action', {
  791. action: action,
  792. item_id: status.id,
  793. item_type: 'status'
  794. }).then(res => {
  795. swal('Success', 'Successfully enforced CW for ' + username, 'success');
  796. }).catch(err => {
  797. swal(
  798. 'Error',
  799. 'Something went wrong, please try again later.',
  800. 'error'
  801. );
  802. });
  803. }
  804. });
  805. break;
  806. case 'noautolink':
  807. msg = 'Are you sure you want to disable auto linking for ' + username + ' ?';
  808. swal({
  809. title: 'Confirm',
  810. text: msg,
  811. icon: 'warning',
  812. buttons: true,
  813. dangerMode: true
  814. }).then(res => {
  815. if(res) {
  816. axios.post('/api/v2/moderator/action', {
  817. action: action,
  818. item_id: status.id,
  819. item_type: 'status'
  820. }).then(res => {
  821. swal('Success', 'Successfully disabled autolinking for ' + username, 'success');
  822. }).catch(err => {
  823. swal(
  824. 'Error',
  825. 'Something went wrong, please try again later.',
  826. 'error'
  827. );
  828. });
  829. }
  830. });
  831. break;
  832. case 'unlisted':
  833. msg = 'Are you sure you want to unlist from timelines for ' + username + ' ?';
  834. swal({
  835. title: 'Confirm',
  836. text: msg,
  837. icon: 'warning',
  838. buttons: true,
  839. dangerMode: true
  840. }).then(res => {
  841. if(res) {
  842. axios.post('/api/v2/moderator/action', {
  843. action: action,
  844. item_id: status.id,
  845. item_type: 'status'
  846. }).then(res => {
  847. swal('Success', 'Successfully unlisted for ' + username, 'success');
  848. }).catch(err => {
  849. swal(
  850. 'Error',
  851. 'Something went wrong, please try again later.',
  852. 'error'
  853. );
  854. });
  855. }
  856. });
  857. break;
  858. case 'disable':
  859. msg = 'Are you sure you want to disable ' + username + '’s account ?';
  860. swal({
  861. title: 'Confirm',
  862. text: msg,
  863. icon: 'warning',
  864. buttons: true,
  865. dangerMode: true
  866. }).then(res => {
  867. if(res) {
  868. axios.post('/api/v2/moderator/action', {
  869. action: action,
  870. item_id: status.id,
  871. item_type: 'status'
  872. }).then(res => {
  873. swal('Success', 'Successfully disabled ' + username + '’s account', 'success');
  874. }).catch(err => {
  875. swal(
  876. 'Error',
  877. 'Something went wrong, please try again later.',
  878. 'error'
  879. );
  880. });
  881. }
  882. });
  883. break;
  884. case 'suspend':
  885. msg = 'Are you sure you want to suspend ' + username + '’s account ?';
  886. swal({
  887. title: 'Confirm',
  888. text: msg,
  889. icon: 'warning',
  890. buttons: true,
  891. dangerMode: true
  892. }).then(res => {
  893. if(res) {
  894. axios.post('/api/v2/moderator/action', {
  895. action: action,
  896. item_id: status.id,
  897. item_type: 'status'
  898. }).then(res => {
  899. swal('Success', 'Successfully suspend ' + username + '’s account', 'success');
  900. }).catch(err => {
  901. swal(
  902. 'Error',
  903. 'Something went wrong, please try again later.',
  904. 'error'
  905. );
  906. });
  907. }
  908. });
  909. break;
  910. }
  911. },
  912. followingModal() {
  913. if(this.following.length > 0) {
  914. this.$refs.followingModal.show();
  915. return;
  916. }
  917. axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/following', {
  918. params: {
  919. page: this.followingCursor
  920. }
  921. })
  922. .then(res => {
  923. this.following = res.data;
  924. this.followingCursor++;
  925. });
  926. if(res.data.length < 10) {
  927. this.followingMore = false;
  928. }
  929. this.$refs.followingModal.show();
  930. },
  931. followersModal() {
  932. if(this.followers.length > 0) {
  933. this.$refs.followerModal.show();
  934. return;
  935. }
  936. axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/followers', {
  937. params: {
  938. page: this.followerCursor
  939. }
  940. })
  941. .then(res => {
  942. this.followers = res.data;
  943. this.followerCursor++;
  944. })
  945. if(res.data.length < 10) {
  946. this.followerMore = false;
  947. }
  948. this.$refs.followerModal.show();
  949. },
  950. followingLoadMore() {
  951. axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/following', {
  952. params: {
  953. page: this.followingCursor
  954. }
  955. })
  956. .then(res => {
  957. if(res.data.length > 0) {
  958. this.following.push(...res.data);
  959. this.followingCursor++;
  960. }
  961. if(res.data.length < 10) {
  962. this.followingMore = false;
  963. }
  964. });
  965. },
  966. followersLoadMore() {
  967. axios.get('/api/pixelfed/v1/accounts/'+this.profile.id+'/followers', {
  968. params: {
  969. page: this.followerCursor
  970. }
  971. })
  972. .then(res => {
  973. if(res.data.length > 0) {
  974. this.followers.push(...res.data);
  975. this.followerCursor++;
  976. }
  977. if(res.data.length < 10) {
  978. this.followerMore = false;
  979. }
  980. });
  981. },
  982. lightbox(status) {
  983. this.lightboxMedia = status.media_attachments[0];
  984. this.$refs.lightboxModal.show();
  985. },
  986. expLc(status) {
  987. if(this.config.ab.lc == false) {
  988. return true;
  989. }
  990. if(this.statusOwner(status) == true) {
  991. return true;
  992. }
  993. return false;
  994. },
  995. expRec() {
  996. return;
  997. if(this.config.ab.rec == false) {
  998. return;
  999. }
  1000. axios.get('/api/local/exp/rec')
  1001. .then(res => {
  1002. this.suggestions = res.data;
  1003. })
  1004. },
  1005. expRecFollow(id, index) {
  1006. return;
  1007. if(this.config.ab.rec == false) {
  1008. return;
  1009. }
  1010. axios.post('/i/follow', {
  1011. item: id
  1012. }).then(res => {
  1013. this.suggestions.splice(index, 1);
  1014. }).catch(err => {
  1015. if(err.response.data.message) {
  1016. swal('Error', err.response.data.message, 'error');
  1017. }
  1018. });
  1019. },
  1020. followAction(status) {
  1021. let id = status.account.id;
  1022. axios.post('/i/follow', {
  1023. item: id
  1024. }).then(res => {
  1025. this.feed.forEach(s => {
  1026. if(s.account.id == id) {
  1027. s.account.relationship.following = !s.account.relationship.following;
  1028. }
  1029. });
  1030. let username = status.account.acct;
  1031. if(status.account.relationship.following) {
  1032. swal('Follow successful!', 'You are now following ' + username, 'success');
  1033. } else {
  1034. swal('Unfollow successful!', 'You are no longer following ' + username, 'success');
  1035. }
  1036. }).catch(err => {
  1037. if(err.response.data.message) {
  1038. swal('Error', err.response.data.message, 'error');
  1039. }
  1040. });
  1041. },
  1042. owner(status) {
  1043. return this.profile.id === status.account.id;
  1044. },
  1045. admin() {
  1046. return this.profile.is_admin == true;
  1047. },
  1048. ownerOrAdmin(status) {
  1049. return this.owner(status) || this.admin();
  1050. },
  1051. hideSuggestions() {
  1052. localStorage.setItem('pf_metro_ui.exp.rec', false);
  1053. this.showSuggestions = false;
  1054. },
  1055. emojiReaction(status) {
  1056. let em = event.target.innerText;
  1057. if(this.replyText.length == 0) {
  1058. this.replyText = em + ' ';
  1059. $('textarea[name="comment"]').focus();
  1060. } else {
  1061. this.replyText += em + ' ';
  1062. $('textarea[name="comment"]').focus();
  1063. }
  1064. },
  1065. refreshSuggestions() {
  1066. return;
  1067. let el = event.target.parentNode;
  1068. if(el.classList.contains('disabled') == true) {
  1069. return;
  1070. }
  1071. axios.get('/api/local/exp/rec', {
  1072. params: {
  1073. refresh: true
  1074. }
  1075. })
  1076. .then(res => {
  1077. this.suggestions = res.data;
  1078. if (el.classList) {
  1079. el.classList.add('disabled');
  1080. el.classList.add('text-light');
  1081. }
  1082. else {
  1083. el.className += ' ' + 'disabled text-light';
  1084. }
  1085. setTimeout(function() {
  1086. el.setAttribute('href', '#');
  1087. if (el.classList) {
  1088. el.classList.remove('disabled');
  1089. el.classList.remove('text-light');
  1090. }
  1091. else {
  1092. el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), 'disabled text-light');
  1093. }
  1094. }, 10000);
  1095. });
  1096. },
  1097. fetchHashtagPosts() {
  1098. axios.get('/api/local/discover/tag/list')
  1099. .then(res => {
  1100. let tags = res.data;
  1101. if(tags.length == 0) {
  1102. return;
  1103. }
  1104. let hashtag = tags[Math.floor(Math.random(), tags.length)];
  1105. this.hashtagPostsName = hashtag;
  1106. axios.get('/api/v2/discover/tag', {
  1107. params: {
  1108. hashtag: hashtag
  1109. }
  1110. }).then(res => {
  1111. if(res.data.tags.length > 3) {
  1112. this.showHashtagPosts = true;
  1113. this.hashtagPosts = res.data.tags.splice(0,3);
  1114. }
  1115. })
  1116. })
  1117. },
  1118. ctxMenu(status) {
  1119. this.ctxMenuStatus = status;
  1120. this.ctxEmbedPayload = window.App.util.embed.post(status.url);
  1121. if(status.account.id == this.profile.id) {
  1122. this.$refs.ctxModal.show();
  1123. } else {
  1124. axios.get('/api/pixelfed/v1/accounts/relationships', {
  1125. params: {
  1126. 'id[]': status.account.id
  1127. }
  1128. }).then(res => {
  1129. this.ctxMenuRelationship = res.data[0];
  1130. this.$refs.ctxModal.show();
  1131. });
  1132. }
  1133. },
  1134. closeCtxMenu(truncate) {
  1135. this.copiedEmbed = false;
  1136. this.ctxMenuStatus = false;
  1137. this.ctxMenuRelationship = false;
  1138. this.$refs.ctxModal.hide();
  1139. },
  1140. ctxMenuCopyLink() {
  1141. let status = this.ctxMenuStatus;
  1142. navigator.clipboard.writeText(status.url);
  1143. this.closeCtxMenu();
  1144. return;
  1145. },
  1146. ctxMenuGoToPost() {
  1147. let status = this.ctxMenuStatus;
  1148. window.location.href = this.statusUrl(status);
  1149. this.closeCtxMenu();
  1150. return;
  1151. },
  1152. ctxMenuFollow() {
  1153. let id = this.ctxMenuStatus.account.id;
  1154. axios.post('/i/follow', {
  1155. item: id
  1156. }).then(res => {
  1157. this.feed.forEach(s => {
  1158. if(s.account.id == id) {
  1159. s.account.relationship.following = !s.account.relationship.following;
  1160. }
  1161. });
  1162. let username = this.ctxMenuStatus.account.acct;
  1163. this.closeCtxMenu();
  1164. setTimeout(function() {
  1165. swal('Follow successful!', 'You are now following ' + username, 'success');
  1166. }, 500);
  1167. });
  1168. },
  1169. ctxMenuUnfollow() {
  1170. let id = this.ctxMenuStatus.account.id;
  1171. axios.post('/i/follow', {
  1172. item: id
  1173. }).then(res => {
  1174. this.feed.forEach(s => {
  1175. if(s.account.id == id) {
  1176. s.account.relationship.following = !s.account.relationship.following;
  1177. }
  1178. });
  1179. let username = this.ctxMenuStatus.account.acct;
  1180. if(this.scope == 'home') {
  1181. this.feed = this.feed.filter(s => {
  1182. return s.account.id != this.ctxMenuStatus.account.id;
  1183. });
  1184. }
  1185. this.closeCtxMenu();
  1186. setTimeout(function() {
  1187. swal('Unfollow successful!', 'You are no longer following ' + username, 'success');
  1188. }, 500);
  1189. });
  1190. },
  1191. ctxMenuReportPost() {
  1192. window.location.href = '/i/report?type=post&id=' + this.ctxMenuStatus.id;
  1193. },
  1194. ctxMenuEmbed() {
  1195. this.$refs.ctxModal.hide();
  1196. this.$refs.ctxEmbedModal.show();
  1197. },
  1198. ctxMenuShare() {
  1199. this.$refs.ctxModal.hide();
  1200. this.$refs.ctxShareModal.show();
  1201. },
  1202. closeCtxShareMenu() {
  1203. this.$refs.ctxShareModal.hide();
  1204. this.$refs.ctxModal.show();
  1205. },
  1206. ctxCopyEmbed() {
  1207. navigator.clipboard.writeText(this.ctxEmbedPayload);
  1208. this.$refs.ctxEmbedModal.hide();
  1209. },
  1210. ctxModMenuShow() {
  1211. this.$refs.ctxModal.hide();
  1212. this.$refs.ctxModModal.show();
  1213. },
  1214. ctxModMenu() {
  1215. this.$refs.ctxModal.hide();
  1216. },
  1217. ctxModMenuClose() {
  1218. this.$refs.ctxModal.hide();
  1219. this.$refs.ctxModModal.hide();
  1220. },
  1221. formatCount(count) {
  1222. return App.util.format.count(count);
  1223. },
  1224. statusUrl(status) {
  1225. return status.url;
  1226. // if(status.local == true) {
  1227. // return status.url;
  1228. // }
  1229. // return '/i/web/post/_/' + status.account.id + '/' + status.id;
  1230. },
  1231. profileUrl(status) {
  1232. return status.account.url;
  1233. // if(status.local == true) {
  1234. // return status.account.url;
  1235. // }
  1236. // return '/i/web/profile/_/' + status.account.id;
  1237. },
  1238. statusCardUsernameFormat(status) {
  1239. if(status.account.local == true) {
  1240. return status.account.username;
  1241. }
  1242. let fmt = window.App.config.username.remote.format;
  1243. let txt = window.App.config.username.remote.custom;
  1244. let usr = status.account.username;
  1245. let dom = document.createElement('a');
  1246. dom.href = status.account.url;
  1247. dom = dom.hostname;
  1248. switch(fmt) {
  1249. case '@':
  1250. return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
  1251. break;
  1252. case 'from':
  1253. return usr + '<span class="text-lighter font-weight-bold"> <span class="font-weight-normal">from</span> ' + dom + '</span>';
  1254. break;
  1255. case 'custom':
  1256. return usr + '<span class="text-lighter font-weight-bold"> ' + txt + ' ' + dom + '</span>';
  1257. break;
  1258. default:
  1259. return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
  1260. break;
  1261. }
  1262. },
  1263. previewUrl(status) {
  1264. return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url;
  1265. },
  1266. previewBackground(status) {
  1267. let preview = this.previewUrl(status);
  1268. return 'background-image: url(' + preview + ');';
  1269. },
  1270. trimCaption(caption, len = 60) {
  1271. return _.truncate(caption, {
  1272. length: len
  1273. });
  1274. },
  1275. }
  1276. }
  1277. </script>