Profile.vue 44 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366
  1. <template>
  2. <div class="w-100 h-100">
  3. <div v-if="isMobile" class="bg-white p-3 border-bottom">
  4. <div class="d-flex justify-content-between align-items-center">
  5. <div @click="goBack" class="cursor-pointer">
  6. <i class="fas fa-chevron-left fa-lg"></i>
  7. </div>
  8. <div class="font-weight-bold">
  9. {{this.profileUsername}}
  10. </div>
  11. <div>
  12. <a class="fas fa-ellipsis-v fa-lg text-muted text-decoration-none" href="#" @click.prevent="visitorMenu"></a>
  13. </div>
  14. </div>
  15. </div>
  16. <div v-if="relationship && relationship.blocking && warning" class="bg-white pt-3 border-bottom">
  17. <div class="container">
  18. <p class="text-center font-weight-bold">You are blocking this account</p>
  19. <p class="text-center font-weight-bold">Click <a href="#" class="cursor-pointer" @click.prevent="warning = false;">here</a> to view profile</p>
  20. </div>
  21. </div>
  22. <div v-if="loading" style="height: 80vh;" class="d-flex justify-content-center align-items-center">
  23. <img src="/img/pixelfed-icon-grey.svg" class="">
  24. </div>
  25. <div v-if="!loading && !warning">
  26. <div v-if="layout == 'metro'" class="container">
  27. <div :class="isMobile ? 'pt-5' : 'pt-5 border-bottom'">
  28. <div class="container px-0">
  29. <div class="row">
  30. <div class="col-12 col-md-4 d-md-flex">
  31. <div class="profile-avatar mx-md-auto">
  32. <!-- MOBILE PROFILE PICTURE -->
  33. <div class="d-block d-md-none mt-n3 mb-3">
  34. <div class="row">
  35. <div class="col-4">
  36. <div v-if="hasStory" class="has-story cursor-pointer shadow-sm" @click="storyRedirect()">
  37. <img :alt="profileUsername + '\'s profile picture'" class="rounded-circle" :src="profile.avatar" width="77px" height="77px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
  38. </div>
  39. <div v-else>
  40. <img :alt="profileUsername + '\'s profile picture'" class="rounded-circle border" :src="profile.avatar" width="77px" height="77px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
  41. </div>
  42. </div>
  43. <div class="col-8">
  44. <div class="d-block d-md-none mt-3 py-2">
  45. <ul class="nav d-flex justify-content-between">
  46. <li class="nav-item">
  47. <div class="font-weight-light">
  48. <span class="text-dark text-center">
  49. <p class="font-weight-bold mb-0">{{formatCount(profile.statuses_count)}}</p>
  50. <p class="text-muted mb-0 small">Posts</p>
  51. </span>
  52. </div>
  53. </li>
  54. <li class="nav-item">
  55. <div v-if="profileSettings.followers.count" class="font-weight-light">
  56. <a class="text-dark cursor-pointer text-center" v-on:click="followersModal()">
  57. <p class="font-weight-bold mb-0">{{formatCount(profile.followers_count)}}</p>
  58. <p class="text-muted mb-0 small">Followers</p>
  59. </a>
  60. </div>
  61. </li>
  62. <li class="nav-item">
  63. <div v-if="profileSettings.following.count" class="font-weight-light">
  64. <a class="text-dark cursor-pointer text-center" v-on:click="followingModal()">
  65. <p class="font-weight-bold mb-0">{{formatCount(profile.following_count)}}</p>
  66. <p class="text-muted mb-0 small">Following</p>
  67. </a>
  68. </div>
  69. </li>
  70. </ul>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. <!-- DESKTOP PROFILE PICTURE -->
  76. <div class="d-none d-md-block pb-3">
  77. <div v-if="hasStory" class="has-story-lg cursor-pointer shadow-sm" @click="storyRedirect()">
  78. <img :alt="profileUsername + '\'s profile picture'" class="rounded-circle box-shadow cursor-pointer" :src="profile.avatar" width="150px" height="150px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
  79. </div>
  80. <div v-else>
  81. <img :alt="profileUsername + '\'s profile picture'" class="rounded-circle box-shadow" :src="profile.avatar" width="150px" height="150px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
  82. </div>
  83. <p v-if="sponsorList.patreon || sponsorList.liberapay || sponsorList.opencollective" class="text-center mt-3">
  84. <button type="button" @click="showSponsorModal" class="btn btn-outline-secondary font-weight-bold py-0">
  85. <i class="fas fa-heart text-danger"></i>
  86. Donate
  87. </button>
  88. </p>
  89. </div>
  90. </div>
  91. </div>
  92. <div class="col-12 col-md-8 d-flex align-items-center">
  93. <div class="profile-details">
  94. <div class="d-none d-md-flex username-bar pb-3 align-items-center">
  95. <span class="font-weight-ultralight h3 mb-0">{{profile.username}}</span>
  96. <span v-if="profile.id != user.id && user.hasOwnProperty('id')">
  97. <span class="pl-4" v-if="relationship.following == true">
  98. <a :href="'/account/direct/t/'+profile.id" class="btn btn-outline-secondary font-weight-bold btn-sm py-1 text-dark mr-2 px-3 btn-sec-alt" style="border:1px solid #dbdbdb;" data-toggle="tooltip" title="Message">Message</a>
  99. <button type="button" class="btn btn-outline-secondary font-weight-bold btn-sm py-1 text-dark btn-sec-alt" style="border:1px solid #dbdbdb;" v-on:click="followProfile" data-toggle="tooltip" title="Unfollow"><i class="fas fa-user-check mx-3"></i></button>
  100. </span>
  101. <span class="pl-4" v-if="!relationship.following">
  102. <button type="button" class="btn btn-primary font-weight-bold btn-sm py-1 px-3" v-on:click="followProfile" data-toggle="tooltip" title="Follow">Follow</button>
  103. </span>
  104. </span>
  105. <span class="pl-4" v-if="owner && user.hasOwnProperty('id')">
  106. <a class="btn btn-outline-secondary btn-sm" href="/settings/home" style="font-weight: 600;">Edit Profile</a>
  107. </span>
  108. <span class="pl-4">
  109. <a class="fas fa-ellipsis-h fa-lg text-dark text-decoration-none" href="#" @click.prevent="visitorMenu"></a>
  110. </span>
  111. </div>
  112. <div class="font-size-16px">
  113. <div class="d-none d-md-inline-flex profile-stats pb-3">
  114. <div class="font-weight-light pr-5">
  115. <span class="text-dark">
  116. <span class="font-weight-bold">{{formatCount(profile.statuses_count)}}</span>
  117. Posts
  118. </span>
  119. </div>
  120. <div v-if="profileSettings.followers.count" class="font-weight-light pr-5">
  121. <a class="text-dark cursor-pointer" v-on:click="followersModal()">
  122. <span class="font-weight-bold">{{formatCount(profile.followers_count)}}</span>
  123. Followers
  124. </a>
  125. </div>
  126. <div v-if="profileSettings.following.count" class="font-weight-light">
  127. <a class="text-dark cursor-pointer" v-on:click="followingModal()">
  128. <span class="font-weight-bold">{{formatCount(profile.following_count)}}</span>
  129. Following
  130. </a>
  131. </div>
  132. </div>
  133. <div class="d-md-flex align-items-center mb-1 text-break">
  134. <div class="font-weight-bold mr-1">{{profile.display_name}}</div>
  135. <div v-if="profile.pronouns" class="text-muted small">{{profile.pronouns.join('/')}}</div>
  136. </div>
  137. <p v-if="profile.note" class="mb-0" v-html="profile.note"></p>
  138. <p v-if="profile.website"><a :href="profile.website" class="profile-website small" rel="me external nofollow noopener" target="_blank">{{formatWebsite(profile.website)}}</a></p>
  139. <p class="d-flex small text-muted align-items-center">
  140. <span v-if="profile.is_admin" class="btn btn-outline-danger btn-sm py-0 mr-3" title="Admin Account" data-toggle="tooltip">
  141. Admin
  142. </span>
  143. <span v-if="relationship && relationship.followed_by" class="btn btn-outline-muted btn-sm py-0 mr-3">Follows You</span>
  144. <span>
  145. Joined {{joinedAtFormat(profile.created_at)}}
  146. </span>
  147. </p>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. <div v-if="user && user.hasOwnProperty('id')" class="d-block d-md-none my-0 pt-3 border-bottom">
  155. <p class="pt-3">
  156. <button v-if="owner" class="btn btn-outline-secondary bg-white btn-sm py-1 btn-block text-center font-weight-bold text-dark border border-lighter" @click.prevent="redirect('/settings/home')">Edit Profile</button>
  157. <button v-if="!owner && relationship.following" class="btn btn-outline-secondary bg-white btn-sm py-1 px-5 font-weight-bold text-dark border border-lighter" @click="followProfile">&nbsp;&nbsp; Unfollow &nbsp;&nbsp;</button>
  158. <button v-if="!owner && !relationship.following" class="btn btn-primary btn-sm py-1 px-5 font-weight-bold" @click="followProfile">{{relationship.followed_by ? 'Follow Back' : '&nbsp;&nbsp;&nbsp;&nbsp; Follow &nbsp;&nbsp;&nbsp;&nbsp;'}}</button>
  159. <!-- <button v-if="!owner" class="btn btn-outline-secondary bg-white btn-sm py-1 px-5 font-weight-bold text-dark border border-lighter mx-2">Message</button>
  160. <button v-if="!owner" class="btn btn-outline-secondary bg-white btn-sm py-1 font-weight-bold text-dark border border-lighter"><i class="fas fa-chevron-down fa-sm"></i></button> -->
  161. </p>
  162. </div>
  163. <div class="">
  164. <ul class="nav nav-topbar d-flex justify-content-center border-0">
  165. <li class="nav-item border-top">
  166. <a :class="this.mode == 'grid' ? 'nav-link text-dark' : 'nav-link'" href="#" v-on:click.prevent="switchMode('grid')"><i class="fas fa-th"></i> <span class="d-none d-md-inline-block small pl-1">POSTS</span></a>
  167. </li>
  168. <li class="nav-item px-0 border-top">
  169. <a :class="this.mode == 'collections' ? 'nav-link text-dark' : 'nav-link'" href="#" v-on:click.prevent="switchMode('collections')"><i class="fas fa-images"></i> <span class="d-none d-md-inline-block small pl-1">COLLECTIONS</span></a>
  170. </li>
  171. <li v-if="owner" class="nav-item border-top">
  172. <a :class="this.mode == 'bookmarks' ? 'nav-link text-dark' : 'nav-link'" href="#" v-on:click.prevent="switchMode('bookmarks')"><i class="fas fa-bookmark"></i> <span class="d-none d-md-inline-block small pl-1">SAVED</span></a>
  173. </li>
  174. <li v-if="owner" class="nav-item border-top">
  175. <a :class="this.mode == 'archives' ? 'nav-link text-dark' : 'nav-link'" href="#" v-on:click.prevent="switchMode('archives')"><i class="far fa-folder-open"></i> <span class="d-none d-md-inline-block small pl-1">ARCHIVES</span></a>
  176. </li>
  177. </ul>
  178. </div>
  179. <div class="container px-0">
  180. <div class="profile-timeline mt-md-4">
  181. <div v-if="mode == 'grid'">
  182. <div class="row">
  183. <div class="col-4 p-1 p-md-3" v-for="(s, index) in timeline" :key="'tlob:'+index">
  184. <a class="card info-overlay card-md-border-0" :href="statusUrl(s)">
  185. <div class="square">
  186. <div v-if="s.sensitive" class="square-content">
  187. <div class="info-overlay-text-label">
  188. <h5 class="text-white m-auto font-weight-bold">
  189. <span>
  190. <span class="far fa-eye-slash fa-lg p-2 d-flex-inline"></span>
  191. </span>
  192. </h5>
  193. </div>
  194. <blur-hash-canvas
  195. width="32"
  196. height="32"
  197. :hash="s.media_attachments[0].blurhash"
  198. />
  199. </div>
  200. <div v-else class="square-content">
  201. <blur-hash-image
  202. width="32"
  203. height="32"
  204. :hash="s.media_attachments[0].blurhash"
  205. :src="s.media_attachments[0].preview_url"
  206. />
  207. </div>
  208. <span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
  209. <span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
  210. <span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
  211. <div class="info-overlay-text">
  212. <h5 class="text-white m-auto font-weight-bold">
  213. <span>
  214. <span class="far fa-comment fa-lg p-2 d-flex-inline"></span>
  215. <span class="d-flex-inline">{{formatCount(s.reply_count)}}</span>
  216. </span>
  217. </h5>
  218. </div>
  219. </div>
  220. </a>
  221. </div>
  222. <div v-if="timeline.length == 0" class="col-12">
  223. <div class="py-5 text-center text-muted">
  224. <p><i class="fas fa-camera-retro fa-2x"></i></p>
  225. <p class="h2 font-weight-light pt-3">No posts yet</p>
  226. </div>
  227. </div>
  228. </div>
  229. <div v-if="timeline.length">
  230. <infinite-loading @infinite="infiniteTimeline">
  231. <div slot="no-more"></div>
  232. <div slot="no-results"></div>
  233. </infinite-loading>
  234. </div>
  235. </div>
  236. <div v-if="mode == 'bookmarks'">
  237. <div v-if="bookmarksLoading">
  238. <div class="row">
  239. <div class="col-12">
  240. <div class="p-1 p-sm-2 p-md-3 d-flex justify-content-center align-items-center" style="height: 30vh;">
  241. <img src="/img/pixelfed-icon-grey.svg" class="">
  242. </div>
  243. </div>
  244. </div>
  245. </div>
  246. <div v-else>
  247. <div v-if="bookmarks.length" class="row">
  248. <div class="col-4 p-1 p-sm-2 p-md-3" v-for="(s, index) in bookmarks">
  249. <a class="card info-overlay card-md-border-0" :href="s.url">
  250. <div class="square">
  251. <span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
  252. <span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
  253. <span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
  254. <div class="square-content" v-bind:style="previewBackground(s)">
  255. </div>
  256. <div class="info-overlay-text">
  257. <h5 class="text-white m-auto font-weight-bold">
  258. <span>
  259. <span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
  260. <span class="d-flex-inline">{{s.reblogs_count}}</span>
  261. </span>
  262. </h5>
  263. </div>
  264. </div>
  265. </a>
  266. </div>
  267. </div>
  268. <div v-else class="col-12">
  269. <div class="py-5 text-center text-muted">
  270. <p><i class="fas fa-bookmark fa-2x"></i></p>
  271. <p class="h2 font-weight-light pt-3">No saved bookmarks</p>
  272. </div>
  273. </div>
  274. </div>
  275. </div>
  276. <div v-if="mode == 'collections'">
  277. <div v-if="collections.length && collectionsLoaded" class="row">
  278. <div class="col-4 p-1 p-sm-2 p-md-3" v-for="(c, index) in collections">
  279. <a class="card info-overlay card-md-border-0" :href="c.url">
  280. <div class="square">
  281. <div class="square-content" v-bind:style="'background-image: url(' + c.thumb + ');'">
  282. </div>
  283. </div>
  284. </a>
  285. </div>
  286. </div>
  287. <div v-else>
  288. <div class="py-5 text-center text-muted">
  289. <p><i class="fas fa-images fa-2x"></i></p>
  290. <p class="h2 font-weight-light pt-3">No collections yet</p>
  291. </div>
  292. </div>
  293. </div>
  294. <div v-if="mode == 'archives'">
  295. <div v-if="archives.length" class="col-12 col-md-8 offset-md-2 px-0 mb-sm-3 timeline mt-5">
  296. <div class="alert alert-info">
  297. <p class="mb-0">Posts you archive can only be seen by you.</p>
  298. <p class="mb-0">For more information see the <a href="/site/kb/sharing-media">Sharing Media</a> help center page.</p>
  299. </div>
  300. <div v-for="(status, index) in archives">
  301. <status-card
  302. :class="{ 'border-top': index === 0 }"
  303. :status="status"
  304. :reaction-bar="false"
  305. />
  306. </div>
  307. <infinite-loading @infinite="archivesInfiniteLoader">
  308. <div slot="no-more"></div>
  309. <div slot="no-results"></div>
  310. </infinite-loading>
  311. </div>
  312. </div>
  313. </div>
  314. </div>
  315. </div>
  316. </div>
  317. <b-modal
  318. v-if="profile && following"
  319. ref="followingModal"
  320. id="following-modal"
  321. hide-footer
  322. centered
  323. scrollable
  324. title="Following"
  325. body-class="list-group-flush py-3 px-0"
  326. dialog-class="follow-modal">
  327. <div v-if="!followingLoading" class="list-group" style="max-height: 60vh;">
  328. <div v-if="!following.length" class="list-group-item border-0">
  329. <p class="text-center mb-0 font-weight-bold text-muted py-5">
  330. <span class="text-dark">{{profileUsername}}</span> is not following yet</p>
  331. </div>
  332. <div v-else>
  333. <div class="list-group-item border-0 py-1 mb-1" v-for="(user, index) in following" :key="'following_'+index">
  334. <div class="media">
  335. <a :href="profileUrlRedirect(user)">
  336. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy" onerror="this.src='/storage/avatars/default.jpg?v=0';this.onerror=null;" v-once>
  337. </a>
  338. <div class="media-body text-truncate">
  339. <p class="mb-0" style="font-size: 14px">
  340. <a :href="profileUrlRedirect(user)" class="font-weight-bold text-dark">
  341. {{user.username}}
  342. </a>
  343. </p>
  344. <p v-if="!user.local" class="text-muted mb-0 text-break mr-3" style="font-size: 14px" :title="user.acct" data-toggle="dropdown" data-placement="bottom">
  345. <span class="font-weight-bold">{{user.acct.split('@')[0]}}</span><span class="text-lighter">&commat;{{user.acct.split('@')[1]}}</span>
  346. </p>
  347. <p v-else class="text-muted mb-0 text-truncate" style="font-size: 14px">
  348. {{user.display_name ? user.display_name : user.username}}
  349. </p>
  350. </div>
  351. <div v-if="owner">
  352. <a class="btn btn-outline-dark btn-sm font-weight-bold" href="#" @click.prevent="followModalAction(user.id, index, 'following')">Following</a>
  353. </div>
  354. </div>
  355. </div>
  356. <div v-if="!followingLoading && following.length == 0" class="list-group-item border-0">
  357. <div class="list-group-item border-0 pt-5">
  358. <p class="p-3 text-center mb-0 lead">No Results Found</p>
  359. </div>
  360. </div>
  361. <div v-if="following.length > 0 && followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
  362. <p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
  363. </div>
  364. </div>
  365. </div>
  366. <div v-else class="text-center py-5">
  367. <div class="spinner-border" role="status">
  368. <span class="sr-only">Loading...</span>
  369. </div>
  370. </div>
  371. </b-modal>
  372. <b-modal ref="followerModal"
  373. id="follower-modal"
  374. hide-footer
  375. centered
  376. scrollable
  377. title="Followers"
  378. body-class="list-group-flush py-3 px-0"
  379. dialog-class="follow-modal"
  380. >
  381. <div v-if="!followerLoading" class="list-group" style="max-height: 60vh;">
  382. <div v-if="!followerLoading && !followers.length" class="list-group-item border-0">
  383. <p class="text-center mb-0 font-weight-bold text-muted py-5">
  384. <span class="text-dark">{{profileUsername}}</span> has no followers yet</p>
  385. </div>
  386. <div v-else>
  387. <div class="list-group-item border-0 py-1 mb-1" v-for="(user, index) in followers" :key="'follower_'+index">
  388. <div class="media mb-0">
  389. <a :href="profileUrlRedirect(user)">
  390. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" height="30px" loading="lazy" onerror="this.src='/storage/avatars/default.jpg?v=0';this.onerror=null;" v-once>
  391. </a>
  392. <div class="media-body mb-0">
  393. <p class="mb-0" style="font-size: 14px">
  394. <a :href="profileUrlRedirect(user)" class="font-weight-bold text-dark">
  395. {{user.username}}
  396. </a>
  397. </p>
  398. <p v-if="!user.local" class="text-muted mb-0 text-break mr-3" style="font-size: 14px" :title="user.acct" data-toggle="dropdown" data-placement="bottom">
  399. <span class="font-weight-bold">{{user.acct.split('@')[0]}}</span><span class="text-lighter">&commat;{{user.acct.split('@')[1]}}</span>
  400. </p>
  401. <p v-else class="text-muted mb-0 text-truncate" style="font-size: 14px">
  402. {{user.display_name ? user.display_name : user.username}}
  403. </p>
  404. </div>
  405. <!-- <button class="btn btn-primary font-weight-bold btn-sm py-1">FOLLOW</button> -->
  406. </div>
  407. </div>
  408. <div v-if="followers.length && followerMore" class="list-group-item text-center" v-on:click="followersLoadMore()">
  409. <p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
  410. </div>
  411. </div>
  412. </div>
  413. <div v-else class="text-center py-5">
  414. <div class="spinner-border" role="status">
  415. <span class="sr-only">Loading...</span>
  416. </div>
  417. </div>
  418. </b-modal>
  419. <b-modal ref="visitorContextMenu"
  420. id="visitor-context-menu"
  421. hide-footer
  422. hide-header
  423. centered
  424. size="sm"
  425. body-class="list-group-flush p-0">
  426. <div class="list-group" v-if="relationship">
  427. <div class="list-group-item cursor-pointer text-center rounded text-dark" @click="copyProfileLink">
  428. Copy Link
  429. </div>
  430. <div v-if="profile.locked == false" class="list-group-item cursor-pointer text-center rounded text-dark" @click="showEmbedProfileModal">
  431. Embed
  432. </div>
  433. <div v-if="user && !owner && !relationship.following" class="list-group-item cursor-pointer text-center rounded text-dark" @click="followProfile">
  434. Follow
  435. </div>
  436. <div v-if="user && !owner && relationship.following" class="list-group-item cursor-pointer text-center rounded" @click="followProfile">
  437. Unfollow
  438. </div>
  439. <div v-if="user && !owner && !relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="muteProfile">
  440. Mute
  441. </div>
  442. <div v-if="user && !owner && relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="unmuteProfile">
  443. Unmute
  444. </div>
  445. <div v-if="user && !owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="reportProfile">
  446. Report User
  447. </div>
  448. <div v-if="user && !owner && !relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="blockProfile">
  449. Block
  450. </div>
  451. <div v-if="user && !owner && relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="unblockProfile">
  452. Unblock
  453. </div>
  454. <div v-if="user && owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="redirect('/settings/home')">
  455. Settings
  456. </div>
  457. <div class="list-group-item cursor-pointer text-center rounded text-dark" @click="redirect('/users/' + profileUsername + '.atom')">
  458. Atom Feed
  459. </div>
  460. <div class="list-group-item cursor-pointer text-center rounded text-muted font-weight-bold" @click="$refs.visitorContextMenu.hide()">
  461. Close
  462. </div>
  463. </div>
  464. </b-modal>
  465. <b-modal ref="sponsorModal"
  466. id="sponsor-modal"
  467. hide-footer
  468. :title="'Sponsor ' + profileUsername"
  469. centered
  470. size="md"
  471. body-class="px-5">
  472. <div>
  473. <p class="font-weight-bold">External Links</p>
  474. <p v-if="sponsorList.patreon" class="pt-2">
  475. <a :href="'https://' + sponsorList.patreon" rel="nofollow" class="font-weight-bold">{{sponsorList.patreon}}</a>
  476. </p>
  477. <p v-if="sponsorList.liberapay" class="pt-2">
  478. <a :href="'https://' + sponsorList.liberapay" rel="nofollow" class="font-weight-bold">{{sponsorList.liberapay}}</a>
  479. </p>
  480. <p v-if="sponsorList.opencollective" class="pt-2">
  481. <a :href="'https://' + sponsorList.opencollective" rel="nofollow" class="font-weight-bold">{{sponsorList.opencollective}}</a>
  482. </p>
  483. </div>
  484. </b-modal>
  485. <b-modal ref="embedModal"
  486. id="ctx-embed-modal"
  487. hide-header
  488. hide-footer
  489. centered
  490. rounded
  491. size="md"
  492. body-class="p-2 rounded">
  493. <div>
  494. <textarea class="form-control disabled text-monospace" rows="6" style="overflow-y:hidden;border: 1px solid #efefef; font-size: 12px; line-height: 18px; margin: 0 0 7px;resize:none;" v-model="ctxEmbedPayload" disabled=""></textarea>
  495. <hr>
  496. <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>
  497. <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>
  498. </div>
  499. </b-modal>
  500. </div>
  501. </template>
  502. <style type="text/css" scoped>
  503. .o-square {
  504. max-width: 320px;
  505. }
  506. .o-portrait {
  507. max-width: 320px;
  508. }
  509. .o-landscape {
  510. max-width: 320px;
  511. }
  512. .post-icon {
  513. color: #fff;
  514. position:relative;
  515. margin-top: 10px;
  516. z-index: 9;
  517. opacity: 0.6;
  518. text-shadow: 3px 3px 16px #272634;
  519. }
  520. .font-size-16px {
  521. font-size: 16px;
  522. }
  523. .profile-website {
  524. color: #003569;
  525. text-decoration: none;
  526. font-weight: 600;
  527. }
  528. .nav-topbar .nav-link {
  529. color: #999;
  530. }
  531. .nav-topbar .nav-link .small {
  532. font-weight: 600;
  533. }
  534. .has-story {
  535. width: 84px;
  536. height: 84px;
  537. border-radius: 50%;
  538. padding: 4px;
  539. background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
  540. }
  541. .has-story img {
  542. width: 76px;
  543. height: 76px;
  544. border-radius: 50%;
  545. padding: 6px;
  546. background: #fff;
  547. }
  548. .has-story-lg {
  549. width: 159px;
  550. height: 159px;
  551. border-radius: 50%;
  552. padding: 4px;
  553. background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
  554. }
  555. .has-story-lg img {
  556. width: 150px;
  557. height: 150px;
  558. border-radius: 50%;
  559. padding: 6px;
  560. background:#fff;
  561. }
  562. .no-focus {
  563. border-color: none;
  564. outline: 0;
  565. box-shadow: none;
  566. }
  567. .modal-tab-active {
  568. border-bottom: 1px solid #08d;
  569. }
  570. .btn-sec-alt:hover {
  571. color: #ccc;
  572. opacity: .7;
  573. background-color: transparent;
  574. border-color: #6c757d;
  575. }
  576. </style>
  577. <script type="text/javascript">
  578. import VueMasonry from 'vue-masonry-css'
  579. import StatusCard from './partials/StatusCard.vue';
  580. import { parseLinkHeader } from '@web3-storage/parse-link-header';
  581. export default {
  582. props: [
  583. 'profile-id',
  584. 'profile-layout',
  585. 'profile-settings',
  586. 'profile-username'
  587. ],
  588. components: {
  589. StatusCard,
  590. },
  591. data() {
  592. return {
  593. ids: [],
  594. profile: {},
  595. user: false,
  596. timeline: [],
  597. timelinePage: 2,
  598. min_id: 0,
  599. max_id: 0,
  600. loading: true,
  601. owner: false,
  602. layout: 'metro',
  603. mode: 'grid',
  604. modes: ['grid', 'collections', 'bookmarks', 'archives'],
  605. modalStatus: false,
  606. relationship: {},
  607. followers: [],
  608. followerCursor: null,
  609. followerMore: true,
  610. followerLoading: true,
  611. following: [],
  612. followingCursor: null,
  613. followingMore: true,
  614. followingLoading: true,
  615. warning: false,
  616. sponsorList: [],
  617. bookmarks: [],
  618. bookmarksPage: 2,
  619. collections: [],
  620. collectionsLoaded: false,
  621. collectionsPage: 2,
  622. isMobile: false,
  623. ctxEmbedPayload: null,
  624. copiedEmbed: false,
  625. hasStory: null,
  626. followingModalTab: 'following',
  627. bookmarksLoading: true,
  628. archives: [],
  629. archivesPage: 2
  630. }
  631. },
  632. beforeMount() {
  633. this.fetchProfile();
  634. let u = new URLSearchParams(window.location.search);
  635. this.layout = 'metro';
  636. if(this.layout == 'metro' && u.has('t')) {
  637. if(this.modes.indexOf(u.get('t')) != -1) {
  638. if(u.get('t') == 'bookmarks') {
  639. return;
  640. }
  641. this.mode = u.get('t');
  642. }
  643. }
  644. if(u.has('m') && this.modes.includes(u.get('m'))) {
  645. this.mode = u.get('m');
  646. if(this.mode == 'bookmarks') {
  647. axios.get('/api/local/bookmarks')
  648. .then(res => {
  649. this.bookmarks = res.data;
  650. this.bookmarksLoading = false;
  651. }).catch(err => {
  652. this.mode = 'grid';
  653. });
  654. }
  655. if(this.mode == 'collections') {
  656. axios.get('/api/local/profile/collections/' + this.profileId)
  657. .then(res => {
  658. this.collections = res.data
  659. this.collectionsLoaded = true;
  660. }).catch(err => {
  661. this.mode = 'grid';
  662. });
  663. }
  664. if(this.mode == 'archives') {
  665. axios.get('/api/pixelfed/v2/statuses/archives')
  666. .then(res => {
  667. this.archives = res.data;
  668. }).catch(err => {
  669. this.mode = 'grid';
  670. });
  671. }
  672. }
  673. },
  674. mounted() {
  675. let u = new URLSearchParams(window.location.search);
  676. if(u.has('md') && u.get('md') == 'followers') {
  677. this.followersModal();
  678. }
  679. if(u.has('md') && u.get('md') == 'following') {
  680. this.followingModal();
  681. }
  682. if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
  683. axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
  684. this.user = res.data;
  685. window._sharedData.curUser = res.data;
  686. window.App.util.navatar();
  687. this.fetchRelationships();
  688. });
  689. }
  690. },
  691. updated() {
  692. $('[data-toggle="tooltip"]').tooltip();
  693. },
  694. methods: {
  695. fetchProfile() {
  696. axios.get('/api/pixelfed/v1/accounts/' + this.profileId).then(res => {
  697. this.profile = res.data;
  698. }).then(res => {
  699. this.fetchPosts();
  700. });
  701. },
  702. fetchPosts() {
  703. let apiUrl = '/api/pixelfed/v1/accounts/' + this.profileId + '/statuses';
  704. axios.get(apiUrl, {
  705. params: {
  706. only_media: true,
  707. min_id: 1,
  708. }
  709. })
  710. .then(res => {
  711. let data = res.data.filter(status => status.media_attachments.length > 0);
  712. let ids = data.map(status => status.id);
  713. this.ids = ids;
  714. this.min_id = Math.max(...ids);
  715. this.max_id = Math.min(...ids);
  716. this.modalStatus = _.first(res.data);
  717. this.timeline = data;
  718. this.ownerCheck();
  719. this.loading = false;
  720. //this.loadSponsor();
  721. }).catch(err => {
  722. swal('Oops, something went wrong',
  723. 'Please release the page.',
  724. 'error');
  725. });
  726. },
  727. ownerCheck() {
  728. if($('body').hasClass('loggedIn') == false) {
  729. this.owner = false;
  730. return;
  731. }
  732. this.owner = this.profile.id === this.user.id;
  733. },
  734. infiniteTimeline($state) {
  735. if(this.loading || this.timeline.length < 9) {
  736. $state.complete();
  737. return;
  738. }
  739. let apiUrl = '/api/pixelfed/v1/accounts/' + this.profileId + '/statuses';
  740. axios.get(apiUrl, {
  741. params: {
  742. only_media: true,
  743. max_id: this.max_id
  744. },
  745. }).then(res => {
  746. if (res.data.length && this.loading == false) {
  747. let data = res.data;
  748. let self = this;
  749. data.forEach(d => {
  750. if(self.ids.indexOf(d.id) == -1) {
  751. self.timeline.push(d);
  752. self.ids.push(d.id);
  753. }
  754. });
  755. let max = Math.min(...this.ids);
  756. if(max == this.max_id) {
  757. $state.complete();
  758. return;
  759. }
  760. this.min_id = Math.max(...this.ids);
  761. this.max_id = max;
  762. $state.loaded();
  763. this.loading = false;
  764. } else {
  765. $state.complete();
  766. }
  767. });
  768. },
  769. previewUrl(status) {
  770. return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url;
  771. },
  772. previewBackground(status) {
  773. let preview = this.previewUrl(status);
  774. return 'background-image: url(' + preview + ');';
  775. },
  776. blurhHashMedia(status) {
  777. return status.sensitive ? null :
  778. status.media_attachments[0].preview_url;
  779. },
  780. switchMode(mode) {
  781. if(mode == 'grid') {
  782. this.mode = mode;
  783. } else if(mode == 'bookmarks' && this.bookmarks.length) {
  784. this.mode = 'bookmarks';
  785. } else if(mode == 'collections' && this.collections.length) {
  786. this.mode = 'collections';
  787. } else {
  788. window.location.href = '/' + this.profileUsername + '?m=' + mode;
  789. return;
  790. }
  791. },
  792. reportProfile() {
  793. let id = this.profile.id;
  794. window.location.href = '/i/report?type=user&id=' + id;
  795. },
  796. reportUrl(status) {
  797. let type = status.in_reply_to ? 'comment' : 'post';
  798. let id = status.id;
  799. return '/i/report?type=' + type + '&id=' + id;
  800. },
  801. commentFocus(status, $event) {
  802. let el = event.target;
  803. let card = el.parentElement.parentElement.parentElement;
  804. let comments = card.getElementsByClassName('comments')[0];
  805. if(comments.children.length == 0) {
  806. comments.classList.add('mb-2');
  807. this.fetchStatusComments(status, card);
  808. }
  809. let footer = card.querySelectorAll('.card-footer')[0];
  810. let input = card.querySelectorAll('.status-reply-input')[0];
  811. if(footer.classList.contains('d-none') == true) {
  812. footer.classList.remove('d-none');
  813. input.focus();
  814. } else {
  815. footer.classList.add('d-none');
  816. input.blur();
  817. }
  818. },
  819. likeStatus(status, $event) {
  820. if($('body').hasClass('loggedIn') == false) {
  821. return;
  822. }
  823. axios.post('/i/like', {
  824. item: status.id
  825. }).then(res => {
  826. status.favourites_count = res.data.count;
  827. if(status.favourited == true) {
  828. status.favourited = false;
  829. } else {
  830. status.favourited = true;
  831. }
  832. }).catch(err => {
  833. swal('Error', 'Something went wrong, please try again later.', 'error');
  834. });
  835. },
  836. shareStatus(status, $event) {
  837. if($('body').hasClass('loggedIn') == false) {
  838. return;
  839. }
  840. axios.post('/i/share', {
  841. item: status.id
  842. }).then(res => {
  843. status.reblogs_count = res.data.count;
  844. if(status.reblogged == true) {
  845. status.reblogged = false;
  846. } else {
  847. status.reblogged = true;
  848. }
  849. }).catch(err => {
  850. swal('Error', 'Something went wrong, please try again later.', 'error');
  851. });
  852. },
  853. timestampFormat(timestamp) {
  854. let ts = new Date(timestamp);
  855. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  856. },
  857. editUrl(status) {
  858. return status.url + '/edit';
  859. },
  860. redirect(url) {
  861. window.location.href = url;
  862. return;
  863. },
  864. remoteRedirect(url) {
  865. window.location.href = window.App.config.site.url + '/i/redirect?url=' + encodeURIComponent(url);
  866. return;
  867. },
  868. replyUrl(status) {
  869. let username = this.profile.username;
  870. let id = status.account.id == this.profile.id ? status.id : status.in_reply_to_id;
  871. return '/p/' + username + '/' + id;
  872. },
  873. mentionUrl(status) {
  874. let username = status.account.username;
  875. let id = status.id;
  876. return '/p/' + username + '/' + id;
  877. },
  878. statusOwner(status) {
  879. let sid = status.account.id;
  880. let uid = this.profile.id;
  881. if(sid == uid) {
  882. return true;
  883. } else {
  884. return false;
  885. }
  886. },
  887. fetchRelationships() {
  888. if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == false) {
  889. return;
  890. }
  891. axios.get('/api/pixelfed/v1/accounts/relationships', {
  892. params: {
  893. 'id[]': this.profileId
  894. }
  895. }).then(res => {
  896. if(res.data.length) {
  897. this.relationship = res.data[0];
  898. if(res.data[0].blocking == true) {
  899. this.warning = true;
  900. }
  901. }
  902. if(this.user.id == this.profileId || this.relationship.following == true) {
  903. axios.get('/api/web/stories/v1/exists/' + this.profileId)
  904. .then(res => {
  905. this.hasStory = (res.data == true);
  906. })
  907. }
  908. });
  909. },
  910. muteProfile(status = null) {
  911. if($('body').hasClass('loggedIn') == false) {
  912. return;
  913. }
  914. let id = this.profileId;
  915. axios.post('/i/mute', {
  916. type: 'user',
  917. item: id
  918. }).then(res => {
  919. this.fetchRelationships();
  920. this.$refs.visitorContextMenu.hide();
  921. swal('Success', 'You have successfully muted ' + this.profile.acct, 'success');
  922. }).catch(err => {
  923. if(err.response.status == 422) {
  924. swal('Error', err.response.data.error, 'error');
  925. } else {
  926. swal('Error', 'Something went wrong. Please try again later.', 'error');
  927. }
  928. });
  929. },
  930. unmuteProfile(status = null) {
  931. if($('body').hasClass('loggedIn') == false) {
  932. return;
  933. }
  934. let id = this.profileId;
  935. axios.post('/i/unmute', {
  936. type: 'user',
  937. item: id
  938. }).then(res => {
  939. this.fetchRelationships();
  940. this.$refs.visitorContextMenu.hide();
  941. swal('Success', 'You have successfully unmuted ' + this.profile.acct, 'success');
  942. }).catch(err => {
  943. swal('Error', 'Something went wrong. Please try again later.', 'error');
  944. });
  945. },
  946. blockProfile(status = null) {
  947. if($('body').hasClass('loggedIn') == false) {
  948. return;
  949. }
  950. let id = this.profileId;
  951. axios.post('/i/block', {
  952. type: 'user',
  953. item: id
  954. }).then(res => {
  955. this.warning = true;
  956. this.fetchRelationships();
  957. this.$refs.visitorContextMenu.hide();
  958. swal('Success', 'You have successfully blocked ' + this.profile.acct, 'success');
  959. }).catch(err => {
  960. if(err.response.status == 422) {
  961. swal('Error', err.response.data.error, 'error');
  962. } else {
  963. swal('Error', 'Something went wrong. Please try again later.', 'error');
  964. }
  965. });
  966. },
  967. unblockProfile(status = null) {
  968. if($('body').hasClass('loggedIn') == false) {
  969. return;
  970. }
  971. let id = this.profileId;
  972. axios.post('/i/unblock', {
  973. type: 'user',
  974. item: id
  975. }).then(res => {
  976. this.fetchRelationships();
  977. this.$refs.visitorContextMenu.hide();
  978. swal('Success', 'You have successfully unblocked ' + this.profile.acct, 'success');
  979. }).catch(err => {
  980. swal('Error', 'Something went wrong. Please try again later.', 'error');
  981. });
  982. },
  983. deletePost(status, index) {
  984. if($('body').hasClass('loggedIn') == false || status.account.id !== this.profile.id) {
  985. return;
  986. }
  987. axios.post('/i/delete', {
  988. type: 'status',
  989. item: status.id
  990. }).then(res => {
  991. this.timeline.splice(index,1);
  992. swal('Success', 'You have successfully deleted this post', 'success');
  993. }).catch(err => {
  994. swal('Error', 'Something went wrong. Please try again later.', 'error');
  995. });
  996. },
  997. followProfile() {
  998. if($('body').hasClass('loggedIn') == false) {
  999. return;
  1000. }
  1001. this.$refs.visitorContextMenu.hide();
  1002. const curState = this.relationship.following;
  1003. const apiUrl = curState ?
  1004. '/api/v1/accounts/' + this.profileId + '/unfollow' :
  1005. '/api/v1/accounts/' + this.profileId + '/follow';
  1006. axios.post(apiUrl)
  1007. .then(res => {
  1008. if(curState) {
  1009. this.profile.followers_count--;
  1010. if(this.profile.locked) {
  1011. location.reload();
  1012. }
  1013. } else {
  1014. this.profile.followers_count++;
  1015. }
  1016. this.relationship = res.data;
  1017. }).catch(err => {
  1018. if(err.response.data.message) {
  1019. swal('Error', err.response.data.message, 'error');
  1020. }
  1021. });
  1022. },
  1023. followingModal() {
  1024. if($('body').hasClass('loggedIn') == false) {
  1025. window.location.href = encodeURI('/login?next=/' + this.profileUsername + '/');
  1026. return;
  1027. }
  1028. if(this.profileSettings.following.list == false) {
  1029. return;
  1030. }
  1031. if(this.followingCursor) {
  1032. this.$refs.followingModal.show();
  1033. return;
  1034. } else {
  1035. axios.get('/api/v1/accounts/'+this.profileId+'/following', {
  1036. params: {
  1037. cursor: this.followingCursor,
  1038. limit: 40,
  1039. '_pe': 1
  1040. }
  1041. })
  1042. .then(res => {
  1043. this.following = res.data;
  1044. if(res.headers && res.headers.link) {
  1045. const links = parseLinkHeader(res.headers.link);
  1046. if(links.prev) {
  1047. this.followingCursor = links.prev.cursor;
  1048. this.followingMore = true;
  1049. } else {
  1050. this.followingMore = false;
  1051. }
  1052. } else {
  1053. this.followingMore = false;
  1054. }
  1055. })
  1056. .then(() => {
  1057. setTimeout(() => { this.followingLoading = false }, 1000);
  1058. });
  1059. this.$refs.followingModal.show();
  1060. return;
  1061. }
  1062. },
  1063. followersModal() {
  1064. if($('body').hasClass('loggedIn') == false) {
  1065. window.location.href = encodeURI('/login?next=/' + this.profileUsername + '/');
  1066. return;
  1067. }
  1068. if(this.profileSettings.followers.list == false) {
  1069. return;
  1070. }
  1071. if(this.followerCursor > 1) {
  1072. this.$refs.followerModal.show();
  1073. return;
  1074. } else {
  1075. axios.get('/api/v1/accounts/'+this.profileId+'/followers', {
  1076. params: {
  1077. cursor: this.followerCursor,
  1078. limit: 40,
  1079. '_pe': 1
  1080. }
  1081. })
  1082. .then(res => {
  1083. this.followers.push(...res.data);
  1084. if(res.headers && res.headers.link) {
  1085. const links = parseLinkHeader(res.headers.link);
  1086. if(links.prev) {
  1087. this.followerCursor = links.prev.cursor;
  1088. this.followerMore = true;
  1089. } else {
  1090. this.followerMore = false;
  1091. }
  1092. } else {
  1093. this.followerMore = false;
  1094. }
  1095. })
  1096. .then(() => {
  1097. setTimeout(() => { this.followerLoading = false }, 1000);
  1098. });
  1099. this.$refs.followerModal.show();
  1100. return;
  1101. }
  1102. },
  1103. followingLoadMore() {
  1104. if($('body').hasClass('loggedIn') == false) {
  1105. window.location.href = encodeURI('/login?next=/' + this.profile.username + '/');
  1106. return;
  1107. }
  1108. axios.get('/api/v1/accounts/'+this.profile.id+'/following', {
  1109. params: {
  1110. cursor: this.followingCursor,
  1111. limit: 40,
  1112. '_pe': 1
  1113. }
  1114. })
  1115. .then(res => {
  1116. if(res.data.length > 0) {
  1117. this.following.push(...res.data);
  1118. }
  1119. if(res.headers && res.headers.link) {
  1120. const links = parseLinkHeader(res.headers.link);
  1121. if(links.prev) {
  1122. this.followingCursor = links.prev.cursor;
  1123. this.followingMore = true;
  1124. } else {
  1125. this.followingMore = false;
  1126. }
  1127. } else {
  1128. this.followingMore = false;
  1129. }
  1130. });
  1131. },
  1132. followersLoadMore() {
  1133. if($('body').hasClass('loggedIn') == false) {
  1134. return;
  1135. }
  1136. axios.get('/api/v1/accounts/'+this.profile.id+'/followers', {
  1137. params: {
  1138. cursor: this.followerCursor,
  1139. limit: 40,
  1140. '_pe': 1
  1141. }
  1142. })
  1143. .then(res => {
  1144. if(res.data.length > 0) {
  1145. this.followers.push(...res.data);
  1146. }
  1147. if(res.headers && res.headers.link) {
  1148. const links = parseLinkHeader(res.headers.link);
  1149. if(links.prev) {
  1150. this.followerCursor = links.prev.cursor;
  1151. this.followerMore = true;
  1152. } else {
  1153. this.followerMore = false;
  1154. }
  1155. } else {
  1156. this.followerMore = false;
  1157. }
  1158. });
  1159. },
  1160. visitorMenu() {
  1161. this.$refs.visitorContextMenu.show();
  1162. },
  1163. followModalAction(id, index, type = 'following') {
  1164. const apiUrl = type === 'following' ?
  1165. '/api/v1/accounts/' + id + '/unfollow' :
  1166. '/api/v1/accounts/' + id + '/follow';
  1167. axios.post(apiUrl)
  1168. .then(res => {
  1169. if(type == 'following') {
  1170. this.following.splice(index, 1);
  1171. this.profile.following_count--;
  1172. }
  1173. }).catch(err => {
  1174. if(err.response.data.message) {
  1175. swal('Error', err.response.data.message, 'error');
  1176. }
  1177. });
  1178. },
  1179. momentBackground() {
  1180. let c = 'w-100 h-100 mt-n3 ';
  1181. if(this.profile.header_bg) {
  1182. c += this.profile.header_bg == 'default' ? 'bg-pixelfed' : 'bg-moment-' + this.profile.header_bg;
  1183. } else {
  1184. c += 'bg-pixelfed';
  1185. }
  1186. return c;
  1187. },
  1188. loadSponsor() {
  1189. axios.get('/api/local/profile/sponsor/' + this.profileId)
  1190. .then(res => {
  1191. this.sponsorList = res.data;
  1192. });
  1193. },
  1194. showSponsorModal() {
  1195. this.$refs.sponsorModal.show();
  1196. },
  1197. goBack() {
  1198. if(window.history.length > 2) {
  1199. window.history.back();
  1200. return;
  1201. } else {
  1202. window.location.href = '/';
  1203. return;
  1204. }
  1205. },
  1206. copyProfileLink() {
  1207. navigator.clipboard.writeText(window.location.href);
  1208. this.$refs.visitorContextMenu.hide();
  1209. },
  1210. formatCount(count) {
  1211. return App.util.format.count(count);
  1212. },
  1213. statusUrl(status) {
  1214. return status.url;
  1215. if(status.local == true) {
  1216. return status.url;
  1217. }
  1218. return '/i/web/post/_/' + status.account.id + '/' + status.id;
  1219. },
  1220. profileUrl(status) {
  1221. return status.url;
  1222. if(status.local == true) {
  1223. return status.account.url;
  1224. }
  1225. return '/i/web/profile/_/' + status.account.id;
  1226. },
  1227. profileUrlRedirect(profile) {
  1228. if(profile.local == true) {
  1229. return profile.url;
  1230. }
  1231. return '/i/web/profile/_/' + profile.id;
  1232. },
  1233. showEmbedProfileModal() {
  1234. this.ctxEmbedPayload = window.App.util.embed.profile(this.profile.url);
  1235. this.$refs.visitorContextMenu.hide();
  1236. this.$refs.embedModal.show();
  1237. },
  1238. ctxCopyEmbed() {
  1239. navigator.clipboard.writeText(this.ctxEmbedPayload);
  1240. this.$refs.embedModal.hide();
  1241. this.$refs.visitorContextMenu.hide();
  1242. },
  1243. storyRedirect() {
  1244. window.location.href = '/stories/' + this.profileUsername + '?t=4';
  1245. },
  1246. truncate(str, len) {
  1247. return _.truncate(str, {
  1248. length: len
  1249. });
  1250. },
  1251. formatWebsite(site) {
  1252. if(site.slice(0, 8) === 'https://') {
  1253. site = site.substr(8);
  1254. } else if(site.slice(0, 7) === 'http://') {
  1255. site = site.substr(7);
  1256. } else {
  1257. this.profile.website = null;
  1258. return;
  1259. }
  1260. return this.truncate(site, 60);
  1261. },
  1262. joinedAtFormat(created) {
  1263. let d = new Date(created);
  1264. return d.toDateString();
  1265. },
  1266. archivesInfiniteLoader($state) {
  1267. axios.get('/api/pixelfed/v2/statuses/archives', {
  1268. params: {
  1269. page: this.archivesPage
  1270. }
  1271. }).then(res => {
  1272. if(res.data.length) {
  1273. this.archives.push(...res.data);
  1274. this.archivesPage++;
  1275. $state.loaded();
  1276. } else {
  1277. $state.complete();
  1278. }
  1279. });
  1280. }
  1281. }
  1282. }
  1283. </script>