RemoteProfile.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570
  1. <template>
  2. <div>
  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" class="container">
  13. <div class="row">
  14. <div class="col-12 col-md-4 pt-5">
  15. <div class="card shadow-none border">
  16. <div class="card-header p-0 m-0">
  17. <img v-if="profile.header_bg" :src="profile.header_bg" style="width: 100%; height: 140px; object-fit: cover;">
  18. <div v-else class="bg-primary" style="width: 100%;height: 140px;"></div>
  19. </div>
  20. <div class="card-body pb-0">
  21. <div class="mt-n5 mb-3">
  22. <img class="rounded-circle p-1 border mt-n4 bg-white shadow" :src="profile.avatar" width="90px" height="90px;">
  23. <span class="float-right mt-n1">
  24. <span>
  25. <button v-if="relationship && relationship.following == false" class="btn btn-outline-light py-0 px-3 mt-n1" style="font-size:13px; font-weight: 500;" @click="followProfile();">Follow</button>
  26. <button v-if="relationship && relationship.following == true" class="btn btn-outline-light py-0 px-3 mt-n1" style="font-size:13px; font-weight: 500;" @click="unfollowProfile();">Unfollow</button>
  27. </span>
  28. <span class="mx-2">
  29. <a :href="'/account/direct/t/' + profile.id" class="btn btn-outline-light btn-sm mt-n1" style="padding-top:2px;padding-bottom:1px;">
  30. <i class="far fa-comment-dots cursor-pointer" style="font-size:13px;"></i>
  31. </a>
  32. </span>
  33. <span>
  34. <button class="btn btn-outline-light btn-sm mt-n1" @click="showCtxMenu()" style="padding-top:2px;padding-bottom:1px;">
  35. <i class="fas fa-cog cursor-pointer" style="font-size:13px;"></i>
  36. </button>
  37. </span>
  38. </span>
  39. </div>
  40. <p class="pl-2 h4 font-weight-bold mb-1">{{profile.display_name}}</p>
  41. <p class="pl-2 font-weight-bold mb-2"><a class="text-muted" :href="profile.url" @click.prevent="urlRedirectHandler(profile.url)">{{profile.acct}}</a></p>
  42. <p class="pl-2 text-muted small d-flex justify-content-between">
  43. <span>
  44. <span class="font-weight-bold text-dark">{{profile.statuses_count}}</span>
  45. <span>Posts</span>
  46. </span>
  47. <span>
  48. <span class="font-weight-bold text-dark">{{profile.following_count}}</span>
  49. <span>Following</span>
  50. </span>
  51. <span>
  52. <span class="font-weight-bold text-dark">{{profile.followers_count}}</span>
  53. <span>Followers</span>
  54. </span>
  55. </p>
  56. <p class="pl-2 text-muted small pt-2" v-html="profile.note"></p>
  57. </div>
  58. </div>
  59. <p class="small text-lighter p-2">Last updated: <time :datetime="profile.last_fetched_at">{{timeAgo(profile.last_fetched_at, 'ago')}}</time></p>
  60. </div>
  61. <div class="col-12 col-md-8 pt-5">
  62. <div class="row">
  63. <div class="col-12 mb-2" v-for="(status, index) in feed" :key="'remprop' + index">
  64. <div class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border cursor-pointer">
  65. <div class="card-header d-inline-flex align-items-center bg-white">
  66. <img v-bind:src="profile.avatar" width="38px" height="38px" style="border-radius: 38px;" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
  67. <div class="pl-2">
  68. <span class="username font-weight-bold text-dark">{{profile.username}}
  69. </span>
  70. </div>
  71. <div class="text-right" style="flex-grow:1;">
  72. <button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu(status)">
  73. <span class="fas fa-ellipsis-h text-lighter"></span>
  74. </button>
  75. </div>
  76. </div>
  77. <div class="card-body p-0">
  78. <div v-if="status.sensitive == true">
  79. <details class="details-animated" @click="status.sensitive = false;">
  80. <summary>
  81. <p class="mb-0 lead font-weight-bold">{{status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p>
  82. <p class="font-weight-light">(click to show)</p>
  83. </summary>
  84. <a :href="remotePostUrl(status)">
  85. <img v-once :src="status.thumb" class="w-100 h-100">
  86. </a>
  87. </details>
  88. </div>
  89. <div v-else>
  90. <a :href="remotePostUrl(status)">
  91. <img v-once :src="status.thumb" class="w-100 h-100">
  92. </a>
  93. <button v-if="status.cw == true && status.sensitive == false" class="btn btn-block btn-primary font-weight-bold rounded-0" @click="status.sensitive = true;">Hide Media</button>
  94. </div>
  95. </div>
  96. <div class="card-body">
  97. <div class="caption">
  98. <p class="mb-2 read-more" style="overflow: hidden;">
  99. <span class="username font-weight-bold">
  100. <bdi><span class="text-dark">{{profile.username}}</span></bdi>
  101. </span>
  102. <span class="status-content" v-html="status.caption.html"></span>
  103. </p>
  104. </div>
  105. <div class="timestamp mt-2">
  106. <p class="small text-uppercase mb-0">
  107. <a :href="remotePostUrl(status)" class="text-muted">
  108. <timeago :datetime="status.timestamp" :auto-update="90" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.timestamp)" v-b-tooltip.hover.bottom></timeago>
  109. </a>
  110. </p>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. <div v-if="feed.length == 0" class="col-12 mb-2">
  116. <div class="d-flex justify-content-center align-items-center bg-white border rounded" style="height:60vh;">
  117. <div class="text-center">
  118. <p class="lead">We haven't seen any posts from this account.</p>
  119. </div>
  120. </div>
  121. </div>
  122. <div v-else class="col-12 mt-4">
  123. <p v-if="showLoadMore" class="text-center mb-0 px-0">
  124. <button @click="loadMorePosts()" class="btn btn-outline-primary btn-block font-weight-bold">
  125. <span v-if="!loadingMore">Load More</span>
  126. <span v-else>
  127. <div class="spinner-border spinner-border-sm" role="status">
  128. <span class="sr-only">Loading...</span>
  129. </div>
  130. </span>
  131. </button>
  132. </p>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. <b-modal ref="visitorContextMenu"
  138. id="visitor-context-menu"
  139. hide-footer
  140. hide-header
  141. centered
  142. size="sm"
  143. body-class="list-group-flush p-0">
  144. <div class="list-group" v-if="relationship">
  145. <div class="list-group-item cursor-pointer text-center rounded text-dark" @click="copyProfileLink">
  146. Copy Link
  147. </div>
  148. <div v-if="user && !owner && !relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="muteProfile">
  149. Mute
  150. </div>
  151. <div v-if="user && !owner && relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="unmuteProfile">
  152. Unmute
  153. </div>
  154. <div v-if="user && !owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="reportProfile">
  155. Report User
  156. </div>
  157. <div v-if="user && !owner && !relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="blockProfile">
  158. Block
  159. </div>
  160. <div v-if="user && !owner && relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="unblockProfile">
  161. Unblock
  162. </div>
  163. <div class="list-group-item cursor-pointer text-center rounded text-muted" @click="$refs.visitorContextMenu.hide()">
  164. Close
  165. </div>
  166. </div>
  167. </b-modal>
  168. <b-modal ref="ctxModal"
  169. id="ctx-modal"
  170. hide-header
  171. hide-footer
  172. centered
  173. rounded
  174. size="sm"
  175. body-class="list-group-flush p-0 rounded">
  176. <div class="list-group text-center">
  177. <div v-if="ctxMenuStatus && profile.id != profile.id" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuReportPost()">Report inappropriate</div>
  178. <div v-if="ctxMenuStatus && profile.id != profile.id && ctxMenuRelationship && ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-danger" @click="ctxMenuUnfollow()">Unfollow</div>
  179. <div v-if="ctxMenuStatus && profile.id != profile.id && ctxMenuRelationship && !ctxMenuRelationship.following" class="list-group-item rounded cursor-pointer font-weight-bold text-primary" @click="ctxMenuFollow()">Follow</div>
  180. <div class="list-group-item rounded cursor-pointer" @click="ctxMenuGoToPost()">Go to post</div>
  181. <div class="list-group-item rounded cursor-pointer" @click="ctxMenuCopyLink()">Copy Link</div>
  182. <div v-if="profile && profile.is_admin == true" class="list-group-item rounded cursor-pointer" @click="ctxModMenuShow()">Moderation Tools</div>
  183. <div v-if="ctxMenuStatus && (profile.is_admin || profile.id == profile.id)" class="list-group-item rounded cursor-pointer" @click="deletePost(ctxMenuStatus)">Delete</div>
  184. <div class="list-group-item rounded cursor-pointer text-lighter" @click="closeCtxMenu()">Cancel</div>
  185. </div>
  186. </b-modal>
  187. </div>
  188. </div>
  189. </template>
  190. <script type="text/javascript">
  191. export default {
  192. props: [
  193. 'profile-id',
  194. ],
  195. data() {
  196. return {
  197. id: [],
  198. ids: [],
  199. user: false,
  200. profile: {},
  201. feed: [],
  202. min_id: null,
  203. max_id: null,
  204. loading: true,
  205. owner: false,
  206. layoutType: true,
  207. relationship: null,
  208. warning: false,
  209. ctxMenuStatus: false,
  210. ctxMenuRelationship: false,
  211. fetchingRemotePosts: false,
  212. showMutualFollowers: false,
  213. loadingMore: false,
  214. showLoadMore: true
  215. }
  216. },
  217. beforeMount() {
  218. this.fetchRelationships();
  219. this.fetchProfile();
  220. },
  221. methods: {
  222. fetchProfile() {
  223. axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
  224. this.user = res.data
  225. window._sharedData.curUser = res.data;
  226. window.App.util.navatar();
  227. });
  228. axios.get('/api/pixelfed/v1/accounts/' + this.profileId)
  229. .then(res => {
  230. this.profile = res.data;
  231. this.fetchPosts();
  232. });
  233. },
  234. fetchPosts() {
  235. let apiUrl = '/api/pixelfed/v1/accounts/' + this.profileId + '/statuses';
  236. axios.get(apiUrl, {
  237. params: {
  238. only_media: true,
  239. min_id: 1,
  240. }
  241. })
  242. .then(res => {
  243. let data = res.data
  244. .filter(status => status.media_attachments.length > 0)
  245. .map(status => {
  246. return {
  247. id: status.id,
  248. caption: {
  249. text: status.content_text,
  250. html: status.content
  251. },
  252. count: {
  253. likes: status.favourites_count,
  254. shares: status.reblogs_count,
  255. comments: status.reply_count
  256. },
  257. thumb: status.media_attachments[0].url,
  258. media: status.media_attachments,
  259. timestamp: status.created_at,
  260. type: status.pf_type,
  261. url: status.url,
  262. sensitive: status.sensitive,
  263. cw: status.sensitive,
  264. spoiler_text: status.spoiler_text
  265. }
  266. });
  267. let ids = data.map(status => status.id);
  268. this.ids = ids;
  269. this.min_id = Math.max(...ids);
  270. this.max_id = Math.min(...ids);
  271. this.feed = data;
  272. this.loading = false;
  273. //this.loadSponsor();
  274. }).catch(err => {
  275. swal('Oops, something went wrong',
  276. 'Please release the page.',
  277. 'error');
  278. });
  279. },
  280. loadMorePosts() {
  281. this.loadingMore = true;
  282. let apiUrl = '/api/pixelfed/v1/accounts/' + this.profileId + '/statuses';
  283. axios.get(apiUrl, {
  284. params: {
  285. only_media: true,
  286. max_id: this.max_id,
  287. }
  288. })
  289. .then(res => {
  290. let data = res.data
  291. .filter(status => this.ids.indexOf(status.id) === -1)
  292. .filter(status => status.media_attachments.length > 0)
  293. .map(status => {
  294. return {
  295. id: status.id,
  296. caption: {
  297. text: status.content_text,
  298. html: status.content
  299. },
  300. count: {
  301. likes: status.favourites_count,
  302. shares: status.reblogs_count,
  303. comments: status.reply_count
  304. },
  305. thumb: status.media_attachments[0].url,
  306. media: status.media_attachments,
  307. timestamp: status.created_at,
  308. type: status.pf_type,
  309. url: status.url,
  310. sensitive: status.sensitive,
  311. cw: status.sensitive,
  312. spoiler_text: status.spoiler_text
  313. }
  314. });
  315. let ids = data.map(status => status.id);
  316. this.ids.push(...ids);
  317. this.max_id = Math.min(...ids);
  318. this.feed.push(...data);
  319. this.loadingMore = false;
  320. }).catch(err => {
  321. this.loadingMore = false;
  322. this.showLoadMore = false;
  323. });
  324. },
  325. fetchRelationships() {
  326. if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == false) {
  327. return;
  328. }
  329. axios.get('/api/pixelfed/v1/accounts/relationships', {
  330. params: {
  331. 'id[]': this.profileId
  332. }
  333. }).then(res => {
  334. if(res.data.length) {
  335. this.relationship = res.data[0];
  336. if(res.data[0].blocking == true) {
  337. this.loading = false;
  338. this.warning = true;
  339. }
  340. }
  341. });
  342. },
  343. postPreviewUrl(post) {
  344. return 'background: url("'+post.thumb+'");background-size:cover';
  345. },
  346. timestampFormat(timestamp) {
  347. let ts = new Date(timestamp);
  348. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  349. },
  350. remoteProfileUrl(profile) {
  351. return '/i/web/profile/_/' + profile.id;
  352. },
  353. remotePostUrl(status) {
  354. return '/i/web/post/_/' + this.profile.id + '/' + status.id;
  355. },
  356. followProfile() {
  357. axios.post('/i/follow', {
  358. item: this.profileId
  359. }).then(res => {
  360. swal('Followed', 'You are now following ' + this.profile.username +'!', 'success');
  361. this.relationship.following = true;
  362. }).catch(err => {
  363. swal('Oops!', 'Something went wrong, please try again later.', 'error');
  364. });
  365. },
  366. unfollowProfile() {
  367. axios.post('/i/follow', {
  368. item: this.profileId
  369. }).then(res => {
  370. swal('Unfollowed', 'You are no longer following ' + this.profile.username +'.', 'warning');
  371. this.relationship.following = false;
  372. }).catch(err => {
  373. swal('Oops!', 'Something went wrong, please try again later.', 'error');
  374. });
  375. },
  376. showCtxMenu() {
  377. this.$refs.visitorContextMenu.show();
  378. },
  379. copyProfileLink() {
  380. navigator.clipboard.writeText(window.location.href);
  381. this.$refs.visitorContextMenu.hide();
  382. },
  383. muteProfile() {
  384. let id = this.profileId;
  385. axios.post('/i/mute', {
  386. type: 'user',
  387. item: id
  388. }).then(res => {
  389. this.fetchRelationships();
  390. this.$refs.visitorContextMenu.hide();
  391. swal('Success', 'You have successfully muted ' + this.profile.acct, 'success');
  392. }).catch(err => {
  393. swal('Error', 'Something went wrong. Please try again later.', 'error');
  394. });
  395. this.$refs.visitorContextMenu.hide();
  396. },
  397. unmuteProfile() {
  398. let id = this.profileId;
  399. axios.post('/i/unmute', {
  400. type: 'user',
  401. item: id
  402. }).then(res => {
  403. this.fetchRelationships();
  404. this.$refs.visitorContextMenu.hide();
  405. swal('Success', 'You have successfully unmuted ' + this.profile.acct, 'success');
  406. }).catch(err => {
  407. swal('Error', 'Something went wrong. Please try again later.', 'error');
  408. });
  409. this.$refs.visitorContextMenu.hide();
  410. },
  411. blockProfile() {
  412. let id = this.profileId;
  413. axios.post('/i/block', {
  414. type: 'user',
  415. item: id
  416. }).then(res => {
  417. this.warning = true;
  418. this.fetchRelationships();
  419. this.$refs.visitorContextMenu.hide();
  420. swal('Success', 'You have successfully blocked ' + this.profile.acct, 'success');
  421. }).catch(err => {
  422. swal('Error', 'Something went wrong. Please try again later.', 'error');
  423. });
  424. this.$refs.visitorContextMenu.hide();
  425. },
  426. unblockProfile() {
  427. let id = this.profileId;
  428. axios.post('/i/unblock', {
  429. type: 'user',
  430. item: id
  431. }).then(res => {
  432. this.warning = false;
  433. this.fetchRelationships();
  434. this.$refs.visitorContextMenu.hide();
  435. swal('Success', 'You have successfully unblocked ' + this.profile.acct, 'success');
  436. }).catch(err => {
  437. swal('Error', 'Something went wrong. Please try again later.', 'error');
  438. });
  439. this.$refs.visitorContextMenu.hide();
  440. },
  441. reportProfile() {
  442. window.location.href = '/l/i/report?type=profile&id=' + this.profileId;
  443. this.$refs.visitorContextMenu.hide();
  444. },
  445. ctxMenu(status) {
  446. this.ctxMenuStatus = status;
  447. let self = this;
  448. axios.get('/api/pixelfed/v1/accounts/relationships', {
  449. params: {
  450. 'id[]': self.profileId
  451. }
  452. }).then(res => {
  453. self.ctxMenuRelationship = res.data[0];
  454. self.$refs.ctxModal.show();
  455. });
  456. },
  457. closeCtxMenu() {
  458. this.ctxMenuStatus = false;
  459. this.ctxMenuRelationship = false;
  460. this.$refs.ctxModal.hide();
  461. },
  462. ctxMenuCopyLink() {
  463. let status = this.ctxMenuStatus;
  464. navigator.clipboard.writeText(status.url);
  465. this.closeCtxMenu();
  466. return;
  467. },
  468. ctxMenuGoToPost() {
  469. let status = this.ctxMenuStatus;
  470. window.location.href = this.statusUrl(status);
  471. this.closeCtxMenu();
  472. return;
  473. },
  474. statusUrl(status) {
  475. return '/i/web/post/_/' + this.profile.id + '/' + status.id;
  476. },
  477. deletePost(status) {
  478. if(this.user.is_admin == false) {
  479. return;
  480. }
  481. if(window.confirm('Are you sure you want to delete this post?') == false) {
  482. return;
  483. }
  484. axios.post('/i/delete', {
  485. type: 'status',
  486. item: status.id
  487. }).then(res => {
  488. this.feed = this.feed.filter(s => {
  489. return s.id != status.id;
  490. });
  491. this.$refs.ctxModal.hide();
  492. }).catch(err => {
  493. swal('Error', 'Something went wrong. Please try again later.', 'error');
  494. });
  495. },
  496. manuallyFetchRemotePosts($event) {
  497. this.fetchingRemotePosts = true;
  498. event.target.blur();
  499. swal(
  500. 'Fetching Remote Posts',
  501. 'Check back in a few minutes!',
  502. 'info'
  503. );
  504. },
  505. timeAgo(ts, suffix = false) {
  506. if(ts == null) {
  507. return 'never';
  508. }
  509. suffix = suffix ? ' ' + suffix : '';
  510. return App.util.format.timeAgo(ts) + suffix;
  511. },
  512. urlRedirectHandler(url) {
  513. let p = new URL(url);
  514. let path = '';
  515. if(p.hostname == window.location.hostname) {
  516. path = url;
  517. } else {
  518. path = '/i/redirect?url=';
  519. path += encodeURI(url);
  520. }
  521. window.location.href = path;
  522. }
  523. }
  524. }
  525. </script>
  526. <style type="text/css" scoped>
  527. @media (min-width: 1200px) {
  528. .container {
  529. max-width: 1050px;
  530. }
  531. }
  532. </style>