Profile.vue 41 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187
  1. <template>
  2. <div class="w-100 h-100">
  3. <div v-if="relationship && relationship.blocking && warning" class="bg-white pt-3 border-bottom">
  4. <div class="container">
  5. <p class="text-center font-weight-bold">You are blocking this account</p>
  6. <p class="text-center font-weight-bold">Click <a href="#" class="cursor-pointer" @click.prevent="warning = false;">here</a> to view profile</p>
  7. </div>
  8. </div>
  9. <div v-if="loading" style="height: 80vh;" class="d-flex justify-content-center align-items-center">
  10. <img src="/img/pixelfed-icon-grey.svg" class="">
  11. </div>
  12. <div v-if="!loading && !warning">
  13. <div v-if="profileLayout == 'metro'">
  14. <div class="bg-white py-5 border-bottom">
  15. <div class="container">
  16. <div class="row">
  17. <div class="col-12 col-md-4 d-flex">
  18. <div class="profile-avatar mx-md-auto">
  19. <div class="d-block d-md-none">
  20. <div class="row">
  21. <div class="col-5">
  22. <img class="rounded-circle box-shadow mr-2" :src="profile.avatar" width="77px" height="77px">
  23. <p v-if="sponsorList.patreon || sponsorList.liberapay || sponsorList.opencollective" class="text-center mt-1 mr-2">
  24. <button type="button" @click="showSponsorModal" class="btn btn-sm btn-outline-secondary font-weight-bold py-0">
  25. Donate
  26. </button>
  27. </p>
  28. </div>
  29. <div class="col-7 pl-2">
  30. <p class="align-middle">
  31. <span class="font-weight-ultralight h3 mb-0">{{profile.username}}</span>
  32. <span class="float-right mb-0" v-if="!loading && profile.id != user.id && user.hasOwnProperty('id')">
  33. <a class="fas fa-cog fa-lg text-muted text-decoration-none" href="#" @click.prevent="visitorMenu"></a>
  34. </span>
  35. </p>
  36. <p v-if="!loading && profile.id == user.id && user.hasOwnProperty('id')">
  37. <a class="btn btn-outline-dark py-0 px-4 mt-3" href="/settings/home">Edit Profile</a>
  38. </p>
  39. <div v-if="profile.id != user.id && user.hasOwnProperty('id')">
  40. <p class="mt-3 mb-0" v-if="relationship.following == true">
  41. <button type="button" class="btn btn-outline-dark font-weight-bold px-4 py-0" v-on:click="followProfile()" data-toggle="tooltip" title="Unfollow">Unfollow</button>
  42. </p>
  43. <p class="mt-3 mb-0" v-if="!relationship.following">
  44. <button type="button" class="btn btn-outline-dark font-weight-bold px-4 py-0" v-on:click="followProfile()" data-toggle="tooltip" title="Follow">Follow</button>
  45. </p>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. <div class="d-none d-md-block">
  51. <img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px">
  52. <p v-if="sponsorList.patreon || sponsorList.liberapay || sponsorList.opencollective" class="text-center mt-3">
  53. <button type="button" @click="showSponsorModal" class="btn btn-outline-secondary font-weight-bold py-0">
  54. <i class="fas fa-heart text-danger"></i>
  55. Donate
  56. </button>
  57. </p>
  58. </div>
  59. </div>
  60. </div>
  61. <div class="col-12 col-md-8 d-flex align-items-center">
  62. <div class="profile-details">
  63. <div class="d-none d-md-flex username-bar pb-2 align-items-center">
  64. <span class="font-weight-ultralight h3">{{profile.username}}</span>
  65. <span class="pl-4" v-if="profile.is_admin">
  66. <span class="btn btn-outline-secondary font-weight-bold py-0">ADMIN</span>
  67. </span>
  68. <span class="pl-4">
  69. <a :href="'/users/'+profile.username+'.atom'" class="fas fa-rss fa-lg text-muted text-decoration-none"></a>
  70. </span>
  71. <span class="pl-4" v-if="owner && user.hasOwnProperty('id')">
  72. <a class="fas fa-cog fa-lg text-muted text-decoration-none" href="/settings/home"></a>
  73. </span>
  74. <span class="pl-4" v-if="!owner && user.hasOwnProperty('id')">
  75. <a class="fas fa-cog fa-lg text-muted text-decoration-none" href="#" @click.prevent="visitorMenu"></a>
  76. </span>
  77. <span v-if="profile.id != user.id && user.hasOwnProperty('id')">
  78. <span class="pl-4" v-if="relationship.following == true">
  79. <button type="button" class="btn btn-outline-secondary font-weight-bold btn-sm" v-on:click="followProfile()" data-toggle="tooltip" title="Unfollow"><i class="fas fa-user-minus"></i></button>
  80. </span>
  81. <span class="pl-4" v-if="!relationship.following">
  82. <button type="button" class="btn btn-primary font-weight-bold btn-sm" v-on:click="followProfile()" data-toggle="tooltip" title="Follow"><i class="fas fa-user-plus"></i></button>
  83. </span>
  84. </span>
  85. </div>
  86. <div class="d-none d-md-inline-flex profile-stats pb-3 lead">
  87. <div class="font-weight-light pr-5">
  88. <a class="text-dark" :href="profile.url">
  89. <span class="font-weight-bold">{{profile.statuses_count}}</span>
  90. Posts
  91. </a>
  92. </div>
  93. <div v-if="profileSettings.followers.count" class="font-weight-light pr-5">
  94. <a class="text-dark cursor-pointer" v-on:click="followersModal()">
  95. <span class="font-weight-bold">{{profile.followers_count}}</span>
  96. Followers
  97. </a>
  98. </div>
  99. <div v-if="profileSettings.following.count" class="font-weight-light">
  100. <a class="text-dark cursor-pointer" v-on:click="followingModal()">
  101. <span class="font-weight-bold">{{profile.following_count}}</span>
  102. Following
  103. </a>
  104. </div>
  105. </div>
  106. <p class="lead mb-0 d-flex align-items-center pt-3">
  107. <span class="font-weight-bold pr-3">{{profile.display_name}}</span>
  108. </p>
  109. <div v-if="profile.note" class="mb-0 lead" v-html="profile.note"></div>
  110. <p v-if="profile.website" class=""><a :href="profile.website" class="font-weight-bold" rel="me external nofollow noopener" target="_blank">{{profile.website}}</a></p>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. <div class="d-block d-md-none bg-white my-0 py-2 border-bottom">
  117. <ul class="nav d-flex justify-content-center">
  118. <li class="nav-item">
  119. <div class="font-weight-light">
  120. <span class="text-dark text-center">
  121. <p class="font-weight-bold mb-0">{{profile.statuses_count}}</p>
  122. <p class="text-muted mb-0">Posts</p>
  123. </span>
  124. </div>
  125. </li>
  126. <li class="nav-item px-5">
  127. <div v-if="profileSettings.followers.count" class="font-weight-light">
  128. <a class="text-dark cursor-pointer text-center" v-on:click="followersModal()">
  129. <p class="font-weight-bold mb-0">{{profile.followers_count}}</p>
  130. <p class="text-muted mb-0">Followers</p>
  131. </a>
  132. </div>
  133. </li>
  134. <li class="nav-item">
  135. <div v-if="profileSettings.following.count" class="font-weight-light">
  136. <a class="text-dark cursor-pointer text-center" v-on:click="followingModal()">
  137. <p class="font-weight-bold mb-0">{{profile.following_count}}</p>
  138. <p class="text-muted mb-0">Following</p>
  139. </a>
  140. </div>
  141. </li>
  142. </ul>
  143. </div>
  144. <div class="bg-white">
  145. <ul class="nav nav-topbar d-flex justify-content-center border-0">
  146. <li class="nav-item">
  147. <a :class="this.mode == 'grid' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('grid')"><i class="fas fa-th fa-lg"></i></a>
  148. </li>
  149. <li class="nav-item px-3">
  150. <a :class="this.mode == 'list' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('list')"><i class="fas fa-th-list fa-lg"></i></a>
  151. </li>
  152. <li class="nav-item pr-3">
  153. <a :class="this.mode == 'collections' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('collections')"><i class="fas fa-images fa-lg"></i></a>
  154. </li>
  155. <li class="nav-item" v-if="owner">
  156. <a :class="this.mode == 'bookmarks' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('bookmarks')"><i class="fas fa-bookmark fa-lg"></i></a>
  157. </li>
  158. </ul>
  159. </div>
  160. <div class="container">
  161. <div class="profile-timeline mt-md-4">
  162. <div class="row" v-if="mode == 'grid'">
  163. <div class="col-4 p-0 p-sm-2 p-md-3 p-xs-1" v-for="(s, index) in timeline">
  164. <a class="card info-overlay card-md-border-0" :href="s.url">
  165. <div class="square">
  166. <span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
  167. <span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
  168. <span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
  169. <div class="square-content" v-bind:style="previewBackground(s)">
  170. </div>
  171. <div class="info-overlay-text">
  172. <h5 class="text-white m-auto font-weight-bold">
  173. <span>
  174. <span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
  175. <span class="d-flex-inline">{{s.favourites_count}}</span>
  176. </span>
  177. <span>
  178. <span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
  179. <span class="d-flex-inline">{{s.reblogs_count}}</span>
  180. </span>
  181. </h5>
  182. </div>
  183. </div>
  184. </a>
  185. </div>
  186. </div>
  187. <div class="row" v-if="mode == 'list'">
  188. <div class="col-md-8 col-lg-8 offset-md-2 px-0 timeline">
  189. <div class="card status-card card-md-rounded-0 my-sm-2 my-md-3 my-lg-4" :data-status-id="status.id" v-for="(status, index) in timeline" :key="status.id">
  190. <div class="card-header d-inline-flex align-items-center bg-white">
  191. <img v-bind:src="status.account.avatar" width="32px" height="32px" style="border-radius: 32px;">
  192. <a class="username font-weight-bold pl-2 text-dark" v-bind:href="status.account.url">
  193. {{status.account.username}}
  194. </a>
  195. <div v-if="user.hasOwnProperty('id')" class="text-right" style="flex-grow:1;">
  196. <div class="dropdown">
  197. <button class="btn btn-link text-dark no-caret dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Post options">
  198. <span class="fas fa-ellipsis-v fa-lg text-muted"></span>
  199. </button>
  200. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
  201. <a class="dropdown-item font-weight-bold" :href="status.url">Go to post</a>
  202. <span v-if="status.account.id != user.id">
  203. <a class="dropdown-item font-weight-bold" :href="reportUrl(status)">Report</a>
  204. <a class="dropdown-item font-weight-bold" v-on:click="muteProfile(status)">Mute Profile</a>
  205. <a class="dropdown-item font-weight-bold" v-on:click="blockProfile(status)">Block Profile</a>
  206. </span>
  207. <span v-if="status.account.id == user.id || user.is_admin == true">
  208. <a class="dropdown-item font-weight-bold" :href="editUrl(status)">Edit</a>
  209. <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost(status)">Delete</a>
  210. </span>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. <div class="postPresenterContainer">
  216. <div v-if="status.pf_type === 'photo'" class="w-100">
  217. <photo-presenter :status="status"></photo-presenter>
  218. </div>
  219. <div v-else-if="status.pf_type === 'video'" class="w-100">
  220. <video-presenter :status="status"></video-presenter>
  221. </div>
  222. <div v-else-if="status.pf_type === 'photo:album'" class="w-100">
  223. <photo-album-presenter :status="status"></photo-album-presenter>
  224. </div>
  225. <div v-else-if="status.pf_type === 'video:album'" class="w-100">
  226. <video-album-presenter :status="status"></video-album-presenter>
  227. </div>
  228. <div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
  229. <mixed-album-presenter :status="status"></mixed-album-presenter>
  230. </div>
  231. <div v-else class="w-100">
  232. <p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
  233. </div>
  234. </div>
  235. <div class="card-body">
  236. <div class="reactions my-1" v-if="user.hasOwnProperty('id')">
  237. <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 cursor-pointer']" title="Like" v-on:click="likeStatus(status, $event)"></h3>
  238. <h3 class="far fa-comment pr-3 m-0 cursor-pointer" title="Comment" v-on:click="commentFocus(status, $event)"></h3>
  239. <h3 v-if="status.visibility == 'public'" v-bind:class="[status.reblogged ? 'far fa-share-square pr-3 m-0 text-primary cursor-pointer' : 'far fa-share-square pr-3 m-0 share-btn cursor-pointer']" title="Share" v-on:click="shareStatus(status, $event)"></h3>
  240. </div>
  241. <div class="likes font-weight-bold">
  242. <span class="like-count">{{status.favourites_count}}</span> {{status.favourites_count == 1 ? 'like' : 'likes'}}
  243. </div>
  244. <div class="caption">
  245. <p class="mb-2 read-more" style="overflow: hidden;">
  246. <span class="username font-weight-bold">
  247. <bdi><a class="text-dark" :href="status.account.url">{{status.account.username}}</a></bdi>
  248. </span>
  249. <span v-html="status.content"></span>
  250. </p>
  251. </div>
  252. <div class="comments">
  253. </div>
  254. <div class="timestamp pt-1">
  255. <p class="small text-uppercase mb-0">
  256. <a :href="status.url" class="text-muted">
  257. <timeago :datetime="status.created_at" :auto-update="60" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.created_at)" v-b-tooltip.hover.bottom></timeago>
  258. </a>
  259. </p>
  260. </div>
  261. </div>
  262. <div class="card-footer bg-white d-none">
  263. <form class="" v-on:submit.prevent="commentSubmit(status, $event)">
  264. <input type="hidden" name="item" value="">
  265. <input class="form-control status-reply-input" name="comment" placeholder="Add a comment…" autocomplete="off">
  266. </form>
  267. </div>
  268. </div>
  269. </div>
  270. </div>
  271. <div v-if="['grid','list'].indexOf(mode) != -1 && timeline.length == 0">
  272. <div class="py-5 text-center text-muted">
  273. <p><i class="fas fa-camera-retro fa-2x"></i></p>
  274. <p class="h2 font-weight-light pt-3">No posts yet</p>
  275. </div>
  276. </div>
  277. <div v-if="timeline.length && ['grid','list'].indexOf(mode) != -1">
  278. <infinite-loading @infinite="infiniteTimeline">
  279. <div slot="no-more"></div>
  280. <div slot="no-results"></div>
  281. </infinite-loading>
  282. </div>
  283. <div class="row" v-if="mode == 'bookmarks'">
  284. <div v-if="bookmarks.length">
  285. <div class="col-4 p-0 p-sm-2 p-md-3 p-xs-1" v-for="(s, index) in bookmarks">
  286. <a class="card info-overlay card-md-border-0" :href="s.url">
  287. <div class="square">
  288. <span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
  289. <span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
  290. <span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
  291. <div class="square-content" v-bind:style="previewBackground(s)">
  292. </div>
  293. <div class="info-overlay-text">
  294. <h5 class="text-white m-auto font-weight-bold">
  295. <span>
  296. <span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
  297. <span class="d-flex-inline">{{s.favourites_count}}</span>
  298. </span>
  299. <span>
  300. <span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
  301. <span class="d-flex-inline">{{s.reblogs_count}}</span>
  302. </span>
  303. </h5>
  304. </div>
  305. </div>
  306. </a>
  307. </div>
  308. </div>
  309. <div v-else class="col-12">
  310. <div class="py-5 text-center text-muted">
  311. <p><i class="fas fa-bookmark fa-2x"></i></p>
  312. <p class="h2 font-weight-light pt-3">You have no saved bookmarks</p>
  313. </div>
  314. </div>
  315. </div>
  316. <div class="col-12" v-if="mode == 'collections'">
  317. <div v-if="collections.length" class="row">
  318. <div class="col-4 p-0 p-sm-2 p-md-3 p-xs-1" v-for="(c, index) in collections">
  319. <a class="card info-overlay card-md-border-0" :href="c.url">
  320. <div class="square">
  321. <div class="square-content" v-bind:style="'background-image: url(' + c.thumb + ');'">
  322. </div>
  323. </div>
  324. </a>
  325. </div>
  326. </div>
  327. <div v-else>
  328. <div class="py-5 text-center text-muted">
  329. <p><i class="fas fa-images fa-2x"></i></p>
  330. <p class="h2 font-weight-light pt-3">No collections yet</p>
  331. </div>
  332. </div>
  333. </div>
  334. </div>
  335. </div>
  336. </div>
  337. <div v-if="profileLayout == 'moment'">
  338. <div :class="momentBackground()" style="width:100%;min-height:274px;">
  339. </div>
  340. <div class="bg-white border-bottom">
  341. <div class="container">
  342. <div class="row">
  343. <div class="col-12 row mx-0">
  344. <div class="col-4 text-left mt-2">
  345. <span v-if="relationship && relationship.followed_by">
  346. <span class="bg-light border border-secondary font-weight-bold small py-1 px-2 text-muted rounded">FOLLOWS YOU</span>
  347. </span>
  348. <span v-if="profile.is_admin">
  349. <span class="bg-light border border-danger font-weight-bold small py-1 px-2 text-danger rounded">ADMIN</span>
  350. </span>
  351. </div>
  352. <div class="col-4 text-center">
  353. <div class="d-block d-md-none">
  354. <img class="rounded-circle box-shadow" :src="profile.avatar" width="110px" height="110px" style="margin-top:-60px; border: 5px solid #fff">
  355. </div>
  356. <div class="d-none d-md-block">
  357. <img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px" style="margin-top:-90px; border: 5px solid #fff">
  358. </div>
  359. </div>
  360. <div class="col-4 text-right mt-2">
  361. <span class="d-none d-md-inline-block pl-4">
  362. <a :href="'/users/'+profile.username+'.atom'" class="fas fa-rss fa-lg text-muted text-decoration-none"></a>
  363. </span>
  364. <span class="pl-md-4 pl-sm-2" v-if="owner">
  365. <a class="fas fa-cog fa-lg text-muted text-decoration-none" href="/settings/home"></a>
  366. </span>
  367. <span class="pl-md-4 pl-sm-2" v-if="profile.id != user.id && user.hasOwnProperty('id')">
  368. <a class="fas fa-cog fa-lg text-muted text-decoration-none" href="#" @click.prevent="visitorMenu"></a>
  369. </span>
  370. <span v-if="profile.id != user.id && user.hasOwnProperty('id')">
  371. <span class="pl-md-4 pl-sm-2" v-if="relationship.following == true">
  372. <button type="button" class="btn btn-outline-secondary font-weight-bold btn-sm" @click.prevent="followProfile()" data-toggle="tooltip" title="Unfollow">Unfollow</button>
  373. </span>
  374. <span class="pl-md-4 pl-sm-2" v-else>
  375. <button type="button" class="btn btn-primary font-weight-bold btn-sm" @click.prevent="followProfile()" data-toggle="tooltip" title="Follow">Follow</button>
  376. </span>
  377. </span>
  378. </div>
  379. </div>
  380. <div class="col-12 text-center">
  381. <div class="profile-details my-3">
  382. <p class="font-weight-ultralight h2 text-center">{{profile.username}}</p>
  383. <div v-if="profile.note" class="text-center text-muted p-3" v-html="profile.note"></div>
  384. <div class="pb-3 text-muted text-center">
  385. <a class="text-lighter" :href="profile.url">
  386. <span class="font-weight-bold">{{profile.statuses_count}}</span>
  387. Posts
  388. </a>
  389. <a v-if="profileSettings.followers.count" class="text-lighter cursor-pointer px-3" v-on:click="followersModal()">
  390. <span class="font-weight-bold">{{profile.followers_count}}</span>
  391. Followers
  392. </a>
  393. <a v-if="profileSettings.following.count" class="text-lighter cursor-pointer" v-on:click="followingModal()">
  394. <span class="font-weight-bold">{{profile.following_count}}</span>
  395. Following
  396. </a>
  397. </div>
  398. </div>
  399. </div>
  400. </div>
  401. </div>
  402. </div>
  403. <div class="container-fluid">
  404. <div class="profile-timeline mt-md-4">
  405. <div class="card-columns" v-if="mode == 'grid'">
  406. <div class="p-sm-2 p-md-3" v-for="(s, index) in timeline">
  407. <a class="card info-overlay card-md-border-0" :href="s.url">
  408. <img :src="previewUrl(s)" class="img-fluid w-100">
  409. </a>
  410. </div>
  411. </div>
  412. <div v-if="timeline.length">
  413. <infinite-loading @infinite="infiniteTimeline">
  414. <div slot="no-more"></div>
  415. <div slot="no-results"></div>
  416. </infinite-loading>
  417. </div>
  418. </div>
  419. </div>
  420. </div>
  421. </div>
  422. <b-modal ref="followingModal"
  423. id="following-modal"
  424. hide-footer
  425. centered
  426. title="Following"
  427. body-class="list-group-flush p-0">
  428. <div class="list-group">
  429. <div class="list-group-item border-0" v-for="(user, index) in following" :key="'following_'+index">
  430. <div class="media">
  431. <a :href="user.url">
  432. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
  433. </a>
  434. <div class="media-body">
  435. <p class="mb-0" style="font-size: 14px">
  436. <a :href="user.url" class="font-weight-bold text-dark">
  437. {{user.username}}
  438. </a>
  439. </p>
  440. <p class="text-muted mb-0" style="font-size: 14px">
  441. {{user.display_name}}
  442. </p>
  443. </div>
  444. <div v-if="owner">
  445. <a class="btn btn-outline-secondary btn-sm" href="#" @click.prevent="followModalAction(user.id, index, 'following')">Unfollow</a>
  446. </div>
  447. </div>
  448. </div>
  449. <div v-if="following.length == 0" class="list-group-item border-0">
  450. <div class="list-group-item border-0">
  451. <p class="p-3 text-center mb-0 lead">You are not following anyone.</p>
  452. </div>
  453. </div>
  454. <div v-if="followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
  455. <p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
  456. </div>
  457. </div>
  458. </b-modal>
  459. <b-modal ref="followerModal"
  460. id="follower-modal"
  461. hide-footer
  462. centered
  463. title="Followers"
  464. body-class="list-group-flush p-0">
  465. <div class="list-group">
  466. <div class="list-group-item border-0" v-for="(user, index) in followers" :key="'follower_'+index">
  467. <div class="media">
  468. <a :href="user.url">
  469. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
  470. </a>
  471. <div class="media-body">
  472. <p class="mb-0" style="font-size: 14px">
  473. <a :href="user.url" class="font-weight-bold text-dark">
  474. {{user.username}}
  475. </a>
  476. </p>
  477. <p class="text-muted mb-0" style="font-size: 14px">
  478. {{user.display_name}}
  479. </p>
  480. </div>
  481. </div>
  482. </div>
  483. <div v-if="followerMore" class="list-group-item text-center" v-on:click="followersLoadMore()">
  484. <p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
  485. </div>
  486. </div>
  487. </b-modal>
  488. <b-modal ref="visitorContextMenu"
  489. id="visitor-context-menu"
  490. hide-footer
  491. hide-header
  492. centered
  493. size="sm"
  494. body-class="list-group-flush p-0">
  495. <div class="list-group" v-if="relationship">
  496. <div v-if="!owner && !relationship.following" class="list-group-item cursor-pointer text-center font-weight-bold lead rounded text-primary" @click="followProfile">
  497. Follow
  498. </div>
  499. <div v-if="!owner && relationship.following" class="list-group-item cursor-pointer text-center font-weight-bold lead rounded" @click="followProfile">
  500. Unfollow
  501. </div>
  502. <div v-if="!owner && !relationship.muting" class="list-group-item cursor-pointer text-center font-weight-bold lead rounded" @click="muteProfile">
  503. Mute
  504. </div>
  505. <div v-if="!owner && relationship.muting" class="list-group-item cursor-pointer text-center font-weight-bold lead rounded" @click="unmuteProfile">
  506. Unmute
  507. </div>
  508. <div v-if="!owner" class="list-group-item cursor-pointer text-center font-weight-bold lead rounded text-danger" @click="reportProfile">
  509. Report User
  510. </div>
  511. <div v-if="!owner && !relationship.blocking" class="list-group-item cursor-pointer text-center font-weight-bold lead rounded text-danger" @click="blockProfile">
  512. Block
  513. </div>
  514. <div v-if="!owner && relationship.blocking" class="list-group-item cursor-pointer text-center font-weight-bold lead rounded text-danger" @click="unblockProfile">
  515. Unblock
  516. </div>
  517. <div class="list-group-item cursor-pointer text-center font-weight-bold lead rounded text-muted" @click="$refs.visitorContextMenu.hide()">
  518. Close
  519. </div>
  520. </div>
  521. </b-modal>
  522. <b-modal ref="sponsorModal"
  523. id="sponsor-modal"
  524. hide-footer
  525. :title="'Sponsor ' + profileUsername"
  526. centered
  527. size="md"
  528. body-class="px-5">
  529. <div>
  530. <p class="font-weight-bold">External Links</p>
  531. <p v-if="sponsorList.patreon" class="pt-2">
  532. <a :href="'https://' + sponsorList.patreon" rel="nofollow" class="font-weight-bold">{{sponsorList.patreon}}</a>
  533. </p>
  534. <p v-if="sponsorList.liberapay" class="pt-2">
  535. <a :href="'https://' + sponsorList.liberapay" rel="nofollow" class="font-weight-bold">{{sponsorList.liberapay}}</a>
  536. </p>
  537. <p v-if="sponsorList.opencollective" class="pt-2">
  538. <a :href="'https://' + sponsorList.opencollective" rel="nofollow" class="font-weight-bold">{{sponsorList.opencollective}}</a>
  539. </p>
  540. </div>
  541. </b-modal>
  542. </div>
  543. </template>
  544. <style type="text/css" scoped>
  545. .o-square {
  546. max-width: 320px;
  547. }
  548. .o-portrait {
  549. max-width: 320px;
  550. }
  551. .o-landscape {
  552. max-width: 320px;
  553. }
  554. .post-icon {
  555. color: #fff;
  556. position:relative;
  557. margin-top: 10px;
  558. z-index: 9;
  559. opacity: 0.6;
  560. text-shadow: 3px 3px 16px #272634;
  561. }
  562. </style>
  563. <script type="text/javascript">
  564. export default {
  565. props: [
  566. 'profile-id',
  567. 'profile-layout',
  568. 'profile-settings',
  569. 'profile-username'
  570. ],
  571. data() {
  572. return {
  573. ids: [],
  574. profile: {},
  575. user: {},
  576. timeline: [],
  577. timelinePage: 2,
  578. min_id: 0,
  579. max_id: 0,
  580. loading: true,
  581. owner: false,
  582. mode: 'grid',
  583. modes: ['grid', 'list', 'masonry', 'bookmarks'],
  584. modalStatus: false,
  585. relationship: {},
  586. followers: [],
  587. followerCursor: 1,
  588. followerMore: true,
  589. following: [],
  590. followingCursor: 1,
  591. followingMore: true,
  592. warning: false,
  593. sponsorList: [],
  594. bookmarks: [],
  595. bookmarksPage: 2,
  596. collections: [],
  597. collectionsPage: 2
  598. }
  599. },
  600. beforeMount() {
  601. this.fetchRelationships();
  602. this.fetchProfile();
  603. if(window.outerWidth < 576 && window.history.length > 2) {
  604. $('nav.navbar').hide();
  605. $('body').prepend('<div class="bg-white p-3 border-bottom"><div class="d-flex justify-content-between align-items-center"><div onclick="window.history.back();"><i class="fas fa-chevron-left fa-lg"></i></div><div class="font-weight-bold">' + this.profileUsername + '</div><div><i class="fas fa-chevron-right text-white fa-lg"></i></div></div></div>');
  606. }
  607. let u = new URLSearchParams(window.location.search);
  608. if(u.has('ui') && u.get('ui') == 'moment' && this.profileLayout != 'moment') {
  609. this.profileLayout = 'moment';
  610. }
  611. if(u.has('ui') && u.get('ui') == 'metro' && this.profileLayout != 'metro') {
  612. this.profileLayout = 'metro';
  613. }
  614. },
  615. mounted() {
  616. },
  617. updated() {
  618. },
  619. methods: {
  620. fetchProfile() {
  621. axios.get('/api/v1/accounts/' + this.profileId).then(res => {
  622. this.profile = res.data;
  623. });
  624. if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
  625. axios.get('/api/v1/accounts/verify_credentials').then(res => {
  626. this.user = res.data;
  627. });
  628. }
  629. let apiUrl = '/api/v1/accounts/' + this.profileId + '/statuses';
  630. axios.get(apiUrl, {
  631. params: {
  632. only_media: true,
  633. min_id: 1,
  634. }
  635. })
  636. .then(res => {
  637. let data = res.data.filter(status => status.media_attachments.length > 0);
  638. let ids = data.map(status => status.id);
  639. this.ids = ids;
  640. this.min_id = Math.max(...ids);
  641. this.max_id = Math.min(...ids);
  642. this.modalStatus = _.first(res.data);
  643. this.timeline = data;
  644. this.ownerCheck();
  645. this.loading = false;
  646. this.loadSponsor();
  647. }).catch(err => {
  648. swal(
  649. 'Oops, something went wrong',
  650. 'Please release the page.',
  651. 'error'
  652. );
  653. });
  654. },
  655. ownerCheck() {
  656. if($('body').hasClass('loggedIn') == false) {
  657. this.owner = false;
  658. return;
  659. }
  660. this.owner = this.profile.id === this.user.id;
  661. },
  662. infiniteTimeline($state) {
  663. if(this.loading || this.timeline.length < 9) {
  664. $state.complete();
  665. return;
  666. }
  667. let apiUrl = '/api/v1/accounts/' + this.profileId + '/statuses';
  668. axios.get(apiUrl, {
  669. params: {
  670. only_media: true,
  671. max_id: this.max_id
  672. },
  673. }).then(res => {
  674. if (res.data.length && this.loading == false) {
  675. let data = res.data;
  676. let self = this;
  677. data.forEach(d => {
  678. if(self.ids.indexOf(d.id) == -1) {
  679. self.timeline.push(d);
  680. self.ids.push(d.id);
  681. }
  682. });
  683. this.min_id = Math.max(...this.ids);
  684. this.max_id = Math.min(...this.ids);
  685. $state.loaded();
  686. this.loading = false;
  687. } else {
  688. $state.complete();
  689. }
  690. });
  691. },
  692. previewUrl(status) {
  693. return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url;
  694. },
  695. previewBackground(status) {
  696. let preview = this.previewUrl(status);
  697. return 'background-image: url(' + preview + ');';
  698. },
  699. switchMode(mode) {
  700. this.mode = _.indexOf(this.modes, mode) ? mode : 'grid';
  701. if(this.mode == 'bookmarks' && this.bookmarks.length == 0) {
  702. axios.get('/api/local/bookmarks')
  703. .then(res => {
  704. this.bookmarks = res.data
  705. });
  706. }
  707. if(this.mode == 'collections' && this.collections.length == 0) {
  708. axios.get('/api/local/profile/collections/' + this.profileId)
  709. .then(res => {
  710. this.collections = res.data
  711. });
  712. }
  713. },
  714. reportProfile() {
  715. let id = this.profile.id;
  716. window.location.href = '/i/report?type=user&id=' + id;
  717. },
  718. reportUrl(status) {
  719. let type = status.in_reply_to ? 'comment' : 'post';
  720. let id = status.id;
  721. return '/i/report?type=' + type + '&id=' + id;
  722. },
  723. commentFocus(status, $event) {
  724. let el = event.target;
  725. let card = el.parentElement.parentElement.parentElement;
  726. let comments = card.getElementsByClassName('comments')[0];
  727. if(comments.children.length == 0) {
  728. comments.classList.add('mb-2');
  729. this.fetchStatusComments(status, card);
  730. }
  731. let footer = card.querySelectorAll('.card-footer')[0];
  732. let input = card.querySelectorAll('.status-reply-input')[0];
  733. if(footer.classList.contains('d-none') == true) {
  734. footer.classList.remove('d-none');
  735. input.focus();
  736. } else {
  737. footer.classList.add('d-none');
  738. input.blur();
  739. }
  740. },
  741. likeStatus(status, $event) {
  742. if($('body').hasClass('loggedIn') == false) {
  743. return;
  744. }
  745. axios.post('/i/like', {
  746. item: status.id
  747. }).then(res => {
  748. status.favourites_count = res.data.count;
  749. if(status.favourited == true) {
  750. status.favourited = false;
  751. } else {
  752. status.favourited = true;
  753. }
  754. }).catch(err => {
  755. swal('Error', 'Something went wrong, please try again later.', 'error');
  756. });
  757. },
  758. shareStatus(status, $event) {
  759. if($('body').hasClass('loggedIn') == false) {
  760. return;
  761. }
  762. axios.post('/i/share', {
  763. item: status.id
  764. }).then(res => {
  765. status.reblogs_count = res.data.count;
  766. if(status.reblogged == true) {
  767. status.reblogged = false;
  768. } else {
  769. status.reblogged = true;
  770. }
  771. }).catch(err => {
  772. swal('Error', 'Something went wrong, please try again later.', 'error');
  773. });
  774. },
  775. timestampFormat(timestamp) {
  776. let ts = new Date(timestamp);
  777. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  778. },
  779. editUrl(status) {
  780. return status.url + '/edit';
  781. },
  782. redirect(url) {
  783. window.location.href = url;
  784. return;
  785. },
  786. replyUrl(status) {
  787. let username = this.profile.username;
  788. let id = status.account.id == this.profile.id ? status.id : status.in_reply_to_id;
  789. return '/p/' + username + '/' + id;
  790. },
  791. mentionUrl(status) {
  792. let username = status.account.username;
  793. let id = status.id;
  794. return '/p/' + username + '/' + id;
  795. },
  796. statusOwner(status) {
  797. let sid = status.account.id;
  798. let uid = this.profile.id;
  799. if(sid == uid) {
  800. return true;
  801. } else {
  802. return false;
  803. }
  804. },
  805. fetchStatusComments(status, card) {
  806. axios.get('/api/v2/status/'+status.id+'/replies')
  807. .then(res => {
  808. let comments = card.querySelectorAll('.comments')[0];
  809. let data = res.data;
  810. data.forEach(function(i, k) {
  811. let username = document.createElement('a');
  812. username.classList.add('font-weight-bold');
  813. username.classList.add('text-dark');
  814. username.classList.add('mr-2');
  815. username.setAttribute('href', i.account.url);
  816. username.textContent = i.account.username;
  817. let text = document.createElement('span');
  818. text.innerHTML = i.content;
  819. let comment = document.createElement('p');
  820. comment.classList.add('read-more');
  821. comment.classList.add('mb-0');
  822. comment.appendChild(username);
  823. comment.appendChild(text);
  824. comments.appendChild(comment);
  825. });
  826. }).catch(err => {
  827. })
  828. },
  829. fetchRelationships() {
  830. if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == false) {
  831. return;
  832. }
  833. axios.get('/api/v1/accounts/relationships', {
  834. params: {
  835. 'id[]': this.profileId
  836. }
  837. }).then(res => {
  838. if(res.data.length) {
  839. this.relationship = res.data[0];
  840. if(res.data[0].blocking == true) {
  841. this.warning = true;
  842. }
  843. }
  844. });
  845. },
  846. muteProfile(status = null) {
  847. if($('body').hasClass('loggedIn') == false) {
  848. return;
  849. }
  850. let id = this.profileId;
  851. axios.post('/i/mute', {
  852. type: 'user',
  853. item: id
  854. }).then(res => {
  855. this.fetchRelationships();
  856. this.$refs.visitorContextMenu.hide();
  857. swal('Success', 'You have successfully muted ' + this.profile.acct, 'success');
  858. }).catch(err => {
  859. swal('Error', 'Something went wrong. Please try again later.', 'error');
  860. });
  861. },
  862. unmuteProfile(status = null) {
  863. if($('body').hasClass('loggedIn') == false) {
  864. return;
  865. }
  866. let id = this.profileId;
  867. axios.post('/i/unmute', {
  868. type: 'user',
  869. item: id
  870. }).then(res => {
  871. this.fetchRelationships();
  872. this.$refs.visitorContextMenu.hide();
  873. swal('Success', 'You have successfully unmuted ' + this.profile.acct, 'success');
  874. }).catch(err => {
  875. swal('Error', 'Something went wrong. Please try again later.', 'error');
  876. });
  877. },
  878. blockProfile(status = null) {
  879. if($('body').hasClass('loggedIn') == false) {
  880. return;
  881. }
  882. let id = this.profileId;
  883. axios.post('/i/block', {
  884. type: 'user',
  885. item: id
  886. }).then(res => {
  887. this.warning = true;
  888. this.fetchRelationships();
  889. this.$refs.visitorContextMenu.hide();
  890. swal('Success', 'You have successfully blocked ' + this.profile.acct, 'success');
  891. }).catch(err => {
  892. swal('Error', 'Something went wrong. Please try again later.', 'error');
  893. });
  894. },
  895. unblockProfile(status = null) {
  896. if($('body').hasClass('loggedIn') == false) {
  897. return;
  898. }
  899. let id = this.profileId;
  900. axios.post('/i/unblock', {
  901. type: 'user',
  902. item: id
  903. }).then(res => {
  904. this.fetchRelationships();
  905. this.$refs.visitorContextMenu.hide();
  906. swal('Success', 'You have successfully unblocked ' + this.profile.acct, 'success');
  907. }).catch(err => {
  908. swal('Error', 'Something went wrong. Please try again later.', 'error');
  909. });
  910. },
  911. deletePost(status, index) {
  912. if($('body').hasClass('loggedIn') == false || status.account.id !== this.profile.id) {
  913. return;
  914. }
  915. axios.post('/i/delete', {
  916. type: 'status',
  917. item: status.id
  918. }).then(res => {
  919. this.timeline.splice(index,1);
  920. swal('Success', 'You have successfully deleted this post', 'success');
  921. }).catch(err => {
  922. swal('Error', 'Something went wrong. Please try again later.', 'error');
  923. });
  924. },
  925. commentSubmit(status, $event) {
  926. if($('body').hasClass('loggedIn') == false) {
  927. return;
  928. }
  929. let id = status.id;
  930. let form = $event.target;
  931. let input = $(form).find('input[name="comment"]');
  932. let comment = input.val();
  933. let comments = form.parentElement.parentElement.getElementsByClassName('comments')[0];
  934. axios.post('/i/comment', {
  935. item: id,
  936. comment: comment
  937. }).then(res => {
  938. input.val('');
  939. input.blur();
  940. let username = document.createElement('a');
  941. username.classList.add('font-weight-bold');
  942. username.classList.add('text-dark');
  943. username.classList.add('mr-2');
  944. username.setAttribute('href', this.user.url);
  945. username.textContent = this.user.username;
  946. let text = document.createElement('span');
  947. text.innerHTML = comment;
  948. let wrapper = document.createElement('p');
  949. wrapper.classList.add('read-more');
  950. wrapper.classList.add('mb-0');
  951. wrapper.appendChild(username);
  952. wrapper.appendChild(text);
  953. comments.insertBefore(wrapper, comments.firstChild);
  954. });
  955. },
  956. statusModal(status) {
  957. this.modalStatus = status;
  958. this.$refs.statusModalRef.show();
  959. },
  960. masonryOrientation(status) {
  961. let o = status.media_attachments[0].orientation;
  962. if(!o) {
  963. o = 'square';
  964. }
  965. return o;
  966. },
  967. followProfile() {
  968. if($('body').hasClass('loggedIn') == false) {
  969. return;
  970. }
  971. axios.post('/i/follow', {
  972. item: this.profileId
  973. }).then(res => {
  974. this.$refs.visitorContextMenu.hide();
  975. if(this.relationship.following) {
  976. this.profile.followers_count--;
  977. if(this.profile.locked == true) {
  978. window.location.href = '/';
  979. }
  980. } else {
  981. this.profile.followers_count++;
  982. }
  983. this.relationship.following = !this.relationship.following;
  984. }).catch(err => {
  985. if(err.response.data.message) {
  986. swal('Error', err.response.data.message, 'error');
  987. }
  988. });
  989. },
  990. followingModal() {
  991. if($('body').hasClass('loggedIn') == false) {
  992. window.location.href = encodeURI('/login?next=/' + this.profile.username + '/');
  993. return;
  994. }
  995. if(this.profileSettings.following.list == false) {
  996. return;
  997. }
  998. if(this.following.length > 0) {
  999. this.$refs.followingModal.show();
  1000. return;
  1001. }
  1002. axios.get('/api/v1/accounts/'+this.profile.id+'/following', {
  1003. params: {
  1004. page: this.followingCursor
  1005. }
  1006. })
  1007. .then(res => {
  1008. this.following = res.data;
  1009. this.followingCursor++;
  1010. if(res.data.length < 10) {
  1011. this.followingMore = false;
  1012. }
  1013. });
  1014. this.$refs.followingModal.show();
  1015. },
  1016. followersModal() {
  1017. if($('body').hasClass('loggedIn') == false) {
  1018. window.location.href = encodeURI('/login?next=/' + this.profile.username + '/');
  1019. return;
  1020. }
  1021. if(this.profileSettings.followers.list == false) {
  1022. return;
  1023. }
  1024. if(this.followers.length > 0) {
  1025. this.$refs.followerModal.show();
  1026. return;
  1027. }
  1028. axios.get('/api/v1/accounts/'+this.profile.id+'/followers', {
  1029. params: {
  1030. page: this.followerCursor
  1031. }
  1032. })
  1033. .then(res => {
  1034. this.followers = res.data;
  1035. this.followerCursor++;
  1036. if(res.data.length < 10) {
  1037. this.followerMore = false;
  1038. }
  1039. })
  1040. this.$refs.followerModal.show();
  1041. },
  1042. followingLoadMore() {
  1043. if($('body').hasClass('loggedIn') == false) {
  1044. window.location.href = encodeURI('/login?next=/' + this.profile.username + '/');
  1045. return;
  1046. }
  1047. axios.get('/api/v1/accounts/'+this.profile.id+'/following', {
  1048. params: {
  1049. page: this.followingCursor
  1050. }
  1051. })
  1052. .then(res => {
  1053. if(res.data.length > 0) {
  1054. this.following.push(...res.data);
  1055. this.followingCursor++;
  1056. }
  1057. if(res.data.length < 10) {
  1058. this.followingMore = false;
  1059. }
  1060. });
  1061. },
  1062. followersLoadMore() {
  1063. if($('body').hasClass('loggedIn') == false) {
  1064. return;
  1065. }
  1066. axios.get('/api/v1/accounts/'+this.profile.id+'/followers', {
  1067. params: {
  1068. page: this.followerCursor
  1069. }
  1070. })
  1071. .then(res => {
  1072. if(res.data.length > 0) {
  1073. this.followers.push(...res.data);
  1074. this.followerCursor++;
  1075. }
  1076. if(res.data.length < 10) {
  1077. this.followerMore = false;
  1078. }
  1079. });
  1080. },
  1081. visitorMenu() {
  1082. if($('body').hasClass('loggedIn') == false) {
  1083. return;
  1084. }
  1085. this.$refs.visitorContextMenu.show();
  1086. },
  1087. followModalAction(id, index, type = 'following') {
  1088. axios.post('/i/follow', {
  1089. item: id
  1090. }).then(res => {
  1091. if(type == 'following') {
  1092. this.following.splice(index, 1);
  1093. this.profile.following_count--;
  1094. }
  1095. }).catch(err => {
  1096. if(err.response.data.message) {
  1097. swal('Error', err.response.data.message, 'error');
  1098. }
  1099. });
  1100. },
  1101. momentBackground() {
  1102. let c = 'w-100 h-100 mt-n3 ';
  1103. if(this.profile.header_bg) {
  1104. c += this.profile.header_bg == 'default' ? 'bg-pixelfed' : 'bg-moment-' + this.profile.header_bg;
  1105. } else {
  1106. c += 'bg-pixelfed';
  1107. }
  1108. return c;
  1109. },
  1110. loadSponsor() {
  1111. axios.get('/api/local/profile/sponsor/' + this.profileId)
  1112. .then(res => {
  1113. this.sponsorList = res.data;
  1114. });
  1115. },
  1116. showSponsorModal() {
  1117. this.$refs.sponsorModal.show();
  1118. }
  1119. }
  1120. }
  1121. </script>