Profile.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810
  1. <template>
  2. <div>
  3. <div class="d-flex justify-content-center py-5 my-5" v-if="loading">
  4. <img src="/img/pixelfed-icon-grey.svg" class="">
  5. </div>
  6. <div v-if="!loading">
  7. <div class="bg-white py-5 border-bottom">
  8. <div class="container">
  9. <div class="row">
  10. <div class="col-12 col-md-4 d-flex">
  11. <div class="profile-avatar mx-md-auto">
  12. <div class="d-block d-md-none">
  13. <div class="row">
  14. <div class="col-5">
  15. <img class="rounded-circle box-shadow mr-3" :src="profile.avatar" width="77px" height="77px">
  16. </div>
  17. <div class="col-7 pl-2">
  18. <p class="font-weight-ultralight h3 mb-0">{{profile.username}}</p>
  19. <p v-if="profile.id == user.id && user.hasOwnProperty('id')">
  20. <a class="btn btn-outline-dark py-0 px-4 mt-3" href="/settings/home">Edit Profile</a>
  21. </p>
  22. <div v-if="profile.id != user.id && user.hasOwnProperty('id')">
  23. <p class="mt-3 mb-0" v-if="relationship.following == true">
  24. <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>
  25. </p>
  26. <p class="mt-3 mb-0" v-if="!relationship.following">
  27. <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>
  28. </p>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="d-none d-md-block">
  34. <img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px">
  35. </div>
  36. </div>
  37. </div>
  38. <div class="col-12 col-md-8 d-flex align-items-center">
  39. <div class="profile-details">
  40. <div class="d-none d-md-flex username-bar pb-2 align-items-center">
  41. <span class="font-weight-ultralight h3">{{profile.username}}</span>
  42. <span class="pl-4" v-if="profile.is_admin">
  43. <span class="btn btn-outline-secondary font-weight-bold py-0">ADMIN</span>
  44. </span>
  45. <span class="pl-4">
  46. <a :href="'/users/'+profile.username+'.atom'" class="fas fa-rss fa-lg text-muted text-decoration-none"></a>
  47. </span>
  48. <span class="pl-4" v-if="owner">
  49. <a class="fas fa-cog fa-lg text-muted text-decoration-none" href="/settings/home"></a>
  50. </span>
  51. <span v-if="profile.id != user.id && user.hasOwnProperty('id')">
  52. <span class="pl-4" v-if="relationship.following == true">
  53. <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>
  54. </span>
  55. <span class="pl-4" v-if="!relationship.following">
  56. <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>
  57. </span>
  58. </span>
  59. </div>
  60. <div class="d-none d-md-inline-flex profile-stats pb-3 lead">
  61. <div class="font-weight-light pr-5">
  62. <a class="text-dark" :href="profile.url">
  63. <span class="font-weight-bold">{{profile.statuses_count}}</span>
  64. Posts
  65. </a>
  66. </div>
  67. <div v-if="profileSettings.followers.count" class="font-weight-light pr-5">
  68. <a class="text-dark cursor-pointer" v-on:click="followersModal()">
  69. <span class="font-weight-bold">{{profile.followers_count}}</span>
  70. Followers
  71. </a>
  72. </div>
  73. <div v-if="profileSettings.following.count" class="font-weight-light">
  74. <a class="text-dark cursor-pointer" v-on:click="followingModal()">
  75. <span class="font-weight-bold">{{profile.following_count}}</span>
  76. Following
  77. </a>
  78. </div>
  79. </div>
  80. <p class="lead mb-0 d-flex align-items-center pt-3">
  81. <span class="font-weight-bold pr-3">{{profile.display_name}}</span>
  82. </p>
  83. <div v-if="profile.note" class="mb-0 lead" v-html="profile.note"></div>
  84. <p v-if="profile.website" class="mb-0"><a :href="profile.website" class="font-weight-bold" rel="me external nofollow noopener" target="_blank">{{profile.website}}</a></p>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. <div class="d-block d-md-none bg-white my-0 py-2 border-bottom">
  91. <ul class="nav d-flex justify-content-center">
  92. <li class="nav-item">
  93. <div class="font-weight-light">
  94. <span class="text-dark text-center">
  95. <p class="font-weight-bold mb-0">{{profile.statuses_count}}</p>
  96. <p class="text-muted mb-0">Posts</p>
  97. </span>
  98. </div>
  99. </li>
  100. <li class="nav-item px-5">
  101. <div v-if="profileSettings.followers.count" class="font-weight-light">
  102. <a class="text-dark cursor-pointer text-center" v-on:click="followersModal()">
  103. <p class="font-weight-bold mb-0">{{profile.followers_count}}</p>
  104. <p class="text-muted mb-0">Followers</p>
  105. </a>
  106. </div>
  107. </li>
  108. <li class="nav-item">
  109. <div v-if="profileSettings.following.count" class="font-weight-light">
  110. <a class="text-dark cursor-pointer text-center" v-on:click="followingModal()">
  111. <p class="font-weight-bold mb-0">{{profile.following_count}}</p>
  112. <p class="text-muted mb-0">Following</p>
  113. </a>
  114. </div>
  115. </li>
  116. </ul>
  117. </div>
  118. <div class="bg-white">
  119. <ul class="nav nav-topbar d-flex justify-content-center border-0">
  120. <!-- <li class="nav-item">
  121. <a class="nav-link active font-weight-bold text-uppercase" :href="profile.url">Posts</a>
  122. </li>
  123. -->
  124. <li class="nav-item">
  125. <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>
  126. </li>
  127. <!-- <li class="nav-item">
  128. <a :class="this.mode == 'masonry' ? 'nav-link font-weight-bold text-uppercase active' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('masonry')"><i class="fas fa-th-large"></i></a>
  129. </li> -->
  130. <li class="nav-item px-3">
  131. <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>
  132. </li>
  133. <li class="nav-item" v-if="owner">
  134. <a class="nav-link font-weight-bold text-uppercase" :href="profile.url + '/saved'">Saved</a>
  135. </li>
  136. </ul>
  137. </div>
  138. <div class="container">
  139. <div class="profile-timeline mt-md-4">
  140. <div class="row" v-if="mode == 'grid'">
  141. <div class="col-4 p-0 p-sm-2 p-md-3" v-for="(s, index) in timeline">
  142. <a class="card info-overlay card-md-border-0" :href="s.url">
  143. <div class="square">
  144. <span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
  145. <span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
  146. <span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
  147. <div class="square-content" v-bind:style="previewBackground(s)">
  148. </div>
  149. <div class="info-overlay-text">
  150. <h5 class="text-white m-auto font-weight-bold">
  151. <span>
  152. <span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
  153. <span class="d-flex-inline">{{s.favourites_count}}</span>
  154. </span>
  155. <span>
  156. <span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
  157. <span class="d-flex-inline">{{s.reblogs_count}}</span>
  158. </span>
  159. </h5>
  160. </div>
  161. </div>
  162. </a>
  163. </div>
  164. </div>
  165. <div class="row" v-if="mode == 'list'">
  166. <div class="col-md-8 col-lg-8 offset-md-2 px-0 mb-3 timeline">
  167. <div class="card status-card card-md-rounded-0" :data-status-id="status.id" v-for="(status, index) in timeline" :key="status.id">
  168. <div class="card-header d-inline-flex align-items-center bg-white">
  169. <img v-bind:src="status.account.avatar" width="32px" height="32px" style="border-radius: 32px;">
  170. <a class="username font-weight-bold pl-2 text-dark" v-bind:href="status.account.url">
  171. {{status.account.username}}
  172. </a>
  173. <div class="text-right" style="flex-grow:1;">
  174. <div class="dropdown">
  175. <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">
  176. <span class="fas fa-ellipsis-v fa-lg text-muted"></span>
  177. </button>
  178. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
  179. <a class="dropdown-item font-weight-bold" :href="status.url">Go to post</a>
  180. <span v-bind:class="[statusOwner(status) ? 'd-none' : '']">
  181. <a class="dropdown-item font-weight-bold" :href="reportUrl(status)">Report</a>
  182. <a class="dropdown-item font-weight-bold" v-on:click="muteProfile(status)">Mute Profile</a>
  183. <a class="dropdown-item font-weight-bold" v-on:click="blockProfile(status)">Block Profile</a>
  184. </span>
  185. <span v-bind:class="[statusOwner(status) ? '' : 'd-none']">
  186. <a class="dropdown-item font-weight-bold" :href="editUrl(status)">Edit</a>
  187. <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost(status)">Delete</a>
  188. </span>
  189. </div>
  190. </div>
  191. </div>
  192. </div>
  193. <div class="postPresenterContainer">
  194. <div v-if="status.pf_type === 'photo'" class="w-100">
  195. <photo-presenter :status="status"></photo-presenter>
  196. </div>
  197. <div v-else-if="status.pf_type === 'video'" class="w-100">
  198. <video-presenter :status="status"></video-presenter>
  199. </div>
  200. <div v-else-if="status.pf_type === 'photo:album'" class="w-100">
  201. <photo-album-presenter :status="status"></photo-album-presenter>
  202. </div>
  203. <div v-else-if="status.pf_type === 'video:album'" class="w-100">
  204. <video-album-presenter :status="status"></video-album-presenter>
  205. </div>
  206. <div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
  207. <mixed-album-presenter :status="status"></mixed-album-presenter>
  208. </div>
  209. <div v-else class="w-100">
  210. <p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
  211. </div>
  212. </div>
  213. <div class="card-body">
  214. <div class="reactions my-1">
  215. <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>
  216. <h3 class="far fa-comment pr-3 m-0 cursor-pointer" title="Comment" v-on:click="commentFocus(status, $event)"></h3>
  217. <h3 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>
  218. </div>
  219. <div class="likes font-weight-bold">
  220. <span class="like-count">{{status.favourites_count}}</span> {{status.favourites_count == 1 ? 'like' : 'likes'}}
  221. </div>
  222. <div class="caption">
  223. <p class="mb-2 read-more" style="overflow: hidden;">
  224. <span class="username font-weight-bold">
  225. <bdi><a class="text-dark" :href="status.account.url">{{status.account.username}}</a></bdi>
  226. </span>
  227. <span v-html="status.content"></span>
  228. </p>
  229. </div>
  230. <div class="comments">
  231. </div>
  232. <div class="timestamp pt-1">
  233. <p class="small text-uppercase mb-0">
  234. <a :href="status.url" class="text-muted">
  235. <timeago :datetime="status.created_at" :auto-update="60" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.created_at)" v-b-tooltip.hover.bottom></timeago>
  236. </a>
  237. </p>
  238. </div>
  239. </div>
  240. <div class="card-footer bg-white d-none">
  241. <form class="" v-on:submit.prevent="commentSubmit(status, $event)">
  242. <input type="hidden" name="item" value="">
  243. <input class="form-control status-reply-input" name="comment" placeholder="Add a comment…" autocomplete="off">
  244. </form>
  245. </div>
  246. </div>
  247. </div>
  248. </div>
  249. <div class="masonry-grid" v-if="mode == 'masonry'">
  250. <div class="d-inline p-0 p-sm-2 p-md-3 masonry-item" v-for="(status, index) in timeline">
  251. <a class="" v-on:click.prevent="statusModal(status)" :href="status.url">
  252. <img :src="previewUrl(status)" :class="'o-'+masonryOrientation(status)">
  253. </a>
  254. </div>
  255. </div>
  256. <div v-if="timeline.length">
  257. <infinite-loading @infinite="infiniteTimeline">
  258. <div slot="no-more"></div>
  259. <div slot="no-results"></div>
  260. </infinite-loading>
  261. </div>
  262. </div>
  263. </div>
  264. </div>
  265. <!-- <b-modal id="statusModal" ref="statusModalRef" hide-footer hide-header v-if="modalStatus" size="lg" v-on:hide.native="closeModal()" lazy class="border-0">
  266. <post-component v-bind:status-template="modalStatus.pf_type" v-bind:status-id="modalStatus.id" v-bind:status-username="modalStatus.account.username" v-bind:status-url="modalStatus.url" v-bind:status-profile-url="modalStatus.account.url" v-bind:status-avatar="modalStatus.account.avatar"></post-component>
  267. </b-modal> -->
  268. <b-modal ref="followingModal"
  269. id="following-modal"
  270. hide-footer
  271. centered
  272. title="Following"
  273. body-class="list-group-flush p-0">
  274. <div class="list-group">
  275. <div class="list-group-item border-0" v-for="(user, index) in following" :key="'following_'+index">
  276. <div class="media">
  277. <a :href="user.url">
  278. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px">
  279. </a>
  280. <div class="media-body">
  281. <p class="mb-0" style="font-size: 14px">
  282. <a :href="user.url" class="font-weight-bold text-dark">
  283. {{user.username}}
  284. </a>
  285. </p>
  286. <p class="text-muted mb-0" style="font-size: 14px">
  287. {{user.display_name}}
  288. </p>
  289. </div>
  290. </div>
  291. </div>
  292. <div v-if="followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
  293. <p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
  294. </div>
  295. </div>
  296. </b-modal>
  297. <b-modal ref="followerModal"
  298. id="follower-modal"
  299. hide-footer
  300. centered
  301. title="Followers"
  302. body-class="list-group-flush p-0">
  303. <div class="list-group">
  304. <div class="list-group-item border-0" v-for="(user, index) in followers" :key="'follower_'+index">
  305. <div class="media">
  306. <a :href="user.url">
  307. <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px">
  308. </a>
  309. <div class="media-body">
  310. <p class="mb-0" style="font-size: 14px">
  311. <a :href="user.url" class="font-weight-bold text-dark">
  312. {{user.username}}
  313. </a>
  314. </p>
  315. <p class="text-muted mb-0" style="font-size: 14px">
  316. {{user.display_name}}
  317. </p>
  318. </div>
  319. </div>
  320. </div>
  321. <div v-if="followerMore" class="list-group-item text-center" v-on:click="followersLoadMore()">
  322. <p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
  323. </div>
  324. </div>
  325. </b-modal>
  326. </div>
  327. </template>
  328. <!-- <style type="text/css" scoped="">
  329. .modal-body {
  330. padding: 0;
  331. margin: 0;
  332. }
  333. @media (min-width: 992px) {
  334. .modal-lg, .modal-xl {
  335. max-width: 900px;
  336. }
  337. }
  338. </style> -->
  339. <style type="text/css" scoped>
  340. .o-square {
  341. max-width: 320px;
  342. }
  343. .o-portrait {
  344. max-width: 320px;
  345. }
  346. .o-landscape {
  347. max-width: 320px;
  348. }
  349. .post-icon {
  350. color: #fff;
  351. position:relative;
  352. margin-top: 10px;
  353. z-index: 9;
  354. opacity: 0.6;
  355. text-shadow: 3px 3px 16px #272634;
  356. }
  357. </style>
  358. <script type="text/javascript">
  359. export default {
  360. props: [
  361. 'profile-id',
  362. 'profile-settings'
  363. ],
  364. data() {
  365. return {
  366. profile: {},
  367. user: {},
  368. timeline: [],
  369. timelinePage: 2,
  370. min_id: 0,
  371. max_id: 0,
  372. loading: true,
  373. owner: false,
  374. mode: 'grid',
  375. modes: ['grid', 'list', 'masonry'],
  376. modalStatus: false,
  377. relationship: {},
  378. followers: [],
  379. followerCursor: 1,
  380. followerMore: true,
  381. following: [],
  382. followingCursor: 1,
  383. followingMore: true
  384. }
  385. },
  386. beforeMount() {
  387. this.fetchProfile();
  388. },
  389. mounted() {
  390. },
  391. updated() {
  392. },
  393. methods: {
  394. fetchProfile() {
  395. axios.get('/api/v1/accounts/' + this.profileId).then(res => {
  396. this.profile = res.data;
  397. });
  398. axios.get('/api/v1/accounts/verify_credentials').then(res => {
  399. this.user = res.data;
  400. });
  401. axios.get('/api/v1/accounts/relationships', {
  402. params: {
  403. 'id[]': this.profileId
  404. }
  405. }).then(res => {
  406. this.relationship = res.data[0];
  407. });
  408. let apiUrl = '/api/v1/accounts/' + this.profileId + '/statuses';
  409. axios.get(apiUrl, {
  410. params: {
  411. only_media: true,
  412. min_id: 1,
  413. }
  414. })
  415. .then(res => {
  416. let data = res.data;
  417. this.timeline = data;
  418. let ids = data.map(status => status.id);
  419. this.min_id = Math.max(...ids);
  420. this.max_id = Math.min(...ids);
  421. this.modalStatus = _.first(res.data);
  422. this.loading = false;
  423. this.ownerCheck();
  424. }).catch(err => {
  425. swal(
  426. 'Oops, something went wrong',
  427. 'Please release the page.',
  428. 'error'
  429. );
  430. });
  431. },
  432. ownerCheck() {
  433. this.owner = this.profile.id === this.user.id;
  434. },
  435. infiniteTimeline($state) {
  436. let apiUrl = '/api/v1/accounts/' + this.profileId + '/statuses';
  437. axios.get(apiUrl, {
  438. params: {
  439. only_media: true,
  440. max_id: this.max_id
  441. },
  442. }).then(res => {
  443. if (res.data.length && this.loading == false) {
  444. let data = res.data;
  445. this.timeline.push(...data);
  446. let ids = data.map(status => status.id);
  447. this.max_id = Math.min(...ids);
  448. this.loading = false;
  449. $state.loaded();
  450. } else {
  451. $state.complete();
  452. }
  453. });
  454. },
  455. previewUrl(status) {
  456. return status.media_attachments[0].preview_url;
  457. },
  458. previewBackground(status) {
  459. let preview = this.previewUrl(status);
  460. return 'background-image: url(' + preview + ');';
  461. },
  462. switchMode(mode) {
  463. this.mode = _.indexOf(this.modes, mode) ? mode : 'grid';
  464. if(this.mode == 'masonry') {
  465. $('.masonry').masonry({
  466. columnWidth: 200,
  467. itemSelector: '.masonry-item'
  468. });
  469. }
  470. },
  471. reportUrl(status) {
  472. let type = status.in_reply_to ? 'comment' : 'post';
  473. let id = status.id;
  474. return '/i/report?type=' + type + '&id=' + id;
  475. },
  476. commentFocus(status, $event) {
  477. let el = event.target;
  478. let card = el.parentElement.parentElement.parentElement;
  479. let comments = card.getElementsByClassName('comments')[0];
  480. if(comments.children.length == 0) {
  481. comments.classList.add('mb-2');
  482. this.fetchStatusComments(status, card);
  483. }
  484. let footer = card.querySelectorAll('.card-footer')[0];
  485. let input = card.querySelectorAll('.status-reply-input')[0];
  486. if(footer.classList.contains('d-none') == true) {
  487. footer.classList.remove('d-none');
  488. input.focus();
  489. } else {
  490. footer.classList.add('d-none');
  491. input.blur();
  492. }
  493. },
  494. likeStatus(status, $event) {
  495. if($('body').hasClass('loggedIn') == false) {
  496. return;
  497. }
  498. axios.post('/i/like', {
  499. item: status.id
  500. }).then(res => {
  501. status.favourites_count = res.data.count;
  502. if(status.favourited == true) {
  503. status.favourited = false;
  504. } else {
  505. status.favourited = true;
  506. }
  507. }).catch(err => {
  508. swal('Error', 'Something went wrong, please try again later.', 'error');
  509. });
  510. },
  511. shareStatus(status, $event) {
  512. if($('body').hasClass('loggedIn') == false) {
  513. return;
  514. }
  515. axios.post('/i/share', {
  516. item: status.id
  517. }).then(res => {
  518. status.reblogs_count = res.data.count;
  519. if(status.reblogged == true) {
  520. status.reblogged = false;
  521. } else {
  522. status.reblogged = true;
  523. }
  524. }).catch(err => {
  525. swal('Error', 'Something went wrong, please try again later.', 'error');
  526. });
  527. },
  528. timestampFormat(timestamp) {
  529. let ts = new Date(timestamp);
  530. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  531. },
  532. editUrl(status) {
  533. return status.url + '/edit';
  534. },
  535. redirect(url) {
  536. window.location.href = url;
  537. return;
  538. },
  539. replyUrl(status) {
  540. let username = this.profile.username;
  541. let id = status.account.id == this.profile.id ? status.id : status.in_reply_to_id;
  542. return '/p/' + username + '/' + id;
  543. },
  544. mentionUrl(status) {
  545. let username = status.account.username;
  546. let id = status.id;
  547. return '/p/' + username + '/' + id;
  548. },
  549. statusOwner(status) {
  550. let sid = status.account.id;
  551. let uid = this.profile.id;
  552. if(sid == uid) {
  553. return true;
  554. } else {
  555. return false;
  556. }
  557. },
  558. fetchStatusComments(status, card) {
  559. axios.get('/api/v2/status/'+status.id+'/replies')
  560. .then(res => {
  561. let comments = card.querySelectorAll('.comments')[0];
  562. let data = res.data;
  563. data.forEach(function(i, k) {
  564. let username = document.createElement('a');
  565. username.classList.add('font-weight-bold');
  566. username.classList.add('text-dark');
  567. username.classList.add('mr-2');
  568. username.setAttribute('href', i.account.url);
  569. username.textContent = i.account.username;
  570. let text = document.createElement('span');
  571. text.innerHTML = i.content;
  572. let comment = document.createElement('p');
  573. comment.classList.add('read-more');
  574. comment.classList.add('mb-0');
  575. comment.appendChild(username);
  576. comment.appendChild(text);
  577. comments.appendChild(comment);
  578. });
  579. }).catch(err => {
  580. })
  581. },
  582. muteProfile(status) {
  583. if($('body').hasClass('loggedIn') == false) {
  584. return;
  585. }
  586. axios.post('/i/mute', {
  587. type: 'user',
  588. item: status.account.id
  589. }).then(res => {
  590. this.feed = this.feed.filter(s => s.account.id !== status.account.id);
  591. swal('Success', 'You have successfully muted ' + status.account.acct, 'success');
  592. }).catch(err => {
  593. swal('Error', 'Something went wrong. Please try again later.', 'error');
  594. });
  595. },
  596. blockProfile(status) {
  597. if($('body').hasClass('loggedIn') == false) {
  598. return;
  599. }
  600. axios.post('/i/block', {
  601. type: 'user',
  602. item: status.account.id
  603. }).then(res => {
  604. this.feed = this.feed.filter(s => s.account.id !== status.account.id);
  605. swal('Success', 'You have successfully blocked ' + status.account.acct, 'success');
  606. }).catch(err => {
  607. swal('Error', 'Something went wrong. Please try again later.', 'error');
  608. });
  609. },
  610. deletePost(status, index) {
  611. if($('body').hasClass('loggedIn') == false || status.account.id !== this.profile.id) {
  612. return;
  613. }
  614. axios.post('/i/delete', {
  615. type: 'status',
  616. item: status.id
  617. }).then(res => {
  618. this.feed.splice(index,1);
  619. swal('Success', 'You have successfully deleted this post', 'success');
  620. }).catch(err => {
  621. swal('Error', 'Something went wrong. Please try again later.', 'error');
  622. });
  623. },
  624. commentSubmit(status, $event) {
  625. let id = status.id;
  626. let form = $event.target;
  627. let input = $(form).find('input[name="comment"]');
  628. let comment = input.val();
  629. let comments = form.parentElement.parentElement.getElementsByClassName('comments')[0];
  630. axios.post('/i/comment', {
  631. item: id,
  632. comment: comment
  633. }).then(res => {
  634. input.val('');
  635. input.blur();
  636. let username = document.createElement('a');
  637. username.classList.add('font-weight-bold');
  638. username.classList.add('text-dark');
  639. username.classList.add('mr-2');
  640. username.setAttribute('href', this.user.url);
  641. username.textContent = this.user.username;
  642. let text = document.createElement('span');
  643. text.innerHTML = comment;
  644. let wrapper = document.createElement('p');
  645. wrapper.classList.add('read-more');
  646. wrapper.classList.add('mb-0');
  647. wrapper.appendChild(username);
  648. wrapper.appendChild(text);
  649. comments.insertBefore(wrapper, comments.firstChild);
  650. });
  651. },
  652. statusModal(status) {
  653. this.modalStatus = status;
  654. this.$refs.statusModalRef.show();
  655. },
  656. masonryOrientation(status) {
  657. let o = status.media_attachments[0].orientation;
  658. if(!o) {
  659. o = 'square';
  660. }
  661. return o;
  662. },
  663. followProfile() {
  664. axios.post('/i/follow', {
  665. item: this.profileId
  666. }).then(res => {
  667. if(this.relationship.following) {
  668. this.profile.followers_count--;
  669. if(this.profile.locked == true) {
  670. window.location.href = '/';
  671. }
  672. } else {
  673. this.profile.followers_count++;
  674. }
  675. this.relationship.following = !this.relationship.following;
  676. });
  677. },
  678. followingModal() {
  679. if(this.profileSettings.following.list == false) {
  680. return;
  681. }
  682. if(this.following.length > 0) {
  683. this.$refs.followingModal.show();
  684. return;
  685. }
  686. axios.get('/api/v1/accounts/'+this.profile.id+'/following', {
  687. params: {
  688. page: this.followingCursor
  689. }
  690. })
  691. .then(res => {
  692. this.following = res.data;
  693. this.followingCursor++;
  694. if(res.data.length < 10) {
  695. this.followingMore = false;
  696. }
  697. });
  698. this.$refs.followingModal.show();
  699. },
  700. followersModal() {
  701. if(this.profileSettings.followers.list == false) {
  702. return;
  703. }
  704. if(this.followers.length > 0) {
  705. this.$refs.followerModal.show();
  706. return;
  707. }
  708. axios.get('/api/v1/accounts/'+this.profile.id+'/followers', {
  709. params: {
  710. page: this.followerCursor
  711. }
  712. })
  713. .then(res => {
  714. this.followers = res.data;
  715. this.followerCursor++;
  716. if(res.data.length < 10) {
  717. this.followerMore = false;
  718. }
  719. })
  720. this.$refs.followerModal.show();
  721. },
  722. followingLoadMore() {
  723. axios.get('/api/v1/accounts/'+this.profile.id+'/following', {
  724. params: {
  725. page: this.followingCursor
  726. }
  727. })
  728. .then(res => {
  729. if(res.data.length > 0) {
  730. this.following.push(...res.data);
  731. this.followingCursor++;
  732. }
  733. if(res.data.length < 10) {
  734. this.followingMore = false;
  735. }
  736. });
  737. },
  738. followersLoadMore() {
  739. axios.get('/api/v1/accounts/'+this.profile.id+'/followers', {
  740. params: {
  741. page: this.followerCursor
  742. }
  743. })
  744. .then(res => {
  745. if(res.data.length > 0) {
  746. this.followers.push(...res.data);
  747. this.followerCursor++;
  748. }
  749. if(res.data.length < 10) {
  750. this.followerMore = false;
  751. }
  752. });
  753. }
  754. }
  755. }
  756. </script>